/* ============================================================
   FO Suez Eau - Feuille de style principale
   ============================================================ */

/* Polices hébergées sur le site (dossier assets/fonts, voir LISEZ-MOI.txt) :
   rien n'est demandé à Google, donc aucune adresse IP de visiteur ne lui est
   transmise. Tant que les fichiers ne sont pas déposés dans ce dossier, le
   navigateur utilise Segoe UI / la police système, sans rien casser. */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/bricolage-grotesque-600.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-style: normal; font-display: swap; src: url('/assets/fonts/bricolage-grotesque-800.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/public-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/public-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/public-sans-700.woff2') format('woff2'); }

:root {
    --couleur-principale: #b31217;   /* Rouge FO */
    --couleur-principale-fonce: #7a0c10;
    --couleur-fond: #f7f7f5;
    --couleur-texte: #222222;
    --couleur-texte-clair: #666666;
    --couleur-bordure: #e0e0dd;
    --couleur-blanc: #ffffff;
    --rayon: 6px;
    --ombre: 0 2px 8px rgba(0,0,0,0.08);
    /* Nouvelle identité de l'accueil (maquette "piste A") */
    --encre: #1F2A44;          /* bleu nuit : titres et texte fort */
    --encre-douce: #33405C;    /* texte secondaire (contraste 10:1 sur blanc) */
    --fond-doux: #EEF2F8;      /* bandes de fond bleutées */
    --rouge-vif: #E53935;      /* rouge lisible sur fond bleu nuit (boutons) */
    /* Gabarit : les fonds occupent tout l'écran, le contenu reste dans cette
       largeur, avec des marges latérales qui s'adaptent à l'écran. */
    --largeur-max: 1280px;
    --marge-laterale: clamp(20px, 4vw, 64px);
    --police-titre: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --police-texte: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
    /* Zones de sécurité (encoche, coins arrondis, barre du bas) — surtout
       utile une fois l'app installée (mode "standalone"), où il n'y a plus
       la barre d'adresse du navigateur pour s'en charger à notre place. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
html {
    scroll-padding-top: env(safe-area-inset-top, 0px);
}

/* Thème Cadres : remplace automatiquement le rouge par le bleu partout,
   car tous les éléments (boutons, bandeau héro, trait de titre...)
   utilisent déjà var(--couleur-principale) plutôt qu'une couleur en dur. */
body.theme-cadre {
    --couleur-principale: #0c447c;
    --couleur-principale-fonce: #073257;
}

* { box-sizing: border-box; }
/* Réserve toujours la place de la barre de défilement verticale, même sur
   une page assez courte pour ne pas en avoir besoin — sans ça, une page
   plus longue qu'une autre (comme l'accueil, désormais bien plus riche)
   décale son contenu centré de quelques pixels par rapport aux pages plus
   courtes qui n'ont pas de barre de défilement. */
html { overflow-y: scroll; }
/* Empêche tout débordement horizontal accidentel (ex: un bloc "pleine
   largeur" légèrement mal calculé sur un appareil précis) de rendre la page
   glissable horizontalement — un symptôme caractéristique sur mobile/en
   application installée, où on peut alors faire bouger toute la page d'un
   geste latéral.
   Attention : "overflow-x: hidden" sur <body> peut empêcher le bandeau du
   haut (position: sticky) de rester collé au défilement. Le rognage est donc
   fait sur <html> (qui s'applique à la fenêtre) et, sur <body>, avec "clip"
   qui rogne sans créer de zone de défilement (l'ancienne valeur "hidden"
   ne sert que de repli pour un navigateur très ancien). */
html { overflow-x: hidden; }
body { overflow-x: hidden; overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--police-texte);
    -webkit-tap-highlight-color: rgba(179, 18, 23, 0.15);
    color: var(--couleur-texte);
    background: var(--couleur-fond);
    line-height: 1.6;
}

a { color: var(--couleur-principale); text-decoration: none; }
h1, h2, h3 { font-family: var(--police-titre); }
button, input, select, textarea { font-family: inherit; }
/* Évite le délai et le zoom au double-tap sur les éléments cliquables (mobile) */
a, button, select, input, label, summary { touch-action: manipulation; }

/* Lien d'évitement : invisible, sauf quand on arrive dessus au clavier (touche
   Tab) — il permet de passer directement au contenu sans parcourir tout le
   menu à chaque page. */
.lien-evitement {
    position: absolute;
    left: 12px;
    top: -80px;
    z-index: 3000;
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    padding: 10px 16px;
    border-radius: var(--rayon);
    font-weight: 600;
}
.lien-evitement:focus {
    top: calc(12px + env(safe-area-inset-top, 0px));
}
/* Le contenu reçoit le focus quand on suit le lien d'évitement, mais ce n'est
   pas un élément interactif : un cadre de focus n'y aurait aucun sens. */
#contenu-principal:focus {
    outline: none;
}
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* --- En-tête / navigation --- */
.entete {
    background: var(--couleur-blanc);
    border-bottom: 1px solid var(--couleur-bordure);
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 100;
    transition: transform 0.25s ease;
}
.entete.entete-cachee {
    transform: translateY(-100%);
}

/* Éléments réservés au bandeau mobile (recherche en icône, J'adhère centré) :
   invisibles sur ordinateur, activés uniquement dans le média mobile plus bas. */
.entete-mobile-centre,
.entete-mobile-droite,
.lien-mon-compte-mobile-barre {
    display: none;
}

/* L'en-tête occupe toute la largeur de l'écran (logo tout à gauche, actions
   tout à droite) ; seul le contenu des pages est limité à --largeur-max. */
.entete-conteneur {
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--marge-laterale);
    padding-left: max(var(--marge-laterale), env(safe-area-inset-left, 0px));
    padding-right: max(var(--marge-laterale), env(safe-area-inset-right, 0px));
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    height: 80px;
}

.logo {
    display: flex;
    align-items: center;
    height: 80px;
    font-size: 20px;
    font-weight: bold;
    color: var(--couleur-principale);
}

.navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.navigation a {
    color: var(--couleur-texte);
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.navigation a:hover { color: var(--couleur-principale); text-decoration: none; }

/* --- Menu à 3 chapitres (Le syndicat / Protection sociale / Actualité) --- */
.navigation-item-chapitre {
    position: relative;
}
.navigation-lien-chapitre {
    background: none;
    border: none;
    font: inherit;
    font-family: var(--police-titre);
    color: var(--couleur-texte);
    cursor: pointer;
    font-weight: 600;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0;
}
.navigation-sous-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navigation-item-chapitre.ouvert .navigation-sous-menu {
    display: block;
}
.navigation-sous-menu a,
.navigation-sous-menu-vide {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    color: var(--couleur-texte);
}
/* Décale vers la droite les titres des actualités récentes, dans le menu
   burger, pour montrer qu'ils dépendent du lien "ACTUALITÉS RÉCENTES :"
   juste au-dessus. */
.navigation-sous-menu-item-recente {
    padding-left: 20px;
}
.navigation-sous-menu-vide {
    color: var(--couleur-texte-clair);
    font-style: italic;
}

/* Intitulé de regroupement (ex: "LES ACTUALITÉS RÉCENTES") : non cliquable,
   sert juste à séparer visuellement un sous-groupe de liens. */
.navigation-sous-menu-titre {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--couleur-texte-clair);
    padding: 8px 0 2px;
}

/* Liens accentués du menu ("ACTUALITÉS RÉCENTES :", "TOUTES LES ACTUALITÉS") :
   gras et majuscules, contrairement aux liens de page ordinaires. */
.lien-sous-menu-accent {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Sur ordinateur, le chapitre "Les actualités" tient sur deux lignes :
   la 1ère regroupe "ACTUALITÉS RÉCENTES :" et les titres tronqués sur une
   seule ligne (jamais de retour à la ligne, jamais de recouvrement) ; la
   2ème n'affiche que "TOUTES LES ACTUALITÉS". */
.sous-bandeau-ligne {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    padding: 6px 0;
    flex: 1 1 100%; /* prend toute la largeur : force les 2 lignes à s'empiler */
    width: 100%;
}
.sous-bandeau-ligne a {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Titre encadré + petite clé pour une page réservée aux adhérents (peu
   importe la catégorie visée) : indique le CARACTÈRE réservé de LA PAGE
   elle-même, pas la catégorie du visiteur — plus de code couleur.
   Le sélecteur répète le contexte (.navigation-sous-menu / .sous-bandeau-menu-liste)
   pour rester plus spécifique que leurs propres règles "a { color: ... }"
   ci-dessus (bug de spécificité déjà rencontré une fois sur ce menu). */
.navigation-sous-menu a.lien-page-reservee,
.sous-bandeau-menu-liste a.lien-page-reservee {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--couleur-bordure);
    border-radius: 5px;
    padding: 3px 9px;
    margin: 3px 0;
    color: var(--couleur-texte);
}
.icone-page-reservee {
    flex-shrink: 0;
    opacity: 0.65;
}

@media (min-width: 769px) {
    /* Sur ordinateur, cette liste par chapitre ne s'affiche jamais elle-même
       (display:none ci-dessous écrase la règle ".ouvert" plus haut) : elle
       ne sert que de source de contenu, recopiée dans le sous-bandeau plein
       largeur partagé (voir .sous-bandeau-menu) au survol du bouton. */
    .navigation-sous-menu {
        display: none !important;
    }
}

/* --- Sous-bandeau plein largeur (survol d'un chapitre, ordinateur) --- */
.sous-bandeau-menu[hidden] {
    display: none;
}
.sous-bandeau-menu {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--couleur-blanc);
    border-bottom: 1px solid var(--couleur-bordure);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.sous-bandeau-menu-liste {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    max-width: none;
    margin: 0 auto;
    padding: 20px var(--marge-laterale);
}
.sous-bandeau-menu-liste a,
.sous-bandeau-menu-liste .navigation-sous-menu-vide {
    font-size: 15px;
    color: var(--couleur-texte);
}
.sous-bandeau-menu-liste a:hover {
    color: var(--couleur-principale);
}

/* Majuscules uniquement pour les boutons "Espace adhérents" / "J'adhère"
   du bandeau (pas pour tous les boutons du site, ex: "Envoyer", "Valider"). */
.entete-actions a.bouton,
.bouton-adhere-mobile-barre {
    text-transform: uppercase;
}

/* --- Bouton loupe : partagé par ordinateur et mobile (voir HTML) --- */
.bouton-ouvrir-recherche {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    color: var(--couleur-texte);
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}
.bouton-ouvrir-recherche:hover {
    color: var(--couleur-principale);
}

/* --- Bandeau de recherche plein écran ---
   Un seul mécanisme pour ordinateur et mobile : un bandeau blanc en
   position fixe qui recouvre ENTIÈREMENT le bandeau du haut. Comme il
   passe par-dessus (et non "à côté"), il n'y a besoin de cacher ni le
   logo, ni le menu, ni quoi que ce soit d'autre : tout est simplement
   recouvert visuellement, ce qui rend ce mécanisme beaucoup plus fiable
   que les précédentes tentatives. */
/* Doit être placé AVANT la règle ".recherche-plein-ecran" ci-dessous et
   rester plus spécifique qu'elle, pour que l'attribut natif "hidden" (qui
   ne dépend d'aucun fichier CSS externe pour fonctionner) l'emporte
   toujours sur le display:flex qui suit — même principe que pour le
   bandeau cookies et l'assistant. */
.recherche-plein-ecran[hidden] {
    display: none;
}

.recherche-plein-ecran {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--couleur-blanc);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.recherche-plein-ecran-interieur {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--marge-laterale);
    color: var(--couleur-principale);
}
.recherche-plein-ecran-interieur svg {
    flex-shrink: 0;
}
#formulaireRecherchePleinEcran {
    flex: 1;
    min-width: 0;
}
.recherche-plein-ecran input {
    width: 100%;
    margin: 0;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 9px 14px;
    font-size: 16px;
}
#boutonFermerRecherchePleinEcran {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--couleur-texte);
    cursor: pointer;
    padding: 4px;
    display: flex;
}
#boutonFermerRecherchePleinEcran:hover {
    color: var(--couleur-principale);
}

/* Sur ordinateur, le menu et les boutons de connexion se partagent une seule
   ligne : le <nav> s'étire pour occuper tout l'espace entre le logo et les
   boutons, et ses liens se répartissent (justifient) sur toute cette largeur. */
.menu-mobile {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 24px;
}

.entete nav {
    flex: 1;
}

/* Grands écrans : trois colonnes, le logo à gauche, les chapitres au centre et
   les actions à droite. Les colonnes de gauche et de droite sont de même
   largeur, donc les chapitres sont centrés sur la page (et pas seulement dans
   l'espace laissé entre le logo et les boutons). ".menu-mobile" ne sert
   d'enveloppe qu'au menu burger du téléphone : sur ordinateur on le "dissout"
   ("display: contents") pour que logo, chapitres et actions se partagent la
   même grille. Chaque côté garde au moins la largeur de son contenu : les
   boutons ne passent jamais à la ligne. En dessous de cette largeur,
   l'ancienne disposition (chapitres répartis) est conservée. */
