/* ========================================
   AUTOUR DU FLOYON
   Personnalisation de Cassiopeia
   ======================================== */


/* ========================================
   1. CHARTE GRAPHIQUE
   ======================================== */

: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;
}


/* ========================================
   2. TYPOGRAPHIE GÉNÉRALE
   ======================================== */

/*
   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.875rem, 1.75rem + 0.6vw, 2.125rem);
    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);
}


/* ========================================
   3. STRUCTURE GÉNÉRALE
   ======================================== */

/* 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;
}


/* ========================================
   4. EN-TÊTE
   ======================================== */

/* 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;
}


/* ========================================
   5. MENU PRINCIPAL
   ======================================== */

/* 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;
    }
}


/* ========================================
   6. CONTENU PRINCIPAL
   ======================================== */

/* 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;
}

/* Fil d'Ariane */

.breadcrumb a {
    color: var(--floyon-blue-medium);
}


/* ========================================
   7. TITRE DES ARTICLES
   ======================================== */

/*
   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;
}

/* Titre des articles complets */
body.view-article .com-content-article > .page-header > h1 {
    font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.75rem);
}

/* ========================================
   8. LARGEUR DE LECTURE DES ARTICLES
   ======================================== */

/*
   Largeur maximale de lecture : 820 px.
   Le conteneur général reste à 1100 px.
*/

.com-content-article {
    width: 100%;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}


/* ========================================
   9. PUBLICATIONS
   ======================================== */

/* 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;
}


/* ========================================
   10. 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;
}


/* ========================================
   11. 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;
}


/* ========================================
   12. PIED DE PAGE
   ======================================== */

/* 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;
}


/* ========================================
   13. ADAPTATION GÉNÉRALE AUX PETITS ÉCRANS
   ======================================== */

@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;
    }
}


/* ========================================
   14. PAGE ACTIVITÉS
   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;
}


/* ========================================
   15. RETOUR SUR NOS ACTIVITÉS
   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;
    }
}


/* ========================================
   16. PAGE ACTIVITÉS
   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;
}


/* ========================================
   17. PROCHAINEMENT - PETITS ÉCRANS
   ======================================== */

@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;
    }
}


/* ========================================
   18. PAGE ACTIVITÉS
   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;
}


/* ========================================
   19. CARTES 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;
    }
}


/* ========================================
   20. PAGE D'ACCUEIL
   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: 820px;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
}


/* ========================================
   21. ACCUEIL - PRÉSENTATION DU CERCLE
   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;
}

/* Texte de présentation */

body.accueil-floyon
.floyon-presentation p:last-child {
    margin-bottom: 0;
}


/* ========================================
   22. ACCUEIL - À LA UNE
   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 {
    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;
}


/* ========================================
   23. 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;
    }
}


/* ========================================
   24. ACCUEIL - EXPLORER LE SITE
   Module personnalisé n°114
   Classe : floyon-explorer
   ======================================== */

/*
   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;
}


/* ========================================
   25. ACCUEIL - REJOINDRE LE CERCLE
   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);
}


/* ========================================
   26. ACCUEIL - ADAPTATION AUX PETITS ÉCRANS
   ======================================== */

@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;
    }
}


/* ========================================
   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;
}


/* ========================================
   27. PUBLICATIONS - DERNIER BULLETIN
   ======================================== */

/*
   À insérer dans l'article Publications :
   <div class="floyon-dernier">{loadmoduleid XXX}</div>

   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;
}

/* ========================================
   28. PUBLICATIONS - NUMÉROS PRÉCÉDENTS
   ======================================== */

/*
   À insérer dans l'article Publications :
   <div class="floyon-precedents">{loadmoduleid YYY}</div>

   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;
}

/* ========================================
   29. PUBLICATIONS - ADAPTATION MOBILE
   ======================================== */

@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;
    }
}


/* ========================================
   LIENS - VISIBILITÉ ET HIÉRARCHIE
   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;
}

/* ========================================
   FIN DU FICHIER USER.CSS
   AUTOUR DU FLOYON
   ======================================== */