/* =====================================================================
AUTOUR DU FLOYON — USER.CSS
Personnalisation du template Cassiopeia (Joomla 6.1)
Version réorganisée : 19 octobre 2026
=====================================================================
OBJECTIF
Faciliter la maintenance sans changer l'apparence du site.
Aucun sélecteur, aucune déclaration et aucune condition @media
n'ont été modifiés, supprimés ni ajoutés.
L'ordre des règles CSS est STRICTEMENT IDENTIQUE à l'original.
Les changements concernent uniquement les commentaires et repères.
SOMMAIRE
I. Fondations graphiques et styles généraux
I.1 Palette et variables de référence
I.2 Typographie et liens des articles
I.3 Arrière-plan et défilement
II. Structure du site et navigation
II.1 En-tête, logo et bannière
II.2 Menu principal
II.3 Contenu principal et titres de page
II.4 Titres des articles complets
II.5 Largeur des articles
III. Revues : fiches et catalogue
III.1 Couvertures des bulletins
III.2 Catalogue « Tous les numéros »
III.3 Pagination
IV. Pied de page et responsive commun
IV.1 Pied de page (module n°110)
IV.2 Adaptation aux petits écrans
V. Activités : listes, événements et cartes
V.1–V.2 Activités passées (module n°116)
V.3–V.4 Prochainement (module n°117)
V.5–V.6 Présentation en cartes
VI. Page d'accueil
VI.1 Mise en page et largeur
VI.2 Présentation du cercle (module n°112)
VI.3–VI.4 À la une (module n°118)
VI.5 Explorer le site (module n°114)
VI.6 Rejoindre le cercle (module n°115)
VI.7 Adaptations mobiles
VI.8 Espacements verticaux
VII. Publications et liens éditoriaux communs
VII.1 Dernier bulletin
VII.2 Numéros précédents
VII.3 Adaptation mobile
VII.4 Liens d'action et appels à adhésion
VII.5 Composition de la page Publications
VIII. Devenir membre
VIII.1 Alignement du titre Convert Forms
IX. Ajustements finaux et surcharges
IX.1 Hiérarchie visuelle des liens
IX.2 Espacement du lien « Tous les numéros »
IX.3 Boutons « Découvrir » sur l'accueil
IX.4 Fil d'Ariane : séparateurs
IX.5 Recherche en en-tête (position search)
IX.6 Espacements de titres (Activités / Devenir membre)
CONSIGNES POUR LES MODIFICATIONS FUTURES
1. Modifier en priorité la section correspondant au composant visé.
2. Pour les liens et les réglages cités en IX, vérifier les surcharges
situées en fin de fichier avant toute intervention.
3. Ne pas déplacer les blocs @media ou des règles ayant des sélecteurs
communs sans vérifier les priorités de la cascade.
4. Une réorganisation du code CSS lui-même exigerait des tests visuels
sur le site réel : cette version ne réalise pas ce changement.
===================================================================== */
/* ============================================================
I. FONDATIONS GRAPHIQUES ET STYLES GÉNÉRAUX
============================================================ */
/* ========================================
I.1 — Palette, variables et dimensions de référence
======================================== */
:root {
/* Couleur de référence issue du logo */
--floyon-blue: #3A78C4;
/* Variantes pour le texte et les titres */
--floyon-blue-medium: #2F659F;
--floyon-blue-dark: #285784;
--floyon-blue-deep: #234B70;
/* Variantes pour les fonds et séparateurs */
--floyon-blue-light: #DCE9F7;
--floyon-blue-pale: #EAF2FB;
/* Couleurs neutres */
--floyon-text: #2B2B2B;
--floyon-text-muted: #5F6872;
--floyon-border: #CFD4D9;
--floyon-background: #DFE3E7;
/* Fond commun des cartes */
--floyon-card-background: #F7F9FC;
/* Largeur de référence des titres et contenus principaux */
--floyon-content-width: 820px;
}
/* ========================================
I.2 — Typographie, titres et liens dans les articles
======================================== */
/*
Roboto (local) doit également être sélectionné
dans les paramètres du template Cassiopeia.
*/
body.site {
font-family: "Roboto", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: var(--floyon-text);
}
/*
Texte des pages et articles.
1.0625rem = 17 px si la base est 16 px.
*/
.site-grid .container-component {
font-size: 1.0625rem;
line-height: 1.6;
}
/* Titres */
.site-grid .container-component h1 {
font-size: clamp(1.625rem, 1.5rem + 0.5vw, 1.875rem);
line-height: 1.2;
margin-top: 0;
margin-bottom: 1.25rem;
font-weight: 700;
color: var(--floyon-blue-dark);
}
.site-grid .container-component h2 {
font-size: clamp(1.5rem, 1.375rem + 0.6vw, 1.75rem);
line-height: 1.25;
margin-top: 2rem;
margin-bottom: 0.75rem;
font-weight: 700;
color: var(--floyon-blue-dark);
}
.site-grid .container-component h3 {
font-size: clamp(1.25rem, 1.156rem + 0.45vw, 1.4375rem);
line-height: 1.3;
margin-top: 1.5rem;
margin-bottom: 0.65rem;
font-weight: 700;
color: var(--floyon-blue-dark);
}
.site-grid .container-component h4 {
font-size: 1.25rem;
line-height: 1.35;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--floyon-blue-medium);
}
.site-grid .container-component h5 {
font-size: 1.125rem;
line-height: 1.4;
margin-top: 1rem;
margin-bottom: 0.4rem;
font-weight: 600;
color: var(--floyon-text);
}
/* Liens dans le corps des articles */
.com-content-article p a,
.com-content-article li a,
.com-content-article dd a,
.com-content-article figcaption a {
color: var(--floyon-blue-medium);
text-decoration: underline;
text-underline-offset: 0.12em;
}
.com-content-article p a:hover,
.com-content-article p a:focus,
.com-content-article li a:hover,
.com-content-article li a:focus,
.com-content-article dd a:hover,
.com-content-article dd a:focus,
.com-content-article figcaption a:hover,
.com-content-article figcaption a:focus {
color: var(--floyon-blue-deep);
}
/* Légendes des images */
.com-content-article figcaption {
margin-top: 0.4rem;
font-size: 0.875rem;
line-height: 1.45;
color: var(--floyon-text-muted);
}
/* ========================================
I.3 — Fond extérieur et comportement du défilement
======================================== */
/* Fond extérieur du site */
body.site {
background-color: var(--floyon-background);
}
/*
Évite le déplacement horizontal entre pages
avec ou sans barre de défilement verticale.
*/
html {
scrollbar-gutter: stable;
}
/* ============================================================
II. STRUCTURE DU SITE ET NAVIGATION
============================================================ */
/* ========================================
II.1 — En-tête, logo et bannière
======================================== */
/* Repère de maintenance : La recherche de l’en-tête est réglée en IX.5. */
/* Bloc supérieur du site */
.container-header {
box-sizing: border-box;
width: calc(100% - 2rem);
max-width: 1100px;
margin: 1.5rem auto 0;
background-color: #ffffff;
background-image: none;
border: 1px solid var(--floyon-border);
border-bottom: 0;
border-radius: 4px 4px 0 0;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.09);
}
/* Éléments internes de l'en-tête */
.container-header .grid-child {
box-sizing: border-box;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* Zone du logo */
.container-header > .grid-child:not(.container-nav) {
display: flex;
justify-content: center;
align-items: center;
padding: 0.75rem 2rem;
}
/* Bloc de marque */
.container-header .navbar-brand {
width: auto;
margin: 0;
}
/* Lien contenant la bannière */
.container-header .brand-logo {
display: block;
width: auto;
}
/* Bannière principale */
img[src$="2026_banner_adf.png"] {
display: block;
width: 700px !important;
max-width: 100% !important;
height: auto !important;
}
/* ========================================
II.2 — Barre de navigation et états du menu
======================================== */
/* Repère de maintenance : Le fil d’Ariane est réglé en II.3 et IX.4. */
/* Bandeau du menu */
.container-header .container-nav {
box-sizing: border-box;
width: 100%;
background-color: var(--floyon-blue-medium);
border-top: 0;
padding: 0.35rem 1rem;
}
/* Largeur du menu */
.container-header .container-nav > nav.navbar {
position: relative;
width: 100%;
max-width: none;
margin: 0;
padding-left: 0;
padding-right: 0;
}
/* Liens du menu principal */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
color: #ffffff;
font-size: 1.0625rem;
padding-left: 0.9rem;
padding-right: 0.9rem;
text-decoration: none;
border-bottom: 2px solid transparent;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
/* Survol et focus */
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible {
color: #ffffff;
background-color: var(--floyon-blue-dark);
}
/*
Neutralise les indicateurs natifs.
Le chevron des sous-menus reste préservé.
*/
.container-header .mod-menu > li::after,
.container-header .metismenu > li > a::after,
.container-header .metismenu > li > button::before {
display: none !important;
content: none !important;
}
/* Élément actif */
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active > span,
.container-header .mod-menu > li.current > span {
color: #ffffff;
background-color: transparent;
border-bottom: 2px solid #ffffff;
font-weight: 600;
text-decoration: none !important;
box-shadow: none !important;
}
/* Focus clavier */
.container-header .mod-menu > li > a:focus-visible {
outline: 2px solid #ffffff;
outline-offset: -2px;
}
/* Centrage du menu sur les grands écrans */
@media (min-width: 768px) {
.container-header .container-nav .navbar-collapse {
display: flex !important;
width: 100%;
flex-grow: 1;
justify-content: center;
}
.container-header .container-nav .mod-menu {
display: flex;
width: auto;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
/* Icône d'édition Joomla */
.container-header .container-nav .jmodedit {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
}
/* ========================================
II.3 — Conteneur principal et en-têtes des pages
======================================== */
/* Bloc principal du site */
.site-grid {
box-sizing: border-box;
width: calc(100% - 2rem);
max-width: 1100px;
margin: 0 auto 1.5rem;
background-color: #ffffff;
border-left: 1px solid var(--floyon-border);
border-right: 1px solid var(--floyon-border);
border-bottom: 1px solid var(--floyon-border);
border-radius: 0 0 4px 4px;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.09);
}
/* Contenu du bloc principal */
.site-grid .container-component {
box-sizing: border-box;
width: 100%;
max-width: none;
margin: 0;
background-color: #ffffff;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 1.5rem 2rem 2rem;
}
/*
ALIGNEMENT COMMUN DES TITRES PRINCIPAUX
Certains en-têtes de page Joomla sont placés directement
dans .container-component, en dehors du conteneur de l'article.
On les aligne sur la largeur de lecture de référence (820 px).
Les listes de bulletins, cartes et modules conservent
leurs propres règles : ne pas les rétrécir pour suivre le titre.
Un formulaire plus étroit reste centré à l'intérieur de la page.
*/
/* Titres de page : articles, catégories et vues de type blog.
L'en-tête d'un blog de catégorie Joomla se trouve notamment dans :
.container-component > main > .com-content-category-blog > .page-header
On limite la largeur du titre sans modifier celle des listes, grilles
de couvertures, activités ou formulaires. */
.site-grid .container-component > .page-header,
.site-grid .container-component > * > .page-header,
.site-grid .container-component .com-content-category-blog > .page-header,
.site-grid .container-component .com-content-category > .page-header,
.site-grid .container-component .com-content-category-blog > h1,
.site-grid .container-component .com-content-category-blog > h2,
.site-grid .container-component .com-content-category > h1,
.site-grid .container-component .com-content-category > h2 {
box-sizing: border-box;
width: 100%;
max-width: var(--floyon-content-width);
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* Fil d'Ariane */
.breadcrumb a {
color: var(--floyon-blue-medium);
}
/* ========================================
II.4 — Affichage des titres des articles complets
======================================== */
/*
Titre masqué dans la vue complète d'un article.
Les titres des vues blog restent visibles.
*/
body.view-article .com-content-article > .page-header {
display: none;
}
/*
Titres visibles pour les revues, les ouvrages et les articles
atteints depuis la page « Activités passées ».
*/
body.view-article .com-content-article.bulletin-revue > .page-header,
body.view-article.activites-passees .com-content-article > .page-header,
body.view-article .com-content-article:has(.bulletin-cover) > .page-header {
display: block;
}
/*
Exception pour les pages institutionnelles dotées de la
classe de page Joomla "titre-page-visible".
À utiliser avec "Afficher l'en-tête de page : Oui"
et "Titre de l'article : Masquer" afin de ne pas
afficher le titre deux fois.
*/
body.view-article.titre-page-visible .com-content-article > .page-header {
display: block;
}
/* Titre des articles complets */
body.view-article .com-content-article > .page-header > h1 {
font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.75rem);
}
/* Titres de page spécifiques : 26 à 30 px environ */
body.view-article.titre-page-visible .com-content-article > .page-header > h1 {
font-size: clamp(1.625rem, 1.5rem + 0.5vw, 1.875rem);
}
/* ========================================
II.5 — Largeur maximale des articles
======================================== */
/*
Largeur maximale de lecture : 820 px.
Le conteneur général reste à 1100 px.
*/
.com-content-article {
width: 100%;
max-width: var(--floyon-content-width);
margin-left: auto;
margin-right: auto;
}
/* ============================================================
III. REVUES : FICHES ET CATALOGUE
============================================================ */
/* ========================================
III.1 — Couvertures des bulletins (vue détaillée)
======================================== */
/* Couverture dans la fiche d'un bulletin */
.bulletin-cover {
float: none !important;
clear: both;
display: block;
width: 100%;
max-width: 420px;
height: auto;
margin: 1.5rem auto;
}
/* Classe appliquée au conteneur */
.bulletin-cover img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
/* ========================================
III.2 — Catalogue des bulletins
"TOUS LES NUMÉROS"
======================================== */
/* Espacement entre les rangées */
.com-content-category-blog__items.blog-items {
row-gap: 2.25rem;
}
/* Organisation verticale */
.com-content-category-blog__item.blog-item {
display: flex;
flex-direction: column;
}
/*
Zone uniforme réservée à chaque couverture.
L'image reste entière et sans recadrage.
*/
.com-content-category-blog__item figure.item-image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 340px;
margin-top: 0;
margin-bottom: 1rem;
}
/* Lien de la couverture */
.com-content-category-blog__item figure.item-image > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* Couverture centrée */
.com-content-category-blog__item figure.item-image img {
display: block;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain;
}
/* Titres du catalogue */
.com-content-category-blog__item
.item-content
.page-header
h2 {
font-size: 1.05rem !important;
line-height: 1.3 !important;
margin-top: 0 !important;
margin-bottom: 0.5rem !important;
font-weight: 600 !important;
color: var(--floyon-blue-dark);
}
.com-content-category-blog__item
.item-content
.page-header
h2 > a {
font-size: 1.05rem !important;
line-height: 1.3 !important;
font-weight: 600 !important;
color: var(--floyon-blue-dark);
text-decoration: none;
}
.com-content-category-blog__item
.item-content
.page-header
h2 > a:hover,
.com-content-category-blog__item
.item-content
.page-header
h2 > a:focus {
color: var(--floyon-blue);
text-decoration: underline;
}
/* ========================================
III.3 — Pagination du catalogue
======================================== */
/* Centrage de la pagination */
.com-content-category-blog nav.pagination__wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-top: 1.5rem;
}
/* Liste des boutons */
.com-content-category-blog
nav.pagination__wrapper
ul.pagination {
display: flex;
justify-content: center;
width: auto;
margin-left: auto !important;
margin-right: auto !important;
}
/* ============================================================
IV. PIED DE PAGE ET RESPONSIVE COMMUN
============================================================ */
/* ========================================
IV.1 — Pied de page et module personnalisé n°110
======================================== */
/* Conteneur général */
.container-footer {
box-sizing: border-box;
width: calc(100% - 2rem);
max-width: 1100px;
margin: 0 auto 1.5rem;
background-color: #ffffff;
background-image: none;
color: #333333;
border: 1px solid var(--floyon-border);
border-top: 2px solid var(--floyon-blue-medium);
border-radius: 4px;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.09);
}
/* Zone interne */
.container-footer > .grid-child {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: none;
margin: 0;
padding: 1.25rem 2rem;
}
/* Module personnalisé */
#mod-custom110 {
position: relative;
width: 100%;
margin: 0;
text-align: center;
}
/* Texte du pied de page */
#mod-custom110 p {
margin: 0;
font-size: 0.95rem;
text-align: center;
}
/* Liens */
#mod-custom110 a {
color: var(--floyon-blue-medium);
text-decoration: none;
}
#mod-custom110 a:hover,
#mod-custom110 a:focus {
color: var(--floyon-blue-deep);
text-decoration: underline;
}
/* Icône d'édition Joomla */
#mod-custom110 .jmodedit {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
/* ========================================
IV.2 — Adaptations mobiles communes
======================================== */
@media (max-width: 767.98px) {
/* Largeur de lecture */
.com-content-article {
max-width: none;
}
/* Marges internes */
.container-header > .grid-child:not(.container-nav),
.site-grid .container-component,
.container-footer > .grid-child {
padding-left: 1rem;
padding-right: 1rem;
}
/* Couvertures du catalogue */
.com-content-category-blog__item figure.item-image {
height: auto;
margin-bottom: 1rem;
}
.com-content-category-blog__item figure.item-image > a {
height: auto;
}
.com-content-category-blog__item figure.item-image img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
}
/* Titres du catalogue */
.com-content-category-blog__item
.item-content
.page-header
h2,
.com-content-category-blog__item
.item-content
.page-header
h2 > a {
font-size: 1.1rem !important;
line-height: 1.3 !important;
}
}
/* ============================================================
V. ACTIVITÉS : LISTES, ÉVÉNEMENTS ET CARTES
============================================================ */
/* ========================================
V.1 — Activités passées : grille du module n°116
RETOUR SUR NOS ACTIVITÉS
Module Articles n°116
======================================== */
/*
Classe de page : activites-accueil.
Objectifs :
- deux activités côte à côte ;
- images au-dessus des titres ;
- aucun recadrage ;
- conservation des deux colonnes sur mobile.
*/
/* Grille sur deux colonnes */
.activites-accueil
.mod-articles-items.mod-articles-grid.grid-cols-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
width: 100%;
margin: 1rem 0 0;
padding: 0;
list-style: none;
}
/* Chaque activité occupe sa colonne */
.activites-accueil
.mod-articles-grid > li {
min-width: 0;
margin: 0;
padding: 0;
}
.activites-accueil
.mod-articles-grid .mod-articles-item {
min-width: 0;
}
/* Image puis titre */
.activites-accueil
.mod-articles-grid .mod-articles-item-content {
display: flex;
flex-direction: column;
min-width: 0;
gap: 0.65rem;
}
/* Zone uniforme pour les visuels */
.activites-accueil
.mod-articles-grid .mod-articles-image {
order: -1;
float: none !important;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
margin: 0;
padding: 0;
}
/* Lien de l'image */
.activites-accueil
.mod-articles-grid .mod-articles-image > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* Images entières, sans recadrage */
.activites-accueil
.mod-articles-grid .mod-articles-image img {
display: block;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 auto;
object-fit: contain;
}
/* Titres des activités */
.activites-accueil
.mod-articles-grid .mod-articles-title {
font-size: 1.05rem;
line-height: 1.35;
font-weight: 600;
color: var(--floyon-blue-dark);
margin: 0 !important;
}
/* Liens des titres */
.activites-accueil
.mod-articles-grid .mod-articles-title a {
color: var(--floyon-blue-dark);
text-decoration: none;
}
.activites-accueil
.mod-articles-grid .mod-articles-title a:hover,
.activites-accueil
.mod-articles-grid .mod-articles-title a:focus-visible {
color: var(--floyon-blue);
text-decoration: underline;
}
/* ========================================
V.2 — Activités passées : adaptation smartphone
ADAPTATION SMARTPHONE
======================================== */
@media (max-width: 575.98px) {
/* Deux colonnes conservées */
.activites-accueil
.mod-articles-items.mod-articles-grid.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
/* Hauteur des visuels */
.activites-accueil
.mod-articles-grid .mod-articles-image {
height: 155px;
}
/* Taille des titres */
.activites-accueil
.mod-articles-grid .mod-articles-title {
font-size: 0.95rem;
line-height: 1.35;
}
}
/* ========================================
V.3 — Prochainement : module n°117
SECTION "PROCHAINEMENT"
Module Articles n°117
======================================== */
/*
Image à gauche et informations à droite.
Disposition verticale sur smartphone.
*/
/* Espacement entre les activités */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid) {
padding: 0;
margin: 1.5rem 0 0;
list-style: none;
}
.activites-accueil
.mod-articles-items:not(.mod-articles-grid) > li + li {
margin-top: 2rem;
}
/* Mise en page des activités à venir */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-item-content {
display: grid;
grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
column-gap: 1.5rem;
row-gap: 0.5rem;
grid-auto-rows: min-content;
align-content: start;
}
/* Image à gauche */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-image {
grid-column: 1;
grid-row: 1 / span 12;
float: none !important;
width: 100%;
margin: 0;
padding: 0;
}
/* Lien de l'image */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-image > a {
display: block;
width: 100%;
}
/* Proportions de l'image */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-image img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
max-height: 240px;
object-fit: contain;
object-position: left top;
}
/* Informations à droite */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-item-content > :not(.mod-articles-image) {
grid-column: 2;
min-width: 0;
margin-top: 0;
margin-bottom: 0;
}
/* Titre de l'activité */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-title {
grid-row: 1;
font-size: 1.2rem;
line-height: 1.35;
font-weight: 600;
color: var(--floyon-blue-dark);
}
/* Liens des titres */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-title a {
color: var(--floyon-blue-dark);
text-decoration: none;
}
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-title a:hover,
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-title a:focus-visible {
color: var(--floyon-blue);
text-decoration: underline;
}
/* ========================================
V.4 — Prochainement : adaptation mobile
======================================== */
@media (max-width: 680px) {
/* Image au-dessus du texte */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-item-content {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-image {
order: -1;
width: 100%;
max-height: none;
}
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-image img {
width: 100%;
max-height: 280px;
object-fit: contain;
object-position: center;
}
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-title {
font-size: 1.1rem;
}
}
/* ========================================
V.5 — Cartes des activités (modules n°116 et n°117)
PRÉSENTATION EN CARTES
Modules 116 et 117
======================================== */
/*
Fond légèrement teinté, bordures discrètes,
angles arrondis, sans ombre marquée.
*/
/* Prochainement : cartes principales */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid) > li {
background-color: var(--floyon-card-background);
border: 1px solid var(--floyon-border);
border-radius: 8px;
padding: 1.25rem;
margin-bottom: 1.5rem;
}
/* Images des prochaines activités */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid)
.mod-articles-image img {
border-radius: 4px;
}
/* Activités passées : cartes secondaires */
.activites-accueil
.mod-articles-grid > li {
background-color: var(--floyon-card-background);
border: 1px solid var(--floyon-border);
border-radius: 8px;
padding: 1rem;
}
/* Hauteur uniforme des cartes */
.activites-accueil
.mod-articles-grid > li > .mod-articles-item,
.activites-accueil
.mod-articles-grid .mod-articles-item-content {
height: 100%;
}
/* Coins arrondis des images */
.activites-accueil
.mod-articles-grid .mod-articles-image img {
border-radius: 4px;
}
/* ========================================
V.6 — Cartes des activités : smartphone
======================================== */
@media (max-width: 575.98px) {
/* Cartes principales */
.activites-accueil
.mod-articles-items:not(.mod-articles-grid) > li {
padding: 0.875rem;
}
/* Cartes secondaires */
.activites-accueil
.mod-articles-grid > li {
padding: 0.5rem;
border-radius: 6px;
}
/* Espace entre les deux colonnes */
.activites-accueil
.mod-articles-grid.grid-cols-2 {
gap: 0.75rem;
}
}
/* ============================================================
VI. PAGE D’ACCUEIL
============================================================ */
/* ========================================
VI.1 — Accueil : largeur et centrage
LARGEUR ET CENTRAGE
======================================== */
/*
Classe de page : accueil-floyon.
Les modules de l'accueil sont centrés
sur une largeur maximale de 820 px.
La largeur du site, de la bannière,
du menu et du pied de page ne change pas.
*/
/* Zone centrale inutilisée sur l'accueil */
body.accueil-floyon .container-component {
display: none;
}
/* Limitation des quatre positions de modules */
body.accueil-floyon .site-grid > .container-top-a,
body.accueil-floyon .site-grid > .container-top-b,
body.accueil-floyon .site-grid > .container-bottom-a,
body.accueil-floyon .site-grid > .container-bottom-b {
box-sizing: border-box;
width: 100%;
max-width: var(--floyon-content-width);
margin-left: auto;
margin-right: auto;
justify-self: center;
}
/* ========================================
VI.2 — Accueil : présentation du cercle, module n°112
Module personnalisé n°112
Classe : floyon-presentation
======================================== */
/*
La présentation constitue l'introduction
de la page d'accueil.
Suppression de l'encadrement :
- pas de bordure ;
- pas de fond teinté ;
- pas de double niveau visuel.
Le titre et le texte restent inchangés.
*/
/* Conteneur du module */
body.accueil-floyon
.floyon-presentation.card {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
margin-bottom: 0;
}
/* Corps du module */
body.accueil-floyon
.floyon-presentation > .card-body {
background: transparent;
border: 0;
padding: 0;
}
/* Titre de présentation */
body.accueil-floyon
.floyon-presentation h1,
body.accueil-floyon
.floyon-presentation h2,
body.accueil-floyon
.floyon-presentation h3 {
color: var(--floyon-blue-dark);
line-height: 1.25;
margin-top: 0;
margin-bottom: 0.75rem;
}
/*
H1 de l'accueil : taille sobre et cohérente avec les
titres de page. Le niveau H1 doit être défini dans
le contenu HTML du module personnalisé n°112.
*/
body.accueil-floyon .floyon-presentation h1 {
font-size: clamp(1.625rem, 1.5rem + 0.5vw, 1.875rem);
font-weight: 700;
}
/* Texte de présentation */
body.accueil-floyon
.floyon-presentation p:last-child {
margin-bottom: 0;
}
/* ========================================
VI.3 — Accueil : À la une, module n°118
Module Articles n°118
Classe : floyon-une
======================================== */
/*
Deux niveaux visuels :
1. Le titre "À la une" reste à l'extérieur
de la carte.
2. Le corps du module forme une carte
légèrement bleutée.
Couverture à gauche et texte à droite.
*/
/* Suppression du cadre général */
body.accueil-floyon
.floyon-une.card {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
margin-bottom: 0;
}
/* Titre de section, à l'extérieur de la carte */
body.accueil-floyon
.floyon-une > .card-header {
background: transparent;
border: 0;
border-radius: 0;
padding: 0 0 0.75rem;
margin: 0;
color: var(--floyon-blue-dark);
font-size: clamp(1.5rem, 1.375rem + 0.6vw, 1.75rem);
line-height: 1.25;
font-weight: 700;
}
/* Carte contenant l'article mis en avant */
body.accueil-floyon
.floyon-une > .card-body,
.floyon-publications .floyon-dernier-encadre {
background-color: var(--floyon-card-background);
border: 1px solid var(--floyon-border);
border-radius: 8px;
padding: 1.25rem;
}
/* Organisation image / texte */
.floyon-une .mod-articles-item-content {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
column-gap: 1.5rem;
row-gap: 0.75rem;
align-items: start;
}
/* Couverture à gauche */
.floyon-une .mod-articles-image {
grid-column: 1;
grid-row: 1 / span 10;
float: none !important;
width: 100%;
margin: 0;
padding: 0;
}
/* Taille de la couverture */
.floyon-une .mod-articles-image img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain;
}
/* Informations à droite */
.floyon-une
.mod-articles-item-content > :not(.mod-articles-image) {
grid-column: 2;
min-width: 0;
margin-top: 0;
}
/* Titre de l'article mis en avant */
.floyon-une .mod-articles-title {
grid-row: 1;
font-size: 1.2rem;
line-height: 1.35;
font-weight: 600;
color: var(--floyon-blue-dark);
}
/* Liens des titres */
.floyon-une .mod-articles-title a {
color: var(--floyon-blue-dark);
text-decoration: none;
}
.floyon-une .mod-articles-title a:hover,
.floyon-une .mod-articles-title a:focus-visible {
color: var(--floyon-blue);
text-decoration: underline;
}
/* ========================================
VI.4 — Accueil : À la une sur smartphone
======================================== */
@media (max-width: 575.98px) {
/* Une seule colonne */
.floyon-une .mod-articles-item-content {
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}
/* Couverture centrée */
.floyon-une .mod-articles-image {
grid-column: 1;
grid-row: 1;
width: 100%;
max-width: 210px;
margin: 0 auto;
}
/* Texte sous la couverture */
.floyon-une
.mod-articles-item-content > :not(.mod-articles-image) {
grid-column: 1;
}
.floyon-une .mod-articles-title {
grid-row: 2;
}
/* Espacement intérieur de la carte */
body.accueil-floyon
.floyon-une > .card-body {
padding: 0.875rem;
}
}
/* ========================================
VI.5 — Accueil : explorer le site, module n°114
Module personnalisé n°114
Classe : floyon-explorer
======================================== */
/* Repère de maintenance : Les boutons « Découvrir » sont complétés en IX.3. */
/*
Deux cartes de navigation :
- Nos activités
- Nos publications
Le cadre extérieur du module disparaît.
Chaque carte intérieure reste indépendante.
*/
/* Suppression du cadre commun */
body.accueil-floyon
.floyon-explorer.card {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
margin-bottom: 0;
}
/* Suppression du padding extérieur */
body.accueil-floyon
.floyon-explorer > .card-body {
background: transparent;
border: 0;
padding: 0;
}
/*
Cartes intérieures.
Prise en charge des classes Bootstrap
utilisées dans les modules personnalisés.
*/
body.accueil-floyon
.floyon-explorer .card,
body.accueil-floyon
.floyon-explorer .border.rounded,
body.accueil-floyon
.floyon-explorer .border.rounded-3 {
background-color: var(--floyon-card-background);
border: 1px solid var(--floyon-border) !important;
border-radius: 8px !important;
box-shadow: none;
}
/* Titres des cartes de navigation */
body.accueil-floyon
.floyon-explorer h2,
body.accueil-floyon
.floyon-explorer h3,
body.accueil-floyon
.floyon-explorer h4 {
color: var(--floyon-blue-dark);
}
/* Liens des cartes */
body.accueil-floyon
.floyon-explorer a:not(.btn) {
color: var(--floyon-blue-medium);
}
body.accueil-floyon
.floyon-explorer a:not(.btn):hover,
body.accueil-floyon
.floyon-explorer a:not(.btn):focus-visible {
color: var(--floyon-blue-deep);
text-decoration: underline;
}
/* ========================================
VI.6 — Accueil : rejoindre le cercle, module n°115
Module personnalisé n°115
Classe : floyon-rejoindre
======================================== */
/*
Invitation finale :
- une seule carte discrète ;
- même fond bleu pâle ;
- boutons existants conservés.
*/
/* Carte principale */
body.accueil-floyon
.floyon-rejoindre.card {
background-color: var(--floyon-card-background);
border: 1px solid var(--floyon-border);
border-radius: 8px;
box-shadow: none;
}
/* Corps de la carte */
body.accueil-floyon
.floyon-rejoindre > .card-body {
background: transparent;
}
/* Titre de l'invitation */
body.accueil-floyon
.floyon-rejoindre h2,
body.accueil-floyon
.floyon-rejoindre h3 {
color: var(--floyon-blue-dark);
}
/* ========================================
VI.7 — Accueil : adaptation mobile commune
======================================== */
@media (max-width: 767.98px) {
/*
Les quatre modules occupent toute la largeur
disponible dans le conteneur du site.
*/
body.accueil-floyon
.site-grid > .container-top-a,
body.accueil-floyon
.site-grid > .container-top-b,
body.accueil-floyon
.site-grid > .container-bottom-a,
body.accueil-floyon
.site-grid > .container-bottom-b {
width: 100%;
max-width: 100%;
min-width: 0;
}
/*
L'espacement est assuré par les modules
et par la structure native de Cassiopeia.
*/
body.accueil-floyon
.floyon-presentation,
body.accueil-floyon
.floyon-une,
body.accueil-floyon
.floyon-explorer,
body.accueil-floyon
.floyon-rejoindre {
min-width: 0;
}
}
/* ========================================
VI.8 — Accueil : espacements verticaux
======================================== */
/*
Ajustement des quatre zones principales
sans modifier leur contenu ni leur largeur.
*/
/* Présentation du cercle :
davantage d'air sous le menu et avant À la une */
body.accueil-floyon
.site-grid > .container-top-a {
padding-top: 1.25rem;
margin-bottom: 1.5rem;
}
/* À la une :
séparation avec les cartes de navigation */
body.accueil-floyon
.site-grid > .container-top-b {
margin-bottom: 2rem;
}
/* Nos activités / Nos publications :
séparation avec l'invitation finale */
body.accueil-floyon
.site-grid > .container-bottom-a {
margin-bottom: 1rem;
}
/* Invitation finale :
espace avant le bord inférieur du site */
body.accueil-floyon
.site-grid > .container-bottom-b {
margin-bottom: 1.5rem;
}
/* ============================================================
VII. PAGE PUBLICATIONS ET LIENS ÉDITORIAUX
============================================================ */
/* ========================================
VII.1 — Publications : dernier bulletin
======================================== */
/*
À insérer dans l'article Publications :
{loadmoduleid XXX}
Le module Articles doit afficher un seul bulletin,
avec son image d'introduction et son texte d'introduction.
Le titre et le résumé restent à droite de la couverture.
Aucun effet sur les fiches individuelles des bulletins.
*/
.floyon-dernier .mod-articles-items {
margin: 0;
padding: 0;
list-style: none;
}
.floyon-dernier .mod-articles-item-content {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
column-gap: 1.5rem;
row-gap: 0.65rem;
align-items: start;
}
/* Couverture : taille réduite, proportions préservées */
.floyon-dernier .mod-articles-image {
grid-column: 1;
grid-row: 1 / span 10;
float: none !important;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}
.floyon-dernier .mod-articles-image > a {
display: block;
width: 100%;
}
.floyon-dernier .mod-articles-image img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain;
}
/* Titre, texte et liens dans la colonne de droite */
.floyon-dernier
.mod-articles-item-content > :not(.mod-articles-image) {
grid-column: 2;
min-width: 0;
margin-top: 0;
}
.floyon-dernier .mod-articles-title {
grid-row: 1;
margin-bottom: 0;
font-size: 1.2rem;
line-height: 1.35;
font-weight: 600;
color: var(--floyon-blue-dark);
}
.floyon-dernier .mod-articles-title a {
color: var(--floyon-blue-dark);
text-decoration: none;
}
.floyon-dernier .mod-articles-title a:hover,
.floyon-dernier .mod-articles-title a:focus-visible {
color: var(--floyon-blue);
text-decoration: underline;
}
/* ========================================
VII.2 — Publications : numéros précédents
======================================== */
/* Repère de maintenance : Les liens des titres sont renforcés en IX.1. */
/*
À insérer dans l'article Publications :
{loadmoduleid YYY}
Le module Articles doit afficher trois bulletins,
sans texte d'introduction et avec l'image d'introduction.
Trois colonnes sur ordinateur, puis deux et une.
*/
.floyon-precedents .mod-articles-items {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.floyon-precedents .mod-articles-items > li {
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.floyon-precedents .mod-articles-item-content {
display: flex;
flex-direction: column;
gap: 0.6rem;
min-width: 0;
}
/* Couvertures alignées, sans recadrage */
.floyon-precedents .mod-articles-image {
order: -1;
float: none !important;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
margin: 0;
padding: 0;
}
.floyon-precedents .mod-articles-image > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.floyon-precedents .mod-articles-image img {
display: block;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain;
}
.floyon-precedents .mod-articles-title {
margin: 0 !important;
font-size: 1rem;
line-height: 1.35;
font-weight: 600;
color: var(--floyon-blue-dark);
}
.floyon-precedents .mod-articles-title a {
color: var(--floyon-blue-dark);
text-decoration: none;
}
.floyon-precedents .mod-articles-title a:hover,
.floyon-precedents .mod-articles-title a:focus-visible {
color: var(--floyon-blue);
text-decoration: underline;
}
/* ========================================
VII.3 — Publications : adaptation mobile des modules
======================================== */
@media (max-width: 680px) {
/* Dernier bulletin : titre, couverture, puis résumé */
.floyon-dernier .mod-articles-item-content {
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}
.floyon-dernier .mod-articles-image {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 190px;
margin: 0;
}
.floyon-dernier
.mod-articles-item-content > :not(.mod-articles-image) {
grid-column: 1;
}
.floyon-dernier .mod-articles-title {
grid-row: 1;
}
/* Anciens numéros : deux colonnes */
.floyon-precedents .mod-articles-items {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.floyon-precedents .mod-articles-image {
height: 210px;
}
}
@media (max-width: 420px) {
/* Une seule colonne sur les écrans très étroits */
.floyon-precedents .mod-articles-items {
grid-template-columns: minmax(0, 1fr);
}
.floyon-precedents .mod-articles-image {
height: 250px;
justify-content: flex-start;
}
.floyon-precedents .mod-articles-image > a {
justify-content: flex-start;
}
}
/* ========================================
VII.4 — Liens éditoriaux et appels à adhésion (transversal)
AUTOUR DU FLOYON
======================================== */
/* Liens ordinaires dans les articles */
.com-content-article p a:not(.floyon-cta),
.com-content-article li a:not(.floyon-cta) {
font-weight: 500;
text-decoration-thickness: 1.5px;
text-underline-offset: 0.18em;
}
/* Liens de navigation en fin de section */
.com-content-article a.floyon-lien-action {
color: var(--floyon-blue-dark);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.2em;
}
.com-content-article a.floyon-lien-action:hover {
color: var(--floyon-blue-deep);
}
/* Lien principal : Devenir membre */
.com-content-article a.floyon-cta {
display: inline-flex;
align-items: center;
padding: 0.6rem 1rem;
margin-top: 0.35rem;
background-color: var(--floyon-blue-pale);
border: 1px solid var(--floyon-blue-medium);
border-radius: 5px;
color: var(--floyon-blue-dark);
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
.com-content-article a.floyon-cta:hover {
background-color: var(--floyon-blue-light);
border-color: var(--floyon-blue-dark);
color: var(--floyon-blue-deep);
text-decoration: none;
}
/* Visibilité du focus pour la navigation clavier */
.com-content-article a.floyon-cta:focus-visible,
.com-content-article a.floyon-lien-action:focus-visible {
outline: 3px solid var(--floyon-blue);
outline-offset: 3px;
}
/* ========================================
VII.5 — Publications : composition de la page et ouvrage
ESPACEMENTS ET PRÉSENTATION
======================================== */
/* Repère de maintenance : Le lien « Tous les numéros » est espacé en IX.2. */
/* La carte du dernier numéro partage les règles de l'accueil
(section 22 : .floyon-une > .card-body).
Ces règles s'appliquent au conteneur .floyon-dernier-encadre. */
/* Espacements entre les différentes sections */
.floyon-publications .floyon-section-dernier {
margin-top: 2.25rem;
}
.floyon-publications .floyon-adhesion-revue,
.floyon-publications .floyon-section-precedents {
margin-top: 2.5rem;
}
.floyon-publications .floyon-section-ouvrage {
margin-top: 3.25rem;
}
/* Titres proches du contenu qu'ils introduisent */
.floyon-publications .floyon-section-dernier > h3,
.floyon-publications .floyon-adhesion-revue > h3,
.floyon-publications .floyon-section-precedents > h3 {
margin-top: 0;
margin-bottom: 0.75rem;
}
.floyon-publications .floyon-section-ouvrage > h2 {
margin-top: 0;
margin-bottom: 1rem;
}
/* Alignement de la carte du dernier numéro sur celle de l'accueil :
couverture de 200 px et espacements identiques. */
.floyon-publications .floyon-dernier .mod-articles-item-content {
grid-template-columns: 200px minmax(0, 1fr);
row-gap: 0.75rem;
}
/* Ouvrage du cercle : couverture à gauche, texte à droite */
.floyon-publications .floyon-ouvrage {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.floyon-publications .floyon-ouvrage-image {
flex: 0 0 140px;
max-width: 100%;
}
.floyon-publications .floyon-ouvrage-image img {
display: block;
width: 140px;
max-width: 100%;
height: auto;
}
.floyon-publications .floyon-ouvrage-texte {
flex: 1 1 260px;
min-width: 0;
}
.floyon-publications .floyon-ouvrage-texte > h3 {
margin-top: 0;
margin-bottom: 0.75rem;
}
/* Entre 576 et 680 px, les deux colonnes sont conservées,
conformément à l'accueil. Ces règles complètent les règles
générales <= 680 px de la section 29. */
@media (min-width: 576px) and (max-width: 680px) {
.floyon-publications .floyon-dernier .mod-articles-item-content {
grid-template-columns: 200px minmax(0, 1fr);
}
.floyon-publications .floyon-dernier .mod-articles-image {
grid-column: 1;
grid-row: 1 / span 10;
width: 100%;
max-width: none;
margin: 0;
}
.floyon-publications
.floyon-dernier
.mod-articles-item-content > :not(.mod-articles-image) {
grid-column: 2;
}
.floyon-publications .floyon-dernier .mod-articles-title {
grid-row: 1;
}
}
/* Smartphone : même carte et même organisation verticale qu'à l'accueil */
@media (max-width: 575.98px) {
.floyon-publications .floyon-dernier-encadre {
padding: 0.875rem;
}
.floyon-publications .floyon-dernier .mod-articles-item-content {
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}
.floyon-publications .floyon-dernier .mod-articles-image {
grid-column: 1;
grid-row: 1;
width: 100%;
max-width: 210px;
margin: 0 auto;
}
.floyon-publications
.floyon-dernier
.mod-articles-item-content > :not(.mod-articles-image) {
grid-column: 1;
}
.floyon-publications .floyon-dernier .mod-articles-title {
grid-row: 2;
}
.floyon-publications .floyon-section-ouvrage {
margin-top: 2.5rem;
}
}
/* ============================================================
VIII. PAGE « DEVENIR MEMBRE »
============================================================ */
/* ========================================
VIII.1 — Devenir membre : largeur et alignement du titre
======================================== */
/* Repère de maintenance : L’espacement vertical du titre est complété en IX.6. */
/*
Dans Convert Forms, le H1 est un enfant direct de main,
tandis que le formulaire est centre independamment.
La largeur de 600 px reprend la largeur de reference
estimee du formulaire et reste limitee a la page 114.
Ne modifie ni les champs du formulaire ni les autres pages.
*/
body.com_convertforms.view-form.itemid-114
.site-grid .container-component main > h1 {
box-sizing: border-box;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* ========================================
IX. AJUSTEMENTS FINAUX ET SURCHARGES
Plusieurs réglages historiques doivent rester après les
règles précédentes : leur ordre peut intervenir dans la
cascade CSS. Les modifier par thème, sans les déplacer.
======================================== */
/* ========================================
IX.1 — États des liens et titres cliquables : ajustements de cascade
======================================== */
/* 1. Liens de navigation secondaires */
.com-content-article a.floyon-lien-action,
.com-content-article p a.floyon-lien-action {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.75rem;
background-color: #ffffff;
border: 1px solid var(--floyon-blue-medium);
border-radius: 5px;
color: var(--floyon-blue-dark);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
/* Survol */
.com-content-article a.floyon-lien-action:hover,
.com-content-article a.floyon-lien-action:focus-visible {
background-color: var(--floyon-blue-pale);
border-color: var(--floyon-blue-dark);
color: var(--floyon-blue-deep);
text-decoration: underline;
}
/* Focus clavier */
.com-content-article a.floyon-lien-action:focus-visible {
outline: 3px solid var(--floyon-blue);
outline-offset: 3px;
}
/* 2. Titres cliquables des publications */
.floyon-dernier .mod-articles-title a,
.floyon-precedents .mod-articles-title a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
/* 3. Titres cliquables des activités */
.activites-accueil .mod-articles-title a,
.com-content-category-blog__item
.item-content .page-header h2 > a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
/* 4. Renforcement du soulignement au survol */
.floyon-dernier .mod-articles-title a:hover,
.floyon-precedents .mod-articles-title a:hover,
.activites-accueil .mod-articles-title a:hover,
.com-content-category-blog__item
.item-content .page-header h2 > a:hover {
text-decoration-thickness: 2px;
}
/* ========================================
IX.2 — Publications : écart avant « Tous les numéros »
======================================== */
/* Séparation du bouton et des couvertures précédentes */
.floyon-publications
.floyon-section-precedents
.floyon-precedents + p {
margin-top: 1.5rem;
}
/* ========================================
IX.3 — Accueil : boutons secondaires « Découvrir »
======================================== */
/* Boutons secondaires sur l'accueil */
body.accueil-floyon .floyon-explorer a.floyon-lien-action {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.75rem;
background-color: #ffffff;
border: 1px solid var(--floyon-blue-medium);
border-radius: 5px;
color: var(--floyon-blue-dark);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
body.accueil-floyon .floyon-explorer a.floyon-lien-action:hover,
body.accueil-floyon .floyon-explorer a.floyon-lien-action:focus-visible {
background-color: var(--floyon-blue-pale);
border-color: var(--floyon-blue-dark);
color: var(--floyon-blue-deep);
text-decoration: underline;
}
body.accueil-floyon .floyon-explorer a.floyon-lien-action:focus-visible {
outline: 3px solid var(--floyon-blue);
outline-offset: 3px;
}
/* ---------------------------------------------------------
IX.4 — Fil d’Ariane : masquer les séparateurs
--------------------------------------------------------- */
/* Masquer l’icône de localisation du fil d’Ariane */
.mod-breadcrumbs .mod-breadcrumbs__divider {
display: none;
}
/* ========================================
IX.5 — Recherche avancée dans l’en-tête (position search)
Module Joomla Recherche avancée
Position : search
======================================== */
/* Présentation commune du champ */
.container-header .container-search .mod-finder {
width: 100%;
margin: 0;
}
.container-header .container-search .js-finder-search-query {
box-sizing: border-box;
display: block;
width: 100%;
min-width: 0;
height: 2.5rem;
padding: 0.4rem 0.7rem;
background-color: #ffffff;
color: var(--floyon-text);
border: 1px solid var(--floyon-border);
border-radius: 5px;
font-family: inherit;
font-size: 0.875rem;
}
.container-header .container-search
.js-finder-search-query:focus-visible {
border-color: var(--floyon-blue-medium);
outline: 2px solid var(--floyon-blue);
outline-offset: 2px;
}
/* ----------------------------------------
ORDINATEUR
Recherche dans la zone blanche
---------------------------------------- */
@media (min-width: 992px) {
.container-header {
position: relative;
}
/* Réserver de la place à droite
pour éviter de recouvrir la bannière */
.container-header > .grid-child:not(.container-nav) {
padding-right: 13rem;
}
/* Positionnement du module de recherche */
.container-header .container-search {
position: absolute;
top: 4.5rem;
right: 1.5rem;
box-sizing: border-box;
width: 168px;
margin: 0;
padding: 0;
z-index: 10;
}
}
/* ----------------------------------------
TABLETTE ET SMARTPHONE
Recherche sous la navigation
---------------------------------------- */
@media (max-width: 991.98px) {
.container-header .container-search {
position: static;
box-sizing: border-box;
flex: 0 0 100%;
width: 100%;
margin: 0.5rem 0 0;
padding: 0 0 0.35rem;
}
.container-header .container-search .mod-finder {
width: 100%;
max-width: 300px;
margin: 0 auto;
}
}
/* ========================================
IX.6 — Espacements des titres : activités et adhésion
Pages Activités et Devenir membre uniquement
======================================== */
/* 1. PAGE ACTIVITÉS */
/* Éviter le cumul des marges autour
de l'en-tête de l'article */
body.activites-accueil
.com-content-article > .page-header {
margin-bottom: 1.25rem;
}
body.activites-accueil
.com-content-article > .page-header h1 {
margin-bottom: 0;
}
/* Supprimer la marge supérieure du premier
H2 s'il ouvre directement le contenu */
body.activites-accueil
.com-content-article__body > h2:first-child {
margin-top: 0;
}
/* 2. PAGE DEVENIR MEMBRE */
/* Espacement normalisé sous le titre */
body.com_convertforms.view-form.itemid-114
.site-grid .container-component main > h1 {
margin-bottom: 0.75rem;
}
/* Éviter une marge supplémentaire
sur le bloc qui suit immédiatement */
body.com_convertforms.view-form.itemid-114
.site-grid .container-component main > h1 + * {
margin-top: 0;
}
/* Neutraliser une éventuelle marge supérieure
du formulaire Convert Forms */
body.com_convertforms.view-form.itemid-114 #cf_1 {
margin-top: 0;
}
/* =====================================================================
FIN DU FICHIER USER.CSS — AUTOUR DU FLOYON
===================================================================== */