@media (min-width: 1180px) {
    .entete-conteneur {
        display: grid;
        grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
        align-items: center;
        gap: 24px;
    }
    .menu-mobile { display: contents; }
    .entete-conteneur > .logo { justify-self: start; }
    .menu-mobile > nav { justify-self: center; }
    .menu-mobile > nav .navigation {
        width: auto;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 8px 36px;
    }
    .menu-mobile > .entete-actions {
        justify-self: end;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

/* Bouton "burger" (3 traits) : invisible sur ordinateur, seul le CSS
   responsive plus bas le rend visible sur mobile. */
.bouton-menu-mobile {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.bouton-menu-mobile span {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--couleur-principale);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Petite animation : le burger se transforme en croix quand le menu est ouvert */
.bouton-menu-mobile.ouvert span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bouton-menu-mobile.ouvert span:nth-child(2) { opacity: 0; }
.bouton-menu-mobile.ouvert span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.entete-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.bouton {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--rayon);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: 2px solid var(--couleur-principale);
}

.bouton-plein {
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
}
.bouton-plein:hover { background: var(--couleur-principale-fonce); text-decoration: none; }

.bouton-contour {
    background: transparent;
    color: var(--couleur-principale);
}
.bouton-contour:hover { background: var(--couleur-principale); color: var(--couleur-blanc); text-decoration: none; }

/* --- Bandeau statut adhérent --- */
.bandeau-adherent {
    background: var(--couleur-principale-fonce);
    color: var(--couleur-blanc);
    text-align: center;
    padding: 8px;
    font-size: 14px;
}
.bandeau-adherent a { color: var(--couleur-blanc); text-decoration: underline; }

/* --- Bandeau catégorie professionnelle (OETAM / Cadre) ---
   Affiché tout en haut, sur TOUTES les pages, dès qu'un adhérent est connecté. */
/* En-tête coloré selon la catégorie de l'adhérent connecté (rouge OET/TSM,
   bleu Cadre) — texte et icônes (SVG en "currentColor") passent en blanc.
   !important : la navigation a déjà ses propres couleurs de texte un peu
   partout dans la feuille de style, plus sûr de forcer ici que d'auditer
   chaque règle existante une à une. */
.entete.entete-oetam,
.entete.entete-oetam a,
.entete.entete-oetam button {
    color: #fff !important;
}
.entete.entete-cadre,
.entete.entete-cadre a,
.entete.entete-cadre button {
    color: #fff !important;
}
.entete.entete-oetam { background: #b31217; border-bottom-color: transparent; }
.entete.entete-cadre { background: #0c447c; border-bottom-color: transparent; }
/* Les 3 traits du bouton burger sont dessinés avec un fond (background),
   pas une couleur de texte — le "color: #fff" ci-dessus ne les concerne
   pas, il leur faut leur propre règle. Ce bouton reste dans le bandeau du
   haut même menu ouvert (jamais dans le panneau blanc .menu-mobile.ouvert),
   donc pas besoin d'exception comme pour les liens. */
.entete.entete-oetam .bouton-menu-mobile span,
.entete.entete-cadre .bouton-menu-mobile span {
    background: #fff;
}
/* Le logo (FO en rouge, contour en bleu marine, fond transparent) devient
   illisible posé directement sur un bandeau rouge ou bleu — un petit encart
   blanc derrière lui garde le logo intact sans avoir besoin d'en refaire
   une version. */
.entete.entete-oetam .logo,
.entete.entete-cadre .logo {
    background: #fff;
    padding: 6px 12px;
    border-radius: 8px;
}

/* Le menu mobile, une fois ouvert, a son propre fond blanc fixe qui
   recouvre l'écran (voir .menu-mobile.ouvert plus bas) — complètement
   indépendant de la couleur de l'en-tête. Sans ce correctif, le texte y
   resterait blanc sur fond blanc, illisible : on repasse ce panneau précis
   en couleurs normales. */
.entete.entete-oetam .menu-mobile.ouvert,
.entete.entete-oetam .menu-mobile.ouvert a,
.entete.entete-oetam .menu-mobile.ouvert button,
.entete.entete-cadre .menu-mobile.ouvert,
.entete.entete-cadre .menu-mobile.ouvert a,
.entete.entete-cadre .menu-mobile.ouvert button {
    color: var(--couleur-texte) !important;
}

/* --- Logo (change selon la catégorie de l'adhérent connecté) --- */
.logo-image {
    height: 100%;
    width: auto;
    display: block;
}

/* Respecte la préférence "réduire les animations" du système d'exploitation */
@media (prefers-reduced-motion: reduce) {
    /* Le carrousel de l'accueil ne glisse plus (voir aussi son script) */
    .accueil-carrousel-piste {
        transition: none;
    }
}

/* --- Carte FO dématérialisée --- */
.carte-fo-recto {
    background: var(--couleur-blanc);
    border: 2px solid var(--couleur-principale);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 20px;
    margin-bottom: 20px;
}

.carte-fo-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 2px solid var(--couleur-principale);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.carte-fo-logo {
    height: 40px;
    width: auto;
}
.carte-fo-entete span {
    font-weight: bold;
    font-size: 14px;
    color: var(--couleur-principale);
    text-align: right;
}

/* Timbres de cotisation : jusqu'à 6 sur une ligne, une seconde ligne (avec
   le reste) n'apparaît qu'à partir du 7ème timbre — toujours entre le logo
   et le texte "Carte d'adhérent...". */
.carte-fo-timbres {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}
.carte-fo-timbres-ligne {
    display: flex;
    gap: 3px;
}
.carte-fo-timbre {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 3px;
}

@media (max-width: 480px) {
    .carte-fo-timbre {
        width: 16px;
        height: 16px;
    }
}

.carte-fo-syndicat {
    font-size: 13px;
    font-weight: 600;
    color: var(--couleur-texte-clair);
    text-align: center;
    margin: 0 0 16px;
}

.carte-fo-identite {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    margin-bottom: 16px;
}
.carte-fo-identite strong {
    font-size: 18px;
}
.carte-fo-identite span {
    font-size: 14px;
    color: var(--couleur-texte-clair);
}

.carte-fo-numero {
    text-align: center;
    font-size: 12px;
    font-style: italic;
    color: var(--couleur-texte-clair);
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--couleur-bordure);
}

.carte-fo-partenaires {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--couleur-bordure);
}
.carte-fo-logo-partenaire {
    height: 40px;
    width: auto;
}

.carte-fo-verso {
    background: var(--couleur-blanc);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 24px;
}
.carte-fo-verso h2 {
    font-size: 18px;
    margin-top: 0;
}
.carte-fo-verso h3 {
    font-size: 15px;
    color: var(--couleur-principale);
    margin-bottom: 6px;
}
.carte-fo-verso p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

@media (max-width: 480px) {
    .carte-fo-entete {
        flex-direction: column;
        text-align: center;
    }
    .carte-fo-entete span {
        text-align: center;
    }
}

/* --- Encart de règlement de cotisation (page Mon compte) --- */
.encart-paiement {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 32px;
}
.encart-paiement .bouton {
    flex: 1 1 220px;
    text-align: center;
}

/* --- Page de recherche --- */
.formulaire-recherche-page {
    display: flex;
    gap: 10px;
    margin-bottom: 32px;
    max-width: 500px;
}
.formulaire-recherche-page input[type="search"] {
    flex: 1;
    margin-top: 0;
}
.formulaire-recherche-page button {
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

.section-resultats-recherche {
    margin-bottom: 32px;
}
.section-resultats-recherche h2 {
    font-size: 18px;
    border-bottom: 2px solid var(--couleur-bordure);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* --- Familles de résultats (onglets) --- */
.filtre-familles-recherche {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.bouton-filtre-famille {
    background: var(--couleur-blanc);
    border: 1px solid var(--couleur-bordure);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 14px;
    cursor: pointer;
    color: var(--couleur-texte);
}
.bouton-filtre-famille:hover {
    border-color: var(--couleur-principale);
}
.bouton-filtre-famille.actif {
    background: var(--couleur-principale);
    border-color: var(--couleur-principale);
    color: var(--couleur-blanc);
}
.filtre-famille-compte {
    font-size: 12px;
    opacity: 0.8;
    margin-left: 2px;
}

/* --- Liste de résultats --- */
.liste-resultats-recherche {
    list-style: none;
    margin: 0;
    padding: 0;
}
.resultat-recherche {
    border-bottom: 1px solid var(--couleur-bordure);
}
.resultat-recherche:last-child {
    border-bottom: none;
}
.resultat-recherche-lien {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 4px;
    text-decoration: none;
    color: inherit;
}
.resultat-recherche-lien:hover {
    background: var(--couleur-fond);
}
.resultat-recherche-image {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--rayon);
    object-fit: cover;
}
.resultat-recherche-image-generique {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--couleur-fond);
    font-size: 24px;
}
.resultat-recherche-texte strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}
.resultat-recherche-texte p {
    margin: 0;
    font-size: 14px;
    color: var(--couleur-texte-clair);
    line-height: 1.5;
}
.resultat-recherche-texte mark {
    background: #fff3a3;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* --- Icône "Mon compte" (remplace l'ancien lien texte "Espace adhérents"
   qui prenait trop de place dans le menu depuis l'ajout de la recherche) --- */
.lien-mon-compte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.2;
}
.lien-mon-compte:hover {
    color: var(--couleur-principale);
    text-decoration: underline;
}

.bloc-compte-connecte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.lien-deconnexion {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 2px;
    font-size: 12px;
    color: var(--couleur-texte-clair);
    text-decoration: underline;
}
.lien-deconnexion:hover {
    color: var(--couleur-principale);
}

/* Bandeau "Installer l'application", page d'accueil uniquement, entre le
   bandeau du haut et le bandeau rouge — mobile UNIQUEMENT, jamais sur
   ordinateur (même si le script le révèle, voir includes/header.php). */
.bandeau-installer-app {
    display: none;
    width: 100%;
    text-align: center;
    background: var(--couleur-fond-alterne, #f4f4f2);
    border: none;
    border-bottom: 1px solid var(--couleur-bordure);
    padding: 10px 16px;
    font: inherit;
    font-weight: 600;
    color: var(--couleur-principale);
    cursor: pointer;
}
@media (max-width: 768px) {
    .bandeau-installer-app:not([hidden]) {
        display: block;
    }
}
.bandeau-installer-app:hover {
    background: var(--couleur-bordure);
}
/* Le clignotement lui-même (3 pulsations, puis arrêt) est piloté en
   JavaScript — voir includes/header.php. Il n'a pas lieu si la personne a
   demandé de réduire les animations dans les réglages de son appareil. */

/* --- Barre de recherche dans le menu du haut --- */
.formulaire-recherche-entete {
    display: flex;
    align-items: center;
}
.formulaire-recherche-entete input[type="search"] {
    width: 160px;
    padding: 6px 10px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    font-size: 14px;
}

/* --- Popup de bienvenue (inscription au bulletin) --- */
.modale-bulletin[hidden] {
    display: none;
}
.modale-bulletin {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 2000;
    padding: 20px;
}
.modale-bulletin-contenu {
    position: relative;
    background: var(--couleur-blanc);
    border-radius: var(--rayon);
    padding: 36px 28px 28px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.modale-bulletin-fermer {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--couleur-texte);
    cursor: pointer;
    padding: 6px;
    display: flex;
}
.modale-bulletin-fermer:hover {
    color: var(--couleur-principale);
}
.modale-bulletin-video {
    width: 100%;
    border-radius: var(--rayon);
    display: block;
    margin-bottom: 20px;
}
.modale-bulletin-texte {
    font-size: 15px;
    line-height: 1.6;
    color: var(--couleur-texte);
    margin: 0 0 16px;
}
.modale-bulletin-bienvenue {
    font-size: 22px;
    font-weight: bold;
    color: var(--couleur-principale);
    margin: 0;
}

/* Messages du processus d'inscription au bulletin (popup bien visible) */
.modale-bulletin-message {
    border-top: 6px solid var(--couleur-principale);
    padding: 40px 32px 32px;
}
.modale-bulletin-message-info {
    border-top-color: #1b7f3b;
}
.modale-bulletin-message-titre {
    font-size: 24px;
    font-weight: bold;
    color: var(--couleur-principale);
    margin: 0 0 16px;
}
.modale-bulletin-message-info .modale-bulletin-message-titre {
    color: #1b7f3b;
}
.modale-bulletin-message-texte {
    font-size: 19px;
    line-height: 1.55;
    color: var(--couleur-texte);
    margin: 0 0 24px;
}
.modale-bulletin-message-ok {
    background: var(--couleur-principale);
    color: #fff;
    border: none;
    border-radius: var(--rayon);
    padding: 12px 40px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
}
.modale-bulletin-message-ok:hover {
    filter: brightness(0.9);
}

/* --- Assistant (bulle flottante) --- */
.fo-assistance-bouton {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.fo-assistance-bouton:hover {
    background: var(--couleur-principale-fonce);
}

/* Doit être plus spécifique que ".fo-assistance-panneau" ci-dessous pour que
   l'attribut "hidden" (utilisé en JavaScript pour ouvrir/fermer la
   fenêtre) l'emporte bien sur le display:flex qui suit — même correctif
   que pour le bandeau cookies. */
.fo-assistance-panneau[hidden] {
    display: none;
}

.fo-assistance-panneau {
    position: fixed;
    right: 20px;
    bottom: 86px;
    z-index: 1100;
    width: 320px;
    max-width: calc(100vw - 40px);
    max-height: min(480px, calc(100vh - 140px));
    display: flex;
    flex-direction: column;
    background: var(--couleur-blanc);
    border-radius: var(--rayon);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.fo-assistance-entete {
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fo-assistance-entete button {
    background: none;
    border: none;
    color: var(--couleur-blanc);
    font-size: 16px;
    cursor: pointer;
}

.fo-assistance-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fo-assistance-message-reponse, .fo-assistance-message-question {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
}
.fo-assistance-message-reponse {
    background: var(--couleur-fond);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}
.fo-assistance-message-question {
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.fo-assistance-lien-reponse {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    margin-top: -4px;
}

.fo-assistance-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fo-assistance-suggestion {
    background: var(--couleur-blanc);
    border: 1px solid var(--couleur-principale);
    color: var(--couleur-principale);
    border-radius: 14px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}
.fo-assistance-suggestion:hover {
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
}

.fo-assistance-formulaire {
    display: flex;
    border-top: 1px solid var(--couleur-bordure);
    padding: 8px;
    gap: 6px;
}
.fo-assistance-formulaire input {
    flex: 1;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    font-size: 14px;
}
.fo-assistance-formulaire button {
    margin: 0;
    width: 40px;
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    border: none;
    border-radius: var(--rayon);
    cursor: pointer;
}

@media (max-width: 480px) {
    .fo-assistance-panneau {
        right: 12px;
        left: 12px;
        width: auto;
    }
    .fo-assistance-bouton {
        right: 16px;
        bottom: 16px;
    }
}

/* --- Bandeau de consentement aux cookies --- */
/* Doit être plus spécifique que ".bandeau-cookies" ci-dessous pour que
   l'attribut "hidden" (utilisé en JavaScript pour cacher/afficher le
   bandeau) l'emporte bien sur le display:flex qui suit. */
.bandeau-cookies[hidden] {
    display: none;
}

.bandeau-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--couleur-blanc);
    border-top: 1px solid var(--couleur-bordure);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bandeau-cookies p {
    margin: 0;
    font-size: 14px;
    max-width: 700px;
}

.bandeau-cookies-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .bandeau-cookies {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .bandeau-cookies-actions {
        justify-content: center;
    }
}

/* --- Page "Qui sommes-nous" : établissements + équipe --- */
.mise-en-page-equipe {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: start;
}

.filtre-etablissements {
    background: var(--couleur-blanc);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 16px;
    position: sticky;
    top: 100px;
}

.titre-filtre {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--couleur-texte-clair);
    margin: 0 0 12px;
}

.filtre-etablissements ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bouton-filtre {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--rayon);
    padding: 8px 10px;
    font: inherit;
    color: var(--couleur-texte);
    cursor: pointer;
}

.bouton-filtre:hover {
    background: var(--couleur-fond);
}

.bouton-filtre.actif {
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    font-weight: bold;
}

.grille-equipe {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.carte-membre-equipe {
    background: var(--couleur-blanc);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 14px;
    text-align: center;
}

.photo-membre-equipe {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 10px;
}

.photo-membre-equipe-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    font-weight: bold;
    font-size: 32px;
}

.nom-membre-equipe { margin: 0 0 4px; font-size: 15px; }
.fonction-membre-equipe { margin: 0 0 4px; font-weight: 600; color: var(--couleur-principale); font-size: 13px; }
.etablissement-membre-equipe { margin: 0 0 4px; color: var(--couleur-texte-clair); font-size: 13px; }
.email-membre-equipe { margin: 0; font-size: 12px; word-break: break-word; }

@media (max-width: 1000px) {
    .grille-equipe {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mise-en-page-equipe {
        grid-template-columns: 1fr;
    }

    .filtre-etablissements {
        position: static;
    }

    .filtre-etablissements ul {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .bouton-filtre {
        width: auto;
    }

    .grille-equipe {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .grille-equipe {
        grid-template-columns: 1fr;
    }
}

/* --- Section héro --- */
.hero {
    background: linear-gradient(135deg, var(--couleur-principale), var(--couleur-principale-fonce));
    color: var(--couleur-blanc);
    padding: 16px 20px;
    text-align: center;
}
.hero h1 { font-size: 32px; margin: 0 0 12px; }
.hero p { font-size: 18px; max-width: 700px; margin: 0 auto; opacity: 0.95; }
.hero .bouton-plein { background: var(--couleur-blanc); color: var(--couleur-principale); border-color: var(--couleur-blanc); }
.hero .bouton-plein:hover { background: #f0f0f0; }

/* Version réduite pour les adhérents déjà connectés : même texte, même
   police, juste un bandeau beaucoup moins épais (pas de bouton "J'adhère"
   à afficher puisqu'ils sont déjà adhérents). */
.hero.hero-compact {
    padding: 16px 20px;
}
.hero.hero-compact p {
    margin-bottom: 0;
}

/* --- Section héro de l'accueil ---
   Même largeur maximale et même marge horizontale que .conteneur (le reste
   de la page), pour un alignement cohérent avec tout ce qui suit. */
.accueil-hero {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 56px var(--marge-laterale);
    padding-left: max(var(--marge-laterale), env(safe-area-inset-left, 0px));
    padding-right: max(var(--marge-laterale), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}
.accueil-hero-interieur { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.accueil-hero-texte { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.accueil-hero h1 {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: clamp(2.4rem, 5.2vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--encre);
    margin: 0;
}
.accueil-hero-soustitre { font-size: 1.15rem; font-weight: 400; color: var(--encre-douce); margin: 0; max-width: 34em; }
.accueil-hero-bouton {
    align-self: flex-start;
    display: inline-flex; align-items: center;
    min-height: 48px; padding: 0 28px;
    border-radius: 999px;
    background: var(--couleur-principale); color: var(--couleur-blanc);
    font-size: 17px; font-weight: 700;
}
.accueil-hero-bouton:hover { background: var(--couleur-principale-fonce); color: var(--couleur-blanc); }
.accueil-hero-bouton:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.accueil-hero-photo { flex: 1 1 380px; min-width: 0; }
.accueil-hero-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 32px; display: block; }
.accueil-hero.accueil-hero-compact { padding-top: 28px; padding-bottom: 32px; }
.accueil-hero.accueil-hero-compact h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }

/* --- Bandeau "dernière actualité" (mis à jour automatiquement) --- */
.accueil-victoire {
    background: #243762;
    border-radius: 16px;
    padding: 28px 28px;
    margin: 32px 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
}
.accueil-victoire-icone {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px;
    background: var(--couleur-principale);
    display: flex; align-items: center; justify-content: center;
}
.accueil-victoire-texte { flex: 999 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.accueil-victoire-etiquette { font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #ff9b9e; }
.accueil-victoire-texte h2 { font-size: 20px; font-weight: 800; color: #fff; margin: 0; line-height: 1.3; }
.accueil-victoire-bouton { flex: 0 0 auto; background: transparent; color: #fff; border-color: #fff; }
.accueil-victoire-bouton:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* --- Carrousel des dernières actualités --- */
/* Encadré dans un vrai bloc (même esprit que .accueil-victoire), plutôt que
   posé à même le fond de la page — plus net, et les cartes défilent bien
   centrées à l'intérieur au lieu d'aller jusqu'au bord de l'écran (ce qui
   provoquait d'ailleurs un léger débordement horizontal sur certains
   appareils). */
.accueil-carrousel {
    margin: 40px 0;
}
.accueil-carrousel-etiquette {
    display: block;
    font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--couleur-principale);
    margin-bottom: 8px;
}
.accueil-carrousel-titre {
    font-size: 24px; font-weight: 800; color: var(--couleur-texte); margin: 0;
}
.accueil-carrousel-cadre { position: relative; overflow: hidden; border-radius: 16px; margin-top: 16px; }
.accueil-carrousel-fleche {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte);
    font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
.accueil-carrousel-fleche:hover { opacity: 1; }
.accueil-carrousel-fleche-gauche { left: 10px; }
.accueil-carrousel-fleche-droite { right: 10px; }
.accueil-carrousel-piste {
    display: flex; gap: 0;
    transition: transform 0.7s ease;
}
.accueil-carrousel-carte {
    flex: 0 0 33.333%;
    min-width: 240px;
    text-decoration: none; color: inherit;
    background: var(--couleur-blanc);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    display: flex; flex-direction: column;
}
/* L'image s'affiche en entier, avec ses proportions d'origine (jamais rognée) :
   "height: auto" est indispensable, sans lui l'attribut height="" du HTML
   imposerait une hauteur fixe et l'image serait coupée. */
.accueil-carrousel-carte img {
    display: block;
    width: 100%;
    height: auto;
}
/* Carte sans image : bloc de couleur au même format 16:9 */
.accueil-carrousel-carte-sans-image {
    width: 100%; aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--couleur-principale), var(--couleur-principale-fonce));
    display: flex; align-items: center; justify-content: center;
}
.accueil-carrousel-carte-sans-image span {
    color: #fff; font-weight: 700; font-size: 14px; text-align: center; padding: 0 16px;
}
.accueil-carrousel-carte-texte { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.accueil-carrousel-carte-texte h3 { font-size: 15px; font-weight: 700; color: var(--couleur-texte); line-height: 1.35; margin: 0; }
.accueil-carrousel-carte {
    flex: 0 0 33.333%;
    min-width: 0;
}
@media (max-width: 900px) {
    .accueil-carrousel-carte { flex-basis: 50%; }
}
@media (max-width: 640px) {
    .accueil-carrousel-carte { flex-basis: 100%; }
}
/* 3 actualités ou moins = pas de boucle (voir $carrouselEnBoucle en PHP) :
   toutes les cartes restent TOUJOURS visibles en même temps, à largeur
   égale, sur tout écran de plus de 640px. Sans ce correctif, le palier
   "2 cartes visibles" (tablette) laissait dépasser un bout de la 3ème carte
   suivante, qui semblait coupée/cassée plutôt que sciemment cachée — un
   aperçu de carte suivante n'a de sens que s'il y a VRAIMENT plus de
   contenu que de place (plus de 3 actualités, où ça redevient un vrai
   carrousel avec flèches et défilement). */
@media (min-width: 641px) {
    .accueil-carrousel-piste[data-nombre-reel="1"] .accueil-carrousel-carte { flex-basis: 100%; }
    .accueil-carrousel-piste[data-nombre-reel="2"] .accueil-carrousel-carte { flex-basis: 50%; }
    .accueil-carrousel-piste[data-nombre-reel="3"] .accueil-carrousel-carte { flex-basis: 33.333%; }
}

/* --- Témoignage vidéo --- */
/* Texte (aligné à gauche) au-dessus, vidéo centrée en dessous — toujours
   dans cet ordre, quel que soit l'écran. */
.accueil-temoignage {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.accueil-temoignage-texte { text-align: left; }
.accueil-temoignage-etiquette { display: block; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--couleur-principale); margin-bottom: 8px; }
.accueil-temoignage-texte h2 { font-size: 24px; font-weight: 800; color: var(--couleur-texte); margin: 0; }
.accueil-temoignage-video {
    width: 100%;
    margin: 0 auto;
}
.accueil-temoignage-video iframe {
    width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; border: none; display: block;
}
/* Cadre agrandi sur ordinateur — inchangé (pleine largeur du contenu) sur
   mobile/application. */
@media (min-width: 781px) {
    .accueil-temoignage-video {
        max-width: 800px;
    }
}

/* --- Mur des délégués (accueil) --- */
.accueil-mur { background: var(--fond-doux); padding: 64px 0 72px; }
.accueil-mur-interieur {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 var(--marge-laterale);
    padding-left: max(var(--marge-laterale), env(safe-area-inset-left, 0px));
    padding-right: max(var(--marge-laterale), env(safe-area-inset-right, 0px));
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.accueil-mur-entete { display: flex; flex-direction: column; gap: 8px; }
.accueil-mur-titre {
    margin: 0;
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    line-height: 1.1;
    color: var(--encre);
}
.accueil-mur-intro { margin: 0; max-width: 36em; color: var(--encre-douce); }

/* Pastilles de filtre par région (affichées par le script, voir index.php) */
.accueil-mur-filtres { display: flex; flex-wrap: wrap; gap: 10px; }
.accueil-mur-filtres[hidden] { display: none; }
.accueil-pastille {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1.5px solid #6F7F9C;
    background: var(--couleur-blanc);
    color: var(--encre);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.accueil-pastille[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--couleur-blanc); }
.accueil-pastille:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }

/* Grille de portraits : 2 par ligne sur téléphone, autant que possible ensuite */
.accueil-mur-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
@media (min-width: 640px) {
    .accueil-mur-grille { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 28px 20px; }
}
/* Adhérent connecté (peu de délégués, ceux de son établissement) : centrés */
.accueil-mur-grille-centree { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 16px; }
.accueil-mur-grille-centree .mur-tuile { width: calc(50% - 8px); }
@media (min-width: 640px) {
    .accueil-mur-grille-centree { gap: 28px 20px; }
    .accueil-mur-grille-centree .mur-tuile { width: 168px; }
}

.mur-tuile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mur-tuile[hidden] { display: none; }
.mur-tuile-lien { display: flex; flex-direction: column; gap: 12px; color: var(--encre); text-decoration: none; }
.mur-tuile-lien:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 24px; }
a.mur-tuile-lien:hover .mur-tuile-nom { text-decoration: underline; }
.mur-tuile-portrait { aspect-ratio: 4 / 5; border-radius: 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mur-tuile-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mur-tuile-initiales { font-family: var(--police-titre); font-weight: 800; font-size: clamp(2rem, 6vw, 2.75rem); color: var(--encre); }
/* Teinte du portrait selon la région : redondante avec le texte, purement décorative */
.mur-teinte-0 { background: #FBE3D4; }
.mur-teinte-1 { background: #F2A0A3; }
.mur-teinte-2 { background: #C9E3A3; }
.mur-teinte-3 { background: #DCE3EE; }
.mur-tuile-texte { display: flex; flex-direction: column; min-width: 0; }
.mur-tuile-nom { font-weight: 700; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.mur-tuile-detail { font-size: 15px; color: var(--encre-douce); overflow-wrap: anywhere; }
.mur-tuile-tel {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px;
    font-size: 15px; font-weight: 600;
    color: var(--encre); text-decoration: none;
}
.mur-tuile-tel:hover { text-decoration: underline; }
.mur-tuile-tel:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 6px; }

/* Texte réservé aux lecteurs d'écran (annonce du nombre de délégués affichés) */
.sr-seulement { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --- Conteneur général --- */
.conteneur {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 40px var(--marge-laterale);
    padding-left: max(var(--marge-laterale), env(safe-area-inset-left, 0px));
    padding-right: max(var(--marge-laterale), env(safe-area-inset-right, 0px));
}

.titre-section {
    font-size: 24px;
    margin-bottom: 24px;
    border-left: 4px solid var(--couleur-principale);
    padding-left: 12px;
}

/* --- Grille de cartes (actualités / documents) --- */
.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
/* Sur mobile, une seule carte par ligne, et elle occupe toute la largeur de
   l'écran (pas celle, plus étroite, du bloc de contenu avec ses marges) —
   on "sort" temporairement des marges de .conteneur avec des marges
   négatives équivalentes. */
@media (max-width: 640px) {
    .grille-cartes {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-left: -20px;
        margin-right: -20px;
    }
    .grille-cartes .carte {
        border-radius: 0;
    }
}

.carte {
    background: var(--couleur-blanc);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Lien invisible qui recouvre toute la carte (au lieu d'envelopper la carte
   dans un <a>, ce qui interdirait d'y mettre un autre lien comme "PDF joint"
   — un <a> ne peut pas contenir un autre <a> en HTML valide). */
.carte-lien-couverture {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Les liens réellement à l'intérieur du contenu (ex: PDF joint) doivent
   passer au-dessus du lien de couverture pour rester cliquables. */
.carte-contenu a {
    position: relative;
    z-index: 2;
}

.carte img { height: 160px; object-fit: cover; width: 100%; }

.carte-contenu { padding: 16px; flex: 1; display: flex; flex-direction: column; }

.carte-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    width: fit-content;
}
.badge-public { background: #e6f1fb; color: #0c447c; }
.badge-adherent { background: #e1f5ee; color: #085041; }

.carte-titre { font-size: 16px; margin: 0 0 8px; }
.carte-date { font-size: 13px; color: var(--couleur-texte-clair); margin-top: auto; padding-top: 10px; }

/* Première ligne d'une page : le chapitre à gauche, le bandeau "Partager" tout
   à droite (il passe sous le chapitre, toujours à droite, si la place manque). */
.page-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 0 16px;
}
.page-chapitre {
    margin: 0;
    font-size: 13px;
    color: var(--couleur-texte-clair);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Bandeau "Partager" (voir page.php) : fond rouge pour un visiteur public ou
   un adhérent OET/TSM, bleu pour un adhérent Cadre — même logique de couleur
   que le bandeau du haut, mais toujours coloré (jamais blanc, même pour un
   visiteur non connecté). Aussi haut que ses icônes (28 px, zone tactile
   comprise) : pas de marge verticale autour. */
.partage-reseaux {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    max-width: 100%;
    margin-left: auto;
    padding: 0 10px 0 12px;
    border-radius: var(--rayon);
}
.partage-reseaux-oetam { background: #b31217; }
.partage-reseaux-cadre { background: #0c447c; }
.partage-reseaux-texte { color: #fff; font-weight: 700; font-size: 14px; line-height: 1; margin-right: 4px; }
.partage-reseaux-icone {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
}
.partage-reseaux-icone img,
.partage-reseaux-icone svg {
    width: 22px; height: 22px;
    display: block;
    object-fit: contain;
}
/* Sur téléphone, le mot "Partager :" est masqué (il reste lu par les lecteurs
   d'écran) pour que le bandeau tienne sur la même ligne que le chapitre, tout
   en haut à droite : les icônes se comprennent d'elles-mêmes. */
@media (max-width: 460px) {
    .partage-reseaux-texte {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .partage-reseaux { padding: 0 6px; }
}

/* --- Pages du menu : titre, puis succession de bandes pleine largeur ---
   Le fond de chaque bande occupe tout l'écran ; son contenu reste dans
   --largeur-max, et le texte courant dans une largeur de lecture confortable. */
.page-entete { background: var(--couleur-blanc); }
.page-bande { background: var(--couleur-blanc); }
.page-bande-douce { background: var(--fond-doux); }
.page-bande-blanche { background: var(--couleur-blanc); }
.page-bande-interieur {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: clamp(44px, 7vw, 72px) var(--marge-laterale);
    padding-left: max(var(--marge-laterale), env(safe-area-inset-left, 0px));
    padding-right: max(var(--marge-laterale), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}
.page-entete-interieur {
    padding-top: 28px;
    padding-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.page-entete-interieur > .page-haut { align-self: stretch; margin: 0; }
.page-titre {
    margin: 0;
    max-width: 20em;
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--encre);
}
.page-date { margin: 0; padding: 0; }
.page-image { display: block; max-width: min(100%, 880px); height: auto; border-radius: var(--rayon); margin-top: 8px; }

/* Texte courant : jamais plus large qu'une ligne de lecture confortable ; les
   images, tableaux, vidéos et blocs de mise en forme gardent toute la largeur. */
.contenu-actualite > p,
.contenu-actualite > ul,
.contenu-actualite > ol,
.contenu-actualite > blockquote,
.contenu-actualite > h2,
.contenu-actualite > h3,
.contenu-actualite > h4 { max-width: 46em; }
.page-bande-interieur.contenu-actualite { font-size: 17px; line-height: 1.75; }
/* ":where" : priorité minimale, pour ne jamais écraser la taille propre à une image (logos de la carte, portraits...) */
:where(.page-bande-interieur) img { max-width: 100%; height: auto; }
.page-bande-interieur > :first-child { margin-top: 0; }
.page-bande-interieur > :last-child { margin-bottom: 0; }
.page-bande-interieur h2,
.page-bande-titre {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    line-height: 1.1;
    color: var(--encre);
    margin: 0 0 24px;
}
.page-bande-interieur h3 { font-size: 1.35rem; color: var(--encre); margin: 32px 0 12px; }

/* Bande bleu nuit : message à retenir (titre de niveau 2 marqué dans l'éditeur) */
.page-bande-sombre { background: var(--encre); color: var(--couleur-blanc); }
.page-bande-sombre h2,
.page-bande-sombre h3 { color: var(--couleur-blanc); }
.page-bande-sombre a { color: var(--couleur-blanc); text-decoration: underline; }
.page-bande-sombre h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.06; text-wrap: balance; }

/* Documents joints */
.page-documents { display: flex; flex-direction: column; border-top: 1.5px solid var(--encre); }
.page-document {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 24px; padding: 20px 0; border-bottom: 1.5px solid #DCE3EE;
}
.page-document-nom { display: flex; align-items: center; gap: 16px; min-width: 0; font-weight: 600; color: var(--encre); }
.page-document-nom svg { flex: 0 0 auto; }
.page-document-nom span { overflow-wrap: anywhere; }
.page-document-lien {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
    border-radius: 999px; border: 2px solid var(--encre);
    color: var(--encre); font-weight: 700; font-size: 16px;
}
.page-document-lien:hover { background: var(--encre); color: var(--couleur-blanc); }
.page-document-lien:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }

/* Invitation à adhérer (visiteurs non connectés seulement) */
.page-bande-cta { background: var(--couleur-principale); color: var(--couleur-blanc); }
.page-bande-cta .page-bande-interieur { padding-top: 56px; padding-bottom: 56px; }
.page-cta-interieur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.page-cta-texte { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.page-cta-texte p { margin: 0; font-size: 1.1rem; }
.page-bande-cta .page-cta-titre {
    margin: 0; max-width: 16em; color: var(--couleur-blanc);
    font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.08; text-wrap: balance;
}
.page-cta-bouton {
    display: inline-flex; align-items: center; min-height: 52px; padding: 0 32px;
    border-radius: 999px; background: var(--couleur-blanc); color: var(--couleur-principale);
    font-weight: 700; font-size: 18px;
}
.page-cta-bouton:hover { background: var(--fond-doux); color: var(--couleur-principale-fonce); }
.page-cta-bouton:focus-visible { outline: 3px solid var(--couleur-blanc); outline-offset: 3px; }

/* Aperçu "façon presse" d'une page réservée à laquelle le visiteur n'a pas
   accès (voir page.php) : une ligne de texte réelle, puis un effet de flou
   purement décoratif (aucun vrai texte caché dedans — juste des barres
   suggérant la suite de l'article), et l'invitation à se connecter/adhérer.
   Pensé pour tenir sans défiler : pas d'image, pas de pièces jointes. */
.apercu-reserve {
    margin-top: 4px;
}
.apercu-reserve-texte {
    font-size: 16px;
    line-height: 1.6;
    color: var(--couleur-texte);
    margin: 0;
}
.apercu-reserve-flou {
    height: 54px;
    margin-top: 10px;
    border-radius: 4px;
    background: repeating-linear-gradient(
        to bottom,
        var(--couleur-texte) 0px,
        var(--couleur-texte) 9px,
        transparent 9px,
        transparent 20px
    );
    opacity: 0.18;
    filter: blur(3px);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-image: linear-gradient(to bottom, black, transparent);
}
.apercu-reserve-cta {
    margin-top: 18px;
    padding: 20px;
    background: var(--couleur-fond-alterne, #f4f4f2);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    text-align: center;
}
.apercu-reserve-cta p {
    margin: 0 0 14px;
    font-weight: 600;
    font-size: 15px;
}
.apercu-reserve-boutons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Ligne "🔒 ... réservée aux adhérents" + bouton "Se connecter", sur une
   seule ligne (se replie en dessous uniquement si la largeur manque). */
.apercu-reserve-ligne-connexion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Bloc d'invitation à adhérer : texte à gauche, encart à droite — les deux
   colonnes s'étirent à la même hauteur (celle du texte de gauche, qui est
   presque toujours le plus grand des deux) grâce à align-items: stretch,
   la valeur par défaut d'un conteneur flex. */
.apercu-reserve-adhesion {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    text-align: left;
}
.apercu-reserve-adhesion-texte {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    /* Répartit le titre et les 3 lignes sur toute la hauteur disponible
       (celle du cadre de droite, grâce à align-items: stretch du parent) au
       lieu de les laisser tassés en haut. */
    justify-content: space-between;
}
.apercu-reserve-adhesion-texte h3 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 17px;
    margin: 0;
    color: var(--couleur-principale);
}
.apercu-reserve-adhesion-texte p {
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
}
.apercu-reserve-adhesion-encart {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    background: var(--couleur-blanc);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 18px;
    text-align: center;
}
.apercu-reserve-adhesion-encart p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 640px) {
    .apercu-reserve-adhesion {
        flex-direction: column;
    }
}
.carte-extrait { font-size: 14px; color: var(--couleur-texte-clair); }

/* --- Formulaires --- */
.page-connexion {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.carte-connexion {
    background: var(--couleur-blanc);
    padding: 32px;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    max-width: 400px;
    width: 100%;
}
.carte-connexion h1 { margin-top: 0; font-size: 22px; }

form label { display: block; margin-top: 14px; font-weight: 500; font-size: 14px; }
form input, form textarea, form select {
    width: 100%;
    padding: 10px;
    margin-top: 4px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    font-size: 15px;
}
form button {
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    border: none;
    border-radius: var(--rayon);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}
form button:hover { background: var(--couleur-principale-fonce); }

.message-erreur { color: #791f1f; background: #fcebeb; padding: 10px; border-radius: var(--rayon); font-size: 14px; }
.message-succes { color: #0a6b2d; background: #eafaf0; border: 1px solid #0a6b2d; padding: 10px; border-radius: var(--rayon); font-size: 14px; }
.lien-secondaire { text-align: center; font-size: 14px; margin-top: 16px; }

/* --- Pied de page --- */
.pied-de-page {
    background: #23397a;
    color: #ccc;
    padding: 40px var(--marge-laterale) 20px;
    padding-left: max(var(--marge-laterale), env(safe-area-inset-left, 0px));
    padding-right: max(var(--marge-laterale), env(safe-area-inset-right, 0px));
    margin-top: 60px;
    font-size: 14px;
}
.pied-de-page-conteneur {
    max-width: var(--largeur-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.pied-de-page a { color: #ccc; }

.pied-de-page-suivez-nous-titre {
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 0.08em;
    margin: 18px 0 10px;
}
.pied-de-page-reseaux-sociaux {
    display: flex;
    gap: 12px;
}
.pied-de-page-reseaux-sociaux a {
    display: flex;
    opacity: 0.9;
}
.pied-de-page-reseaux-sociaux a:hover {
    opacity: 1;
}
.pied-de-page-reseaux-sociaux img {
    height: 26px;
    width: auto;
}

/* Email + région empilés dans une colonne étroite à gauche, bouton "Envoyer"
   à droite, aussi haut que les deux champs réunis (pas plus loin de l'oeil,
   pas de grand vide entre les champs et le bouton). */
.pied-de-page-bulletin-formulaire {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    max-width: 280px;
}
.pied-de-page-bulletin-champs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.pied-de-page-bulletin-formulaire input,
.pied-de-page-bulletin-formulaire select {
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 1px solid #555;
    background: #2a2a2a;
    color: #fff;
    border-radius: var(--rayon);
    padding: 2px 12px;
    line-height: 1.2;
    font-size: 14px;
}
.pied-de-page-bulletin-formulaire input::placeholder {
    color: #999;
}
/* Certains navigateurs dessinent la liste déroulante ouverte d'un <select>
   avec les couleurs par défaut du système, sans respecter le CSS du champ
   lui-même : on fixe explicitement la couleur de chaque option pour rester
   cohérent avec le champ email juste au-dessus. */
.pied-de-page-bulletin-formulaire select option {
    background: #2a2a2a;
    color: #fff;
}
/* Tant qu'aucun établissement n'est choisi (option vide, champ "required"
   donc invalide dans cet état), le mot "Établissement" s'affiche en gris,
   comme le texte d'exemple du champ email juste au-dessus — redevient
   blanc dès qu'un vrai établissement est sélectionné. */
.pied-de-page-bulletin-formulaire select:invalid,
.pied-de-page-bulletin-formulaire select:has(option[value=""]:checked) {
    color: #999;
}
/* Cases à cocher du bulletin (je suis salarié / j'accepte de recevoir) */
.pied-de-page-bulletin-options { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100%; }
.pied-de-page-bulletin-formulaire .pied-de-page-bulletin-case {
    display: flex; align-items: flex-start; gap: 8px; margin: 0;
    font-size: 12px; line-height: 1.35; color: #cfcfcf; cursor: pointer;
}
.pied-de-page-bulletin-formulaire .pied-de-page-bulletin-case input[type="checkbox"] {
    width: 16px; height: 16px; min-width: 16px; margin: 1px 0 0; padding: 0; flex-shrink: 0; accent-color: var(--couleur-principale);
}
.pied-de-page-bulletin-case a { color: #fff; text-decoration: underline; }
.pied-de-page-bulletin-formulaire button {
    flex-shrink: 0;
    margin: 0; /* écrase le "margin-top: 20px" de la règle générique "form button", qui décalait ce bouton vers le bas */
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    border: none;
    border-radius: var(--rayon);
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pied-de-page-bulletin-formulaire button:hover {
    background: var(--couleur-principale-fonce);
}

@media (max-width: 768px) {
    /* Sur mobile, la loupe du bandeau du haut suffit : celle placée dans le
       menu burger (pensée pour la ligne de menu d'ordinateur) est cachée
       pour éviter le doublon quand le menu plein écran s'ouvre. */
    .menu-mobile .bouton-ouvrir-recherche {
        display: none;
    }

    .pied-de-page-conteneur > div {
        flex: 1 1 100%;
    }
    .pied-de-page-bulletin-formulaire {
        max-width: none;
        width: 100%;
    }
    .pied-de-page-bulletin-formulaire input,
    .pied-de-page-bulletin-formulaire select {
        font-size: 16px;
    }
    .pied-de-page-bulletin-texte {
        max-width: none;
    }
}

.pied-de-page-bulletin-message {
    font-size: 13px;
    color: #fff;
    margin: 10px 0 0;
}
.pied-de-page-bulletin-texte {
    font-size: 13px;
    color: #ccc;
    line-height: 1.5;
    margin: 10px 0 0;
    max-width: 280px;
}
.pied-de-page a:hover { color: var(--couleur-blanc); }
.pied-de-page-signature {
    max-width: var(--largeur-max);
    margin: 20px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    color: #fff;
}
.pied-de-page-copyright {
    max-width: var(--largeur-max);
    margin: 12px auto 0;
    padding-top: 12px;
    font-size: 12px;
    color: #b8c2e0;
    text-align: center;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .hero h1 { font-size: 24px; }

    /* Sur mobile, la hauteur fixe et l'étirement vertical du bandeau
       (pensés pour le logo pleine hauteur sur ordinateur) ne s'appliquent
       plus : le logo décide lui-même de la hauteur du bandeau. */
    /* Pas de marge verticale : la hauteur du bandeau correspond exactement
       à celle du logo, sans espace vide au-dessus ni en-dessous. */
    .entete-conteneur {
        height: auto;
        align-items: center;
        padding: 0 14px;
    }

    /* Logo dimensionné par rapport à la largeur de l'écran, réduit de 30%
       (25.08vw -> 17.56vw), ce qui réduit d'autant l'épaisseur du bandeau. */
    .logo-image {
        height: auto;
        width: 17.56vw;
    }

    .bouton-menu-mobile {
        display: flex;
    }

    /* Le menu (liens + boutons de connexion) est masqué par défaut sur
       mobile et ne s'affiche, en pleine largeur sous le logo, que
       lorsqu'on clique sur le bouton burger (classe "ouvert" ajoutée en JS). */
    /* Le menu, une fois ouvert, recouvre TOUT le reste de l'écran (plein
       écran, fond blanc) : seuls le bandeau du haut et ce menu restent
       visibles/utilisables tant qu'il est ouvert (voir le JS, qui calcule
       "top" pour qu'il commence pile sous le bandeau, et bloque le défilement
       du reste de la page pendant ce temps). */
    .menu-mobile {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 16px;
        padding: 20px 20px 32px;
    }

    .menu-mobile.ouvert {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--couleur-blanc);
        z-index: 900;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .navigation {
        flex-direction: column;
        gap: 4px;
        width: 100%;
    }

    /* Sur mobile, le sous-menu s'insère dans le flux (accordéon), il ne se
       superpose pas comme sur ordinateur. */
    .navigation-lien-chapitre {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px 0;
    }
    .navigation-item-chapitre.ouvert .navigation-sous-menu {
        margin: 0 0 8px 12px;
    }
    .navigation-sous-menu a,
    .navigation-sous-menu-vide {
        padding: 8px 0;
        font-size: 15px;
    }

    .entete-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    /* --- Bouton J'adhère centré entre le logo et le groupe recherche/burger --- */
    /* position:relative sert de repère pour le lien "Espace adhérents"
       ci-dessous, placé en position absolue pour NE PAS agrandir la
       hauteur du bandeau (qui doit rester égale à celle du logo). */
    .entete-mobile-centre {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-width: 0;
        position: relative;
    }
    .lien-espace-adherents-mobile-barre {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 10px;
        color: var(--couleur-texte-clair);
        text-decoration: underline;
        text-transform: uppercase;
        white-space: nowrap;
        background: var(--couleur-blanc);
        padding: 2px 8px 4px;
        border-radius: 0 0 var(--rayon) var(--rayon);
    }
    .bouton-adhere-mobile-barre {
        background: var(--couleur-principale);
        color: var(--couleur-blanc);
        font-size: 13px;
        font-weight: bold;
        padding: 6px 14px;
        border-radius: var(--rayon);
        white-space: nowrap;
        text-decoration: none;
    }

    /* Espace adhérents / J'adhère maintenant restent visibles dans le
       bandeau du haut (centre) même menu burger ouvert : pas besoin de les
       répéter en bas du menu, contrairement à l'affichage ordinateur. */
    .boutons-adhesion-menu {
        display: none;
    }

    /* Même chose pour un adhérent connecté : "Bonjour, [prénom]" reste
       visible dans le bandeau du haut (juste avant la loupe), pas besoin de
       le répéter aussi en bas du menu burger ouvert. */
    .lien-mon-compte {
        display: none;
    }

    /* --- Groupe recherche (icône) + burger, à droite --- */
    .entete-mobile-droite {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    /* Lien "Bonjour, [prénom]", affiché seulement si connecté, juste avant
       la loupe. Le texte se tronque plutôt que de casser la mise en page
       si le prénom est long et la place manque. */
    .lien-mon-compte-mobile-barre {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--couleur-texte);
        font-size: 12px;
        max-width: 90px;
        overflow: hidden;
    }
    .lien-mon-compte-mobile-barre svg {
        flex-shrink: 0;
    }
    .lien-mon-compte-mobile-barre span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   Page "Pourquoi adhérer" : page d'atterrissage animée (préfixe pa-)
   Placé en fin de feuille pour l'emporter sur les règles génériques
   des bandes (.page-bande-*). Toutes les animations vivent dans
   "prefers-reduced-motion: no-preference" : sans mouvement, la page
   s'affiche directement dans son état final.
   ============================================================ */
.pa-avantages { scroll-margin-top: 90px; }

/* ---- 1. Héro ---- */
.pa-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--encre); color: var(--couleur-blanc); }
.pa-hero::before,
.pa-hero::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.09);
}
.pa-hero::before { width: min(70vw, 900px); aspect-ratio: 1; right: -14vw; top: -22vw; }
.pa-hero::after  { width: min(44vw, 580px); aspect-ratio: 1; right: 5vw; top: -4vw; border-color: rgba(242, 160, 163, 0.18); }
.pa-hero-interieur {
    display: flex; flex-wrap: wrap; align-items: center; gap: 44px 56px;
    padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(56px, 9vw, 112px);
}
.pa-hero-texte { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.pa-titre {
    margin: 0; display: flex; flex-direction: column; gap: 0.04em;
    font-family: var(--police-titre); font-weight: 800;
    font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 1; letter-spacing: -0.035em;
    color: var(--couleur-blanc); text-wrap: balance;
}
.pa-titre-ligne { display: block; }
.pa-titre-ligne-douce { color: #DCE3EE; }
/* Chaque mot est un bloc en ligne (pour pouvoir l'animer) ; l'espace entre deux mots vient du HTML */
.pa-mot { display: inline-block; }
.pa-sous-titre { margin: 0; max-width: 34em; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: #DCE3EE; }
.pa-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.pa-bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; padding: 0 30px; border-radius: 999px;
    border: 2px solid transparent; font-size: 19px; font-weight: 700;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.pa-bouton:hover { transform: translateY(-2px); }
.pa-bouton:focus-visible { outline: 3px solid var(--couleur-blanc); outline-offset: 3px; }
.pa-bouton-plein { background: var(--rouge-vif); color: var(--couleur-blanc); }
.pa-bouton-plein:hover { background: #F0524F; color: var(--couleur-blanc); }
.pa-bouton-contour { border-color: rgba(255, 255, 255, 0.7); color: var(--couleur-blanc); }
.pa-bouton-contour:hover { background: rgba(255, 255, 255, 0.12); color: var(--couleur-blanc); }

/* Visages décoratifs (délégués mis en avant sur l'accueil) */
.pa-hero-visuel { flex: 0 1 440px; min-width: 280px; max-width: 520px; margin-inline: auto; position: relative; min-height: clamp(300px, 38vw, 480px); }
.pa-visage {
    --rot: 0deg;
    position: absolute; width: 46%; aspect-ratio: 4 / 5; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 5px solid var(--couleur-blanc); border-radius: 28px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    transform: rotate(var(--rot));
}
.pa-visage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-visage-initiales { font-family: var(--police-titre); font-weight: 800; font-size: clamp(2rem, 6vw, 3.4rem); color: var(--encre); }
.pa-visage-0 { --rot: -6deg; left: 2%; top: 10%; }
.pa-visage-1 { --rot: 5deg; right: 2%; top: 0; }
.pa-visage-2 { --rot: -2deg; left: 27%; bottom: 0; }

/* ---- 2. Bandeau défilant ---- */
.pa-ticker { background: var(--couleur-principale); color: var(--couleur-blanc); overflow: hidden; }
.pa-ticker-fenetre { overflow: hidden; padding: 20px 0 8px; }
.pa-ticker-piste { display: flex; width: max-content; }
.pa-ticker-liste { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.pa-ticker-liste li {
    display: flex; align-items: center; white-space: nowrap; padding-right: 40px;
    font-family: var(--police-titre); font-weight: 800; letter-spacing: -0.01em;
    font-size: clamp(1.7rem, 3.6vw, 2.8rem);
}
.pa-ticker-liste li::after {
    content: ""; width: 0.36em; height: 0.36em; margin-left: 40px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.55);
}

/* ---- 3. Chiffres ---- */
.pa-chiffres-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 40px 56px; }
.pa-chiffre-valeur {
    margin: 0;
    font-family: var(--police-titre); font-weight: 800; line-height: 1; letter-spacing: -0.03em;
    font-size: clamp(3.4rem, 8vw, 6.4rem); color: var(--couleur-principale);
}
.pa-chiffre-prefixe { margin-right: 0.3em; font-size: 0.32em; letter-spacing: 0; font-weight: 700; color: var(--encre); }
.pa-chiffre-legende { margin: 14px 0 0; max-width: 22em; color: var(--encre); }

/* ---- Titres de sections ---- */
h2.pa-titre-section {
    margin: 0 0 40px; max-width: 20em; text-wrap: balance;
    font-family: var(--police-titre); font-weight: 800; color: var(--encre);
    font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.02em;
}

/* ---- 4. Avantages ---- */
.pa-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.pa-carte-ancre { display: flex; }
.pa-carte {
    flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 30px;
    background: var(--couleur-blanc); border: 1.5px solid #DCE3EE; border-radius: 28px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pa-carte:hover { transform: translateY(-6px); border-color: var(--encre); box-shadow: 0 18px 36px rgba(31, 42, 68, 0.14); }
.pa-carte-icone { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 18px; color: var(--encre); }
.pa-carte h3 { margin: 0; font-size: 1.3rem; line-height: 1.2; color: var(--encre); }
.pa-carte p { margin: 0; color: var(--encre-douce); }

/* ---- 5. Escalier d'engagement ---- */
.pa-escalier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; }
.pa-marche-ancre { display: flex; }
.pa-marche-ancre-1 { min-height: 280px; }
.pa-marche-ancre-2 { min-height: 380px; }
.pa-marche-ancre-3 { min-height: 480px; }
.pa-marche { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; border-radius: 28px; }
.pa-marche h3 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1; color: inherit; }
.pa-marche p { margin: 0; }
.pa-marche-1 { background: #DCE3EE; color: var(--encre); }
.pa-marche-2 { background: #F2A0A3; color: var(--encre); }
.pa-marche-3 { background: var(--couleur-principale); color: var(--couleur-blanc); }

/* ---- 6. Obligations (bande bleu nuit) ---- */
.pa-obligations-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 72px; align-items: center; }
h2.pa-obligations-titre {
    margin: 0 0 20px; color: var(--couleur-blanc); text-wrap: balance;
    font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.02em;
}
.pa-obligations-texte { margin: 0; max-width: 30em; font-size: 1.15rem; color: #DCE3EE; }
.pa-obligations-phrase {
    margin: 0; text-wrap: balance; color: var(--couleur-blanc);
    font-family: var(--police-titre); font-weight: 800; letter-spacing: -0.02em;
    font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.08;
}

/* ---- 7. Coût et simulateur ---- */
.pa-cout-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px 64px; align-items: start; }
.pa-cout-texte p { margin: 0 0 16px; max-width: 34em; }
.pa-cout-texte .pa-cout-gros {
    margin: 0 0 20px; color: var(--couleur-principale);
    font-family: var(--police-titre); font-weight: 800; letter-spacing: -0.02em;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.08;
}
.pa-simulateur { background: var(--couleur-blanc); border-radius: 28px; padding: 32px; box-shadow: 0 10px 30px rgba(31, 42, 68, 0.1); }
.pa-simulateur-titre { margin: 0 0 18px; font-size: 1.4rem; color: var(--encre); }
.pa-simulateur-label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--encre); }
.pa-simulateur-champ {
    width: 100%; min-height: 56px; padding: 0 16px; box-sizing: border-box;
    border: 2px solid var(--encre); border-radius: 14px; background: var(--couleur-blanc);
    color: var(--encre); font-size: 22px; font-weight: 600;
}
.pa-simulateur-champ:focus-visible { outline: 3px solid var(--couleur-principale); outline-offset: 2px; }
.pa-simulateur-resultat { margin-top: 22px; min-height: 96px; }
.pa-simulateur-vide { margin: 0; color: var(--encre-douce); }
.pa-barre { display: flex; height: 18px; margin: 0 0 18px; overflow: hidden; border-radius: 999px; }
.pa-barre-impot { flex: 66; background: var(--encre); transform-origin: left center; }
.pa-barre-reste { flex: 34; background: var(--couleur-principale); transform-origin: left center; }
.pa-simulateur-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 8px; color: var(--encre); }
.pa-simulateur-ligne strong { font-family: var(--police-titre); font-weight: 800; font-size: 1.5rem; }
.pa-simulateur-ligne-reste { padding-top: 10px; border-top: 1.5px solid #DCE3EE; font-weight: 700; }
.pa-simulateur-ligne-reste strong { font-size: 2.2rem; color: var(--couleur-principale); }
.pa-simulateur-note { margin: 16px 0 0; font-size: 14px; color: var(--encre-douce); }

/* ---- 8. FAQ ---- */
.pa-faq-liste { max-width: 60rem; border-top: 1.5px solid var(--encre); }
.pa-faq-element { border-bottom: 1.5px solid #DCE3EE; }
.pa-faq-element summary {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    min-height: 44px; padding: 22px 0; list-style: none; cursor: pointer;
    font-family: var(--police-titre); font-weight: 600; color: var(--encre);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
}
.pa-faq-element summary::-webkit-details-marker { display: none; }
.pa-faq-element summary:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.pa-faq-icone { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border: 2px solid var(--encre); border-radius: 50%; }
.pa-faq-icone::before,
.pa-faq-icone::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px;
    background: var(--encre); transform: translate(-50%, -50%);
}
.pa-faq-icone::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.25s ease; }
.pa-faq-element[open] .pa-faq-icone::after { transform: translate(-50%, -50%) rotate(0deg); }
.pa-faq-element p { margin: 0 0 24px; max-width: 46em; color: var(--encre-douce); }

/* ---- 9. Appel final ---- */
.page-bande-cta .pa-final-interieur {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 56px;
    padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 112px);
}
.pa-final-texte { flex: 1 1 480px; min-width: 0; }
.pa-final-texte p { margin: 0; max-width: 34em; font-size: 1.2rem; }
.page-bande-cta h2.pa-final-titre {
    margin: 0 0 16px; max-width: 14em; color: var(--couleur-blanc); text-wrap: balance;
    font-size: clamp(2.2rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.03em;
}
.pa-final-bouton {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 64px; padding: 0 44px; border-radius: 999px;
    background: var(--couleur-blanc); color: var(--couleur-principale);
    font-size: 22px; font-weight: 800;
}
.pa-final-bouton:hover { background: var(--fond-doux); color: var(--couleur-principale-fonce); }
.pa-final-bouton:focus-visible { outline: 3px solid var(--couleur-blanc); outline-offset: 5px; }
.pa-final-bouton::after {
    content: ""; position: absolute; inset: -6px; border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.85); opacity: 0; pointer-events: none;
}

/* Une page qui se termine par une bande pleine largeur touche directement le pied de page
   (sinon une bande grise de 60 px s'intercale entre les deux). */
.pied-colle .pied-de-page { margin-top: 0; }

/* ---- Mise en page petits écrans ---- */
@media (max-width: 900px) {
    .pa-escalier { grid-template-columns: 1fr; align-items: stretch; }
    .pa-marche-ancre-1, .pa-marche-ancre-2, .pa-marche-ancre-3 { min-height: 0; }
    .pa-obligations-grille, .pa-cout-grille { grid-template-columns: 1fr; }
}

/* ---- Sans mouvement : bandeau figé ---- */
@media (prefers-reduced-motion: reduce) {
    .pa-ticker-piste { display: block; width: auto; }
    .pa-ticker-copie { display: none; }
    .pa-ticker-liste { flex-wrap: wrap; justify-content: center; padding: 0 var(--marge-laterale); }
    .pa-ticker-liste li { padding-right: 0; margin-right: 40px; }
}

/* ---- Animations (uniquement si la personne ne les a pas désactivées) ---- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    /* Apparition au défilement (le script ajoute .visible) ; ".js" est posé dans <head>,
       ".pa-secours" par le script si quelque chose tourne mal : alors tout reste visible. */
    .js:not(.pa-secours) [data-reveal] {
        opacity: 0; transform: translateY(28px);
        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
        transition-delay: calc(var(--i, 0) * 90ms);
    }
    .js:not(.pa-secours) [data-reveal].visible { opacity: 1; transform: none; }
    .js:not(.pa-secours) .pa-marche-ancre[data-reveal] { transform: translateY(72px); }
    .js:not(.pa-secours) .pa-marche-ancre[data-reveal].visible { transform: none; }

    /* Héro : les mots montent un à un, puis le texte et les boutons */
    .pa-mot { animation: pa-monter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 85ms + 200ms); }
    .pa-sous-titre { animation: pa-monter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.05s both; }
    .pa-actions { animation: pa-monter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s both; }

    /* Visages : apparition en fondu, puis flottement lent (transform seulement) */
    .pa-visage-0 { animation: pa-apparaitre 0.9s ease 0.4s both, pa-flotter 7s ease-in-out 1.3s infinite; }
    .pa-visage-1 { animation: pa-apparaitre 0.9s ease 0.6s both, pa-flotter 8s ease-in-out 1.5s infinite; }
    .pa-visage-2 { animation: pa-apparaitre 0.9s ease 0.8s both, pa-flotter 9s ease-in-out 1.7s infinite; }

    /* Grands cercles du fond qui "respirent" */
    .pa-hero::before { animation: pa-respirer 11s ease-in-out infinite; }
    .pa-hero::after { animation: pa-respirer 9s ease-in-out -3s infinite; }

    /* Bandeau défilant : s'arrête quand on le survole. */
    .pa-ticker-piste { animation: pa-defiler 40s linear infinite; }
    .pa-ticker-fenetre:hover .pa-ticker-piste { animation-play-state: paused; }

    /* Simulateur : les segments se remplissent */
    .pa-simulateur-detail-visible .pa-barre-impot { animation: pa-remplir 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .pa-simulateur-detail-visible .pa-barre-reste { animation: pa-remplir 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }

    /* FAQ : la réponse apparaît en fondu */
    .pa-faq-element[open] p { animation: pa-apparaitre 0.35s ease both; }

    /* Appel final : trois pulsations, puis le bouton reste calme */
    .pa-final-bouton.visible::after { animation: pa-pulsation 1.7s ease-out 0.8s 3 both; }

    @keyframes pa-monter { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
    @keyframes pa-apparaitre { from { opacity: 0; } to { opacity: 1; } }
    @keyframes pa-flotter {
        0%, 100% { transform: translateY(0) rotate(var(--rot)); }
        50% { transform: translateY(-14px) rotate(calc(var(--rot) + 1.5deg)); }
    }
    @keyframes pa-respirer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
    @keyframes pa-defiler { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes pa-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes pa-pulsation {
        0% { opacity: 0.9; transform: scale(0.96); }
        100% { opacity: 0; transform: scale(1.18); }
    }
}

/* ============================================================
   Formulaires du site et pages de saisie (nouveau style)
   Utilisé par : adhésion, contact, connexion, mots de passe.
   ============================================================ */

/* ---- Bandeau d'accroche bleu nuit (en haut des pages de formulaire) ---- */
.accroche-sombre { background: var(--encre); color: var(--couleur-blanc); }
.accroche-sombre .page-bande-interieur {
    display: flex; flex-direction: column; gap: 18px;
    padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(40px, 6vw, 64px);
}
.accroche-sombre h1 {
    margin: 0; max-width: 14em; color: var(--couleur-blanc); text-wrap: balance;
    font-family: var(--police-titre); font-weight: 800; letter-spacing: -0.03em;
    font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02;
}
.accroche-sombre p { margin: 0; max-width: 36em; font-size: 1.2rem; color: #DCE3EE; }

/* ---- Champs ---- */
.formulaire-site { display: flex; flex-direction: column; gap: 22px; }
.formulaire-site .groupe-champs { display: flex; flex-direction: column; gap: 18px; min-width: 0; margin: 0; padding: 0; border: none; }
.formulaire-site .groupe-champs legend {
    margin: 0 0 4px; padding: 0; color: var(--encre);
    font-family: var(--police-titre); font-weight: 800; font-size: 1.4rem;
}
.formulaire-site .champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.formulaire-site .champ label,
.formulaire-site label.etiquette { display: block; margin: 0; color: var(--encre); font-weight: 600; font-size: 16px; }
.formulaire-site .champ-aide { margin: 0; font-size: 14px; color: var(--encre-douce); }
.formulaire-site .deux-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.formulaire-site input[type="text"],
.formulaire-site input[type="email"],
.formulaire-site input[type="tel"],
.formulaire-site input[type="password"],
.formulaire-site input[type="number"],
.formulaire-site select,
.formulaire-site textarea {
    display: block; width: 100%; box-sizing: border-box; min-height: 52px; margin: 0; padding: 0 16px;
    border: 2px solid var(--encre); border-radius: 14px; background: var(--couleur-blanc);
    color: var(--encre); font-size: 18px;
}
.formulaire-site textarea { min-height: 130px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.formulaire-site input:focus-visible,
.formulaire-site select:focus-visible,
.formulaire-site textarea:focus-visible { outline: 3px solid var(--couleur-principale); outline-offset: 2px; }
.formulaire-site .case-a-cocher { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-weight: 400; font-size: 16px; color: var(--encre); }
.formulaire-site .case-a-cocher input[type="checkbox"] { flex: 0 0 auto; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--couleur-principale); }
.formulaire-site button[type="submit"] {
    align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
    width: auto; min-height: 58px; margin: 0; padding: 0 40px;
    border: none; border-radius: 999px; background: var(--couleur-principale); color: var(--couleur-blanc);
    font-size: 20px; font-weight: 700; cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.formulaire-site button[type="submit"]:hover { background: var(--couleur-principale-fonce); }
.formulaire-site button[type="submit"]:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
    .formulaire-site button[type="submit"]:hover { transform: translateY(-2px); }
}

/* ---- Messages ---- */
.alerte-site { box-sizing: border-box; margin: 0 0 22px; padding: 16px 20px; border-radius: 14px; border: 2px solid; font-weight: 600; }
.alerte-site-erreur { background: #FCEBEB; border-color: #791F1F; color: #791F1F; }
.alerte-site-succes { background: #EAFAF0; border-color: #0A6B2D; color: #0A6B2D; }

/* ---- Mise en page « panneau + carte de formulaire » ---- */
.adhesion-grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px 56px; align-items: start; }
.panneau-rassurant {
    box-sizing: border-box; display: flex; flex-direction: column; gap: 28px;
    padding: 36px 32px; border-radius: 28px; background: var(--encre); color: var(--couleur-blanc);
    position: sticky; top: 110px;
}
.panneau-rassurant h2 { margin: 0; color: var(--couleur-blanc); font-size: 1.6rem; line-height: 1.15; }
.panneau-rassurant a { color: var(--couleur-blanc); text-decoration: underline; }
.rassurance { display: flex; gap: 16px; align-items: flex-start; }
.rassurance p { margin: 0; color: #DCE3EE; }
.rassurance strong { color: var(--couleur-blanc); }
.rassurance-icone {
    flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; color: var(--encre);
    font-family: var(--police-titre); font-weight: 800; font-size: 26px;
}
.carte-formulaire {
    box-sizing: border-box; padding: clamp(24px, 4vw, 44px);
    border-radius: 28px; background: var(--couleur-blanc); box-shadow: 0 10px 30px rgba(31, 42, 68, 0.1);
}
.carte-formulaire.formulaire-site { gap: 36px; }
.encart-tarifs { box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 18px; background: #FBE3D4; color: var(--encre); }
.encart-tarifs[hidden] { display: none; }
.encart-tarifs > :first-child { margin-top: 0; }
.encart-tarifs > :last-child { margin-bottom: 0; }
.carte-merci { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.carte-merci-icone { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #C9E3A3; color: var(--encre); }
.carte-merci h2 { margin: 0; color: var(--encre); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.carte-merci p { margin: 0; max-width: 32em; font-size: 1.15rem; color: var(--encre-douce); }
.carte-merci .pa-bouton { border-color: var(--encre); color: var(--encre); }
.carte-merci .pa-bouton:hover { background: var(--encre); color: var(--couleur-blanc); }
@media (max-width: 900px) {
    .adhesion-grille { grid-template-columns: 1fr; }
    .panneau-rassurant { position: static; }
}

/* ---- Pages d'authentification : connexion, mot de passe oublié, nouveau mot de passe ---- */
.page-connexion { flex-direction: column; gap: 24px; background: var(--fond-doux); min-height: 80vh; }
.connexion-logo { display: block; }
.connexion-logo img { display: block; height: 72px; width: auto; }
.carte-connexion {
    box-sizing: border-box; width: 100%; max-width: 480px;
    padding: clamp(28px, 5vw, 44px); border-radius: 28px; box-shadow: 0 10px 30px rgba(31, 42, 68, 0.1);
}
.carte-connexion h1 {
    margin: 0 0 10px; color: var(--encre); text-wrap: balance;
    font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em;
}
.carte-connexion > p { color: var(--encre-douce); }
.carte-connexion .formulaire-site button[type="submit"] { align-self: stretch; }
.carte-connexion .lien-secondaire { font-size: 16px; }
.pages-auth { background: var(--fond-doux); }
.pages-auth .page-bande-interieur { display: flex; justify-content: center; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(40px, 7vw, 88px); }
.pages-auth .carte-connexion { margin: 0 auto; }

/* ---- Pages légales ---- */
.page-bande-interieur.page-texte-legal { padding-top: 16px; padding-bottom: 96px; }
.page-texte-legal h2 { margin: 40px 0 12px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.page-texte-legal h2:first-child { margin-top: 0; }
.page-bande-interieur.page-bande-formulaire { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(48px, 7vw, 72px); }

/* ============================================================
   Annuaire (Qui sommes-nous) et actualités (nouveau style)
   ============================================================ */

/* ---- Annuaire : navigation par région + une bande par région ---- */
.annuaire-intro { max-width: 46em; margin-top: 4px; }
.annuaire-nav { background: var(--couleur-blanc); border-top: 1px solid #DCE3EE; border-bottom: 1px solid #DCE3EE; }
.annuaire-nav-interieur { padding-top: 14px; padding-bottom: 14px; }
.annuaire-pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.annuaire-pastille {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    border: 1.5px solid #6F7F9C; border-radius: 999px; background: var(--couleur-blanc);
    color: var(--encre); font-size: 16px; font-weight: 600; text-decoration: none;
}
.annuaire-pastille:hover { border-color: var(--encre); color: var(--encre); }
.annuaire-pastille[aria-current="true"] { background: var(--encre); border-color: var(--encre); color: var(--couleur-blanc); }
.annuaire-pastille:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
@media (min-width: 769px) {
    .annuaire-nav { position: sticky; top: 80px; z-index: 40; }
}
.annuaire-groupe { scroll-margin-top: 150px; }
.annuaire-ligne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 64px; }
.annuaire-titre { flex: 0 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.annuaire-titre h2 {
    margin: 0; color: var(--encre);
    font-family: var(--police-titre); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1;
}
.annuaire-compte,
.annuaire-etablissements { margin: 0; font-size: 15px; color: var(--encre-douce); }
.annuaire-visages { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
@media (min-width: 640px) {
    .annuaire-visages { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 28px 20px; }
}
.mur-tuile-ecrire { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--couleur-principale); }

/* ---- Actualités ---- */
.actu-vide { margin: 0; font-size: 1.15rem; color: var(--encre-douce); }
.page-bande-interieur.actu-une-interieur { padding-top: 8px; padding-bottom: clamp(40px, 6vw, 64px); }
.actu-une { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px clamp(28px, 5vw, 64px); align-items: center; }
.actu-une-image { display: block; overflow: hidden; border-radius: 28px; }
.actu-une-image img { display: block; width: 100%; height: auto; }
.actu-une-sans-image { grid-template-columns: minmax(0, 1fr); }
.actu-une-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.actu-une-texte h2 {
    margin: 0; color: var(--encre); text-wrap: balance;
    font-family: var(--police-titre); font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.08; letter-spacing: -0.02em;
}
.actu-une-texte h2 a { color: inherit; text-decoration: none; }
.actu-une-texte h2 a:hover { text-decoration: underline; }
.actu-extrait { margin: 0; color: var(--encre-douce); }
.actu-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--encre-douce); }
.pa-bouton-sombre { background: var(--encre); color: var(--couleur-blanc); }
.pa-bouton-sombre:hover { background: var(--couleur-principale); color: var(--couleur-blanc); }
.pa-bouton-sombre:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.actu-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 28px; }
.actu-carte {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--couleur-blanc); border: 1.5px solid #DCE3EE; border-radius: 28px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.actu-carte img { display: block; width: 100%; height: auto; }
.actu-carte-corps { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 24px 26px; }
.actu-carte-corps h3 { margin: 0; font-size: 1.3rem; line-height: 1.2; color: var(--encre); }
/* Toute la carte est cliquable : le lien du titre s'étend sur la carte entière */
.actu-carte-lien { color: inherit; text-decoration: none; }
.actu-carte-lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.actu-carte-lien:focus-visible { outline: none; }
.actu-carte-lien:focus-visible::after { outline: 3px solid var(--encre); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .actu-carte:hover { transform: translateY(-6px); border-color: var(--encre); box-shadow: 0 18px 36px rgba(31, 42, 68, 0.14); }
}
@media (hover: hover) {
    .actu-carte:hover { border-color: var(--encre); }
}
@media (max-width: 900px) {
    .actu-une { grid-template-columns: 1fr; }
}

/* ============================================================
   Espace adhérent : Mon compte, Ma carte, règlement, désinscription
   ============================================================ */
.accroche-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.pa-bouton[hidden] { display: none; }
.pa-bouton:disabled { opacity: 0.6; cursor: not-allowed; }
.pa-bouton-clair { border-color: var(--encre); color: var(--encre); background: transparent; cursor: pointer; }
.pa-bouton-clair:hover { background: var(--encre); color: var(--couleur-blanc); }
.pa-bouton-clair:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }

/* ---- Mon compte : menu à gauche, cartes à droite ---- */
.compte-grille { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 32px 48px; align-items: start; }
.compte-menu {
    position: sticky; top: 110px; display: flex; flex-direction: column; gap: 4px;
    padding: 24px; border-radius: 28px; background: var(--couleur-blanc); box-shadow: 0 10px 30px rgba(31, 42, 68, 0.1);
}
.compte-menu h2 { margin: 0 0 8px; color: var(--encre); font-size: 1.2rem; line-height: 1.2; }
.compte-menu a {
    display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px;
    color: var(--encre); font-weight: 600; text-decoration: none;
}
.compte-menu a:hover { background: var(--fond-doux); }
.compte-menu a:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.compte-menu .compte-menu-lien-fort { margin-top: 8px; padding: 10px 14px; background: var(--encre); color: var(--couleur-blanc); }
.compte-menu .compte-menu-lien-fort:hover { background: var(--couleur-principale); }
.compte-menu-note { margin: 12px 0 0; padding: 12px; border-radius: 12px; background: var(--fond-doux); font-size: 14px; color: var(--encre-douce); }
.compte-colonne { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.compte-carte {
    scroll-margin-top: 110px; padding: clamp(24px, 4vw, 40px);
    border-radius: 28px; background: var(--couleur-blanc); box-shadow: 0 10px 30px rgba(31, 42, 68, 0.1);
}
.compte-carte h2 { margin: 0 0 10px; color: var(--encre); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; }
.compte-aide { margin: 0 0 18px; font-size: 14px; color: var(--encre-douce); }
.paiement-grille { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
@media (min-width: 560px) {
    .paiement-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.paiement-option {
    display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 18px;
    border: 2px solid var(--encre); border-radius: 18px; background: var(--couleur-blanc);
    color: var(--encre); font-size: 18px; font-weight: 700; text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.paiement-option svg { flex: 0 0 auto; }
.paiement-option:hover { background: var(--encre); color: var(--couleur-blanc); }
.paiement-option:focus-visible { outline: 3px solid var(--couleur-principale); outline-offset: 3px; }
@media (max-width: 900px) {
    .compte-grille { grid-template-columns: 1fr; }
    .compte-menu { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 16px; }
    .compte-menu h2, .compte-menu-note { display: none; }
    .compte-menu a { border: 1.5px solid #6F7F9C; border-radius: 999px; }
    .compte-menu .compte-menu-lien-fort { margin-top: 0; border-color: var(--encre); }
}

/* ---- Champs en lecture seule, pièce jointe ---- */
.formulaire-site input:disabled {
    background: var(--fond-doux); border-color: #B9C4D8; color: var(--encre-douce);
    -webkit-text-fill-color: var(--encre-douce); opacity: 1; cursor: not-allowed;
}
.formulaire-site input[type="file"] {
    display: block; width: 100%; box-sizing: border-box; padding: 14px 16px;
    border: 2px dashed var(--encre); border-radius: 14px; background: var(--couleur-blanc); color: var(--encre); font-size: 16px;
}
.formulaire-site input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 8px 16px; border: none; border-radius: 999px;
    background: var(--encre); color: var(--couleur-blanc); font-weight: 700; cursor: pointer;
}
.panneau-note { margin: 0; font-size: 14px; color: #DCE3EE; }
.encart-mode { padding: 20px 22px; border-radius: 18px; background: var(--fond-doux); }
.encart-mode > :first-child { margin-top: 0; }
.encart-mode > :last-child { margin-bottom: 0; }
.carte-etroite { max-width: 760px; }

/* ---- Ma carte : la carte à gauche, le verso à droite ---- */
.carte-page-grille { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.carte-page-recto { position: sticky; top: 110px; }
.carte-page-recto .carte-fo-recto { margin-bottom: 0; box-shadow: 0 18px 40px rgba(31, 42, 68, 0.18); }
.carte-page-verso .carte-fo-verso { padding: clamp(24px, 4vw, 36px); border: none; border-radius: 28px; box-shadow: 0 10px 30px rgba(31, 42, 68, 0.1); }
/* Le texte du verso garde ses tailles d'origine (les titres des bandes sont plus grands) */
.carte-page-verso .carte-fo-verso h2 { margin: 0 0 8px; color: var(--couleur-texte); font-size: 18px; line-height: 1.3; }
.carte-page-verso .carte-fo-verso h3 { margin: 15px 0 6px; color: var(--couleur-principale); font-size: 15px; }
.carte-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.carte-page-retour { font-weight: 600; }
@media (max-width: 980px) {
    .carte-page-grille { grid-template-columns: minmax(0, 460px); justify-content: center; }
    .carte-page-recto { position: static; }
}

/* ============================================================
   Recherche et page 404 (nouveau style)
   ============================================================ */
.recherche-formulaire { display: flex; flex-wrap: wrap; gap: 12px; max-width: 760px; margin-top: 6px; }
.recherche-champ { position: relative; flex: 1 1 320px; min-width: 0; display: flex; align-items: center; }
.recherche-champ svg { position: absolute; left: 18px; color: var(--encre-douce); pointer-events: none; }
.recherche-formulaire input[type="search"] {
    width: 100%; box-sizing: border-box; min-height: 58px; margin: 0; padding: 0 18px 0 52px;
    border: 2px solid transparent; border-radius: 999px; background: var(--couleur-blanc);
    color: var(--encre); font-size: 19px;
}
.recherche-formulaire input[type="search"]:focus-visible { outline: 3px solid var(--couleur-blanc); outline-offset: 3px; }
.recherche-formulaire button {
    width: auto; min-height: 58px; margin: 0; padding: 0 32px;
    border: none; border-radius: 999px; background: var(--rouge-vif); color: var(--couleur-blanc);
    font-size: 19px; font-weight: 700; cursor: pointer;
}
.recherche-formulaire button:hover { background: #F0524F; }
.recherche-formulaire button:focus-visible { outline: 3px solid var(--couleur-blanc); outline-offset: 3px; }

.recherche-message { margin: 0 0 18px; font-size: 1.15rem; color: var(--encre-douce); }
.recherche-compte { margin: 0 0 18px; font-size: 1.1rem; font-weight: 700; color: var(--encre); }
.filtre-familles-recherche { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.bouton-filtre-famille {
    min-height: 44px; padding: 0 18px; border: 1.5px solid #6F7F9C; border-radius: 999px;
    background: var(--couleur-blanc); color: var(--encre); font-size: 16px; font-weight: 600; cursor: pointer;
}
.bouton-filtre-famille:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.bouton-filtre-famille.actif,
.bouton-filtre-famille[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--couleur-blanc); }
.filtre-famille-compte { font-weight: 400; }

.liste-resultats-recherche { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.resultat-recherche { margin: 0; padding: 0; border: none; }
.resultat-recherche[hidden] { display: none; }
.resultat-recherche-lien {
    display: flex; gap: 20px; align-items: stretch; padding: 16px;
    background: var(--couleur-blanc); border: 1.5px solid #DCE3EE; border-radius: 22px;
    color: var(--encre); text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.resultat-recherche-lien:hover { border-color: var(--encre); box-shadow: 0 12px 28px rgba(31, 42, 68, 0.12); text-decoration: none; }
.resultat-recherche-lien:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .resultat-recherche-lien:hover { transform: translateY(-2px); }
}
.resultat-recherche-image { flex: 0 0 180px; width: 180px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.resultat-recherche-image-generique { display: flex; align-items: center; justify-content: center; background: var(--fond-doux); color: var(--encre); }
.resultat-recherche-texte { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.resultat-recherche-texte strong { font-family: var(--police-titre); font-size: 1.2rem; line-height: 1.25; color: var(--encre); }
.resultat-recherche-texte p { margin: 0; font-size: 1rem; color: var(--encre-douce); }
.resultat-recherche-texte mark { padding: 0 2px; border-radius: 4px; background: #FBE3D4; color: inherit; }
@media (max-width: 600px) {
    .resultat-recherche-lien { flex-direction: column; }
    .resultat-recherche-image { flex: none; width: 100%; }
}

/* ---- Page 404 ---- */
.erreur-404 { background: var(--encre); color: var(--couleur-blanc); overflow: hidden; }
.erreur-404-interieur {
    display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
    padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(64px, 10vw, 128px);
}
.erreur-404-code {
    margin: 0; color: var(--rouge-vif);
    font-family: var(--police-titre); font-weight: 800; letter-spacing: -0.05em;
    font-size: clamp(6rem, 22vw, 15rem); line-height: 0.85;
}
.erreur-404 h1 {
    margin: 0; max-width: 16em; color: var(--couleur-blanc); text-wrap: balance;
    font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em;
}
.erreur-404-texte { margin: 0; max-width: 34em; font-size: 1.2rem; color: #DCE3EE; }
.erreur-404-recherche { width: 100%; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
    .erreur-404-code { animation: pa-monter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .erreur-404 h1 { animation: pa-monter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
    .erreur-404-texte { animation: pa-monter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both; }
}

/* ---- Pagination ---- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.pagination-lien {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 44px; min-height: 44px; padding: 0 14px; box-sizing: border-box;
    border: 1.5px solid #6F7F9C; border-radius: 999px; background: var(--couleur-blanc);
    color: var(--encre); font-size: 16px; font-weight: 600; text-decoration: none;
}
a.pagination-lien:hover { border-color: var(--encre); background: var(--encre); color: var(--couleur-blanc); text-decoration: none; }
a.pagination-lien:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.pagination-courante { border-color: var(--encre); background: var(--encre); color: var(--couleur-blanc); }
.pagination-direction { padding: 0 18px; }
.pagination-points { min-width: 28px; text-align: center; color: var(--encre-douce); font-weight: 700; }
.pagination-info { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--encre-douce); }

/* Tableaux dans le contenu éditorial : bordures fusionnées (propriété non acceptée en style en ligne par le filtre de l'éditeur) */
.contenu-actualite table { border-collapse: collapse; }

/* Encadré d'avertissement « ce lien est personnel » (désinscription des notifications) */
.astuce-lien-personnel { margin: 0 0 20px; padding: 14px 18px; border-radius: 14px; background: #FBE3D4; color: var(--encre); font-size: 15px; line-height: 1.55; text-align: left; }

/* ============================================================
   Documents joints en cartes + lecteur de PDF « magazine »
   ============================================================ */
.page-documents-compte { margin: -6px 0 22px; font-size: 15px; color: var(--encre-douce); }
.page-documents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; border-top: 0; }
.page-document {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 14px 18px;
    padding: 20px 22px; background: var(--couleur-blanc); border: 1.5px solid #DCE3EE; border-radius: 22px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.25s ease;
}
.page-document:hover { border-color: var(--encre); box-shadow: 0 14px 30px rgba(31, 42, 68, 0.12); }
.page-document-icone {
    flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    border-radius: 16px; background: var(--rouge-vif); color: var(--couleur-blanc);
}
.page-document-texte { flex: 1 1 200px; min-width: 0; }
.page-bande-interieur .page-document-titre { margin: 0 0 2px; font-size: 1.1rem; line-height: 1.25; color: var(--encre); overflow-wrap: anywhere; }
.page-document-meta { margin: 0; font-size: 14px; color: var(--encre-douce); }
.page-document-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 10px; }
.page-document-lire,
.page-document-actions .page-document-lien {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
    border-radius: 999px; border: 2px solid var(--encre); font: 700 16px var(--police-texte); cursor: pointer; text-decoration: none;
}
.page-document-lire { background: var(--encre); color: var(--couleur-blanc); }
.page-document-lire:hover { background: var(--couleur-principale); border-color: var(--couleur-principale); }
.page-document-actions .page-document-lien { background: transparent; color: var(--encre); }
.page-document-lire:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
/* Section « Documents » de l'accueil : mêmes cartes, titre au gabarit des autres blocs de l'accueil */
.accueil-documents .page-document-titre { margin: 0 0 2px; font-size: 1.1rem; line-height: 1.25; color: var(--encre); overflow-wrap: anywhere; }
.accueil-documents .page-document-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
@media (max-width: 800px) { .page-documents { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
    .page-document-cache { opacity: 0; transform: translateY(18px); }
    .page-document-visible { opacity: 1; transform: none; transition: opacity 0.5s ease calc(var(--i, 0) * 70ms), transform 0.5s ease calc(var(--i, 0) * 70ms), border-color 0.2s ease, box-shadow 0.2s ease; }
}

/* ---- lecteur en surimpression ---- */
html.lecteur-ouvert { overflow: hidden; }
.lecteur { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; background: rgba(12, 18, 34, 0.97); color: #fff; font-family: var(--police-texte); }
.lecteur[hidden] { display: none; }
.lecteur:focus { outline: none; }
.lecteur-barre {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto;
    padding: calc(10px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 10px calc(16px + env(safe-area-inset-left, 0px));
    background: rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.lecteur-titre { margin: 0; min-width: 0; font-family: var(--police-titre); font-weight: 800; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecteur-actions { display: flex; flex-shrink: 0; gap: 8px; }
.lecteur-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: transparent; color: #fff;
    font: 700 15px var(--police-texte); cursor: pointer; text-decoration: none;
}
.lecteur-btn:hover:not(:disabled) { background: #fff; color: var(--encre); }
.lecteur-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.lecteur-btn[hidden] { display: none; }
.lecteur-btn:focus-visible, .lecteur-nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lecteur-btn-fermer { background: var(--rouge-vif); border-color: var(--rouge-vif); }
.lecteur-btn-fermer:hover:not(:disabled) { background: #fff; border-color: #fff; }
.lecteur-scene { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; }
.lecteur-defilement { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; position: relative; }
.lecteur-zoome .lecteur-defilement { overflow: auto; }
.lecteur-feuilles { display: grid; margin: auto; padding: 8px; }
.lecteur-feuille { grid-area: 1 / 1; position: relative; display: flex; justify-content: center; align-items: center; }
.lecteur-page { display: block; background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); cursor: pointer; }
.lecteur-zoome .lecteur-page { cursor: default; }
.lecteur-feuille-double .lecteur-page:first-child { border-radius: 4px 0 0 4px; }
.lecteur-feuille-double .lecteur-page:last-child { border-radius: 0 4px 4px 0; }
.lecteur-feuille-double::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 56px; margin-left: -28px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.3) 50%, transparent);
}
.lecteur-nav {
    flex: 0 0 56px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #fff; cursor: pointer;
}
.lecteur-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.lecteur-nav:disabled { opacity: 0.18; cursor: default; }
.lecteur-nav svg { width: 30px; height: 30px; }
.lecteur-pied { flex: 0 0 auto; padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.lecteur-progression { height: 3px; max-width: 640px; margin: 0 auto 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.lecteur-progression span { display: block; width: 0; height: 100%; background: var(--rouge-vif); transition: width 0.3s ease; }
.lecteur-pages { margin: 0; font-size: 14px; color: #DCE3EE; }
.lecteur-pied-ligne { display: flex; align-items: center; justify-content: center; }
.lecteur-nav-bas { display: none; }
.lecteur-attente { position: absolute; inset: 64px 0 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; pointer-events: none; }
.lecteur-attente[hidden], .lecteur-erreur[hidden] { display: none; }
.lecteur-attente p { margin: 0; color: #DCE3EE; }
.lecteur-rond { width: 44px; height: 44px; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: var(--rouge-vif); border-radius: 50%; }
.lecteur-erreur { position: absolute; inset: 64px 0 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 20px; }
.lecteur-erreur p { margin: 0; font-size: 1.2rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
    .lecteur-rond { animation: lecteurTourne 0.9s linear infinite; }
    .lecteur-entre-droite { animation: lecteurEntreD 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .lecteur-entre-gauche { animation: lecteurEntreG 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .lecteur-sort-gauche { animation: lecteurSortG 0.32s ease both; }
    .lecteur-sort-droite { animation: lecteurSortD 0.32s ease both; }
}
@keyframes lecteurTourne { to { transform: rotate(360deg); } }
@keyframes lecteurEntreD { from { opacity: 0; transform: perspective(1400px) translateX(70px) rotateY(-14deg); } to { opacity: 1; transform: none; } }
@keyframes lecteurEntreG { from { opacity: 0; transform: perspective(1400px) translateX(-70px) rotateY(14deg); } to { opacity: 1; transform: none; } }
@keyframes lecteurSortG { from { opacity: 1; transform: none; } to { opacity: 0; transform: perspective(1400px) translateX(-70px) rotateY(14deg); } }
@keyframes lecteurSortD { from { opacity: 1; transform: none; } to { opacity: 0; transform: perspective(1400px) translateX(70px) rotateY(-14deg); } }
@media (max-width: 700px) {
    .lecteur-barre { gap: 8px; }
    .lecteur-nav { display: none; }
    .lecteur-feuilles { padding: 2px; }
    .lecteur-pied { padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .lecteur-progression { margin-bottom: 6px; }
    .lecteur-pied-ligne { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
    .lecteur-pages { font-size: 15px; font-weight: 700; color: #fff; text-align: center; }
    .lecteur-nav-bas {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 52px; min-height: 52px; padding: 0 16px;
        border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }
    .lecteur-nav-bas svg { width: 24px; height: 24px; }
    .lecteur-nav-bas:active:not(:disabled) { background: var(--rouge-vif); }
    .lecteur-nav-bas:disabled { opacity: 0.25; cursor: default; }
    .lecteur-nav-bas:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
    .lecteur-attente, .lecteur-erreur { bottom: 96px; }
    .lecteur-btn-texte span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .lecteur-btn-texte { padding: 0; }
    .lecteur-btn-ecran { display: none; }
}

/* ============================================================
   Page « Les membres des commissions nationales » (gabarit animé)
   ============================================================ */
.cm-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--encre) 0%, #274B5E 100%); color: var(--couleur-blanc); }
.cm-hero .page-bande-interieur { position: relative; z-index: 1; }
.cm-hero-deco span { position: absolute; border-radius: 50%; pointer-events: none; }
.cm-hero-deco span:nth-child(1) { width: 420px; height: 420px; right: -120px; top: -140px; background: rgba(255, 255, 255, 0.07); }
.cm-hero-deco span:nth-child(2) { width: 260px; height: 260px; right: 18%; bottom: -130px; background: rgba(229, 57, 53, 0.35); }
.cm-hero-deco span:nth-child(3) { width: 120px; height: 120px; left: 6%; top: 18%; border: 3px solid rgba(255, 255, 255, 0.16); }
.cm-kicker { margin: 0 0 14px; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #FFB4B2; }
.cm-hero .cm-hero-titre { margin: 0 0 18px; max-width: 15em; color: var(--couleur-blanc); font-size: clamp(2.1rem, 5.6vw, 4rem); line-height: 1.04; text-wrap: balance; }
.cm-mot { display: inline-block; }
.cm-intro { max-width: 40em; margin: 0 0 30px; font-size: 1.15rem; line-height: 1.6; color: #DCE3EE; }
.cm-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.cm-stat { min-width: 168px; padding: 16px 22px; border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 22px; background: rgba(255, 255, 255, 0.09); }
.cm-stat-valeur { display: block; font-family: var(--police-titre); font-weight: 800; font-size: 2.8rem; line-height: 1.05; color: var(--couleur-blanc); }
.cm-stat-libelle { display: block; font-size: 14px; color: #DCE3EE; }

.cm-recherche { position: relative; max-width: 580px; margin: 0 0 18px; }
.cm-recherche svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--encre-douce); pointer-events: none; }
.cm-recherche input {
    width: 100%; box-sizing: border-box; min-height: 56px; margin: 0; padding: 0 20px 0 54px;
    border: 2px solid var(--encre); border-radius: 999px; background: var(--couleur-blanc); color: var(--encre); font-size: 18px;
}
.cm-recherche input:focus-visible { outline: 3px solid var(--couleur-principale); outline-offset: 3px; }
.cm-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cm-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    border: 1.5px solid #6F7F9C; border-radius: 999px; background: var(--couleur-blanc); color: var(--encre); font: 600 16px var(--police-texte); cursor: pointer;
}
.cm-chip:hover { border-color: var(--encre); }
.cm-chip[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--couleur-blanc); }
.cm-chip:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.cm-chip-point { width: 10px; height: 10px; border-radius: 50%; }
.cm-chip[aria-pressed="true"] .cm-chip-point { box-shadow: 0 0 0 2px #fff; }
.cm-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; }
.cm-annonce { margin: 0; font-size: 15px; color: var(--encre-douce); }
.cm-lien-bouton { border: 0; background: none; padding: 6px 4px; color: var(--couleur-principale); font: 700 15px var(--police-texte); text-decoration: underline; cursor: pointer; }
.cm-lien-bouton[hidden] { display: none; }
.cm-aucun { margin: 0; padding: 28px; border-radius: 20px; background: var(--fond-doux); font-size: 1.1rem; text-align: center; }
.cm-aucun[hidden] { display: none; }

.cm-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.cm-carte {
    position: relative; overflow: hidden; background: var(--couleur-blanc); border: 2px solid #DCE3EE; border-radius: 26px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cm-carte[hidden] { display: none; }
.cm-carte::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--cm); }
.cm-carte:hover, .cm-carte.cm-ouverte { border-color: var(--cm); box-shadow: 0 18px 38px rgba(31, 42, 68, 0.14); }
.cm-carte-tete { display: flex; gap: 16px; padding: 28px 24px 8px; }
.cm-ico { flex: 0 0 56px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--cm); color: var(--couleur-blanc); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.cm-carte:hover .cm-ico { transform: rotate(-8deg) scale(1.08); }
.cm-carte-texte { min-width: 0; }
.page-bande-interieur .cm-carte-titre { margin: 2px 0 6px; font-size: 1.3rem; line-height: 1.2; color: var(--encre); }
.cm-carte-bouton { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cm-carte-bouton::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 26px; }
.cm-carte-bouton:focus-visible { outline: none; }
.cm-carte-bouton:focus-visible::after { outline: 3px solid var(--encre); outline-offset: -4px; }
.cm-carte-desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--encre-douce); }
.cm-carte-pied { display: flex; align-items: center; gap: 12px; padding: 14px 24px 22px; }
.cm-pile { display: inline-flex; }
.cm-pile .cm-avatar + .cm-avatar, .cm-pile .cm-avatar + .cm-pile-plus { margin-left: -12px; }
.cm-pile-plus { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 2px solid #fff; border-radius: 50%; background: var(--encre); color: #fff; font-size: 13px; font-weight: 800; }
.cm-carte-compte { font-size: 15px; font-weight: 700; color: var(--encre); }
.cm-chevron { margin-left: auto; display: flex; color: var(--cm); transition: transform 0.35s ease; }
.cm-ouverte .cm-chevron { transform: rotate(180deg); }
.cm-panneau { position: relative; z-index: 2; display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.4s ease, visibility 0s linear 0.4s; }
.cm-ouverte .cm-panneau { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.4s ease, visibility 0s; }
.cm-panneau-int { min-height: 0; overflow: hidden; }
.cm-membres { display: grid; gap: 10px; margin: 0; padding: 4px 24px 24px; list-style: none; }
.cm-membre-item { margin: 0; padding: 0; }
.cm-membre {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 10px 14px;
    border: 1.5px solid #DCE3EE; border-radius: 18px; background: var(--fond-doux); color: var(--encre); text-align: left; font: inherit; cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.cm-membre:hover { border-color: var(--cm); background: #fff; transform: translateX(4px); }
.cm-membre:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.cm-membre.cm-trouve { border-color: var(--cm); background: #FFF3D6; box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.18); }
.cm-membre-texte { display: flex; flex-direction: column; min-width: 0; }
.cm-membre-nom { font-weight: 800; font-size: 1rem; line-height: 1.25; color: var(--encre); }
.cm-membre-fonction { font-size: 13px; line-height: 1.35; color: var(--encre-douce); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.cm-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: #DCE3EE; }
.cm-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-avatar-ini { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--peche, #FBE3D4); color: var(--encre); font-size: 13px; font-weight: 800; }
.cm-avatar-grand { width: 56px; height: 56px; }
.cm-avatar-grand .cm-avatar-ini { font-size: 18px; }
.cm-avatar-fiche { width: 128px; height: 128px; border-width: 5px; box-shadow: 0 10px 26px rgba(31, 42, 68, 0.22); }
.cm-avatar-fiche .cm-avatar-ini { font-size: 40px; }

.cm-multi h2 { margin: 0 0 26px; }
.cm-multi[hidden] { display: none; }
.cm-multi-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.cm-multi-carte {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin: 0;
    border: 2px solid #DCE3EE; border-radius: 22px; background: var(--couleur-blanc); color: var(--encre); text-align: left; font: inherit; cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cm-multi-carte:hover { transform: translateY(-4px) rotate(-0.4deg); border-color: var(--encre); box-shadow: 0 14px 30px rgba(31, 42, 68, 0.13); }
.cm-multi-carte:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.cm-multi-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cm-multi-compte { font-size: 14px; font-weight: 700; color: var(--couleur-principale); }
.cm-multi-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-mini-chip { padding: 2px 10px; border-radius: 999px; background: var(--cm); color: #fff; font-size: 12px; font-weight: 700; }

.cm-fiche { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(12, 18, 34, 0.72); }
.cm-fiche[hidden] { display: none; }
.cm-fiche:focus { outline: none; }
html.cm-fiche-ouverte { overflow: hidden; }
.cm-fiche-boite { position: relative; width: min(100%, 460px); max-height: 100%; overflow: auto; padding: 36px 28px 28px; border-radius: 30px; background: var(--couleur-blanc); text-align: center; }
.cm-fiche-fermer { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1.5px solid #DCE3EE; border-radius: 50%; background: #fff; color: var(--encre); cursor: pointer; }
.cm-fiche-fermer:hover { background: var(--encre); color: #fff; }
.cm-fiche-fermer:focus-visible, .cm-fiche-pastille:focus-visible, .cm-btn:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.cm-fiche-photo { display: flex; justify-content: center; margin: 0 0 14px; }
.cm-fiche-boite .cm-fiche-nom { margin: 0 0 6px; font-size: 1.6rem; line-height: 1.15; color: var(--encre); }
.cm-fiche-fonction { margin: 0 0 6px; line-height: 1.5; color: var(--encre); }
.cm-fiche-lieu { margin: 0 0 14px; font-size: 14px; color: var(--encre-douce); }
.cm-fiche-fonction[hidden], .cm-fiche-lieu[hidden] { display: none; }
.cm-fiche-sous-titre { margin: 12px 0 8px; font-size: 14px; font-weight: 700; color: var(--encre-douce); }
.cm-fiche-commissions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; }
.cm-fiche-pastille { min-height: 40px; padding: 0 16px; margin: 0; border: 0; border-radius: 999px; background: var(--cm); color: #fff; font: 700 14px var(--police-texte); cursor: pointer; transition: transform 0.2s ease; }
.cm-fiche-pastille:hover { transform: scale(1.06); }
.cm-fiche-actions { display: flex; justify-content: center; }
.cm-fiche-aide { margin: 0; font-size: 14px; color: var(--encre-douce); }
.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 999px; font: 700 16px var(--police-texte); text-decoration: none; cursor: pointer; }
.cm-btn-plein { border: 2px solid var(--couleur-principale); background: var(--couleur-principale); color: #fff; }
.cm-btn-plein:hover { background: var(--encre); border-color: var(--encre); color: #fff; }

@media (max-width: 860px) { .cm-grille { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
    .cm-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--marge-laterale) * -1); padding: 0 var(--marge-laterale) 8px 0; scroll-snap-type: x proximity; }
    .cm-chip { flex: 0 0 auto; scroll-snap-align: start; }
    .cm-stat { flex: 1 1 calc(50% - 7px); min-width: 0; padding: 14px 16px; }
    .cm-stat-valeur { font-size: 2.2rem; }
    .cm-carte-tete { padding: 26px 18px 6px; }
    .cm-carte-pied { padding: 12px 18px 20px; }
    .cm-membres { padding: 4px 18px 20px; }
}
@media (prefers-reduced-motion: no-preference) {
    .cm-hero-deco span:nth-child(1) { animation: cmFlotte 11s ease-in-out infinite; }
    .cm-hero-deco span:nth-child(2) { animation: cmFlotte 8s ease-in-out infinite reverse; }
    .cm-hero-deco span:nth-child(3) { animation: cmFlotte 6s ease-in-out infinite; }
    .cm-mot { animation: cmMonte 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--m, 0) * 70ms + 150ms); }
    .cm-cache { opacity: 0; transform: translateY(26px) scale(0.98); }
    .cm-visible { opacity: 1; transform: none; transition: opacity 0.6s ease calc(var(--i, 0) * 80ms), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 80ms), box-shadow 0.3s ease, border-color 0.3s ease; }
    .cm-ouverte .cm-membre-item { animation: cmPop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(var(--k, 0) * 70ms + 120ms); }
    .cm-pulse { animation: cmPulse 1.5s ease; }
    .cm-fiche-boite { animation: cmFiche 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
}
@keyframes cmFlotte { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-14px, 18px, 0); } }
@keyframes cmMonte { from { opacity: 0; transform: translateY(0.7em) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes cmPop { from { opacity: 0; transform: translateY(12px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes cmPulse { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.55); } 70% { box-shadow: 0 0 0 22px rgba(229, 57, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); } }
@keyframes cmFiche { from { opacity: 0; transform: translateY(22px) scale(0.95); } to { opacity: 1; transform: none; } }

/* ============================================================
   Menu du haut : chevrons, sous-bandeau au clic, cartes avec icône + phrase, actualités à la une
   ============================================================ */
.navigation-lien-chapitre { display: inline-flex; align-items: center; gap: 6px; }
.menu-chevron { flex: 0 0 auto; transition: transform 0.25s ease; }
.navigation-lien-chapitre[aria-expanded="true"] .menu-chevron { transform: rotate(180deg); }
.navigation-lien-chapitre:hover,
.navigation-lien-chapitre[aria-expanded="true"] { color: var(--couleur-principale); }
.navigation-lien-chapitre[aria-expanded="true"] > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.navigation-lien-chapitre:focus-visible { outline: 3px solid var(--encre); outline-offset: 4px; border-radius: 4px; }

.sous-bandeau-voile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 890; background: rgba(12, 18, 34, 0.38); }
.sous-bandeau-voile[hidden] { display: none; }
.sous-bandeau-menu { max-height: calc(100vh - 100px); overflow-y: auto; }
.sous-bandeau-menu-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; box-sizing: border-box; max-width: none; margin: 0; padding: 26px var(--marge-laterale) 32px; list-style: none; }
.sous-bandeau-menu[data-chapitre="actualite"] .sous-bandeau-menu-liste { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.sous-bandeau-menu-liste .navigation-sous-menu-vide { grid-column: 1 / -1; }
.menu-sous-titre { grid-column: 1 / -1; margin: 0 0 2px; font-family: var(--police-titre); font-weight: 800; font-size: 1.3rem; line-height: 1.2; color: var(--encre); }

/* Cartes de pages : icône, titre, phrase */
.menu-carte { margin: 0; padding: 0; }
.menu-carte-lien, .navigation-sous-menu .menu-carte-lien, .sous-bandeau-menu-liste .menu-carte-lien {
    display: flex; align-items: flex-start; gap: 14px; height: 100%; box-sizing: border-box; padding: 14px 16px; margin: 0;
    border: 1.5px solid var(--couleur-bordure); border-radius: 16px; background: var(--couleur-blanc);
    text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--encre);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.menu-carte-lien:hover, .sous-bandeau-menu-liste .menu-carte-lien:hover { border-color: var(--encre); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(31, 42, 68, 0.12); color: var(--encre); text-decoration: none; }
.menu-carte-lien:focus-visible, .menu-actu-lien:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.menu-ico { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--fond-doux); color: var(--couleur-principale); transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.menu-carte-lien:hover .menu-ico { background: var(--couleur-principale); color: var(--couleur-blanc); transform: rotate(-8deg) scale(1.06); }
.menu-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-titre { display: flex; align-items: center; gap: 6px; font-family: var(--police-titre); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--encre); }
.menu-desc { font-size: 14px; line-height: 1.4; color: var(--couleur-texte-clair); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-reservee .icone-page-reservee { opacity: 0.7; }

/* Actualités à la une : vignettes */
.menu-actu { margin: 0; padding: 0; }
.menu-actu-lien, .navigation-sous-menu .menu-actu-lien, .sous-bandeau-menu-liste .menu-actu-lien {
    display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 0; margin: 0; border: 0;
    text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--encre);
}
/* Image affichée EN ENTIER (object-fit: contain) ; les bandes vides du cadre sont remplies par la même image, floutée. */
.menu-actu-vignette { display: block; position: relative; box-sizing: border-box; padding: 4px; aspect-ratio: 8 / 5; overflow: hidden; border: 1px solid var(--couleur-bordure); border-radius: 14px; background: var(--fond-doux); transition: box-shadow 0.25s ease, transform 0.25s ease; }
.menu-actu-vignette img { display: block; width: 100%; height: 100%; }
.menu-actu-vignette .menu-actu-flou { position: absolute; inset: 0; object-fit: cover; filter: blur(14px) saturate(1.15); transform: scale(1.3); opacity: 0.9; }
.menu-actu-vignette .menu-actu-image { position: relative; z-index: 1; object-fit: contain; }
.menu-actu-lien:hover .menu-actu-vignette { box-shadow: 0 10px 22px rgba(31, 42, 68, 0.2); transform: translateY(-2px); }
.menu-actu-vide { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--couleur-principale); background: linear-gradient(135deg, var(--fond-doux), #E3E9F4); }
.menu-actu-texte { display: flex; flex-direction: column; gap: 3px; }
.menu-actu-titre { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--police-titre); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--encre); }
.menu-actu-lien:hover .menu-actu-titre { color: var(--couleur-principale); text-decoration: underline; }
.menu-actu-date { font-size: 13px; color: var(--couleur-texte-clair); }
.menu-actu-tout .menu-actu-lien, .sous-bandeau-menu-liste .menu-actu-tout .menu-actu-lien { align-items: center; justify-content: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--couleur-principale); color: var(--couleur-blanc); text-align: center; transition: background-color 0.2s ease, transform 0.2s ease; }
.menu-actu-tout .menu-actu-lien:hover { background: var(--encre); color: var(--couleur-blanc); text-decoration: none; transform: translateY(-2px); }
.menu-actu-tout-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: transform 0.25s ease; }
.menu-actu-tout .menu-actu-lien:hover .menu-actu-tout-ico { transform: translateX(6px); }
.menu-actu-tout-texte { font-family: var(--police-titre); font-weight: 800; font-size: 16px; line-height: 1.25; color: var(--couleur-blanc); }
.menu-actu-tout .menu-actu-lien:hover .menu-actu-tout-texte { color: var(--couleur-blanc); }

@media (min-width: 769px) and (max-width: 1100px) {
    .sous-bandeau-menu-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sous-bandeau-menu[data-chapitre="actualite"] .sous-bandeau-menu-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .sous-bandeau-menu:not([hidden]) { animation: menuDescend 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    .sous-bandeau-voile:not([hidden]) { animation: menuFondu 0.24s ease both; }
    .menu-anime > li { animation: menuEntre 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    .menu-anime > li:nth-child(2) { animation-delay: 0.03s; } .menu-anime > li:nth-child(3) { animation-delay: 0.06s; } .menu-anime > li:nth-child(4) { animation-delay: 0.09s; }
    .menu-anime > li:nth-child(5) { animation-delay: 0.12s; } .menu-anime > li:nth-child(6) { animation-delay: 0.15s; } .menu-anime > li:nth-child(n+7) { animation-delay: 0.18s; }
}
@keyframes menuDescend { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes menuFondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuEntre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Menu burger (téléphone) : mêmes cartes, plus compactes */
@media (max-width: 768px) {
    .navigation-lien-chapitre { justify-content: space-between; }
    .navigation-item-chapitre.ouvert .navigation-sous-menu { display: grid; gap: 8px; margin: 4px 0 12px; }
    .navigation-sous-menu .menu-carte-lien { padding: 10px 12px; gap: 12px; border-radius: 14px; }
    .navigation-sous-menu .menu-ico { flex-basis: 38px; width: 38px; height: 38px; border-radius: 12px; }
    .navigation-sous-menu .menu-titre { font-size: 15px; }
    .navigation-sous-menu .menu-desc { font-size: 13px; }
    .navigation-sous-menu .menu-sous-titre { font-size: 1rem; margin-top: 4px; }
    .navigation-sous-menu .menu-actu-lien { flex-direction: row; align-items: center; gap: 12px; }
    .navigation-sous-menu .menu-actu-vignette { flex: 0 0 96px; width: 96px; border-radius: 10px; }
    .navigation-sous-menu .menu-actu-titre { font-size: 14px; -webkit-line-clamp: 2; }
    .navigation-sous-menu .menu-actu-tout .menu-actu-lien { flex-direction: row; justify-content: flex-start; padding: 12px 14px; text-align: left; }
    .navigation-sous-menu .menu-actu-tout-ico { width: 38px; height: 38px; }
    .navigation-sous-menu .menu-actu-tout-ico svg { width: 20px; height: 20px; }
}


@media (max-width: 360px) {
    .lecteur-nav-bas span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .lecteur-nav-bas { padding: 0; }
}

/* ============================================================
   Pages « Guides pratiques » (gabarit animé : includes/guide-gabarit.php)
   ============================================================ */
.gd-page { --gd-rayon: 22px; }
.gd-page [id] { scroll-margin-top: 130px; }
.gd-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--encre) 0%, #274B5E 100%); color: var(--couleur-blanc); }
.gd-hero .page-bande-interieur { position: relative; z-index: 1; }
.gd-hero-deco span { position: absolute; border-radius: 50%; pointer-events: none; }
.gd-hero-deco span:nth-child(1) { width: 440px; height: 440px; right: -130px; top: -150px; background: rgba(255, 255, 255, 0.07); }
.gd-hero-deco span:nth-child(2) { width: 240px; height: 240px; right: 20%; bottom: -120px; background: rgba(229, 57, 53, 0.35); }
.gd-hero-deco span:nth-child(3) { width: 110px; height: 110px; left: 5%; top: 14%; border: 3px solid rgba(255, 255, 255, 0.16); }
.gd-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #FFD3D1; }
.gd-hero .gd-hero-titre { margin: 0 0 18px; max-width: 16em; color: var(--couleur-blanc); font-size: clamp(2.1rem, 5.6vw, 3.8rem); line-height: 1.05; text-wrap: balance; }
.gd-chapeau { max-width: 44em; font-size: 1.1rem; line-height: 1.65; color: #DCE3EE; }
.gd-chapeau p { margin: 0 0 12px; }
.gd-chapeau strong { color: var(--couleur-blanc); }
.gd-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.gd-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid transparent; font-weight: 800; font-size: 1rem; text-decoration: none; transition: transform 0.15s ease, background 0.15s ease; }
.gd-bouton:hover { transform: translateY(-2px); }
.gd-bouton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gd-bouton-plein { background: var(--rouge-vif); color: #fff; }
.gd-bouton-plein:hover { background: #fff; color: var(--couleur-principale); }
.gd-bouton-contour { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.gd-bouton-contour:hover { background: rgba(255, 255, 255, 0.14); }
.gd-bouton-contour-clair { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.gd-bouton-contour-clair:hover { background: rgba(255, 255, 255, 0.14); }
.gd-mot { display: inline-block; margin-right: 0.26em; opacity: 0; transform: translateY(0.5em); animation: gdMot 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes gdMot { to { opacity: 1; transform: none; } }

.gd-chiffres-bande { padding-block: 0; }
.gd-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: -40px 0 0; padding: 0; list-style: none; position: relative; z-index: 2; }
.gd-chiffre { padding: 20px 22px; border-radius: var(--gd-rayon); background: var(--couleur-blanc); border: 2px solid var(--fond-doux); box-shadow: 0 14px 34px rgba(31, 42, 68, 0.14); }
.gd-chiffre-valeur { display: block; font-family: var(--police-titre); font-weight: 800; font-size: 3rem; line-height: 1.05; color: var(--couleur-principale); }
.gd-chiffre-libelle { display: block; margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--encre-douce); }

.gd-surtitre { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--couleur-principale); }
.gd-titre-section { margin: 0 0 24px; font-size: clamp(1.7rem, 3.6vw, 2.5rem); color: var(--encre); }

.gd-faq { display: grid; gap: 12px; max-width: 880px; }
.gd-faq-item { border: 2px solid #DCE3EE; border-radius: 20px; background: var(--couleur-blanc); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.gd-faq-item[open] { border-color: var(--encre); box-shadow: 0 10px 26px rgba(31, 42, 68, 0.1); }
.gd-faq-item summary { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; cursor: pointer; list-style: none; }
.gd-faq-item summary::-webkit-details-marker { display: none; }
.gd-faq-item summary:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 18px; }
.gd-faq-icone { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fond-doux); color: var(--couleur-principale); }
.gd-faq-question { flex: 1; font-family: var(--police-titre); font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: var(--encre); }
.gd-faq-chevron { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fond-doux); color: var(--encre); transition: transform 0.25s ease, background 0.2s ease; }
.gd-faq-item[open] .gd-faq-chevron { transform: rotate(180deg); background: var(--encre); color: #fff; }
.gd-faq-reponse { padding: 0 20px 20px 76px; line-height: 1.7; color: var(--encre-douce); }
.gd-faq-reponse > :first-child { margin-top: 0; }
.gd-faq-reponse > :last-child { margin-bottom: 0; }
.gd-faq-reponse ul { margin: 8px 0 0; padding-left: 1.2em; }

.gd-outils { position: sticky; top: 0; z-index: 90; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--couleur-bordure); box-shadow: 0 6px 18px rgba(31, 42, 68, 0.06); }
.gd-outils-interieur { display: flex; align-items: center; gap: 14px; max-width: var(--largeur-max); margin: 0 auto; padding: 10px var(--marge-laterale); }
.gd-recherche { position: relative; flex: 0 0 min(340px, 38%); }
.gd-recherche svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--encre-douce); pointer-events: none; }
.gd-recherche input { width: 100%; box-sizing: border-box; min-height: 48px; margin: 0; padding: 0 16px 0 46px; border: 2px solid var(--encre); border-radius: 999px; background: #fff; color: var(--encre); font-size: 16px; }
.gd-recherche input:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: 2px; }
.gd-recherche input:disabled { opacity: 0.6; }
.gd-sommaire { position: relative; flex: 1; min-width: 0; }
.gd-somm-bouton { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 16px; border: 2px solid var(--encre); border-radius: 999px; background: #fff; color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.gd-somm-bouton:hover { background: var(--fond-doux); }
.gd-somm-bouton:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: 2px; }
.gd-somm-texte { display: flex; flex: 1; align-items: baseline; gap: 10px; min-width: 0; }
.gd-somm-label { font-weight: 800; font-size: 15px; }
.gd-somm-courant { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--encre-douce); }
.gd-somm-chevron { flex: 0 0 auto; transition: transform 0.2s ease; }
.gd-somm-bouton[aria-expanded="true"] .gd-somm-chevron { transform: rotate(180deg); }
.gd-somm-panneau { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 5; max-height: min(70vh, 560px); overflow-y: auto; padding: 14px; border: 2px solid var(--encre); border-radius: 22px; background: #fff; box-shadow: 0 24px 50px rgba(31, 42, 68, 0.28); }
.gd-somm-panneau[hidden] { display: none; }
.gd-somm-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gd-somm-grille li[hidden] { display: none; }
.gd-somm-grille a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px 8px 8px; border: 2px solid #DCE3EE; border-radius: 16px; background: #fff; color: var(--encre); font-weight: 700; font-size: 15px; line-height: 1.25; text-decoration: none; }
.gd-somm-grille a b { flex: 0 0 auto; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 12px; background: var(--fond-doux); font-size: 13px; font-weight: 800; }
.gd-somm-grille a:hover { border-color: var(--encre); }
.gd-somm-grille a:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: 2px; }
.gd-somm-grille a.gd-actif { background: var(--encre); border-color: var(--encre); color: #fff; }
.gd-somm-grille a.gd-actif b { background: var(--rouge-vif); color: #fff; }
.gd-annonce { max-width: var(--largeur-max); margin: 0 auto; padding: 0 var(--marge-laterale); font-size: 14px; font-weight: 700; color: var(--encre-douce); }
.gd-annonce:empty { display: none; }
.gd-annonce { padding-bottom: 8px; }

.gd-chapitre[hidden] { display: none; }
.gd-chap-entete { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; }
.gd-chap-icone { flex: 0 0 60px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: var(--couleur-principale); color: #fff; transform: rotate(-4deg); box-shadow: 0 10px 22px rgba(179, 18, 23, 0.28); }
.gd-chap-icone svg { width: 30px; height: 30px; }
.gd-page .gd-chap-titre { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.12; color: var(--encre); }
.gd-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; align-items: start; }
.gd-carte { padding: 24px 26px; border: 2px solid #DCE3EE; border-top: 6px solid var(--couleur-principale); border-radius: var(--gd-rayon); background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gd-carte[hidden] { display: none; }
.gd-carte:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(31, 42, 68, 0.12); }
.gd-carte-repere { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; background: var(--fond-doux); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre); }
.gd-page .gd-carte-titre { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.25; color: var(--encre); }
.gd-carte-corps { font-size: 16px; line-height: 1.65; color: var(--couleur-texte); }
.gd-carte-corps > :first-child { margin-top: 0; }
.gd-carte-corps > :last-child { margin-bottom: 0; }
.gd-carte-corps ul { margin: 6px 0; padding-left: 1.15em; }
.gd-carte-corps li { margin: 5px 0; }
.gd-carte-corps li::marker { color: var(--couleur-principale); }
.gd-rappel { display: flex; gap: 12px; margin: 16px 0 0; padding: 14px 16px; border-radius: 16px; background: #FFF6E0; border: 2px solid #F2D58A; color: #4A3A00; }
.gd-rappel-icone { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #F2B705; color: #3D2F00; }
.gd-rappel-label { display: block; margin-bottom: 2px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.gd-rappel p { margin: 0; line-height: 1.55; }
.gd-aucun { max-width: var(--largeur-max); margin: 0 auto; padding: 40px var(--marge-laterale); font-size: 1.1rem; text-align: center; }
.gd-aucun[hidden] { display: none; }
.gd-lien-bouton { padding: 0; border: 0; background: none; color: var(--couleur-principale); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }

.gd-final { background: var(--couleur-blanc); }
.gd-final-carte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: linear-gradient(135deg, var(--encre), #274B5E); color: #fff; }
.gd-final-carte h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.gd-final-carte p { margin: 0; max-width: 40em; line-height: 1.6; color: #DCE3EE; }
.gd-final-carte > div { flex: 1 1 380px; }
.gd-final-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (prefers-reduced-motion: no-preference) {
    .gd-anime [data-revele] { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
    .gd-anime [data-revele].gd-visible { opacity: 1; transform: none; }
    .gd-anime .gd-carte.gd-visible:hover { transform: translateY(-3px); }
}
@media (max-width: 860px) {
    .gd-outils-interieur { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 8px; }
    .gd-recherche { flex: 0 0 auto; }
    .gd-somm-bouton { min-height: 44px; }
    .gd-recherche input { min-height: 44px; }
    .gd-chiffres { margin-top: -28px; }
    .gd-faq-reponse { padding-left: 20px; }
    .gd-faq-icone { display: none; }
    .gd-chap-icone { flex-basis: 50px; width: 50px; height: 50px; }
}
@media print {
    .gd-outils, .gd-hero-actions, .gd-final { display: none; }
    .gd-faq-item { break-inside: avoid; }
}

/* Recherche : liste de raccourcis vers les passages trouvés */
.gd-resultats { position: absolute; left: 0; top: calc(100% + 10px); z-index: 6; width: min(560px, 92vw); max-height: min(70vh, 540px); overflow-y: auto; padding: 8px; border: 2px solid var(--encre); border-radius: 22px; background: #fff; box-shadow: 0 24px 50px rgba(31, 42, 68, 0.28); }
.gd-resultats[hidden] { display: none; }
.gd-res-entete { margin: 4px 10px 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-douce); }
.gd-res-vide { margin: 0 10px 8px; font-size: 15px; line-height: 1.5; color: var(--encre-douce); }
.gd-res-liste { margin: 0; padding: 0; list-style: none; }
.gd-res-lien { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 14px; color: var(--encre); text-decoration: none; }
.gd-res-lien:hover, .gd-res-lien.gd-res-actif { background: var(--fond-doux); }
.gd-res-lien:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: -3px; }
.gd-res-contexte { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--couleur-principale); }
.gd-res-titre { font-size: 16px; line-height: 1.3; }
.gd-res-extrait { font-size: 14px; line-height: 1.45; color: var(--encre-douce); }
.gd-resultats mark { padding: 0 2px; border-radius: 4px; background: #FFE08A; color: inherit; }
.gd-flash { outline: 4px solid var(--rouge-vif); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
    .gd-flash { animation: gdFlash 2.6s ease-out; }
}
@keyframes gdFlash { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.55); } 30% { box-shadow: 0 0 0 14px rgba(229, 57, 53, 0); } 100% { box-shadow: none; } }
@media (max-width: 860px) {
    .gd-resultats { width: 100%; }
    .gd-page [id] { scroll-margin-top: 150px; }
}

.gd-page #gdOutilsAncre { display: block; height: 0; scroll-margin-top: 84px; }

/* ==========================================================================
   Simulateur « congé de mobilité » (accord GEPP) — classes .sm-*
   ========================================================================== */
.sm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sm-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--encre) 0%, #274B5E 100%); color: var(--couleur-blanc); }
.sm-hero .page-bande-interieur { position: relative; z-index: 1; }
.sm-hero-deco span { position: absolute; border-radius: 50%; pointer-events: none; }
.sm-hero-deco span:nth-child(1) { width: 440px; height: 440px; right: -130px; top: -150px; background: rgba(255,255,255,.07); animation: sm-flotte 9s ease-in-out infinite; }
.sm-hero-deco span:nth-child(2) { width: 240px; height: 240px; right: 18%; bottom: -120px; background: rgba(229,57,53,.35); animation: sm-flotte 11s ease-in-out infinite reverse; }
.sm-hero-deco span:nth-child(3) { width: 110px; height: 110px; left: 5%; top: 14%; border: 3px solid rgba(255,255,255,.16); animation: sm-flotte 7s ease-in-out infinite; }
@keyframes sm-flotte { 50% { transform: translateY(-16px); } }
.sm-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.12); color: #FFD9D7; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sm-hero .sm-hero-titre { margin: 0 0 16px; max-width: 14em; color: var(--couleur-blanc); font-size: clamp(2.1rem, 5.6vw, 3.8rem); line-height: 1.05; text-wrap: balance; animation: sm-monte .7s both; }
.sm-hero-texte { max-width: 40em; margin: 0 0 18px; color: #DCE3EE; font-size: 1.12rem; line-height: 1.6; animation: sm-monte .7s .12s both; }
.sm-hero-texte strong { color: #fff; }
.sm-puces { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; list-style: none; animation: sm-monte .7s .24s both; }
.sm-puces li { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: .92rem; font-weight: 600; }
.sm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; animation: sm-monte .7s .36s both; }
@keyframes sm-monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.sm-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 2px solid transparent; border-radius: 999px; font: inherit; font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; }
.sm-bouton:hover { transform: translateY(-2px); }
.sm-bouton:focus-visible, .sm-parcours-carte input:focus-visible + span, .sm-choix-carte input:focus-visible + span, .sm-saisie input:focus-visible, .sm-conditions input:focus-visible, .sm-case input:focus-visible { outline: 3px solid #1F6FEB; outline-offset: 3px; }
.sm-bouton-plein { background: var(--rouge-vif); color: #fff; box-shadow: 0 8px 20px rgba(229,57,53,.35); }
.sm-bouton-plein:hover { background: var(--couleur-principale); }
.sm-bouton-plein[disabled] { opacity: .65; cursor: progress; }
.sm-bouton-contour { color: #fff; border-color: rgba(255,255,255,.7); background: transparent; }
.sm-bouton-contour:hover { background: rgba(255,255,255,.12); }
.sm-bouton-contour-fonce { color: var(--encre); border-color: var(--encre); background: transparent; }
.sm-bouton-contour-fonce:hover { background: var(--fond-doux); }
.sm-bouton-lien { color: var(--encre-douce); background: transparent; text-decoration: underline; padding-inline: 12px; }

.sm-zone { background: var(--fond-doux); }
.sm-carte { position: relative; max-width: 860px; margin: 0 auto; padding: clamp(20px, 4vw, 40px); background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(31,42,68,.16); overflow: hidden; }
.sm-alerte { padding: 14px 18px; border-radius: 12px; background: #FFF6E0; border: 1px solid #F2D58A; color: #4A3A00; }
.sm-progression { margin: 0 0 26px; }
.sm-etapes-liste { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; font-size: .9rem; font-weight: 700; color: var(--couleur-texte-clair); }
.sm-etapes-liste li { display: flex; align-items: center; gap: 8px; }
.sm-etapes-liste li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fond-doux); color: var(--encre-douce); font-size: .85rem; transition: background .3s, color .3s, transform .3s; }
.sm-etapes-liste li.est-actif { color: var(--encre); }
.sm-etapes-liste li.est-actif span { background: var(--rouge-vif); color: #fff; transform: scale(1.12); }
.sm-etapes-liste li.est-fait span { background: var(--encre); color: #fff; }
.sm-barre { height: 6px; border-radius: 99px; background: var(--fond-doux); overflow: hidden; }
.sm-barre span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--encre), var(--rouge-vif)); transition: width .6s cubic-bezier(.2,.8,.2,1); }

.sm-etape { margin: 0; padding: 0; border: 0; min-width: 0; }
.sm-etape.sm-entre { animation: sm-entre .5s both; }
@keyframes sm-entre { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.sm-etape legend { padding: 0; margin: 0 0 6px; font-family: var(--police-titre); font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800; color: var(--encre); }
.sm-aide-etape { margin: 0 0 22px; color: var(--encre-douce); line-height: 1.55; }
.sm-champ { margin: 0 0 20px; min-width: 0; }
.sm-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.sm-label { display: block; margin: 0 0 8px; font-weight: 800; color: var(--encre); line-height: 1.35; }
.sm-label em { font-weight: 500; font-style: normal; color: var(--couleur-texte-clair); }
.sm-aide { margin: 7px 0 0; font-size: .86rem; line-height: 1.5; color: var(--couleur-texte-clair); }
.sm-saisie { display: flex; align-items: center; border: 2px solid #CBD3E1; border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.sm-saisie:focus-within { border-color: var(--encre); box-shadow: 0 0 0 4px rgba(31,42,68,.12); }
.sm-saisie input { flex: 1; min-width: 0; padding: 14px 16px; border: 0; background: transparent; font: inherit; font-size: 1.12rem; font-weight: 700; color: var(--encre); border-radius: 14px; }
.sm-saisie input:focus-visible { outline: none; }
.sm-saisie input[aria-invalid] { background: #FFF1F0; }
.sm-unite { padding-right: 14px; color: var(--couleur-texte-clair); font-size: .88rem; white-space: nowrap; }
.sm-saisie-double { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
.sm-choix, .sm-parcours { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.sm-parcours { grid-template-columns: repeat(3, 1fr); }
.sm-choix-carte, .sm-parcours-carte { position: relative; cursor: pointer; }
.sm-choix-carte input, .sm-parcours-carte input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sm-choix-carte > span, .sm-parcours-carte > span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; border: 2px solid #CBD3E1; border-radius: 16px; background: #fff; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.sm-choix-carte:hover > span, .sm-parcours-carte:hover > span { transform: translateY(-2px); border-color: var(--encre-douce); }
.sm-choix-carte input:checked + span, .sm-parcours-carte input:checked + span { border-color: var(--rouge-vif); background: #FFF4F3; box-shadow: 0 8px 22px rgba(229,57,53,.18); }
.sm-choix-carte strong, .sm-parcours-carte strong { color: var(--encre); font-size: 1.05rem; }
.sm-choix-carte small, .sm-parcours-carte small { color: var(--couleur-texte-clair); line-height: 1.4; }
.sm-parcours-ico { font-size: 1.8rem; line-height: 1; margin-bottom: 4px; }
.sm-conditions { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sm-conditions label, .sm-case { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--fond-doux); cursor: pointer; line-height: 1.45; color: var(--encre-douce); }
.sm-conditions input, .sm-case input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--rouge-vif); }
.sm-plus { margin: 4px 0 20px; padding: 14px 18px; border: 2px dashed #CBD3E1; border-radius: 14px; }
.sm-plus summary { cursor: pointer; font-weight: 800; color: var(--encre); }
.sm-plus[open] summary { margin-bottom: 14px; }
.sm-erreur { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #FFF1F0; border: 1px solid #F2B8B5; color: #7A0C10; font-weight: 700; }
.sm-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.sm-nav .sm-bouton-plein { margin-left: auto; }
.sm-mention { max-width: 860px; margin: 18px auto 0; text-align: center; color: var(--encre-douce); font-size: .88rem; line-height: 1.55; }

/* Résultat */
.sm-resultat { animation: sm-entre .6s both; }
.sm-res-tete { margin-bottom: 22px; }
.sm-res-surtitre { margin: 0 0 4px; color: var(--couleur-principale); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.sm-res-titre { margin: 0 0 6px; font-family: var(--police-titre); font-size: clamp(1.6rem, 3.6vw, 2.2rem); color: var(--encre); }
.sm-res-profil { margin: 0; color: var(--couleur-texte-clair); }
.sm-res-vedette { display: flex; align-items: center; gap: clamp(18px, 4vw, 40px); padding: clamp(18px, 3.5vw, 32px); border-radius: 20px; background: linear-gradient(135deg, var(--encre), #274B5E); color: #fff; margin-bottom: 16px; position: relative; overflow: hidden; }
.sm-res-vedette:after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 190px; height: 190px; border-radius: 50%; background: rgba(229,57,53,.4); pointer-events: none; }
.sm-anneau { position: relative; flex: none; width: clamp(120px, 24vw, 168px); aspect-ratio: 1; }
.sm-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sm-anneau circle { fill: none; stroke-width: 10; }
.sm-anneau-fond { stroke: rgba(255,255,255,.16); }
.sm-anneau-val { stroke: #FF8A85; stroke-linecap: round; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) .2s; }
.sm-anneau-texte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sm-anneau-texte strong { font-family: var(--police-titre); font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1; }
.sm-anneau-texte small { font-size: .78rem; color: #DCE3EE; }
.sm-vedette-texte { position: relative; z-index: 1; min-width: 0; }
.sm-vedette-label { margin: 0; color: #FFD9D7; font-weight: 700; }
.sm-vedette-montant { margin: 2px 0 4px; font-family: var(--police-titre); font-weight: 800; font-size: clamp(2.2rem, 7vw, 3.8rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.sm-vedette-montant.est-fini { animation: sm-pulse .6s; }
@keyframes sm-pulse { 40% { transform: scale(1.06); } }
.sm-vedette-calcul { margin: 0; color: #DCE3EE; font-size: .95rem; }
.sm-res-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 12px; }
.sm-mini { padding: 16px 18px; border: 2px solid #E3E8F1; border-radius: 16px; background: #fff; transition: border-color .3s, background .3s, transform .3s; }
.sm-mini.est-actif { border-color: var(--rouge-vif); background: #FFF4F3; animation: sm-pulse .5s; }
.sm-mini-label { margin: 0 0 6px; font-weight: 700; color: var(--encre-douce); font-size: .9rem; }
.sm-mini-montant { margin: 0; font-family: var(--police-titre); font-weight: 800; font-size: 1.7rem; color: var(--encre); font-variant-numeric: tabular-nums; }
.sm-mini-detail { margin: 4px 0 0; font-size: .85rem; color: var(--couleur-texte-clair); }
.sm-total { padding: 18px 22px; border-radius: 18px; background: var(--couleur-principale); color: #fff; margin-bottom: 22px; }
.sm-total-label { margin: 0; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .8rem; color: #FBD3D1; }
.sm-total-montant { margin: 2px 0; font-family: var(--police-titre); font-weight: 800; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sm-total-note { margin: 0; font-size: .85rem; color: #FBD3D1; }
.sm-simu-plus { padding: 20px 22px; border-radius: 18px; background: var(--fond-doux); margin-bottom: 18px; }
.sm-curseur-ligne { display: flex; align-items: center; gap: 16px; margin: 14px 0; }
.sm-curseur-ligne input[type=range] { flex: 1; min-width: 0; height: 32px; accent-color: var(--rouge-vif); cursor: pointer; }
.sm-curseur-ligne output { flex: none; min-width: 9.5em; text-align: right; font-weight: 800; color: var(--encre); }
.sm-ruban { display: flex; gap: 5px; }
.sm-mois { flex: 1; height: 18px; border-radius: 6px; background: var(--encre); transform-origin: left; animation: sm-mois .5s both; animation-delay: calc(var(--i) * 60ms); transition: background .3s; }
.sm-mois.est-anticipe { background: #F2B8B5; }
@keyframes sm-mois { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
.sm-ruban-legende { margin: 10px 0 0; font-size: .82rem; color: var(--encre-douce); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sm-pastille { width: 12px; height: 12px; border-radius: 4px; background: var(--encre); display: inline-block; }
.sm-pastille.est-anticipe { background: #F2B8B5; margin-left: 10px; }
.sm-info { margin: 0 0 16px; padding: 14px 18px; border-radius: 14px; line-height: 1.5; }
.sm-info-ok { background: #E8F6EC; color: #14532D; border: 1px solid #A7D9B5; }
.sm-info-attention { background: #FFF6E0; color: #4A3A00; border: 1px solid #F2D58A; }
.sm-detail { margin-bottom: 18px; border: 2px solid #E3E8F1; border-radius: 16px; padding: 4px 18px; }
.sm-detail summary { cursor: pointer; padding: 12px 0; font-weight: 800; color: var(--encre); }
.sm-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sm-table th, .sm-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #E3E8F1; vertical-align: top; }
.sm-table thead th { background: var(--fond-doux); color: var(--encre); }
.sm-table-detail th { font-weight: 600; color: var(--encre-douce); width: 52%; }
.sm-table-detail td { text-align: right; font-weight: 700; color: var(--encre); font-variant-numeric: tabular-nums; }
.sm-vigilance { margin-bottom: 18px; padding: 16px 20px; border-radius: 16px; background: #F7F8FB; }
.sm-vigilance h4 { margin: 0 0 10px; color: var(--encre); }
.sm-vigilance ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--encre-douce); line-height: 1.5; }
.sm-aides li.sm-aides-note { font-size: .85rem; color: var(--couleur-texte-clair); }
.sm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; align-items: center; }
.sm-confirm { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: #E8F6EC; color: #14532D; font-weight: 700; }
.sm-confettis { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.sm-confettis span { position: absolute; top: -12px; width: 9px; height: 15px; border-radius: 2px; opacity: 0; animation: sm-chute 2.4s ease-in forwards; }
@keyframes sm-chute { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), 520px) rotate(var(--rot)); } }

/* Explications */
.sm-explique .sm-surtitre { margin: 0 0 6px; color: var(--couleur-principale); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.sm-titre-section { margin: 0 0 24px; font-family: var(--police-titre); font-size: clamp(1.7rem, 4vw, 2.5rem); color: var(--encre); }
.sm-explique-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.sm-explique-carte { padding: 22px 24px; border-radius: 20px; background: #fff; box-shadow: 0 8px 26px rgba(31,42,68,.1); line-height: 1.6; color: var(--encre-douce); }
.sm-explique-carte h3 { margin: 0 0 12px; color: var(--encre); font-size: 1.15rem; }
.sm-explique-carte ul { padding-left: 1.2em; }
.sm-limites { margin-top: 22px; padding: 20px 24px; border-radius: 20px; background: #fff; border-left: 6px solid var(--couleur-principale); line-height: 1.6; color: var(--encre-douce); }
.sm-limites h3 { margin: 0 0 8px; color: var(--encre); }
.sm-limites ul { margin: 0; padding-left: 1.2em; }
.avant-revele { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.avant-revele.est-revele { opacity: 1; transform: none; }

@media (max-width: 720px) {
    .sm-ligne, .sm-parcours, .sm-choix { grid-template-columns: 1fr; }
    .sm-etapes-liste li { font-size: 0; gap: 0; }
    .sm-etapes-liste li span { font-size: .85rem; }
    .sm-res-vedette { flex-direction: column; align-items: flex-start; }
    .sm-curseur-ligne { flex-direction: column; align-items: stretch; gap: 6px; }
    .sm-curseur-ligne output { text-align: left; }
    .sm-actions .sm-bouton { width: 100%; }
    .sm-nav .sm-bouton { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .sm-page *, .sm-page *:before, .sm-page *:after { animation: none !important; transition: none !important; }
    .avant-revele { opacity: 1; transform: none; }
}

/* Simulateur : saisie des 12 derniers mois */
.sm-mois-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; margin: 0 0 14px; }
.sm-mois-champ { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--encre-douce); text-transform: capitalize; }
.sm-mois-champ .sm-saisie input { padding: 10px 12px; font-size: 1rem; }
.sm-total-saisi { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--fond-doux); color: var(--encre-douce); }
.sm-total-saisi strong { color: var(--encre); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .sm-mois-grille { grid-template-columns: 1fr 1fr; } }