/* public/assets/css/base.css — feuille de style de BASE, unique, mobile-first (FC-001 point 7).
 *
 * RÈGLE ABSOLUE : ce fichier (et toute page/composant du projet) n'utilise JAMAIS de couleur ni de
 * police écrite en dur, ni dans une feuille de style, ni dans un style en ligne. Toute couleur et
 * toute police viennent d'une des variables définies par le fichier de thème actif
 * (assets/css/themes/theme-a.css, theme-b.css ou theme-c.css, chargé par includes/header.php selon
 * PARAMETRE.theme_actif). Changer de thème ne doit JAMAIS nécessiter de modifier ce fichier.
 *
 * Convention de contraste adoptée ici (documentée aussi dans LIVRAISON_FC-001.md, « points ouverts » :
 * aucun fichier theme.css source n'était disponible au moment de FC-001, palettes proposées à valider) :
 *   - Toute surface en --couleur-primaire (en-tête, boutons principaux, nav active) est TOUJOURS un
 *     ton suffisamment sombre pour porter un texte clair : on y utilise var(--couleur-fond) comme
 *     couleur de texte (blanc ou quasi-blanc dans les 3 palettes proposées).
 *   - Toute surface en --couleur-accent / --couleur-accent-clair (badges, puces, mise en avant) est
 *     TOUJOURS un ton assez clair pour porter un texte sombre : on y utilise var(--couleur-texte).
 *     C'est ce qui garantit, par construction, l'exigence « sur fond orange, texte foncé, jamais
 *     blanc » (FC-001 point 7) : l'orange n'est jamais utilisé comme --couleur-primaire dans les
 *     palettes proposées, uniquement comme --couleur-accent.
 *   - Contraste texte courant visé : au moins 4,5:1. Zones tactiles (boutons, liens de menu,
 *     champs) : au moins 44px de hauteur.
 */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family: var(--police-texte);
    line-height: 1.5;
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--police-titre);
    color: var(--couleur-texte);
    margin: 0 0 0.6em;
    line-height: 1.25;
}

a {
    color: var(--couleur-primaire-fonce);
    text-decoration: underline;
}
a:hover, a:focus {
    color: var(--couleur-primaire);
}

p {
    margin: 0 0 1em;
}

small, .fcc-texte-discret {
    color: var(--couleur-texte-discret);
}

hr {
    border: none;
    border-top: 1px solid var(--couleur-bordure);
    margin: 1.5em 0;
}

/* FC-001N : texte présent pour les lecteurs d'écran mais masqué visuellement (ex. <label> d'un champ
   de recherche déjà annoncé par son placeholder visible) — jamais display:none, qui retirerait
   l'élément de l'arbre d'accessibilité. */
.fcc-accessibilite-seule {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Mise en page générale ---------- */

.fcc-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.fcc-conteneur {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- En-tête applicatif ---------- */

.fcc-entete {
    /* FC-001G : fond plein var(--couleur-primaire-fonce) sur les 3 thèmes (avant : --couleur-entete,
       blanc sur le thème A) + filet orange dessous et coins bas arrondis, pour reproduire la
       maquette cible du thème A (image 3 de FC-001G) sur toutes les pages. Texte clair en
       var(--couleur-fond), même convention que .fcc-login-page depuis FC-001E/F : une surface en
       --couleur-primaire-fonce est toujours assez sombre dans les 3 palettes pour porter ce texte.
       --couleur-entete/--couleur-entete-texte n'ont donc plus de consommateur dans ce fichier : on
       les laisse déclarées dans les 3 fichiers de thème (signalé dans LIVRAISON_FC-001G.md), elles
       ne sont pas supprimées pour rester hors du périmètre strictement visuel de cette tâche.
       FC-001H : en-tête fixée en haut (position: sticky) pour rester visible au-dessus de la barre
       latérale, elle-même fixée juste en dessous (cf. .fcc-barre-laterale, top aligné sur la hauteur
       réelle de cet en-tête — à garder synchronisé si le padding ou la taille du logo changent). */
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--couleur-primaire-fonce);
    color: var(--couleur-fond);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--couleur-accent);
    border-radius: 0 0 var(--rayon-carte) var(--rayon-carte);
}
.fcc-entete a, .fcc-entete .fcc-entete__titre {
    color: var(--couleur-fond);
    text-decoration: none;
}
.fcc-entete__logo-pastille {
    /* Pastille arrondie autour du logo : fond var(--couleur-carte) (blanc/quasi-blanc dans les 3
       palettes). Toujours visible désormais (l'en-tête n'est plus blanc sur le thème A depuis
       FC-001G), contrairement au cas particulier documenté avant cette tâche. 64px par défaut,
       réduite à 52px sous 600px (FC-001H, cf. media query plus bas). */
    background: var(--couleur-carte);
    border-radius: var(--rayon-carte);
    width: 64px;
    height: 64px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.fcc-entete__logo-pastille img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fcc-entete__titre {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.fcc-entete__spacer {
    flex: 1;
    min-width: 0;
}
/* Identité à droite (FC-001G, image de référence 1) : nom + rôle empilés, puis avatar initiales.
   Tailles agrandies en FC-001H suite au retour « police trop petite ». */
.fcc-entete__identite {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.fcc-entete__texte-identite {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
    min-width: 0;
}
.fcc-entete__utilisateur {
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}
.fcc-entete__role {
    /* « légèrement atténué » (FC-001H) via opacity plutôt qu'une nouvelle variable : vérifié par
       calcul de contraste sur les 3 thèmes à 0.85 d'opacité, toujours ≥ 4,5:1 (le thème A, le plus
       serré des 3, reste à environ 7,7:1 une fois l'opacité appliquée). */
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.85;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.fcc-entete__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--couleur-accent);
    color: var(--couleur-texte);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

/* ---------- Bannière environnement de test ---------- */

.fcc-banniere-environnement {
    background: var(--couleur-teinte);
    color: var(--couleur-texte);
    text-align: center;
    padding: 6px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--couleur-bordure);
}

/* ---------- Menu (pastilles arrondies, FC-001I) ---------- */
/*
 * FC-001I : retour FEDE/Adams sur FC-001H — menu « plus cool », entrées en pastilles arrondies avec
 * pictogramme, texte plus grand et gras. Ombre douce neutre (rgba, pas une variable de thème — cf.
 * règle d'en-tête de ce fichier) ajoutée sous la barre de menu en plus de la bordure basse existante.
 * Le défilement horizontal propre à la barre de menu (FC-001G) est inchangé.
 */
.fcc-menu {
    position: relative;
    background: var(--couleur-carte);
    border-bottom: 1px solid var(--couleur-bordure);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    /* FC-001G : le menu reste horizontal à toute largeur. Sous la largeur de son contenu, il défile
       dans sa propre barre (jamais la page entière) ; scrollbar masquée mais le défilement au doigt
       (tactile) ou à la molette reste possible.
       FC-001N4 : ce défilement caché n'est conservé QUE sous 1200px (seuil relevé depuis 900px en
       FC-001N3, la 2e ligne introduite à cette occasion étant abandonnée, cf. media query plus bas
       et LIVRAISON_FC-001N4.md) — à partir de 1200px, une seule ligne, plus de défilement, plus
       besoin du fondu ci-dessous. */
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.fcc-menu::-webkit-scrollbar {
    display: none;
}
/* FC-001N3 : indice visuel que le menu défile (5e pastille potentiellement hors champ) — fondu
   permanent sur le bord droit, pas seulement quand le contenu déborde réellement : un fondu qui
   réagit à la position de défilement en CSS pur (sans JavaScript) est fragile/peu fiable selon les
   navigateurs ; la tâche autorise explicitement cette solution de repli. Pseudo-élément du
   CONTENEUR scrollable (.fcc-menu), pas de la liste qui défile à l'intérieur : reste donc fixe sur
   le bord droit visible quelle que soit la position de défilement. Couleur identique au fond du
   menu (var(--couleur-carte)) pour un fondu cohérent dans les 3 thèmes. */
.fcc-menu::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, transparent, var(--couleur-carte));
    pointer-events: none;
}
.fcc-menu__liste {
    list-style: none;
    margin: 0;
    padding: 10px 14px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: max-content;
    min-width: 100%;
}
/* FC-001N4 : retour FEDE/Adams sur FC-001N3 — un menu non sélectionné ressemblait à du texte simple
   (pastille visible seulement au survol) ; l'ancien design du survol (fond var(--couleur-teinte),
   liseré bas orange) devient l'état NORMAL, pour que tous les boutons soient visibles en permanence,
   pas seulement l'actif. Le survol/focus d'un bouton non actif reste perceptible par un renforcement
   (fond var(--couleur-accent-clair), un ton plus marqué que --couleur-teinte) — variable de thème,
   jamais de couleur en dur. Exclu explicitement du bouton actif (:not(.fcc-menu__lien--actif)) pour
   qu'un survol du bouton vert sélectionné ne change rien (la spécificité de :hover l'aurait sinon
   emporté sur .fcc-menu__lien--actif, simple classe de même poids). */
.fcc-menu__lien {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--couleur-teinte);
    color: var(--couleur-texte);
    text-decoration: none;
    font-family: var(--police-titre);
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 3px solid var(--couleur-accent);
}
.fcc-menu__lien:not(.fcc-menu__lien--actif):hover,
.fcc-menu__lien:not(.fcc-menu__lien--actif):focus {
    background: var(--couleur-accent-clair);
}
.fcc-menu__lien:focus-visible {
    outline: 3px solid var(--couleur-accent);
    outline-offset: 2px;
}
.fcc-menu__lien--actif {
    background: var(--couleur-primaire);
    color: var(--couleur-fond);
    border-bottom-color: var(--couleur-accent);
}
.fcc-menu__icone {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* FC-001N4 : retour FEDE/Adams — la bascule « une seule ligne, sans défilement » introduite en
   FC-001N3 à 900px (flex-wrap: wrap, 2e ligne possible) est abandonnée : à 900-1199px, la 2e ligne
   déplaçait « Administration » et le client la refuse. Le menu défile maintenant (comme sous 900px
   avant FC-001N3) jusqu'à 1200px, seuil au-delà duquel les 5 boutons — libellé « Demande d'adhésion »
   raccourci (cf. includes/menu.php) et pastilles resserrées ci-dessous — tiennent sur une ligne (cf.
   calcul dans LIVRAISON_FC-001N4.md). Seule media query min-width du fichier (le reste est
   mobile-first en max-width) : nécessaire ici, le comportement par défaut (scroll + fondu) est celui
   du petit écran, c'est le grand écran qui reçoit l'amélioration. */
@media (min-width: 1200px) {
    .fcc-menu {
        overflow-x: visible;
    }
    .fcc-menu::after {
        /* Fondu de défilement (cf. règle plus haut) : plus de défilement à partir d'ici, plus besoin
           d'indice visuel. */
        display: none;
    }
    .fcc-menu__liste {
        flex-wrap: nowrap;
        width: auto;
        min-width: 0;
        gap: 8px;
    }
    .fcc-menu__lien {
        font-size: .95rem;
        padding: 0 12px;
        gap: 6px;
    }
    .fcc-menu__icone {
        width: 20px;
        height: 20px;
    }
}

/* ---------- Corps de page + barre latérale (FC-001H, pleine hauteur FC-001I) ---------- */
/*
 * Sous l'en-tête (sticky) : une ligne flex [barre latérale][colonne principale = menu + contenu].
 * .fcc-corps est en stretch (valeur par défaut d'align-items) : la barre (nav) prend donc
 * naturellement toute la hauteur de la colonne principale, quelle que soit la longueur du contenu.
 * FC-001I : retour FEDE/Adams sur FC-001H — avec un contenu court, le fond vert de la barre
 * n'atteignait pas le bas de la fenêtre (la nav portait elle-même position: sticky + align-self:
 * flex-start, ce qui limitait sa hauteur à celle de son propre contenu au lieu de suivre le stretch
 * du parent). Correction : la nav garde le stretch par défaut (fond vert sur toute la hauteur de
 * .fcc-corps) et .fcc-corps reçoit un min-height explicite pour couvrir au moins la fenêtre sous
 * l'en-tête même quand le contenu est court ; le sticky passe à la LISTE interne de la barre
 * (.fcc-barre-laterale__liste), pour que seul le contenu (Déconnexion) suive le défilement, pas le
 * fond vert. top = hauteur réelle de .fcc-entete : 64px logo + 14px*2 padding + 3px filet = 95px en
 * desktop, 52+12*2+3 = 79px sous 600px — à garder synchronisé si l'en-tête change.
 */
.fcc-corps {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-height: calc(100vh - 95px);
    min-height: calc(100dvh - 95px);
}
.fcc-corps__principal {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.fcc-barre-laterale {
    /* FC-001J : 88px → 112px, encore insuffisant (retour FEDE/Adams FC-001K : « Déconnexion » coupé
       en « Déconnexi / on »). FC-001K : 112px → 170px (plafond autorisé par la tâche, cf. calcul
       dans LIVRAISON_FC-001K.md — « Déconnexion » en Poppins 1rem gras ≈ 100-120px de texte, + 8px
       d'air de chaque côté + 8px de padding de chaque côté + 10px de marge de chaque côté ≈ 152 à
       173px nécessaires ; 170px retenu pour couvrir la fourchette haute sans dépasser le maximum
       autorisé). Inchangé sous 600px (68px, icône seule, cf. media query plus bas). Largeur seule :
       le reste de la mise en page (colonne principale en flex:1, position sticky de l'en-tête/de la
       liste) s'adapte automatiquement, rien d'autre à recalculer. */
    background: var(--couleur-primaire-fonce);
    width: 170px;
    flex-shrink: 0;
}
/* FC-001N : sur les pages d'administration, la barre est élargie pour que « Liste des Utilisateurs »
   (le plus long des 3 sous-menus) tienne sur une ligne ; inchangée (170px) ailleurs.
   FC-001N4 : 270px → 240px — à 1280px de fenêtre sur une page admin-*.php, l'espace disponible pour
   le menu horizontal (fenêtre − barre) ne suffisait pas de façon certaine pour les 5 boutons sur une
   ligne avec une barre à 270px.
   FC-001N6 §2 : 240px → 260px — la tâche demande une police de sous-menu portée à 1.1rem/700 (depuis
   une taille réellement affichée de 0.8rem, cf. .fcc-barre-laterale__sous-lien .fcc-barre-laterale__libelle
   plus bas) et des icônes à 24px ; à 240px, « Liste des Utilisateurs » à cette taille ne tient plus
   sur une ligne. 260px est la limite haute que la tâche autorise explicitement en cas de besoin
   (point de vigilance à confirmer visuellement, signalé dans LIVRAISON_FC-001N6.md : réduit encore un
   peu la marge disponible pour les 5 boutons du menu horizontal à 1280px sur une page admin-*.php,
   déjà serrée à 240px depuis FC-001N4). */
.fcc-barre-laterale--admin {
    width: 260px;
}
/* FC-001N2 : retour FEDE/Adams sur FC-001N — Déconnexion ne doit plus être poussé au bas de la
   fenêtre (margin-top: auto + liste en colonne flex pleine hauteur, retirés ici). La liste redevient
   un simple bloc sticky de la hauteur de son contenu : les éléments s'empilent du haut vers le bas
   dans l'ordre du HTML — [titre + sous-menus s'il y en a] puis [Déconnexion] juste après, jamais
   collé au bas de la fenêtre. Sans sous-menu (page sans bloc Administration), Déconnexion est le
   premier et seul <li> de la liste : tout en haut de la barre, comme avant FC-001N. */
.fcc-barre-laterale__liste {
    list-style: none;
    margin: 0;
    /* FC-001N6 §1 : padding-top identique à .fcc-menu__liste (10px) — c'est ce qui aligne le haut du
       premier élément de la barre (Déconnexion, quand il n'y a pas de bloc Administration au-dessus)
       sur le haut du premier bouton du menu horizontal (Accueil). Le padding bas (12px) reste propre
       à cette liste, il n'a pas besoin de correspondre à celui du menu. */
    padding: 10px 0 12px;
    position: sticky;
    top: 95px;
}
/* FC-001N2 : séparateur (espace 24px + filet) devant Déconnexion UNIQUEMENT quand il suit un bloc
   Administration (sous-menus) — :not(:first-child) distingue les deux cas sans rien changer en PHP :
   quand il n'y a pas de sous-menu, le <li> Déconnexion est le seul/premier enfant de la liste. */
.fcc-barre-laterale__item-deconnexion:not(:first-child) {
    margin-top: 24px;
    border-top: 1px solid var(--couleur-primaire);
}
.fcc-barre-laterale__lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 12px 8px;
    color: var(--couleur-fond);
    text-decoration: none;
}
.fcc-barre-laterale__lien:hover, .fcc-barre-laterale__lien:focus-visible {
    background: var(--couleur-primaire);
}
.fcc-barre-laterale__lien:focus-visible {
    outline: 3px solid var(--couleur-accent);
    outline-offset: -3px;
}
/* FC-001J : Déconnexion en bouton plein orange pour rester bien visible dans la barre — classe
   modificatrice (pas le style générique .fcc-barre-laterale__lien) pour que de futures actions
   ajoutées à la barre ne l'héritent pas par défaut. Convention de contraste du fichier (cf.
   en-tête) : --couleur-accent est toujours assez clair pour exiger un texte foncé
   (--couleur-texte), jamais --couleur-fond ici.
   FC-001N5 : retour FEDE/Adams — le bouton (grand bloc orange, icône au-dessus du texte, 76px de
   haut) doit avoir le même gabarit que les boutons du menu horizontal (.fcc-menu__lien) : icône à
   GAUCHE du texte (flex-direction: row, remplace la colonne), même hauteur (48px, au lieu de 76px),
   même police (.95rem/700, au lieu de 1rem), même pastille (border-radius: 999px, au lieu de
   var(--rayon-bouton)), même padding horizontal (12px). gap (6px, espace icône-texte) et
   align-items/justify-content (centrage) déjà hérités de .fcc-barre-laterale__lien, inchangés.
   margin réduite de 10px à 8px (170px de barre − 2×8px de marge − 2×12px de padding ≈ 130px de
   contenu disponible pour icône(20px)+espace(6px)+texte, cf. calcul dans LIVRAISON_FC-001N5.md) —
   c'est ce que la tâche autorise explicitement en cas de besoin de place (« réduire le padding
   latéral de la barre, pas la police »). Valeurs désormais identiques en mobile (68px, icône seule) :
   l'ancien correctif spécifique au mobile (margin 8px/min-height 52px) n'a donc plus lieu d'être,
   supprimé de la media query plus bas. Aucun liseré/ombre ajouté : un liseré de la même couleur que
   le fond du bouton (déjà orange plein) serait invisible — la tâche le présente comme accepté, pas
   obligatoire. */
.fcc-barre-laterale__lien--deconnexion {
    flex-direction: row;
    margin: 8px;
    min-height: 48px;
    padding: 0 12px;
    background: var(--couleur-accent);
    color: var(--couleur-texte);
    border-radius: 999px;
}
/* FC-001N6 §1 : quand Déconnexion est le premier (et seul) élément de la liste — c'est-à-dire sur
   toute page SANS bloc Administration au-dessus, accueil compris — sa marge haute (8px, héritée du
   margin:8px ci-dessus, utile pour le centrage horizontal dans la barre) est annulée : combinée au
   padding-top de .fcc-barre-laterale__liste (10px, identique à .fcc-menu__liste), le haut du bouton
   tombe exactement à 10px, comme le haut du bouton « Accueil » du menu horizontal — mêmes hauteurs
   (48px) de chaque côté, donc mêmes centres verticaux. Sur les pages admin-*.php, Déconnexion suit le
   bloc Administration (:not(:first-child)) : cette règle ne s'applique pas, l'alignement avec Accueil
   n'étant pas demandé dans ce cas (cf. tâche, point 1). */
.fcc-barre-laterale__item-deconnexion:first-child .fcc-barre-laterale__lien--deconnexion {
    margin-top: 0;
}
.fcc-barre-laterale__lien--deconnexion:hover,
.fcc-barre-laterale__lien--deconnexion:focus-visible {
    background: var(--couleur-accent-clair);
}
.fcc-barre-laterale__lien--deconnexion:focus-visible {
    outline: 3px solid var(--couleur-fond);
    outline-offset: 2px;
}
.fcc-barre-laterale__lien--deconnexion .fcc-barre-laterale__icone {
    width: 20px;
    height: 20px;
}
.fcc-barre-laterale__lien--deconnexion .fcc-barre-laterale__libelle {
    /* FC-001K : jamais de retour à la ligne pour « Déconnexion » — c'est la largeur de la barre
       ci-dessus qui est calculée pour que ce mot tienne en une ligne, pas l'inverse. Police titre
       (Poppins sur le thème A) : base du calcul de largeur ci-dessus.
       FC-001N5 : taille alignée sur .fcc-menu__lien (.95rem, au lieu de 1rem). */
    font-family: var(--police-titre);
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
}
.fcc-barre-laterale__icone {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* FC-001K : overflow-wrap: break-word (ajouté en FC-001J) retiré — c'est lui qui coupait
   « Déconnexion » en « Déconnexi / on ». max-width/text-align restent utiles à un futur élément
   multi-mots de la barre ; sans break-word, un mot seul ne sera plus jamais cassé (comportement par
   défaut overflow-wrap: normal), il pourra seulement déborder si vraiment trop long — cas couvert
   pour Déconnexion par white-space: nowrap + la largeur calculée de .fcc-barre-laterale ci-dessus. */
.fcc-barre-laterale__libelle {
    font-size: 0.8rem;
    font-weight: 700;
    max-width: 100%;
    text-align: center;
}

/* FC-001N : bloc "Administration" (titre + 3 sous-menus) affiché en haut de la barre sur les pages
   admin-*.php. Style distinct de .fcc-barre-laterale__lien (icône+libellé empilés, pensé pour
   Déconnexion) : ici une ligne horizontale icône+libellé, comme une entrée de nav verticale
   classique, avec liseré gauche pour l'état actif (cf. .fcc-menu__lien--actif, même principe). */
.fcc-barre-laterale__titre-admin {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 6px;
    color: var(--couleur-fond);
    font-weight: 700;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--couleur-primaire);
}
.fcc-barre-laterale__sous-lien {
    display: flex;
    align-items: center;
    gap: 10px;
    /* FC-001N6 §2 : 48px → 52px (hauteur de ligne minimale demandée pour les sous-menus). */
    min-height: 52px;
    padding: 10px 16px;
    color: var(--couleur-fond);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border-left: 4px solid transparent;
}
/* FC-001N6 §2 : le libellé réellement affiché (span .fcc-barre-laterale__libelle, à l'intérieur du
   lien) héritait en fait de la règle générique .fcc-barre-laterale__libelle plus haut (0.8rem) — son
   propre font-size l'emporte toujours sur le 1rem déclaré ci-dessus sur le <a> parent, quel que soit
   l'ordre des règles dans le fichier, puisque les deux sélecteurs ne ciblent pas le même élément.
   C'était la vraie taille affichée des sous-menus (plus petite que ne le laissait croire la règle
   ci-dessus), à l'origine du retour « police trop petite » de la tâche. Sélecteur à 2 classes donc
   plus spécifique que l'ancienne règle générique (peu importe l'ordre) : 1.1rem minimum demandé. */
.fcc-barre-laterale__sous-lien .fcc-barre-laterale__libelle {
    font-size: 1.1rem;
}
/* FC-001N7 — diagnostic : la règle générique `a:hover, a:focus { color: var(--couleur-primaire); }`
   (tout en haut de ce fichier) a une spécificité élément+pseudo-classe qui l'emporte sur la classe
   seule .fcc-barre-laterale__sous-lien (qui ne fixait sa couleur qu'à l'état normal, jamais au
   survol/focus) : au survol, le texte passait donc à var(--couleur-primaire) — vert foncé — sur le
   fond vert foncé de la barre, illisible. Le span .fcc-barre-laterale__libelle et le svg
   .fcc-barre-laterale__icone (stroke: currentColor) héritaient ensuite de cette couleur sombre,
   n'ayant eux-mêmes aucune couleur propre. Corrigé en fixant `color` explicitement, à CHACUN des 3
   niveaux (lien, span, svg) et sur :hover ET :focus-visible ET :active, avec des sélecteurs à 2
   classes + pseudo-classe (spécificité strictement supérieure à `a:hover`/`a:focus`, peu importe
   l'ordre des règles dans le fichier) — cf. tâche §2, qui demande cette redondance à dessein.
   Volontairement SANS :not(--actif) ici : le sous-menu actif est un .fcc-barre-laterale__sous-lien
   comme les autres, donc tout aussi affecté par le bug a:hover/a:focus — le texte doit rester blanc
   quand la souris le survole aussi (tâche §3 : « si la souris survole le sous-menu actif, ne rien
   changer », donc surtout pas de retour au vert foncé). Seul le FOND distingue encore actif/non-actif
   (cf. règles plus bas), jamais la couleur du texte/icône. */
.fcc-barre-laterale__sous-lien:hover,
.fcc-barre-laterale__sous-lien:focus-visible,
.fcc-barre-laterale__sous-lien:active {
    color: var(--couleur-fond);
}
.fcc-barre-laterale__sous-lien:hover .fcc-barre-laterale__libelle,
.fcc-barre-laterale__sous-lien:focus-visible .fcc-barre-laterale__libelle,
.fcc-barre-laterale__sous-lien:active .fcc-barre-laterale__libelle {
    color: var(--couleur-fond);
}
.fcc-barre-laterale__sous-lien:hover .fcc-barre-laterale__icone,
.fcc-barre-laterale__sous-lien:focus-visible .fcc-barre-laterale__icone,
.fcc-barre-laterale__sous-lien:active .fcc-barre-laterale__icone {
    color: var(--couleur-fond);
}
/* Fond : seul le sous-menu NON actif en change (orange foncé à la souris, overlay clair neutre au
   clavier/clic) — :not(--actif) exclut le sous-menu actif (même principe que
   .fcc-menu__lien:not(.fcc-menu__lien--actif):hover plus haut) pour qu'il garde son fond plein et
   distinct (cf. règle --actif plus bas), sans jamais rien y changer au survol (tâche §3).
   Fond orange foncé réservé au survol SOURIS (`@media (hover: hover)`, tâche §3) — jamais au focus
   clavier ni à :active, qui gardent le même éclaircissement translucide neutre qu'avant (overlay
   blanc, pas une couleur de thème : au-dessus d'un fond sombre qui change selon le thème, c'est la
   seule façon d'obtenir un éclaircissement relatif sans coder une couleur de thème en dur — même
   esprit que les ombres rgba déjà utilisées ailleurs dans ce fichier, cf. en-tête). Pas de transition
   sur `color` ajoutée ici (aucune n'existait déjà sur cet élément) : seul `background` change, le
   texte reste blanc en permanence dans tous les états ci-dessus, jamais temporairement invisible. */
@media (hover: hover) {
    .fcc-barre-laterale__sous-lien:not(.fcc-barre-laterale__sous-lien--actif):hover {
        background: var(--couleur-accent-fonce);
    }
}
.fcc-barre-laterale__sous-lien:not(.fcc-barre-laterale__sous-lien--actif):focus-visible,
.fcc-barre-laterale__sous-lien:not(.fcc-barre-laterale__sous-lien--actif):active {
    background: rgba(255, 255, 255, .15);
}
.fcc-barre-laterale__sous-lien:focus-visible {
    outline: 3px solid var(--couleur-accent);
    outline-offset: -3px;
}
.fcc-barre-laterale__sous-lien--actif {
    background: var(--couleur-primaire);
    border-left-color: var(--couleur-accent);
}
/* Pictogrammes du bloc Administration à 24px (FC-001N6 §2 ; 22px avant), plus petits que les 28px
   par défaut de .fcc-barre-laterale__icone (Déconnexion reste à 36px via son propre sélecteur plus
   haut). Le titre "Administration" garde 22px (pas un sous-menu, hors périmètre du point 2). */
.fcc-barre-laterale__titre-admin .fcc-barre-laterale__icone {
    width: 22px;
    height: 22px;
}
.fcc-barre-laterale__sous-lien .fcc-barre-laterale__icone {
    width: 24px;
    height: 24px;
}

/* ---------- Contenu principal ---------- */

.fcc-contenu {
    flex: 1;
    padding: 20px 0 40px;
}

/* ---------- Cartes ---------- */

.fcc-carte {
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    padding: 20px;
    margin-bottom: 20px;
}
.fcc-carte__titre {
    font-family: var(--police-titre);
    font-size: 1.1rem;
    margin-bottom: 0.75em;
}

/* ---------- Titre de page avec filet (FC-001G, même principe que .fcc-login-titre) ---------- */

.fcc-titre-page {
    font-family: var(--police-titre);
    color: var(--couleur-primaire-fonce);
    margin: 0;
    /* FC-001N8 §2 : explicite (1.9rem/700) au lieu de reposer sur la taille/graisse par défaut du
       navigateur pour un <h1> (~2em, gras) — jusqu'ici jamais fixées ici, contrairement au reste de
       ce fichier. Partagé par tous les titres de page (« Paramètres », mais aussi « Gestion des
       Utilisateurs », « Tableau de bord », etc.) : valeur très proche du rendu par défaut, donc sans
       régression visuelle ailleurs. */
    font-size: 1.9rem;
    font-weight: 700;
}
.fcc-titre-page::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    margin: 10px 0 0;
    background: var(--couleur-accent);
    border-radius: 999px;
}

/* ---------- Carte de bienvenue (style RIA-SOFT, FC-001G) ---------- */

.fcc-carte-bienvenue {
    border: 2px solid var(--couleur-accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.fcc-bienvenue__titre {
    font-family: var(--police-titre);
    font-size: 1.4rem;
    margin: 0 0 10px;
}
.fcc-bienvenue__amorce {
    display: block;
    font-family: var(--police-texte);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--couleur-texte-discret);
    margin-bottom: 4px;
}
.fcc-bienvenue__sous-ligne {
    color: var(--couleur-texte-discret);
    margin: 0 0 10px;
}
.fcc-bienvenue__role {
    margin: 0 0 14px;
}

/* ---------- Cartes KPI, Objectif d'adhésion, Adhérents par région (style RIA-SOFT + bandeau
   couleur du thème — FC-001G). Chrome commun (fond, bordure, bandeau haut vert, rayon, ombre),
   partagé par les 3 types de carte pour éviter de le dupliquer 3 fois. ---------- */

.fcc-kpi,
.fcc-carte-objectif,
.fcc-carte-regions {
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-top: 5px solid var(--couleur-primaire);
    border-radius: max(20px, var(--rayon-carte));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.fcc-grille-kpi {
    /* FC-001I : 32px entre le filet orange du titre et la 1re ligne de KPI (28px sous 600px, cf.
       media query plus bas) ; 24px d'espacement régulier entre les lignes/colonnes de cartes
       (remplace les 20px de FC-001H). */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
    margin-bottom: 24px;
}
@media (min-width: 1024px) {
    .fcc-grille-kpi {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.fcc-kpi {
    /* FC-001L : padding horizontal réduit de 14 à 10px (retour client : « Dossiers en Attente » doit
       tenir sur une seule ligne à 1024px, grille 4 colonnes) — marge de sécurité supplémentaire en
       plus de l'estimation de largeur de texte (cf. LIVRAISON_FC-001L.md), taille de police
       inchangée (1,1rem, jamais descendue à 1,05rem). */
    padding: 24px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    font-family: var(--police-texte);
    cursor: default;
    min-height: 190px;
}
/* FC-001I : alternance en damier décidée par la position de la carte (plus par une clé 'bandeau' en
   PHP, cf. public/index.php) — bordure 2px sur tout le pourtour + bandeau haut renforcé à 6px, dans
   la même couleur (vert ou orange du thème). */
.fcc-kpi--vert {
    border: 2px solid var(--couleur-primaire);
    border-top-width: 6px;
}
.fcc-kpi--orange {
    border: 2px solid var(--couleur-accent);
    border-top-width: 6px;
}
a.fcc-kpi {
    text-decoration: none;
}
a.fcc-kpi:focus-visible {
    outline: 3px solid var(--couleur-accent);
    outline-offset: 2px;
}
/* FC-002A5 §3.5 : cartes KPI devenues des liens (Validés/Attente de validation/Rejetés/Attente de
   complément, pour les rôles qui voient déjà "Demandes soumises" de tous) — survol discret (ombre
   légèrement accentuée) uniquement, jamais de changement de couleur : .fcc-kpi__valeur et
   .fcc-kpi__libelle fixent déjà chacun leur propre couleur (classes ci-dessus), insensibles à la règle
   générique `a:hover, a:focus { color: ... }` de ce fichier (qui ne s'applique qu'au texte DIRECT du
   lien — ici inexistant, tout le texte est dans des <span> enfants). */
a.fcc-kpi:hover,
a.fcc-kpi:focus {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.fcc-kpi__icone {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--couleur-teinte);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fcc-kpi__icone svg {
    width: 30px;
    height: 30px;
    stroke: var(--couleur-primaire);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fcc-kpi__valeur {
    font-family: var(--police-titre);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--couleur-primaire-fonce);
}
.fcc-kpi__libelle {
    /* FC-001K : les retours à la ligne imposés par "\n" (cf. public/index.php, cartes 2 et 4,
       rendus en <br> par nl2br) s'ajoutent au retour à la ligne automatique normal ; overflow-wrap
       en filet de sécurité si un segment reste trop long pour 2 colonnes à 360px. */
    color: var(--couleur-texte);
    font-weight: 700;
    font-size: 1.1rem;
    overflow-wrap: break-word;
}

/* ---------- Objectif d'adhésion (FC-001G) ---------- */

/* FC-003B5 §3 — CAUSE RÉELLE du défaut signalé par le client ("fragments de cartes blanches arrondies
   ... larges d'environ 25px, collés au bord gauche") : `.fcc-carte-objectif[href]` (plus bas dans ce
   fichier) ne fixait jamais `display: block`. public/index.php rend cette carte en `<a href="...">`
   (balise dynamique, cf. $fcc_tag_objectif) dès que l'utilisateur a le droit de voir la file de
   validation (VALIDATION_ADHESION:consulter — ADMIN/AGENT_VALIDATION, exactement le profil du client
   qui a pris la capture) — SINON en `<div>`, jamais affecté puisque `div` est block par défaut dans
   la feuille de style du navigateur. Un `<a>`, lui, est INLINE par défaut : le fond blanc/bordure/
   rayon/bandeau vert de `.fcc-carte-objectif` ci-dessous restaient posés sur une boîte inline, alors
   que ses 2 enfants (`.fcc-objectif__ligne`, display:flex, et `.fcc-barre-progression`) sont des
   blocs — un navigateur scinde alors la boîte inline en plusieurs "boîtes anonymes" fragmentées
   autour de ces enfants blocs, chacune ne portant qu'un morceau du fond/bordure du parent (d'où les
   "fragments" observés, larges d'à peine le texte/l'icône visible, collés à gauche puisque c'est là
   que commence la boîte inline). Posé ici sur la règle commune (effet immédiat pour `<a>` ET `<div>`,
   neutre pour `<div>` qui est déjà block) plutôt que seulement sur `.fcc-carte-objectif[href]` :
   la carte se comporte alors IDENTIQUEMENT à "Adhérents par région" (toujours un `<div>`, jamais
   touchée par ce défaut) quel que soit le rôle de l'utilisateur. */
.fcc-carte-objectif {
    display: block;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.fcc-objectif__ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}
.fcc-objectif__libelle {
    /* FC-001K : libellé agrandi (retour FEDE/Adams). */
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--couleur-texte);
}
.fcc-objectif__valeur {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--couleur-texte);
}
.fcc-barre-progression {
    /* FC-001K : hauteur portée de 12 à 16px (retour FEDE/Adams), couleurs inchangées. */
    height: 16px;
    background: var(--couleur-bordure);
    border-radius: 999px;
    overflow: hidden;
}
.fcc-barre-progression__remplissage {
    height: 100%;
    background: linear-gradient(90deg, var(--couleur-accent), var(--couleur-primaire));
    border-radius: inherit;
}

/* ---------- Adhérents par région (FC-001G) ---------- */

.fcc-carte-regions {
    padding: 20px 24px;
    margin-bottom: 20px;
}
/* FC-001K : titre agrandi (retour FEDE/Adams), remplace les petites capitales grises par la même
   convention que .fcc-titre-page (var(--couleur-primaire-fonce), gras). */
.fcc-carte-regions__titre {
    font-family: var(--police-titre);
    color: var(--couleur-primaire-fonce);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 14px;
}
/* FC-001K : liste des 31 régions sur plusieurs colonnes pour éviter une carte interminable —
   mobile-first (1 colonne par défaut), 2 colonnes à partir de 600px, 3 à partir de 1024px. Chaque
   ligne reste entière dans une colonne (cf. .fcc-liste-regions__ligne, break-inside: avoid). */
.fcc-liste-regions {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 1;
    column-gap: 32px;
}
@media (min-width: 600px) {
    .fcc-liste-regions {
        columns: 2;
    }
}
@media (min-width: 1024px) {
    .fcc-liste-regions {
        columns: 3;
    }
}
.fcc-liste-regions__ligne {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--couleur-bordure);
    break-inside: avoid;
}
.fcc-liste-regions__ligne:last-child {
    border-bottom: none;
}
/* FC-001K : nom de région en noir gras — exception volontaire à la règle « uniquement des variables
   du thème » (cf. en-tête de ce fichier), demandée explicitement par le client comme pour
   .fcc-login-sous-titre et .fcc-login-carte label plus haut — #000 écrit en dur à dessein. */
.fcc-liste-regions__nom {
    font-weight: 700;
    color: #000;
    font-size: 1.05rem;
}
.fcc-liste-regions__valeur {
    font-weight: 700;
    color: var(--couleur-primaire-fonce);
    flex-shrink: 0;
}
.fcc-liste-regions__ligne--vide {
    justify-content: center;
    color: var(--couleur-texte-discret);
}

/* ---------- Boutons ---------- */

.fcc-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--rayon-bouton);
    border: 1px solid transparent;
    font-family: var(--police-texte);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    gap: 8px;
}
.fcc-bouton--primaire {
    background: var(--couleur-primaire);
    color: var(--couleur-fond);
}
.fcc-bouton--primaire:hover, .fcc-bouton--primaire:focus {
    background: var(--couleur-primaire-fonce);
}
.fcc-bouton--secondaire {
    background: var(--couleur-accent-clair);
    color: var(--couleur-texte);
    border-color: var(--couleur-bordure);
}
.fcc-bouton--secondaire:hover, .fcc-bouton--secondaire:focus {
    background: var(--couleur-accent);
}
.fcc-bouton--danger {
    background: var(--couleur-danger);
    color: var(--couleur-fond);
}
/* FC-002B1B §1 : "Supprimer" (paires Reprendre/Supprimer et Consulter/Modifier des listes d'adhésion)
   n'avait jusqu'ici aucun état survol/focus/clic explicite (contrairement à .fcc-bouton--adhesion-
   orange/--vert) — fixé ici une fois pour toutes, même principe (fond ET texte imposés, léger
   assombrissement). Règle globale (pas seulement scopée .fcc-adhesion-page) : les 2 autres usages du
   bouton danger (includes/adhesion_champ_photo.php, theme-apercu.php) en bénéficient aussi, sans
   aucune régression possible puisqu'ils n'avaient aucun état défini avant. */
.fcc-bouton--danger:hover,
.fcc-bouton--danger:focus,
.fcc-bouton--danger:focus-visible,
.fcc-bouton--danger:active {
    background: var(--couleur-danger);
    color: var(--couleur-fond);
    filter: brightness(0.9);
}
.fcc-bouton--danger:focus-visible {
    outline: 3px solid var(--couleur-danger);
    outline-offset: 2px;
}
.fcc-bouton--action {
    /* Variante « action principale » (FC-001C, page de connexion) : fond --couleur-accent (orange
       dans les palettes actuelles), texte --couleur-texte — jamais blanc sur fond orange, même
       convention de contraste que .fcc-bouton--secondaire ci-dessus. Distincte de --primaire : ne
       change pas le comportement des boutons déjà utilisés ailleurs (accueil, aperçu de thème). */
    background: var(--couleur-accent);
    color: var(--couleur-texte);
}
.fcc-bouton--action:hover, .fcc-bouton--action:focus {
    background: var(--couleur-accent-clair);
}
.fcc-bouton--pleine-largeur {
    width: 100%;
}
.fcc-bouton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- Champs de formulaire ---------- */

.fcc-champ {
    margin-bottom: 16px;
}
.fcc-champ label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}
/* FC-003B3 §1 — DIFFÉRENCE DE TAILLE RÉELLE entre « Frais d'adhésion » et « Communications » (écran
   Paramètres, public/admin-parametres.php) : les libellés de « Frais d'adhésion » héritaient de la
   règle générique `.fcc-champ label` ci-dessus (0.9rem / 600, utilisée par TOUT le reste de
   l'application — formulaires de connexion, modale de décision, etc., donc jamais modifiable
   globalement sans régression ailleurs), alors que « Communications » utilise .fcc-parametres-ligne__
   libelle (1.2rem / 700, cf. plus bas dans ce fichier). Corrigé en posant la MÊME classe existante
   (.fcc-parametres-ligne__libelle, réutilisée telle quelle, aucune nouvelle classe créée) sur les
   <label> de « Frais d'adhésion » (public/admin-parametres.php) — nécessite 2 classes ici (plutôt
   qu'une seule) pour que la spécificité dépasse `.fcc-champ label` (1 classe + 1 élément) ci-dessus ;
   sans ce doublement, ce dernier continuerait à l'emporter indépendamment de l'ordre des règles. */
.fcc-champ label.fcc-parametres-ligne__libelle {
    font-size: 1.2rem;
    font-weight: 700;
}
.fcc-champ input[type="text"],
.fcc-champ input[type="password"],
.fcc-champ input[type="email"],
.fcc-champ input[type="tel"],
.fcc-champ input[type="number"],
.fcc-champ input[type="url"],
.fcc-champ input[type="file"],
.fcc-champ select,
.fcc-champ textarea {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bouton);
    background: var(--couleur-carte);
    color: var(--couleur-texte);
    font-family: var(--police-texte);
    font-size: 1rem;
}
.fcc-champ input:focus, .fcc-champ select:focus, .fcc-champ textarea:focus {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 1px;
}

.fcc-message-erreur {
    background: var(--couleur-accent-clair);
    color: var(--couleur-danger);
    border: 1px solid var(--couleur-danger);
    border-radius: var(--rayon-bouton);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}
/* FC-001N : message flash de réussite (messages d'erreur/succès après redirection PRG, cf.
   core/flash.php) — même gabarit que .fcc-message-erreur, couleurs vertes du thème. */
.fcc-message-succes {
    background: var(--couleur-teinte);
    color: var(--couleur-primaire-fonce);
    border: 1px solid var(--couleur-primaire);
    border-radius: var(--rayon-bouton);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}
/* FC-003B5 §2 : messages de confirmation/alerte après une décision (Valider/Demander un complément/
   Rejeter, leurs corrections, Réouverture — ex. "Décision corrigée pour le dossier FCC-2026-000006 :
   validé.") agrandis UNIQUEMENT sur les 2 pages concernées (file de validation et examen d'un
   dossier, toutes deux dans .fcc-validation-page) : .fcc-message-succes/.fcc-message-erreur
   ci-dessus sont le gabarit PARTAGÉ par TOUT le reste de l'application (connexion, écrans admin,
   etc., cf. core/flash.php) — un changement global de ces 2 classes aurait un effet de bord sans
   rapport avec cette tâche. Avant cette tâche : 0.9rem, graisse normale (ni l'une ni l'autre classe
   ne fixait de font-weight, donc 400 par héritage de <body>). Après, sur ces 2 pages seulement :
   1.15rem (minimum demandé), graisse 600, padding plus généreux. */
.fcc-validation-page .fcc-message-succes,
.fcc-validation-page .fcc-message-erreur {
    font-size: 1.15rem;
    font-weight: 600;
    padding: 14px 18px;
}

/* ---------- Statuts de dossier (puces) ---------- */

/* FC-003A3 §2 — CAUSE DE L'ALIGNEMENT À GAUCHE (nommée dans LIVRAISON_FC-003A3.md) : .fcc-statut
   n'a jamais déclaré sa propre valeur de text-align ; dans un tableau, elle HÉRITE donc de
   .fcc-admin-tableau td { text-align: left; … } (base.css, "Boutons d'action carrés" plus bas dans ce
   fichier) — text-align est une propriété héritée, transmise au <span> par sa cellule <td> ancêtre
   tant qu'elle n'est pas réaffirmée explicitement ici. Corrigé en posant text-align: center DIRECTEMENT
   sur .fcc-statut : une valeur explicite sur l'élément l'emporte toujours sur une valeur héritée, quel
   que soit l'endroit d'où elle provient — plus besoin de corriger .fcc-admin-tableau td lui-même (qui
   reste text-align:left pour tout le reste de son contenu, inchangé). justify-content:center complète
   le centrage horizontal pour le cas où .fcc-statut serait un jour étiré (il ne l'est pas aujourd'hui,
   inline-flex se dimensionne à son contenu) ; max-width évite tout étirement disproportionné dans une
   cellule large, la pastille se recentrant plutôt sur ses 2 lignes le cas échéant. */
.fcc-statut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* FC-003B §2 : même largeur minimale commune pour "Validé" et "Rejeté" (le plus court des deux
       libellés, "Validé", ne doit pas paraître plus étroit que "Rejeté" côte à côte dans la même
       colonne) — sans effet sur les libellés plus longs ("En attente de complément"...), qui dépassent
       déjà cette largeur par leur propre contenu. */
    min-width: 96px;
    max-width: 220px;
    padding: 4px 10px;
    border-radius: 999px;
    /* FC-001N6 §4 : 0.8rem → 0.9rem (badges de statut de la liste des utilisateurs, 0.9rem demandé). */
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--couleur-accent-clair);
    color: var(--couleur-texte);
}
.fcc-statut--danger {
    background: var(--couleur-danger);
    color: var(--couleur-fond);
}

/* ---------- Pied de page (FC-001M : bandeau vert forêt unique, toutes les pages) ---------- */
/*
 * FC-001M : retour FEDE/Adams — le pied de page validé sur la page de connexion (bandeau plein
 * var(--couleur-primaire-fonce), même vert que l'en-tête et la barre verticale) devient LE seul
 * style de .fcc-pied, appliqué sans exception à toutes les pages (y compris la page de connexion,
 * qui perd volontairement son ancien rendu crème — cf. suppression de la règle
 * .fcc-login-page .fcc-pied plus bas : il n'y a plus de cas particulier à surcharger).
 * Blanc #FFFFFF écrit en dur à dessein (comme .fcc-login-sous-titre, .fcc-login-carte label et
 * .fcc-liste-regions__nom plus haut) : exception volontaire à la règle « uniquement des variables
 * du thème », demandée explicitement par le client. Contraste vérifié ≥ 4,5:1 sur les 3 thèmes
 * (--couleur-primaire-fonce y est toujours un vert très sombre).
 */
.fcc-pied {
    background: var(--couleur-primaire-fonce);
    text-align: center;
    padding: 20px 16px;
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1.6;
}
.fcc-pied-ligne {
    display: block;
    font-weight: 700;
}

/* ---------- Page de connexion (FC-001E) ---------- */
/*
 * FC-001E : retour FEDE/Adams sur FC-001D — sur le thème A, le fond plein en --couleur-entete
 * (blanc) laissait la page de connexion presque entièrement blanche. Nouveau principe (inspiré de
 * RIA-SOFT, sans rien copier) : fond plein en --couleur-primaire-fonce (vert profond sur le thème A,
 * coloré et déjà sombre sur B/C aussi) derrière UNE SEULE boîte blanche centrée qui contient tout
 * le contenu (logo, titre, sous-titre, formulaire) — aucune variable supplémentaire nécessaire.
 * Convention de contraste déjà en vigueur dans ce fichier (cf. commentaire d'en-tête) : toute
 * surface en --couleur-primaire(-fonce) porte un texte en var(--couleur-fond) (blanc ou quasi-blanc
 * dans les 3 palettes) — appliqué ici au pied de page, seul élément resté sur le fond plein.
 */
body.fcc-login-page {
    background: var(--couleur-primaire-fonce);
    min-height: 100vh;
    min-height: 100dvh;
}
/* Bandeau environnement : sur le fond vert foncé de la page de connexion, la version globale
   (var(--couleur-teinte), pensée pour un fond clair) deviendrait un vert clair peu lisible sur vert
   foncé. Variante claire déjà utilisée ailleurs pour porter du texte sombre (cf. .fcc-bouton--action
   plus haut), réutilisée ici sans rien coder en dur. */
.fcc-login-page .fcc-banniere-environnement {
    background: var(--couleur-accent-clair);
}
.fcc-login-centre {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.fcc-login-carte {
    width: 100%;
    max-width: 420px;
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    padding: 32px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .18);
}
.fcc-login-entete {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}
.fcc-login-pastille {
    /* Même principe que .fcc-entete__logo-pastille (includes/header.php) : le logo a son propre
       fond blanc (fichier PNG), var(--couleur-carte) (proche du blanc pur dans les 3 palettes)
       évite toute bordure visible. Sur le thème A, --couleur-carte est blanc : la pastille se fond
       dans la boîte, comme pour l'en-tête (FC-001B point 2). Pas de bordure ni d'ombre (FC-001F) :
       seul le logo doit se voir, rien ne doit le cerner. */
    background: var(--couleur-carte);
    width: 150px;
    height: 150px;
    border-radius: var(--rayon-carte);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.fcc-login-pastille img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fcc-login-titre {
    font-family: var(--police-titre);
    color: var(--couleur-primaire-fonce);
    margin: 0;
    font-size: 1.3rem;
}
.fcc-login-titre::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    margin: 10px auto 0;
    background: var(--couleur-accent);
    border-radius: 999px;
}
/* Sous-titre en noir gras (FC-001F) : demande explicite de FEDE, exception volontaire au texte
   discret — #000 écrit en dur à dessein, ce n'est pas un oubli de variable de thème. */
.fcc-login-sous-titre {
    color: #000;
    font-weight: 700;
    margin: 12px 0 0;
    font-size: 1.125rem;
}
/* FC-001M : l'ancienne règle .fcc-login-page .fcc-pied (texte crème, filet var(--couleur-fond)) est
   retirée — .fcc-pied est désormais un bandeau vert plein identique sur toutes les pages (cf. plus
   haut), il n'y a donc plus de cas particulier à surcharger pour la page de connexion. */
/* Cibles tactiles ≥ 48px dans la boîte de connexion (FC-001E), au-delà du minimum général de 44px
   (cf. commentaire d'en-tête) — scopé à cette page pour ne rien changer ailleurs dans l'appli. */
.fcc-login-carte input,
.fcc-login-carte select {
    min-height: 48px;
}
/* FC-001K : libellé « Se connecter » agrandi (retour FEDE/Adams) — portée strictement limitée au
   bouton de la boîte de connexion (sélecteur .fcc-login-carte .fcc-bouton), les boutons des autres
   pages gardent leur taille définie par .fcc-bouton plus haut. Couleurs inchangées (texte foncé
   var(--couleur-texte) sur fond orange var(--couleur-accent), déjà porté par .fcc-bouton--action). */
.fcc-login-carte .fcc-bouton {
    min-height: 58px;
    font-family: var(--police-titre);
    font-size: 1.3rem;
    font-weight: 700;
    /* FC-001N9 : seul le fond doit changer en transition, jamais le texte (qui passe de foncé à
       blanc entre le repos et le survol : une transition sur `color` le rendrait temporairement
       illisible, d'où la contrainte de la tâche). */
    transition: background-color .15s ease;
}
/* FC-001N9 : au survol SOURIS (demande du client : vert du logo au lieu de l'éclaircissement orange
   par défaut de .fcc-bouton--action), fond vert du thème + texte blanc. Sélecteur scopé à la boîte
   de connexion (3 classes), portée strictement limitée à ce bouton — aucun autre bouton de
   l'application n'est modifié. Spécificité (3 classes/pseudo-classe) strictement supérieure à
   .fcc-bouton--action:hover/:focus (2) : écrase bien var(--couleur-accent-clair) par le vert, sans
   dépendre de l'ordre des règles. var(--couleur-primaire) sur var(--couleur-fond) est la paire
   fond/texte déjà garantie ≥ 4,5:1 dans les 3 thèmes par la convention de contraste documentée en
   tête de ce fichier (surface --couleur-primaire(-fonce) → texte --couleur-fond), déjà utilisée à
   l'identique ailleurs (en-tête, bouton actif du menu horizontal) : pas de nouveau calcul de
   contraste nécessaire. */
@media (hover: hover) {
    .fcc-login-carte .fcc-bouton:hover {
        background: var(--couleur-primaire);
        color: var(--couleur-fond);
    }
}
/* Focus clavier : même rendu vert que le survol (autorisé par la tâche), contour visible conservé en
   plus. :active : vert un cran plus foncé (var(--couleur-primaire-fonce), déjà garanti ≥ 4,5:1 pour
   var(--couleur-fond) par la même convention — plus sombre que --couleur-primaire, donc au moins
   aussi contrasté). Ni l'un ni l'autre n'est gêné par la règle générique a:hover/a:focus : ce bouton
   est un <button>, jamais un <a> (cf. public/login.php) — cette règle ne peut pas s'y appliquer ;
   .fcc-bouton--action:focus (background: var(--couleur-accent-clair)) reste cependant réellement
   concurrente, écrasée ici par la spécificité plus élevée du sélecteur scopé, comme pour :hover. */
.fcc-login-carte .fcc-bouton:focus,
.fcc-login-carte .fcc-bouton:focus-visible {
    background: var(--couleur-primaire);
    color: var(--couleur-fond);
}
.fcc-login-carte .fcc-bouton:focus-visible {
    /* var(--couleur-primaire), pas -fonce : même convention que .fcc-champ input:focus plus haut
       pour un contour sur fond clair (la boîte de connexion, blanche/quasi-blanche dans les 3
       thèmes) — reste nettement visible, y compris par-dessus le fond désormais vert du bouton
       lui-même (l'anneau d'outline, décalé de 2px, retombe sur la carte blanche autour du bouton,
       pas sur le vert). */
    outline: 3px solid var(--couleur-primaire);
    outline-offset: 2px;
}
.fcc-login-carte .fcc-bouton:active {
    background: var(--couleur-primaire-fonce);
    color: var(--couleur-fond);
}
/* Libellés de la boîte de connexion en noir gras (FC-001F) : demande explicite de FEDE, comme pour
   .fcc-login-sous-titre ci-dessus — #000 en dur à dessein, scopé à .fcc-login-carte pour ne pas
   changer les libellés des autres formulaires de l'application. */
.fcc-login-carte label {
    color: #000;
    font-weight: 700;
    font-size: 1rem;
}

/* ---------- Tableaux simples ---------- */

.fcc-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.fcc-tableau th, .fcc-tableau td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--couleur-bordure);
}
.fcc-tableau th {
    color: var(--couleur-texte-discret);
    font-weight: 600;
}
.fcc-tableau tbody tr:nth-child(even) {
    background: var(--couleur-teinte);
}

/* ---------- Administration (FC-001N) ---------- */
/*
 * Module réservé à l'Administrateur (public/admin-*.php). Couleurs : uniquement des variables du
 * thème (sauf ombres neutres rgba(0,0,0,…), même convention que le reste du fichier). Statuts
 * "Actif"/"Inactif"/"Bloqué" : réutilise .fcc-statut (déjà défini plus haut) avec 3 modificateurs.
 */
.fcc-admin-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.fcc-admin-entete__titre {
    font-family: var(--police-titre);
    font-size: 1.3rem;
    color: var(--couleur-primaire-fonce);
    margin: 0;
}
.fcc-admin-bouton-nouveau {
    font-weight: 700;
    /* FC-001N6 §4 : 1rem minimum demandé (0.95rem hérité de .fcc-bouton sinon) — scopé à ce bouton
       précis pour ne pas changer la taille des autres boutons de l'application. */
    font-size: 1rem;
    /* FC-001N8 §1 : fond orange foncé + texte blanc — remplace le fond var(--couleur-accent) (orange
       clair) + texte var(--couleur-texte) (foncé) hérités de .fcc-bouton--action. Même spécificité
       qu'une classe de .fcc-bouton--action (1 classe) : cette règle gagne par ORDRE (elle est plus
       bas dans le fichier que .fcc-bouton--action) — même mécanisme déjà utilisé ci-dessus pour
       font-size, scopé à ce bouton précis, sans toucher .fcc-bouton--action (utilisée ailleurs :
       accueil, connexion, aperçu du thème).
       min-height: 48px (44px hérité de .fcc-bouton sinon), demandé par la tâche. */
    background: var(--couleur-accent-fonce);
    color: var(--couleur-fond);
    min-height: 48px;
}
/* C'est un <a> (cf. public/admin-utilisateurs.php) : vulnérable au même bug que FC-001N7
   (a:hover, a:focus { color: var(--couleur-primaire); }, spécificité élément+pseudo-classe). Couleur
   fixée explicitement ici (état normal ci-dessus, puis survol/focus/clic ci-dessous) ET sur l'icône
   (règle suivante), avec une spécificité (classe + pseudo-classe) strictement supérieure à
   a:hover/a:focus, peu importe l'ordre des règles dans le fichier — le texte ne doit jamais devenir
   vert foncé.
   background répété ici à dessein (identique à l'état normal ci-dessus) : .fcc-bouton--action:hover,
   .fcc-bouton--action:focus (même spécificité, 1 classe + 1 pseudo-classe) ramènerait sinon le fond à
   var(--couleur-accent-clair) au survol/focus — cette règle gagne par ordre (plus bas dans le
   fichier) et garde le fond orange foncé dans tous les états. */
.fcc-admin-bouton-nouveau:hover,
.fcc-admin-bouton-nouveau:focus,
.fcc-admin-bouton-nouveau:active {
    background: var(--couleur-accent-fonce);
    color: var(--couleur-fond);
}
/* Seule icône du jeu de public/admin-utilisateurs.php (fcc_admin_icone()) sans classe ni style
   propre — comme .fcc-admin-action svg plus haut pour les icônes d'action du tableau, un sélecteur
   descendant scopé à ce bouton la dimensionne et la colore (stroke: currentColor suit la couleur du
   bouton, blanche, fixée ci-dessus et ci-dessous ; sans cette règle elle restait à la taille/couleur
   par défaut du navigateur, ni dimensionnée ni blanche). */
.fcc-admin-bouton-nouveau svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Survol SOURIS uniquement (tâche §1) : fond un cran plus foncé. Pas de nouvelle variable de thème
   pour « encore plus sombre que --couleur-accent-fonce » ; `filter: brightness()` assombrit le fond
   ET le texte/l'icône ensemble sans introduire de couleur en dur (contrainte §3) — le texte reste
   blanc (juste légèrement grisé), jamais vert foncé. */
@media (hover: hover) {
    .fcc-admin-bouton-nouveau:hover {
        filter: brightness(0.85);
    }
}
.fcc-admin-bouton-nouveau:focus-visible {
    outline: 3px solid var(--couleur-accent);
    outline-offset: 2px;
}

/* Barre de recherche : bordure orange 2px, loupe en icône à gauche (FC-001N §3.1). */
.fcc-admin-recherche {
    position: relative;
    margin-bottom: 20px;
}
.fcc-admin-recherche__icone {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    stroke: var(--couleur-texte-discret);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.fcc-admin-recherche input[type="search"] {
    width: 100%;
    min-height: 48px;
    padding: 8px 16px 8px 44px;
    border: 2px solid var(--couleur-accent);
    border-radius: var(--rayon-bouton);
    background: var(--couleur-carte);
    color: var(--couleur-texte);
    font-family: var(--police-texte);
    font-size: 1rem;
}
.fcc-admin-recherche input[type="search"]:focus {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 1px;
}

/* Tableau : conteneur scrollable horizontalement sur petit écran (FC-001N §3.1 — jamais la page
   entière), en-tête vert forêt plein, lignes alternées carte/teinte. */
.fcc-admin-tableau-conteneur {
    overflow-x: auto;
}
.fcc-admin-tableau {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    /* FC-001N6 §4 : 0.95rem → 1rem (contenu des cellules, 16px minimum demandé). */
    font-size: 1rem;
}
.fcc-admin-tableau th, .fcc-admin-tableau td {
    text-align: left;
    padding: 12px 14px;
    vertical-align: middle;
}
/* FC-003B §2 — pastilles "Validé"/"Rejeté" collées à gauche de leur cellule dans "Demandes soumises"
   et la file de validation : CAUSE RÉELLE, DIFFÉRENTE de celle déjà corrigée par FC-003A3 (text-align
   posé directement sur .fcc-statut, qui ne centre que le TEXTE à l'intérieur de la pastille elle-même,
   celle-ci étant display:inline-flex donc dimensionnée à son seul contenu). La pastille — en tant que
   boîte inline — reste positionnée par le text-align de sa CELLULE ancêtre, c'est-à-dire PRÉCISÉMENT
   la règle ci-dessus, `.fcc-admin-tableau th, .fcc-admin-tableau td { text-align: left; ... }` : rien
   dans FC-003A3 ne la touchait. Corrigé en ciblant uniquement la colonne Statut (classe
   .fcc-colonne-statut posée sur le <th>/<td> concerné par public/demande-adhesion.php et public/
   validation-adhesion.php) avec une spécificité supérieure (2 classes > 1 classe) : s'applique aussi
   bien au tableau PC qu'aux cartes empilées sur mobile (.fcc-admin-tableau td devient display:block
   sur mobile, cf. mobile.css, mais aucune règle mobile ne redéclare text-align — celle-ci reste donc
   seule à s'appliquer dans les deux cas). */
.fcc-admin-tableau th.fcc-colonne-statut,
.fcc-admin-tableau td.fcc-colonne-statut {
    text-align: center;
}
.fcc-admin-tableau thead th {
    background: var(--couleur-primaire-fonce);
    color: var(--couleur-fond);
    /* FC-001N6 §3 : text-transform: uppercase retiré — règle « Titre » de la tâche (majuscule au
       premier mot des noms, pas de tout-capitales imposé par CSS) ; letter-spacing retiré avec (il
       n'avait de sens que pour aérer des capitales). §4 : 0.85rem → 1rem (1rem minimum demandé). */
    font-weight: 700;
    font-size: 1rem;
}
.fcc-admin-tableau thead th:first-child {
    border-radius: var(--rayon-bouton) 0 0 0;
}
.fcc-admin-tableau thead th:last-child {
    border-radius: 0 var(--rayon-bouton) 0 0;
}
.fcc-admin-tableau tbody tr:nth-child(odd) {
    background: var(--couleur-carte);
}
.fcc-admin-tableau tbody tr:nth-child(even) {
    background: var(--couleur-teinte);
}
.fcc-admin-tableau__identifiant {
    color: var(--couleur-primaire-fonce);
    font-weight: 700;
}
.fcc-admin-tableau__vide {
    text-align: center;
    padding: 28px 14px;
    color: var(--couleur-texte-discret);
}

/* Pastilles de statut : réutilise .fcc-statut (défini plus haut), 3 variantes de couleur. */
.fcc-statut--actif {
    background: var(--couleur-teinte);
    color: var(--couleur-primaire-fonce);
}
.fcc-statut--inactif {
    background: var(--couleur-bordure);
    color: var(--couleur-texte);
}
.fcc-statut--bloque {
    background: var(--couleur-accent-clair);
    color: var(--couleur-texte);
}

/* Boutons d'action carrés (Modifier, Mot de passe, Activer/Désactiver, Débloquer). */
.fcc-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* FC-002B1B §1 : les paires Consulter/Modifier et Reprendre/Supprimer des listes d'adhésion (public/
   demande-adhesion.php, "Demandes soumises"/"Demandes en cours de saisie") ne doivent JAMAIS passer à
   la ligne, quelle que soit la largeur de la colonne Actions — contrairement aux icônes carrées
   d'administration (jusqu'à 4 sur public/admin-utilisateurs.php) qui, elles, doivent pouvoir passer à
   la ligne si la place manque : .fcc-admin-actions reste donc en flex-wrap:wrap par défaut ci-dessus,
   et cette règle plus spécifique (classe d'ancêtre .fcc-adhesion-page) ne la force en nowrap que dans
   ce module. Boutons à largeur de contenu (déjà le cas, .fcc-bouton est inline-flex) + white-space:
   nowrap pour empêcher leur libellé de se couper en deux lignes dans une colonne étroite. */
.fcc-adhesion-page .fcc-admin-actions {
    flex-wrap: nowrap;
}
.fcc-adhesion-page .fcc-admin-actions > .fcc-bouton,
.fcc-adhesion-page .fcc-admin-actions > form {
    flex-shrink: 0;
}
.fcc-adhesion-page .fcc-admin-actions .fcc-bouton {
    white-space: nowrap;
}
/* Colonne Actions : largeur minimale (1% + contenu nowrap, astuce classique de tableau HTML) pour
   qu'elle ne force jamais le reste du tableau à rétrécir ni les boutons à se superposer, même à 900px
   de large (§5 de la tâche, scénario de test 1). */
.fcc-adhesion-page .fcc-admin-tableau th:last-child,
.fcc-adhesion-page .fcc-admin-tableau td:last-child {
    width: 1%;
    white-space: nowrap;
}
.fcc-admin-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* FC-001N6 §4 : 40px → 44px (cible tactile minimale demandée pour les icônes d'actions). */
    width: 44px;
    height: 44px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bouton);
    background: var(--couleur-carte);
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
}
.fcc-admin-action:hover, .fcc-admin-action:focus-visible {
    border-color: var(--couleur-accent);
}
.fcc-admin-action:focus-visible {
    outline: 3px solid var(--couleur-accent);
    outline-offset: 2px;
}
.fcc-admin-action svg {
    /* FC-001N6 §4 : 20px → 22px (icônes d'actions demandées à 22px). */
    width: 22px;
    height: 22px;
    stroke: var(--couleur-primaire);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Pagination. */
.fcc-admin-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}
.fcc-admin-pagination__info {
    color: var(--couleur-texte-discret);
    font-size: 0.9rem;
}

/* Fenêtres (modales) <dialog> : fond blanc, coins arrondis, ombre neutre (FC-001N §3.2). */
.fcc-dialogue {
    border: none;
    border-radius: var(--rayon-carte);
    padding: 0;
    background: var(--couleur-carte);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    width: calc(100% - 32px);
    max-width: 480px;
}
.fcc-dialogue::backdrop {
    background: rgba(0, 0, 0, .45);
}
.fcc-dialogue__corps {
    padding: 24px;
}
.fcc-dialogue__titre {
    font-family: var(--police-titre);
    color: var(--couleur-primaire-fonce);
    font-size: 1.2rem;
    margin: 0 0 16px;
}
.fcc-dialogue__pied {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
}

/* Champ mot de passe avec bascule afficher/masquer (œil), sans dépendance JS externe (FC-001N §3.2,
   admin.js bascule juste le type du champ et la classe --visible ci-dessous). */
.fcc-champ-mdp {
    position: relative;
}
.fcc-champ-mdp input {
    padding-right: 44px;
}
.fcc-champ-mdp__bouton {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--rayon-bouton);
}
.fcc-champ-mdp__bouton:hover, .fcc-champ-mdp__bouton:focus-visible {
    background: var(--couleur-teinte);
}
.fcc-champ-mdp__bouton:focus-visible {
    outline: 2px solid var(--couleur-primaire);
}
.fcc-champ-mdp__icone {
    width: 20px;
    height: 20px;
    stroke: var(--couleur-texte-discret);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fcc-champ-mdp__icone--ferme {
    display: none;
}
.fcc-champ-mdp__bouton--visible .fcc-champ-mdp__icone--ouvert {
    display: none;
}
.fcc-champ-mdp__bouton--visible .fcc-champ-mdp__icone--ferme {
    display: block;
}

/* Erreur de validation propre à un champ (sous le champ concerné), distincte de .fcc-message-erreur
   (bandeau général déjà existant, réutilisé pour les erreurs transverses type "dernier administrateur"). */
.fcc-champ-erreur {
    color: var(--couleur-danger);
    font-size: 0.85rem;
    margin-top: 4px;
}

/* FC-003A4 §3 : message d'aide sous un champ (motif des fenêtres de décision), distinct de
   .fcc-champ-erreur (pas une erreur, juste une consigne de saisie tant que le motif est trop court). */
.fcc-champ-aide {
    color: var(--couleur-texte-discret);
    font-size: 0.85rem;
    margin-top: 4px;
}

/* ---------- Paramètres › sections à interrupteurs (FC-001N6 §5) ---------- */
/*
 * Structure réutilisable (tableau PHP section → options, cf. public/admin-parametres.php) : un titre
 * de section avec filet orange (même principe que .fcc-titre-page), puis une liste de lignes
 * libellé+description / interrupteur séparées par un fin filet — pensée pour accueillir d'autres
 * sections/options plus tard sans rien changer ici.
 */
.fcc-section-titre {
    font-family: var(--police-titre);
    color: var(--couleur-primaire-fonce);
    /* FC-001N8 §2 : 1.1rem → 1.4rem ; font-weight explicite (700, h2 est déjà gras par défaut mais
       jamais fixé ici jusqu'à présent). */
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 4px;
}
.fcc-section-titre::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin: 8px 0 20px;
    background: var(--couleur-accent);
    border-radius: 999px;
}
.fcc-parametres-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fcc-parametres-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /* FC-001N8 §2 : 16px → 20px (espacement vertical 18-20px demandé). */
    padding: 20px 0;
    border-bottom: 1px solid var(--couleur-bordure);
}
.fcc-parametres-ligne:last-child {
    border-bottom: none;
}
.fcc-parametres-ligne__texte {
    min-width: 0;
}
.fcc-parametres-ligne__libelle {
    display: block;
    font-weight: 700;
    /* FC-001N8 §2 : 1rem → 1.2rem. */
    font-size: 1.2rem;
    cursor: pointer;
}
.fcc-parametres-ligne__description {
    /* var(--couleur-texte-discret) : déjà le texte secondaire standard du fichier (cf. convention de
       contraste en en-tête, ≥ 4,5:1 visé) — inchangé, seule la taille augmente. */
    color: var(--couleur-texte-discret);
    /* FC-001N8 §2 : 0.9rem → 1rem (16px minimum demandé). */
    font-size: 1rem;
    margin: 4px 0 0;
}
.fcc-parametres-pied {
    margin-top: 20px;
}
/* FC-001N8 §2 : bouton « Enregistrer », 1rem minimum gras (0.95rem/600 hérité de .fcc-bouton sinon) —
   scopé via un sélecteur descendant à ce pied de formulaire précis, pour ne pas changer les autres
   boutons .fcc-bouton--primaire de l'application (ex. public/theme-apercu.php). */
.fcc-parametres-pied .fcc-bouton {
    font-size: 1rem;
    font-weight: 700;
}
/* Interrupteur (switch) accessible : <input type="checkbox" role="switch"> réel, visuellement
   masqué mais toujours cliquable/focusable (opacity: 0, pas display:none) par-dessus toute la zone
   tactile (≥48px demandé, FC-001N8 §2 — 60x48, auparavant 52x44) ; la piste visuelle (span,
   aria-hidden) réagit à :checked et :focus-visible DU champ via le sélecteur général ~ (frère
   suivant). Couleur active = vert primaire du thème (jamais le bleu de la maquette RIA-SOFT de
   référence, cf. tâche). Piste agrandie à 56x30 (au moins, demandé) ; bouton (::before) 22px → 24px
   pour rester centré avec 3px d'air de chaque côté dans la nouvelle hauteur de piste. */
.fcc-interrupteur {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 60px;
    height: 48px;
    flex-shrink: 0;
}
.fcc-interrupteur input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.fcc-interrupteur__piste {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 30px;
    background: var(--couleur-bordure);
    border-radius: 999px;
    transition: background .15s ease;
}
.fcc-interrupteur__piste::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--couleur-carte);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .15s ease;
}
.fcc-interrupteur input:checked ~ .fcc-interrupteur__piste {
    background: var(--couleur-primaire);
}
.fcc-interrupteur input:checked ~ .fcc-interrupteur__piste::before {
    /* 56px (piste) − 24px (bouton) − 3px×2 (air gauche/droite) = 26px de course. */
    transform: translate(26px, 0);
}
.fcc-interrupteur input:focus-visible ~ .fcc-interrupteur__piste {
    outline: 3px solid var(--couleur-accent);
    outline-offset: 2px;
}

@media (max-width: 599px) {
    .fcc-admin-entete {
        align-items: stretch;
    }
    .fcc-admin-entete .fcc-bouton {
        width: 100%;
    }
}

/* ---------- Utilitaires responsive ---------- */

@media (max-width: 480px) {
    .fcc-login-carte { padding: 22px 16px; }
}

/* En-tête + barre latérale sous 600px (FC-001G/H, largeur FC-001J) : logo 52px, nom complet masqué
   (rôle + avatar restent visibles), espacements resserrés pour que tout tienne sans défilement
   horizontal ; la barre latérale passe à 68px (icône seule, libellé masqué). top de la barre
   recalculé pour la nouvelle hauteur d'en-tête à cette largeur (52 + 12*2 + 3 = 79px, cf. commentaire
   plus haut). */
@media (max-width: 599px) {
    .fcc-entete {
        padding: 12px 14px;
        gap: 10px;
    }
    .fcc-entete__logo-pastille {
        width: 52px;
        height: 52px;
    }
    .fcc-entete__titre {
        font-size: 1.15rem;
    }
    .fcc-entete__identite {
        gap: 8px;
    }
    .fcc-entete__utilisateur {
        display: none;
    }
    .fcc-entete__role {
        max-width: 110px;
    }
    .fcc-corps {
        min-height: calc(100vh - 79px);
        min-height: calc(100dvh - 79px);
    }
    .fcc-barre-laterale,
    .fcc-barre-laterale--admin {
        /* FC-001N : la barre d'administration (260px depuis FC-001N6) repasse à 68px comme les
           autres pages sous 600px, icônes seules — cf. commentaire de .fcc-barre-laterale--admin
           plus haut. */
        width: 68px;
    }
    .fcc-barre-laterale__liste {
        top: 79px;
    }
    /* FC-001N5 : plus de correctif mobile spécifique à Déconnexion — margin (8px) et min-height
       (48px) sont désormais identiques au réglage de base (cf. .fcc-barre-laterale__lien--deconnexion
       plus haut), icône seule ici via le masquage du libellé juste en dessous. */
    .fcc-barre-laterale__libelle {
        display: none;
    }
    /* FC-001N : pas de titre "Administration" sur téléphone (icônes seules) ; sous-menus recentrés
       une fois leur libellé masqué (règle .fcc-barre-laterale__libelle ci-dessus, réutilisée pour
       les sous-menus) pour ne pas laisser l'icône décalée à gauche. */
    .fcc-barre-laterale__titre-admin {
        display: none;
    }
    .fcc-barre-laterale__sous-lien {
        justify-content: center;
        padding: 10px 4px;
    }
    .fcc-grille-kpi {
        margin-top: 28px;
    }
}

/* Logo réduit sur les écrans étroits (téléphone 360px, FC-001F) pour que la boîte tienne sans
   défilement horizontal, tout en restant nettement plus grand qu'avant FC-001F (96px). */
@media (max-width: 399px) {
    .fcc-login-pastille {
        width: 128px;
        height: 128px;
    }
}

/* =================================================================================================
   Demande d'Adhésion (FC-002A / FC-002A2) — tout scopé sous .fcc-adhesion-page pour ne jamais changer
   le rendu des autres pages (admin-*.php, etc.) qui réutilisent .fcc-carte/.fcc-champ/.fcc-bouton
   génériques.
   ================================================================================================= */

/* FC-002A2 §6 : taille uniforme sur les 5 étapes — libellés ≥1.1rem gras, saisies/listes/cases à
   cocher ≥1.1rem, textes d'aide ≥1rem, titres d'étape ≥1.5rem, cibles ≥52px (remplace les 48px et
   1rem/600 de FC-002A). */
.fcc-adhesion-page .fcc-champ label {
    font-size: 1.1rem;
    font-weight: 700;
}
.fcc-adhesion-page .fcc-champ input[type="text"],
.fcc-adhesion-page .fcc-champ input[type="tel"],
.fcc-adhesion-page .fcc-champ input[type="email"],
.fcc-adhesion-page .fcc-champ input[type="date"],
.fcc-adhesion-page .fcc-champ input[type="number"],
.fcc-adhesion-page .fcc-champ select,
.fcc-adhesion-page .fcc-champ textarea,
.fcc-adhesion-page .fcc-bouton {
    min-height: 52px;
    font-size: 1.1rem;
}
.fcc-adhesion-page .fcc-champ input[type="checkbox"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.fcc-adhesion-page h2 {
    font-size: 1.5rem;
    margin-top: 0;
}

/* FC-002A4 §1 : titre de la liste "en cours de saisie" en orange foncé (signifie "en cours"), pour le
   distinguer du titre vert (déjà la couleur par défaut de .fcc-admin-entete__titre, inchangée) de la
   liste "soumises". Contraste de --couleur-accent-fonce sur fond blanc déjà validé ≥ 4,5:1 dans les 3
   thèmes (cf. commentaire de ce calque dans leurs fichiers theme-*.css, FC-001N7). Couleur fixée
   explicitement : h2 n'est de toute façon jamais concerné par la règle générique a:hover/a:focus
   (élément non interactif), aucun risque d'écrasement à couvrir ici. */
.fcc-adhesion-page .fcc-adhesion-titre-orange {
    color: var(--couleur-accent-fonce);
}

/* FC-002A3 §2.5 : espace d'au moins 28px entre la petite barre orange sous le TITRE DE PAGE
   (.fcc-titre-page::after, déjà existante — PAS la barre sous l'indicateur d'étapes, cible erronée en
   FC-002A2) et l'élément qui suit, sur toutes les vues du module (liste, étapes 1 à 5, confirmation).
   Porté en margin-bottom sur .fcc-titre-page lui-même (hôte de la barre, dernier contenu de son
   propre bloc) plutôt que sur chaque élément suivant possible (bandeau, carte, indicateur d'étapes…
   qui varient selon la vue) : les marges verticales adjacentes de deux frères directs FUSIONNENT en
   CSS (on garde le MAXIMUM des deux, jamais moins) — cette seule règle garantit donc ≥28px quel que
   soit ce qui suit, sans qu'aucune marge parente ne puisse l'annuler (aucun padding/bordure entre
   .fcc-titre-page et son frère suivant, condition requise pour que la fusion s'applique). */
.fcc-adhesion-page .fcc-titre-page {
    margin-bottom: 28px;
}

/* FC-002A3 §2.2 : marquage doré des 6 champs obligatoires — c'est la ZONE DE SAISIE (input/select)
   qui est dorée, pas le conteneur (libellé + champ), qui reste blanc comme n'importe quel autre champ
   (correction du mauvais élément coloré en FC-002A2, où le conteneur ENTIER portait le doré). Texte
   noir explicite ("texte noir lisible", demandé littéralement par la tâche) : seule exception à la
   règle "variables de thème uniquement" de ce module, assumée ici comme ailleurs dans ce fichier
   (cf. .fcc-liste-regions__nom). */
.fcc-adhesion-page .fcc-champ-requis input,
.fcc-adhesion-page .fcc-champ-requis select {
    background: var(--couleur-champ-requis-fond);
    border-color: var(--couleur-champ-requis-bordure);
    color: #000;
}

/* FC-002A3 §2.2 : exception explicitement demandée — la case d'acceptation de l'étape 5 reste un
   BLOC entièrement doré (son libellé fait partie intégrante de l'affirmation acceptée, contrairement
   aux 6 champs ci-dessus où seule la zone de saisie a besoin d'être distinguée du conteneur). */
.fcc-adhesion-page .fcc-champ-requis--bloc {
    background: var(--couleur-champ-requis-fond);
    border: 1px solid var(--couleur-champ-requis-bordure);
    border-radius: var(--rayon-carte);
    padding: 12px 14px;
}
.fcc-adhesion-page .fcc-champ-requis--bloc label {
    color: #000;
}

/* FC-002A4 §4 : retour sur l'agrandissement de FC-002A3 (largeur pleine/2 colonnes, hauteur/police
   majorées) — la date de naissance doit avoir EXACTEMENT les mêmes dimensions que le champ Sexe
   voisin. Elle hérite donc simplement de la taille de base du module (.fcc-champ-requis input,
   52px/1.1rem, même rayon de bordure var(--rayon-bouton)) sans aucune règle dédiée : aucun sélecteur
   .fcc-adhesion-date-naissance ni .fcc-adhesion-champ-pleine-largeur ne subsiste (classes retirées du
   HTML également, cf. public/demande-adhesion.php). L'icône calendrier native reste à droite (position
   par défaut du navigateur, jamais stylée) ; le texte de remplacement "jj/mm/aaaa" hérite de
   font-family: var(--police-texte) comme tout le reste du champ, puisqu'aucune police n'est fixée
   séparément sur son pseudo-élément (::-webkit-datetime-edit, non stylé non plus). */

/* FC-002A2 §2 : phrase de bas d'étape (remplace les mentions "(obligatoire)"/"(facultatif)" par
   champ). ≥1rem, couleur de texte secondaire — occupe toute la largeur de la grille 2 colonnes. */
.fcc-adhesion-aide-etape {
    font-size: 1rem;
    color: var(--couleur-texte-discret);
    margin: 4px 0 0;
}
.fcc-adhesion-grille .fcc-adhesion-aide-etape {
    grid-column: 1 / -1;
}
/* FC-002B1 §3 Étape 2 : même utilitaire, réutilisable pour tout champ qui doit occuper toute la
   largeur de la grille à 2 colonnes (ici, le bloc des zones couvertes) — jamais de style en ligne. */
.fcc-adhesion-grille .fcc-adhesion-champ-pleine-largeur {
    grid-column: 1 / -1;
}

/* FC-002A2 §3 : confort visuel — la valeur réelle est mise en majuscules par adhesion.js (temps réel)
   et par core/adhesion_dossier.php::adhesion_majuscules() (source de vérité serveur, cf. validateurs
   d'étape), jamais par cette seule règle CSS. */
[data-majuscules] {
    text-transform: uppercase;
}

/* FC-002A2 §6 : boutons de bas de page — "Précédent"/"Enregistrer le brouillon" en orange foncé,
   "Enregistrer et Continuer"/"Soumettre le dossier" en vert (même vert que l'onglet actif). Spécificité
   classe+pseudo-classe > `a:hover, a:focus` (élément+pseudo-classe) et > `.fcc-bouton--action:hover`
   (même spécificité qu'un nom de classe différent : aucun élément ne porte les deux classes à la
   fois) — même principe déjà appliqué à .fcc-bouton--adhesion-orange en FC-002A. Fond ET texte fixés
   explicitement au repos, au survol souris (`@media (hover: hover)`), au focus clavier ET au clic :
   le texte reste blanc dans tous les états, seul le fond s'assombrit d'un cran au survol/focus/clic. */
.fcc-bouton--adhesion-orange {
    background: var(--couleur-accent-fonce);
    color: #FFFFFF;
    font-weight: 700;
}
.fcc-bouton--adhesion-orange:hover,
.fcc-bouton--adhesion-orange:focus,
.fcc-bouton--adhesion-orange:focus-visible,
.fcc-bouton--adhesion-orange:active {
    background: var(--couleur-accent-fonce);
    color: #FFFFFF;
    filter: brightness(0.88);
}
.fcc-bouton--adhesion-vert {
    background: var(--couleur-primaire);
    color: #FFFFFF;
    font-weight: 700;
}
.fcc-bouton--adhesion-vert:hover,
.fcc-bouton--adhesion-vert:focus,
.fcc-bouton--adhesion-vert:focus-visible,
.fcc-bouton--adhesion-vert:active {
    background: var(--couleur-primaire-fonce);
    color: #FFFFFF;
}

/* FC-003A4 §2 : état "désactivé" fixé explicitement (fond ET texte) pour les 3 couleurs de bouton
   utilisées par les fenêtres de décision — jusqu'ici seul `.fcc-bouton:disabled` (opacité seule, sur
   fond coloré) et `.fcc-validation-modale__actions .fcc-bouton:disabled` (opacité seule) géraient le
   désactivé ; gris neutre et lisible, sans dépendre de l'opacité sur un fond vert/orange/rouge. Placées
   après les 3 blocs ci-dessus : même spécificité qu'eux et que `.fcc-bouton:disabled`, l'ordre dans la
   feuille tranche. Pas d'état :visited : ces boutons sont tous des <button>, jamais des liens <a>. */
.fcc-bouton--adhesion-vert:disabled,
.fcc-bouton--adhesion-orange:disabled,
.fcc-bouton--danger:disabled {
    background: var(--couleur-bordure);
    color: var(--couleur-texte-discret);
    filter: none;
    opacity: 1;
    cursor: not-allowed;
}

/* Disposition à 2 colonnes ≥1000px (tâche §6 de FC-002A), 1 colonne en dessous. minmax(0, 1fr) :
   empêche une colonne de forcer une largeur minimale héritée de son contenu (ex. select large) et de
   provoquer un défilement horizontal de la page à 360px. */
.fcc-adhesion-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 24px;
}
@media (min-width: 1000px) {
    .fcc-adhesion-grille {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .fcc-adhesion-grille .fcc-adhesion-pied {
        grid-column: 1 / -1;
    }
}
/* FC-002A3 §2.4 : trois boutons À PLAT répartis sur la ligne (Précédent / Enregistrer le brouillon /
   Soumettre), plus de regroupement à gauche (.fcc-adhesion-pied__gauche supprimé — c'est justify-
   content: space-between seul, avec 3 enfants directs, qui centre naturellement l'élément du milieu). */
.fcc-adhesion-pied {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
@media (max-width: 599px) {
    /* FC-002A3 §2.4 : empilement plein largeur sous 600px, ordre visuel Soumettre → Enregistrer le
       brouillon → Précédent — column-reverse sur le conteneur inverse simplement l'ordre visuel des
       3 enfants directs du DOM (ordre source inchangé : Précédent, Enregistrer le brouillon,
       Soumettre, cf. markup de public/demande-adhesion.php), sans toucher à l'ordre logique lu au
       clavier/lecteur d'écran. Le bouton "Renvoyer le dossier complété" est posé dans un <form>
       (nécessaire pour son action POST dédiée) : ciblé explicitement pour hériter de la même largeur
       100% que les boutons/liens directs. */
    .fcc-adhesion-pied {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .fcc-adhesion-pied > .fcc-bouton,
    .fcc-adhesion-pied > form {
        width: 100%;
    }
    .fcc-adhesion-pied > form .fcc-bouton {
        width: 100%;
    }
}

.fcc-adhesion-gps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.fcc-adhesion-gps input {
    flex: 1;
    min-width: 120px;
}
.fcc-adhesion-note {
    font-size: 1rem;
    color: var(--couleur-texte-discret);
    margin-top: 6px;
}

.fcc-adhesion-separateur {
    border: none;
    border-top: 1px solid var(--couleur-bordure);
    margin: 24px 0;
}

/* ---------- Indicateur d'étapes ---------- */

.fcc-adhesion-etapes {
    margin: 16px 0 0;
    overflow-x: auto;
}
.fcc-adhesion-etapes ol {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}
/* FC-002A2 §6 : étape active en vert plein (inchangé) ; toutes les AUTRES étapes (terminées ou non)
   en orange clair avec bordure orange fine, texte foncé lisible — jamais blanches. La coche (✓,
   ajoutée dans le texte par public/demande-adhesion.php) reste le seul signe distinctif d'une étape
   terminée : il n'y a plus de 3ᵉ couleur de fond. Couleurs de texte fixées explicitement au repos ET
   au survol/focus (la règle générique `a:hover, a:focus { color: var(--couleur-primaire); }` de ce
   fichier changerait sinon la couleur du texte des étapes cliquables au survol). */
.fcc-adhesion-etapes__item {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 10px 8px;
    border-radius: var(--rayon-bouton);
    background: var(--couleur-accent-clair);
    border: 1px solid var(--couleur-accent);
    color: var(--couleur-texte);
    font-size: 1rem;
    font-weight: 600;
}
.fcc-adhesion-etapes__item a,
.fcc-adhesion-etapes__item span {
    color: var(--couleur-texte);
    text-decoration: none;
    display: block;
}
.fcc-adhesion-etapes__item a:hover,
.fcc-adhesion-etapes__item a:focus,
.fcc-adhesion-etapes__item a:focus-visible {
    color: var(--couleur-texte);
}
.fcc-adhesion-etapes__item--courante {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
}
.fcc-adhesion-etapes__item--courante span {
    color: var(--couleur-fond);
}

/* FC-002A2 §6 : barre orange sous l'indicateur d'étapes + espace (~30px) avant le contenu de
   l'onglet, même principe que .fcc-titre-page::after (filet d'accent) plus haut dans ce fichier. */
.fcc-adhesion-etapes-separateur {
    width: 48px;
    height: 4px;
    background: var(--couleur-accent);
    border-radius: 999px;
    margin: 14px 0 30px;
}

/* ---------- Photos (étape 4) ---------- */

.fcc-adhesion-photos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 1000px) {
    .fcc-adhesion-photos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.fcc-adhesion-photo-champ {
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    padding: 14px;
}
.fcc-adhesion-photo-champ h4 {
    margin-top: 0;
}
.fcc-adhesion-photo-apercu {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--couleur-fond);
    border: 1px dashed var(--couleur-bordure);
    border-radius: var(--rayon-bouton);
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
}
.fcc-adhesion-photo-img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--rayon-bouton);
}
.fcc-adhesion-photo-entree {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 1.1rem;
}
.fcc-adhesion-photo-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.fcc-adhesion-lien-secours {
    display: block;
    background: none;
    border: none;
    padding: 4px 0;
    color: var(--couleur-primaire-fonce);
    text-decoration: underline;
    font-size: 0.85rem;
    cursor: pointer;
    min-height: 32px;
}
.fcc-adhesion-photo-champ form.fcc-adhesion-form-photo {
    margin-bottom: 8px;
}

.fcc-adhesion-webcam-video {
    width: 100%;
    max-height: 60vh;
    border-radius: var(--rayon-bouton);
    background: #000;
}

/* ---------- Récapitulatif (étape 5) ---------- */

.fcc-adhesion-recap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (min-width: 1000px) {
    .fcc-adhesion-recap {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}
.fcc-adhesion-recap__bloc {
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    padding: 14px;
}
.fcc-adhesion-recap__bloc h3 {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.fcc-adhesion-conditions {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bouton);
    padding: 12px;
    background: var(--couleur-fond);
    margin-bottom: 16px;
    font-size: 0.95rem;
}

/* FC-002A3 §3.3 : bandeau "dossier déjà soumis, modifiable" — même gabarit que .fcc-message-succes
   (teinte/primaire), classe propre pour ne jamais changer ce dernier, partagé par tout le reste de
   l'application. */
.fcc-adhesion-bandeau {
    background: var(--couleur-teinte);
    color: var(--couleur-primaire-fonce);
    border: 1px solid var(--couleur-primaire);
    border-radius: var(--rayon-bouton);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 1rem;
}
.fcc-adhesion-bandeau .fcc-texte-discret {
    color: var(--couleur-primaire-fonce);
    opacity: 0.8;
}

/* FC-002A3 §2.6 : bloc de confirmation de soumission — remplace, pour ce seul cas, le bandeau
   générique .fcc-message-succes partagé par tout le reste de l'application (jamais modifié ici).
   Couleurs de thème uniquement ; texte toujours lisible sur le fond de la page (var(--couleur-carte)). */
.fcc-adhesion-confirmation {
    text-align: center;
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    padding: 36px 24px;
    margin-bottom: 28px;
}
.fcc-adhesion-confirmation__pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--couleur-primaire);
    color: var(--couleur-fond);
    font-size: 1.8rem;
    font-weight: 700;
}
.fcc-adhesion-confirmation__texte {
    font-size: 1.5rem;
    color: var(--couleur-texte);
    margin: 18px 0 8px;
}
.fcc-adhesion-confirmation__numero {
    font-size: 2rem;
    font-weight: 700;
    color: var(--couleur-primaire-fonce);
    margin: 0;
}

/* =================================================================================================
   FC-002B1 — Écran de choix du type (§1 point 1 de la tâche) : grandes cartes cliquables, scopées
   sous .fcc-adhesion-page comme le reste du module (jamais de couleur en dur, variables de thème
   uniquement). 2 colonnes dès 480px, 1 sur très petit écran (320-390px, cf. tâche §6) ; mobile.css ne
   touche pas cette grille (déjà en 1 colonne par défaut sous 480px, donc sous 768px aussi).
   ================================================================================================= */
.fcc-adhesion-choix-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 16px 0;
}
@media (min-width: 480px) {
    .fcc-adhesion-choix-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1000px) {
    .fcc-adhesion-choix-grille {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* FC-002B1B §2 : couleurs FIXES par type d'entité, demandées explicitement par le client (identiques
   dans les 3 thèmes — contrairement au reste du site, jamais de valeur hexadécimale dispersée dans les
   règles ci-dessous : tout passe par ces 4 variables). */
:root {
    --couleur-type-producteur: #006400;
    --couleur-type-cooperative: #2916F5;
    --couleur-type-organisation: #E2A76F;
    --couleur-type-syndicat: #7D0552;
    /* §3 : fond bleu clair de l'étiquette "Type" des listes — même convention de variable fixe
       (identique dans les 3 thèmes), utilisée plus bas par .fcc-adhesion-etiquette-type. */
    --couleur-badge-type: #ADD8E6;
}
.fcc-adhesion-choix-carte {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 120px;
    padding: 20px 14px;
    /* Fond par défaut (jamais affiché seul en pratique : chaque carte porte toujours l'un des 4
       modificateurs --producteur/--cooperative/--organisation-agricole/--syndicat ci-dessous), conservé
       comme repli neutre si un type futur oubliait son modificateur. */
    background: var(--couleur-carte);
    border: 2px solid transparent;
    border-radius: max(20px, var(--rayon-carte));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    color: #FFFFFF;
    font-family: var(--police-titre);
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
}
.fcc-adhesion-choix-carte--producteur { background: var(--couleur-type-producteur); border-color: var(--couleur-type-producteur); }
.fcc-adhesion-choix-carte--cooperative { background: var(--couleur-type-cooperative); border-color: var(--couleur-type-cooperative); }
.fcc-adhesion-choix-carte--organisation-agricole {
    background: var(--couleur-type-organisation);
    border-color: var(--couleur-type-organisation);
    /* Alerte lisibilité (§2 de la tâche, signalée aussi dans LIVRAISON_FC-002B1B.md) : texte blanc sur
       #E2A76F ≈ 2:1 de contraste, bien en dessous du 4.5:1 recommandé (WCAG AA). Couleur appliquée
       exactement telle que demandée par le client ; ombre de texte sombre discrète ajoutée UNIQUEMENT
       sur cette carte pour aider la lecture, sans changer la couleur demandée. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.fcc-adhesion-choix-carte--syndicat { background: var(--couleur-type-syndicat); border-color: var(--couleur-type-syndicat); }
/* États normal/:visited déjà couverts par la règle de base (texte toujours blanc) ; :hover/:focus/
   :active partagent un seul assombrissement (filter: brightness(.92)) commun aux 4 types — spécificité
   classe+pseudo-classe, supérieure à la règle générique `a:hover, a:focus` du projet, qui ne s'applique
   donc plus ici. Le texte reste blanc et le fond reste celui du type dans tous les états. */
.fcc-adhesion-choix-carte:visited {
    color: #FFFFFF;
}
.fcc-adhesion-choix-carte--producteur:hover, .fcc-adhesion-choix-carte--producteur:focus, .fcc-adhesion-choix-carte--producteur:focus-visible, .fcc-adhesion-choix-carte--producteur:active {
    background: var(--couleur-type-producteur);
    border-color: var(--couleur-type-producteur);
    color: #FFFFFF;
    filter: brightness(.92);
}
.fcc-adhesion-choix-carte--cooperative:hover, .fcc-adhesion-choix-carte--cooperative:focus, .fcc-adhesion-choix-carte--cooperative:focus-visible, .fcc-adhesion-choix-carte--cooperative:active {
    background: var(--couleur-type-cooperative);
    border-color: var(--couleur-type-cooperative);
    color: #FFFFFF;
    filter: brightness(.92);
}
.fcc-adhesion-choix-carte--organisation-agricole:hover, .fcc-adhesion-choix-carte--organisation-agricole:focus, .fcc-adhesion-choix-carte--organisation-agricole:focus-visible, .fcc-adhesion-choix-carte--organisation-agricole:active {
    background: var(--couleur-type-organisation);
    border-color: var(--couleur-type-organisation);
    color: #FFFFFF;
    filter: brightness(.92);
}
.fcc-adhesion-choix-carte--syndicat:hover, .fcc-adhesion-choix-carte--syndicat:focus, .fcc-adhesion-choix-carte--syndicat:focus-visible, .fcc-adhesion-choix-carte--syndicat:active {
    background: var(--couleur-type-syndicat);
    border-color: var(--couleur-type-syndicat);
    color: #FFFFFF;
    filter: brightness(.92);
}
.fcc-adhesion-choix-carte:focus-visible {
    /* Contour visible sur fond coloré, identique pour les 4 types (blanc : seule couleur garantissant
       un contraste correct à la fois sur le vert foncé, le bleu, le sable et le prune). */
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

/* FC-002B1B §3 : étiquette "Type" des listes fusionnées (producteur + personne morale) — fond bleu
   clair UNIQUE demandé par le client pour les 4 types (remplace l'ancien fond neutre --couleur-bordure
   de FC-002B1), texte en couleur sombre de thème pour la lisibilité (déjà --couleur-texte, inchangé). */
.fcc-adhesion-etiquette-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--couleur-badge-type);
    color: var(--couleur-texte);
}
.fcc-adhesion-etiquette-type svg {
    /* "icône dans la même couleur que le texte" (§3 de la tâche) : aucune icône n'existe à ce jour dans
       cette étiquette (texte seul) — règle de défense en profondeur si une icône y était ajoutée plus
       tard, sans effet observable aujourd'hui. */
    color: currentColor;
    fill: currentColor;
}

/* FC-003B4 §1 : téléphone du dossier, seconde ligne SOUS le nom/la dénomination, MÊME cellule (pas de
   colonne supplémentaire) — public/demande-adhesion.php ("Mes demandes en cours de saisie"/"Demandes
   soumises") et public/validation-adhesion.php (file de validation). display:block pour forcer le
   retour à la ligne à l'intérieur de la cellule (un <span> est inline par défaut, resterait collé au
   nom sur la même ligne sans cette propriété) ; taille/couleur "un cran plus petit, secondaire" —
   variables de thème déjà utilisées pour ce rôle ailleurs dans ce fichier (.fcc-champ-aide). Absent du
   HTML quand le dossier n'a pas de téléphone exploitable (cf. core/adhesion_dossier.php::
   adhesion_telephone_affichage()) : jamais de ligne vide ni de tiret. */
.fcc-adhesion-liste-telephone {
    display: block;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--couleur-texte-discret);
}

/* FC-002B1 §3 Étape 2 : zones couvertes (cases à cocher des 31 régions) — même disposition
   responsive multi-colonnes que .fcc-liste-regions de l'accueil (1 colonne par défaut, 2 dès 600px,
   3 dès 1024px), mais avec des cases à cocher plutôt que du texte seul. */
.fcc-adhesion-zones-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.fcc-adhesion-zones-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 1;
    column-gap: 24px;
}
@media (min-width: 600px) {
    .fcc-adhesion-zones-liste {
        columns: 2;
    }
}
@media (min-width: 1024px) {
    .fcc-adhesion-zones-liste {
        columns: 3;
    }
}
.fcc-adhesion-zones-liste li {
    break-inside: avoid;
    padding: 4px 0;
}
/* Spécificité (.fcc-adhesion-page + .fcc-adhesion-zones-liste + label = 2 classes + 1 élément)
   délibérément égale à ".fcc-adhesion-page .fcc-champ label" (même schéma) : gagne par ORDRE (cette
   règle est plus bas dans le fichier), même mécanisme que .fcc-bouton--action documenté plus haut. */
.fcc-adhesion-page .fcc-adhesion-zones-liste label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 1rem;
    cursor: pointer;
}
.fcc-adhesion-page .fcc-adhesion-zones-liste input[type="checkbox"] {
    flex-shrink: 0;
}

/* =================================================================================================
   FC-002M §0 — règle NEUTRE : tout nouveau balisage ajouté pour le parcours mobile (barre de
   navigation du bas, bouton "Nouvelle demande" de l'accueil, bouton afficher/masquer le mot de
   passe, boutons de l'écran de confirmation, boutons photo mobiles, etc.) porte cette classe et reste
   donc invisible par défaut. Seul public/assets/css/mobile.css (chargé uniquement sous 768px via
   l'attribut media du <link>, cf. includes/header.php/public/login.php) la rend visible — AUCUN effet
   sur aucune largeur tant que mobile.css n'est pas actif, donc aucun effet sur la version PC/tablette.
   ================================================================================================= */
.fcc-mobile-seul {
    display: none;
}

/* =================================================================================================
   FC-002B1C — Recherche et pagination de "Demandes soumises" (PC). Variables de thème uniquement
   (§5 de la tâche) ; boutons Rechercher/Effacer/Précédent/Suivant réutilisent .fcc-bouton--adhesion-
   vert/--orange déjà existantes (couleurs + états hover/focus/focus-visible/active/visited déjà fixés
   explicitement plus haut dans ce fichier, cf. FC-002A2/FC-002B1B) — aucune nouvelle couleur de bouton
   à définir ici.
   ================================================================================================= */

/* ---------- Barre de recherche (§2) ---------- */
.fcc-adhesion-recherche {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 12px 0 16px;
}
.fcc-adhesion-recherche__champ-bloc {
    flex: 1 1 260px;
    min-width: 0;
}
.fcc-adhesion-recherche__champ-bloc label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}
.fcc-adhesion-recherche__champ {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bouton);
    background: var(--couleur-carte);
    color: var(--couleur-texte);
    font-family: var(--police-texte);
    font-size: 1rem;
    box-sizing: border-box;
}
.fcc-adhesion-recherche__champ:focus {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 1px;
}
.fcc-adhesion-recherche__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.fcc-adhesion-recherche__resultat {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--couleur-texte-discret);
}

/* ---------- Pagination (§3) ---------- */
.fcc-adhesion-pagination {
    margin-top: 18px;
}
.fcc-adhesion-pagination__compte {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: var(--couleur-texte-discret);
}
.fcc-adhesion-pagination__barre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.fcc-adhesion-pagination__etat {
    font-weight: 600;
    color: var(--couleur-texte);
}
/* Boutons Précédent/Suivant : taille compacte (hauteur de bouton par défaut, pas la hauteur pleine de
   .fcc-adhesion-recherche__champ) — seule la couleur/les états viennent de --adhesion-vert/--orange. */
.fcc-adhesion-pagination__bouton {
    min-height: 40px;
    padding: 0 16px;
}
/* Spécificité (2 classes) volontairement supérieure à .fcc-bouton--adhesion-vert/--orange (1 classe,
   §5 : "boutons inactifs grisés et non cliquables") : le gris l'emporte toujours sur le vert/orange,
   y compris sur l'état de repos de ces classes, qu'il soit placé avant ou après dans la cascade. */
.fcc-adhesion-pagination__bouton.fcc-adhesion-pagination__bouton--desactive {
    background: var(--couleur-bordure);
    color: var(--couleur-texte-discret);
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}
.fcc-adhesion-pagination__numeros {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.fcc-adhesion-pagination__numero,
.fcc-adhesion-pagination__points {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 2px 6px;
    border-radius: var(--rayon-bouton);
    font-weight: 600;
    text-decoration: none;
    color: var(--couleur-texte);
}
.fcc-adhesion-pagination__numero:visited {
    color: var(--couleur-texte);
}
.fcc-adhesion-pagination__numero:hover,
.fcc-adhesion-pagination__numero:focus,
.fcc-adhesion-pagination__numero:focus-visible,
.fcc-adhesion-pagination__numero:active {
    background: var(--couleur-teinte);
    color: var(--couleur-texte);
}
/* Page courante (§3 : "fond vert, texte blanc") — pointer-events:none : pas un lien cliquable vers
   elle-même, cohérent avec aria-current="page" posé côté HTML. */
.fcc-adhesion-pagination__numero--actif,
.fcc-adhesion-pagination__numero--actif:visited,
.fcc-adhesion-pagination__numero--actif:hover,
.fcc-adhesion-pagination__numero--actif:focus {
    background: var(--couleur-primaire);
    color: #FFFFFF;
    pointer-events: none;
}
.fcc-adhesion-pagination__points {
    color: var(--couleur-texte-discret);
    font-weight: 400;
    pointer-events: none;
}

/* =================================================================================================
   FC-003A — Validation administrative des dossiers d'adhésion (PC). Page scopée .fcc-validation-page
   (jamais .fcc-adhesion-page : zéro risque de coupler un futur changement de "Demandes soumises" ou
   du parcours de création à cette page, et inversement — même principe d'isolation déjà appliqué en
   FC-002B1C/E). Couleurs : variables de thème uniquement.
   ================================================================================================= */

/* ---------- Bandeaux créateur (orange complément / rouge rejet, §5 de la tâche) ----------
   Réutilisent .fcc-adhesion-bandeau (base commune, inchangée) avec un modificateur de couleur —
   même structure que .fcc-message-erreur pour le rouge (fond clair, texte/bordure de la couleur). */
.fcc-adhesion-bandeau--orange {
    background: var(--couleur-accent-clair);
    color: var(--couleur-texte);
    border-color: var(--couleur-accent-fonce);
}
.fcc-adhesion-bandeau--orange .fcc-texte-discret {
    color: var(--couleur-texte);
    opacity: 0.85;
}
.fcc-adhesion-bandeau--rouge {
    background: var(--couleur-accent-clair);
    color: var(--couleur-danger);
    border-color: var(--couleur-danger);
}
.fcc-adhesion-bandeau--rouge .fcc-texte-discret {
    color: var(--couleur-danger);
    opacity: 0.85;
}

/* ---------- Statuts de dossier (§3/§5 de la tâche) : réutilise .fcc-statut (base.css, inchangée) —
   4 nouveaux modificateurs de couleur, lisibles, un par statut. 'rejete' est un ALIAS de
   .fcc-statut--danger (déjà existante) pour que le nom de classe généré dynamiquement par les pages
   (str_replace('_','-', $statut)) retrouve directement la bonne couleur sans correspondance ad hoc
   côté PHP. ---------- */
/* FC-003A2 §1 : couleurs imposées littéralement par la tâche — fond sombre neutre (var(--couleur-
   texte), déjà le ton le plus sombre de chaque thème, réutilisé ici comme fond plutôt que comme texte)
   pour "soumis" ; orange/vert/rouge du thème pour les 3 autres ; texte TOUJOURS blanc (var(--couleur-
   fond), déjà la convention "texte clair" de ce fichier, cf. .fcc-entete/.fcc-pied) et gras. */
.fcc-statut--soumis {
    background: var(--couleur-texte);
    color: var(--couleur-fond);
    font-weight: 700;
}
.fcc-statut--complement-demande {
    background: var(--couleur-accent);
    color: var(--couleur-fond);
    font-weight: 700;
}
.fcc-statut--valide {
    background: var(--couleur-primaire);
    color: var(--couleur-fond);
    font-weight: 700;
}
.fcc-statut--rejete {
    background: var(--couleur-danger);
    color: var(--couleur-fond);
    font-weight: 700;
}
/* FC-003A3 §2 : variante listée par la tâche parmi celles à centrer — ajoutée par complétude du
   mappage unique (core/adhesion_referentiel.php::adhesion_classe_statut() retournait déjà 'brouillon'
   depuis FC-003A2, sans règle de couleur correspondante jusqu'ici ; aucune page n'affiche aujourd'hui
   de pastille "brouillon", le centrage de .fcc-statut s'appliquerait de toute façon si l'une venait à
   le faire). Même couleur neutre que .fcc-statut--inactif (admin-utilisateurs.php), cohérent avec le
   sens "en cours de saisie, pas encore décidé". */
.fcc-statut--brouillon {
    background: var(--couleur-bordure);
    color: var(--couleur-texte);
}

/* ---------- Compteurs en tête de la file (§1 de FC-003A2) : 4 boutons cliquables de même taille,
   couleur portée par les modificateurs .fcc-statut--* ci-dessus (réutilisés tels quels — un seul
   mappage couleur, jamais dupliqué) combinés à .fcc-validation-compteur pour la mise en page bouton.
   PC : 4 colonnes égales ; mobile : 2x2 (cf. mobile.css). ---------- */
.fcc-validation-compteurs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 12px 0 20px;
}
.fcc-validation-compteur {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* FC-003A3 §1 : hauteur minimale relevée de 72 à 100px — le libellé passe de 0.85 à 1.05rem
       (ci-dessous), 2 lignes à cette taille + le nombre + le padding ne tenaient plus dans 72px. Les 4
       boutons restent de la MÊME hauteur entre eux quel que soit leur nombre de lignes de libellé (1 ou
       2) : .fcc-validation-compteurs (grille CSS, inchangée) étire chaque cellule à la hauteur de la
       plus grande de sa ligne par défaut (align-items:stretch, comportement natif des grilles, jamais
       redéfini) — min-height ne fixe qu'un PLANCHER commun, jamais une hauteur propre à un bouton. */
    min-height: 100px;
    padding: 10px 8px;
    border-radius: var(--rayon-carte);
    text-decoration: none;
    text-align: center;
}
.fcc-validation-compteur__nombre {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}
/* FC-003A3 §1 : 0.85rem -> 1.05rem (+~3.2px, dans la fourchette "+2px" demandée) — toujours strictement
   inférieur à .fcc-validation-compteur__nombre (1.6rem), qui garde sa mise en évidence. */
.fcc-validation-compteur__libelle {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}
/* §1 : "le bouton du statut actuellement affiché est repéré (contour épais ou soulignement)" — contour
   dans le gap créé par outline-offset (rempli par le fond de PAGE, var(--couleur-fond)), donc visible
   quelle que soit la couleur du bouton lui-même. */
.fcc-validation-compteur--actif {
    outline: 3px solid var(--couleur-texte);
    outline-offset: 2px;
}
/* États explicites (§1 : "normal, :hover, :focus, :active, :visited : fond ET texte blanc imposés")
   — un bloc par couleur, fond/texte réaffirmés à chaque état, spécificité (2 classes + pseudo-classe)
   supérieure à la règle générique a:hover, a:focus de ce fichier. */
.fcc-validation-compteur.fcc-statut--soumis:visited,
.fcc-validation-compteur.fcc-statut--soumis:hover,
.fcc-validation-compteur.fcc-statut--soumis:focus,
.fcc-validation-compteur.fcc-statut--soumis:focus-visible,
.fcc-validation-compteur.fcc-statut--soumis:active {
    background: var(--couleur-texte);
    color: var(--couleur-fond);
}
.fcc-validation-compteur.fcc-statut--complement-demande:visited,
.fcc-validation-compteur.fcc-statut--complement-demande:hover,
.fcc-validation-compteur.fcc-statut--complement-demande:focus,
.fcc-validation-compteur.fcc-statut--complement-demande:focus-visible,
.fcc-validation-compteur.fcc-statut--complement-demande:active {
    background: var(--couleur-accent);
    color: var(--couleur-fond);
}
.fcc-validation-compteur.fcc-statut--valide:visited,
.fcc-validation-compteur.fcc-statut--valide:hover,
.fcc-validation-compteur.fcc-statut--valide:focus,
.fcc-validation-compteur.fcc-statut--valide:focus-visible,
.fcc-validation-compteur.fcc-statut--valide:active {
    background: var(--couleur-primaire);
    color: var(--couleur-fond);
}
.fcc-validation-compteur.fcc-statut--rejete:visited,
.fcc-validation-compteur.fcc-statut--rejete:hover,
.fcc-validation-compteur.fcc-statut--rejete:focus,
.fcc-validation-compteur.fcc-statut--rejete:focus-visible,
.fcc-validation-compteur.fcc-statut--rejete:active {
    background: var(--couleur-danger);
    color: var(--couleur-fond);
}
/* Survol/focus/clic assombris légèrement (même convention que .fcc-bouton--adhesion-vert/orange) —
   règle SÉPARÉE (ne remplace pas les blocs couleur ci-dessus, s'ajoute par-dessus en cascade : même
   spécificité, déclarée APRÈS, donc appliquée en complément filter uniquement). */
.fcc-validation-compteur:hover,
.fcc-validation-compteur:focus,
.fcc-validation-compteur:active {
    filter: brightness(0.92);
}

/* ---------- Panneau de décision : 3 boutons de même taille (§1 : "hauteur, largeur identiques, texte
   blanc gras") ---------- */
.fcc-validation-panneau__actions .fcc-bouton {
    width: 230px;
    flex: 0 0 auto;
    min-height: 48px;
    font-weight: 700;
    justify-content: center;
}
/* FC-003A4 §1.2 : panneau "Corriger la décision" — à la place du bouton correspondant au statut actuel
   (jamais proposé, cf. public/validation-adhesion-dossier.php), une pastille de statut occupant le même
   emplacement (taille identique aux 2 boutons voisins), plutôt qu'une case vide dans la rangée. */
.fcc-validation-panneau__actions .fcc-statut {
    width: 230px;
    flex: 0 0 auto;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* ---------- Filtres (§3) : <details> toujours ouvert sur PC (le bouton "Filtres" — <summary> — n'a
   de sens que sur mobile, où il sert à replier le formulaire, cf. mobile.css). `details:not([open]) >
   form` annule le masquage NATIF du contenu fermé d'un <details> (règle de la feuille de style du
   navigateur, qui peut être surchargée par une règle d'auteur suffisamment spécifique) : sur PC, le
   formulaire reste donc TOUJOURS visible, que l'attribut "open" soit présent ou non dans le HTML —
   un seul balisage <details> sert donc les deux gabarits (PC toujours ouvert, mobile repliable). */
.fcc-validation-filtres {
    margin-bottom: 20px;
}
.fcc-validation-filtres__bouton {
    display: none;
}
.fcc-validation-filtres:not([open]) > .fcc-validation-filtres__formulaire {
    display: block;
}
.fcc-validation-filtres__formulaire {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    padding: 16px;
}
.fcc-validation-filtres__formulaire .fcc-champ {
    margin-bottom: 0;
    flex: 1 1 180px;
    min-width: 0;
}
.fcc-validation-filtres__recherche {
    flex: 2 1 260px;
}
.fcc-validation-filtres__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.fcc-validation-resultat {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--couleur-texte-discret);
}

/* ---------- Blocs repliables de l'écran d'examen (§4) : <details> natif, ouverts par défaut (écran
   de décision -> tout visible d'un coup d'œil), repliables au besoin — même composant PC et mobile. ---------- */
.fcc-validation-bloc {
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    padding: 14px 18px;
    margin-bottom: 14px;
}
.fcc-validation-bloc summary {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--couleur-primaire-fonce);
    cursor: pointer;
    padding: 4px 0;
}
.fcc-validation-bloc[open] summary {
    margin-bottom: 8px;
}
.fcc-validation-bloc p {
    margin: 6px 0;
    line-height: 1.6;
}

/* ---------- Alerte de doublons potentiels (§4) : jamais bloquante, fond orange clair pour attirer
   l'attention sans la gravité du rouge (réservé au rejet). ---------- */
.fcc-validation-alerte-doublons {
    background: var(--couleur-accent-clair);
    border: 1px solid var(--couleur-accent-fonce);
    border-radius: var(--rayon-carte);
    padding: 14px 18px;
    margin-bottom: 16px;
}
.fcc-validation-alerte-doublons ul {
    margin: 8px 0 0;
    padding-left: 20px;
}
.fcc-validation-alerte-doublons li {
    margin-bottom: 4px;
}

/* ---------- Photos (miniature + ouverture en grand, §4) ---------- */
.fcc-validation-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.fcc-validation-photo-bloc {
    flex: 0 1 220px;
}
.fcc-validation-photo-img {
    display: block;
    width: 100%;
    max-width: 220px;
    max-height: 220px;
    object-fit: contain;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bouton);
    background: var(--couleur-fond);
}

/* ---------- Panneau de décision (§4) ---------- */
/* .fcc-champ-requis--bloc (case "J'ai pris connaissance des doublons…", obligatoire pour Valider) est
   scopée .fcc-adhesion-page dans base.css (FC-002A3) — jamais réutilisée telle quelle ici (scope
   indépendant, cf. en-tête de cette section) : même traitement visuel dupliqué sous .fcc-validation-page. */
.fcc-validation-page .fcc-champ-requis--bloc {
    background: var(--couleur-champ-requis-fond);
    border: 1px solid var(--couleur-champ-requis-bordure);
    border-radius: var(--rayon-carte);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.fcc-validation-page .fcc-champ-requis--bloc label {
    color: #000;
}
.fcc-validation-panneau {
    margin-top: 8px;
}
.fcc-validation-panneau textarea {
    width: 100%;
    min-height: 90px;
    padding: 8px 12px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bouton);
    background: var(--couleur-carte);
    color: var(--couleur-texte);
    font-family: var(--police-texte);
    font-size: 1rem;
    resize: vertical;
}
.fcc-validation-panneau textarea:focus {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 1px;
}
.fcc-validation-panneau__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* ---------- Navigation précédent/suivant dans la file (§4, optionnel) ---------- */
.fcc-validation-nav-dossier {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

/* =================================================================================================
   FC-003A2 — Ajustements (PC). Couleurs uniquement par variables de thème (§5 de la tâche).
   ================================================================================================= */

/* ---------- §4 bis : accueil, cartes/lignes cliquables — "texte et fond inchangés" (les <span>
   enfants fixent déjà leur propre couleur, insensibles à la règle générique a:hover/a:focus de ce
   fichier, cf. commentaire déjà en place sur .fcc-kpi plus haut) ; seule une affordance discrète
   (curseur, soulignement au survol/focus) signale la cliquabilité, comme demandé. Sélecteur [href] :
   ne s'applique QUE lorsque la carte/ligne est effectivement un lien (balise dynamique côté PHP pour
   .fcc-carte-objectif ; présence ou non du <a class="fcc-liste-regions__lien"> pour les régions) —
   jamais d'effet sur le rendu "non cliquable" existant. ---------- */
.fcc-carte-objectif[href] {
    cursor: pointer;
    text-decoration: none;
}
.fcc-carte-objectif[href]:hover,
.fcc-carte-objectif[href]:focus-visible {
    text-decoration: underline;
}
.fcc-carte-objectif[href]:focus-visible {
    outline: 3px solid var(--couleur-accent);
    outline-offset: 2px;
}
.fcc-liste-regions__lien {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.fcc-liste-regions__lien:visited {
    color: inherit;
}
.fcc-liste-regions__lien:hover .fcc-liste-regions__nom,
.fcc-liste-regions__lien:focus-visible .fcc-liste-regions__nom {
    text-decoration: underline;
}
.fcc-liste-regions__lien:focus-visible {
    outline: 3px solid var(--couleur-accent);
    outline-offset: 2px;
}

/* ---------- §4 : fenêtre modale des décisions — <dialog> natif (avec repli [data-ouverte] si
   showModal() n'existe pas, cf. public/assets/js/validation.js). ---------- */
.fcc-validation-modale {
    width: min(540px, calc(100vw - 48px));
    max-height: min(680px, calc(100vh - 48px));
    padding: 24px 28px;
    border: none;
    border-radius: var(--rayon-carte);
    background: var(--couleur-carte);
    color: var(--couleur-texte);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
}
.fcc-validation-modale::backdrop {
    background: rgba(0, 0, 0, .5);
}
/* Repli sans <dialog> natif (showModal() absent — navigateur très ancien) : surcouche manuelle
   pilotée par l'attribut [data-ouverte] (posé/retiré par validation.js) plutôt que par l'attribut
   natif "open" — un <dialog> simplement "open" sans showModal() resterait positionné dans le flux
   normal de la page (comportement natif "non modal"), ce que ce repli corrige en le fixant par-dessus
   toute la page. Simplification ACCEPTÉE pour ce seul repli (cf. LIVRAISON_FC-003A2.md, "points non
   vérifiés") : pas de voile sombre derrière (contrairement au ::backdrop natif de showModal()) — la
   fenêtre reste centrée, opaque et au-dessus du contenu, ce qui suffit à l'utiliser normalement (focus
   piégé, Échap, clic extérieur gérés par validation.js dans les deux cas). */
.fcc-validation-modale[data-ouverte] {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}
.fcc-validation-modale:not([open]):not([data-ouverte]) {
    display: none;
}
.fcc-validation-modale__titre {
    margin: 0 0 8px;
    font-size: 1.3rem;
    color: var(--couleur-primaire-fonce);
}
.fcc-validation-modale__consigne {
    margin: 0 0 16px;
    color: var(--couleur-texte-discret);
}
.fcc-validation-modale textarea {
    width: 100%;
    min-height: 120px;
    padding: 8px 12px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bouton);
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family: var(--police-texte);
    font-size: 1rem;
    resize: vertical;
}
.fcc-validation-modale textarea:focus {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 1px;
}
.fcc-validation-modale__compteur {
    margin: 4px 0 0;
    font-size: .85rem;
    color: var(--couleur-texte-discret);
    text-align: right;
}
/* FC-003B6 §2 : "le compteur passe en couleur d'alerte au-delà de 180" (limite à 200 uniquement,
   posée par validation.js::majCompteurEtEtatConfirmer() — jamais pour Rouvrir). Couleur de thème,
   pas de rouge "erreur" strict : dépasser 180 n'empêche jamais de confirmer, ce n'est qu'un repère. */
.fcc-validation-modale__compteur--alerte {
    color: var(--couleur-accent-fonce);
    font-weight: 700;
}
.fcc-validation-modale__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}
.fcc-validation-modale__actions .fcc-bouton {
    min-width: 140px;
    min-height: 48px;
    font-weight: 700;
    justify-content: center;
}
.fcc-validation-modale__actions .fcc-bouton:disabled {
    opacity: .5;
    cursor: not-allowed;
}
/* §4 : "Confirmer en haut, Annuler dessous" n'est demandé que sur MOBILE (cf. mobile.css) — sur PC,
   l'ordre visuel (Annuler puis Confirmer, DOM dans cet ordre) suit la convention déjà en place dans ce
   projet (cf. panneau de décision : actions secondaires avant l'action principale). FC-003B §3 :
   flex-wrap ajouté ci-dessus pour que les 2 boutons supplémentaires ("Confirmer avec SMS"/"Confirmer
   avec WhatsApp & SMS", libellés "avec" depuis FC-003B4 §2 bis) passent proprement sur une seconde
   ligne si les 4 boutons ne tiennent pas sur une seule (largeur de modale bornée à 540px, cf.
   .fcc-validation-modale), sans jamais provoquer de défilement horizontal. */

/* FC-003B §3 : "Confirmer avec SMS"/"Confirmer avec WhatsApp & SMS" = variante de la couleur de l'action
   déjà posée par validation.js (même classe fcc-bouton--adhesion-vert/--danger que "Confirmer") — une
   bordure plus foncée les distingue visuellement du bouton "Confirmer" simple, sans dépendre de la
   couleur de fond sous-jacente (fonctionne aussi bien pour le vert que pour le rouge de "Rejeter").
   États survol/focus/clic/désactivé fixés explicitement (fond ET texte restent ceux de la classe de
   couleur sous-jacente, seule la bordure change), même principe que .fcc-bouton--danger ci-dessus. */
.fcc-bouton--notif-sms,
.fcc-bouton--notif-whatsapp {
    border: 2px solid rgba(0, 0, 0, .35);
}
.fcc-bouton--notif-sms:hover,
.fcc-bouton--notif-sms:focus,
.fcc-bouton--notif-sms:focus-visible,
.fcc-bouton--notif-sms:active,
.fcc-bouton--notif-whatsapp:hover,
.fcc-bouton--notif-whatsapp:focus,
.fcc-bouton--notif-whatsapp:focus-visible,
.fcc-bouton--notif-whatsapp:active {
    border-color: rgba(0, 0, 0, .55);
}
.fcc-bouton--notif-sms:disabled,
.fcc-bouton--notif-whatsapp:disabled {
    background: var(--couleur-bordure);
    color: var(--couleur-texte-discret);
    border-color: rgba(0, 0, 0, .2);
    opacity: 1;
    cursor: not-allowed;
}
/* FC-003B §3 : ligne d'aide sous les boutons (destinataire masqué, ou mention d'absence de numéro). */
.fcc-validation-modale__aide-notification {
    margin: 10px 0 0;
    font-size: .85rem;
    color: var(--couleur-texte-discret);
    text-align: right;
}
/* FC-003B3 §2 : ligne de diagnostic ADMIN (raison exacte des boutons SMS/WhatsApp absents, jamais une
   valeur) — discrète, en italique pour la distinguer visuellement de la ligne d'aide destinataire
   ci-dessus (même taille/couleur de base, jamais un ton d'alerte : ce n'est pas une erreur bloquante,
   seulement un repère de diagnostic réservé à l'ADMIN). */
.fcc-validation-modale__diagnostic-admin {
    margin: 6px 0 0;
    font-size: .8rem;
    font-style: italic;
    color: var(--couleur-texte-discret);
    text-align: right;
}

/* FC-003B5 §1 (URGENT) : message "Veuillez patienter…" — masqué par défaut via l'attribut HTML
   "hidden" (jamais seulement par cette règle CSS, cf. public/validation-adhesion-dossier.php) ;
   [hidden] doit être réaffirmé explicitement ici car display:flex ci-dessous, posé sur le même
   sélecteur, aurait sinon une spécificité égale et gagnerait par ordre de déclaration (la règle
   [hidden] du navigateur, moins spécifique, perdrait face à notre propre display:flex sans ce
   correctif). display:flex (pas inline-flex) : la ligne "lenteur" ci-dessous doit pouvoir passer
   pleine largeur sous le spinner+texte sans les élargir. */
.fcc-validation-modale__attente {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--rayon-bouton);
    background: var(--couleur-accent-clair);
    color: var(--couleur-texte);
    font-size: 1rem;
    font-weight: 600;
}
.fcc-validation-modale__attente[hidden] {
    display: none;
}
/* Spinner CSS pur (aucune bibliothèque, §1) : anneau tournant, couleur de thème. */
.fcc-spinner {
    display: inline-block;
    flex: none;
    width: 22px;
    height: 22px;
    border: 3px solid var(--couleur-bordure);
    border-top-color: var(--couleur-primaire);
    border-radius: 50%;
    animation: fcc-spinner-rotation 0.8s linear infinite;
}
@keyframes fcc-spinner-rotation {
    to { transform: rotate(360deg); }
}
/* Filet de sécurité 60 s (§1) : ligne pleine largeur sous le spinner+texte, ton d'alerte discret
   (orange du thème, pas rouge — ce n'est pas une erreur, le traitement est toujours en cours). */
.fcc-validation-modale__attente-lenteur {
    width: 100%;
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--couleur-accent-fonce);
}

/* ---------- Code QR de l'adhérent (FC-003C §5) — bloc commun aux pages de dossier (validation,
   demande-adhesion, demande-adhesion-entite) et à l'écran de confirmation après soumission.
   PC : QR à gauche, légende/actions à droite. Centrage/empilement mobile dans mobile.css. ---------- */
.fcc-qr-bloc__contenu {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.fcc-qr-bloc__image {
    flex: none;
    width: 180px;
    height: 180px;
    line-height: 0; /* évite un espace blanc sous le <svg> inline */
}
.fcc-qr-bloc__image svg {
    width: 100%;
    height: 100%;
    display: block;
}
.fcc-qr-bloc__infos {
    flex: 1 1 200px;
    min-width: 160px;
}
.fcc-qr-bloc__legende {
    font-weight: 600;
    margin: 0 0 10px;
}
.fcc-qr-bloc__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Feuille d'impression (FC-003C §5) : masquée à l'écran, seule visible à l'impression — technique
   "visibility" (plutôt que display) sur tout le document pour fonctionner quelle que soit la
   position du bloc dans le DOM (en-tête/pied de page compris), sans toucher au reste des pages. */
.fcc-qr-impression {
    display: none;
}
@media print {
    body * {
        visibility: hidden;
    }
    .fcc-qr-impression, .fcc-qr-impression * {
        visibility: visible;
    }
    .fcc-qr-impression {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 24px;
        text-align: center;
    }
    .fcc-qr-impression svg {
        width: 160px;
        height: 160px;
    }
}

/* ---------- Parcours public (FC-002C §8) — en-tête/pied dédiés, sans menu ni barre d'application.
   Variables de thème uniquement (§9), mêmes fichiers theme-*.css que l'application. ---------- */
.fcc-entete-public {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--couleur-entete, var(--couleur-primaire-fonce));
    color: var(--couleur-entete-texte, var(--couleur-fond));
}
.fcc-entete-public__logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.fcc-entete-public__titre {
    font-family: var(--police-titre);
    font-size: 1.1rem;
    font-weight: 700;
}
.fcc-contenu-publique {
    display: block;
}
.fcc-conteneur-publique {
    max-width: 640px;
    margin: 24px auto;
    padding: 0 16px 40px;
}
.fcc-pied-public {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px;
    text-align: center;
    color: var(--couleur-texte-discret, #666);
    font-size: 0.85rem;
}
.fcc-pied-public__lien {
    color: var(--couleur-primaire-fonce);
    text-decoration: underline;
}

/* FC-002C2 §1 : le rendu des champs du parcours public vient désormais ENTIÈREMENT de la réutilisation
   de .fcc-adhesion-page (posée sur le conteneur public, cf. includes/entete_public.php) — mêmes
   règles que public/demande-adhesion.php (bordures/fond dorés des champs obligatoires, hauteur 52px/
   56px mobile, police 1.1rem, cf. plus haut dans ce fichier et dans mobile.css), jamais dupliquées
   ici. Les 4 règles .fcc-formulaire-public ci-dessous (bordure 6px en dur, hauteur 44px, pas de doré)
   ont été RETIRÉES : à spécificité égale, elles s'appliquaient APRÈS les règles .fcc-adhesion-page
   dans ce fichier et les écrasaient silencieusement — cause réelle du rendu non doré constaté.
   .fcc-formulaire-public ne porte donc plus aucun style de champ, uniquement les éléments propres au
   parcours public sans équivalent dans l'application (ci-dessous).
*/
.fcc-champ-piege {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.fcc-captcha-image {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
}
.fcc-captcha-question {
    font-weight: 600;
    margin-bottom: 12px;
}
.fcc-inscription-verif__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.fcc-inscription-verif__actions .fcc-bouton {
    min-height: 48px;
}
.fcc-inscription-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}
.fcc-inscription-recap {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.fcc-inscription-recap li {
    padding: 6px 0;
    border-bottom: 1px solid var(--couleur-bordure);
}
.fcc-inscription-choix__liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}
.fcc-inscription-confirmation {
    text-align: center;
}
.fcc-qr-bloc__image--centre {
    margin: 0 auto 16px;
}
.fcc-qr-bloc__actions--centre {
    justify-content: center;
}

/* ---------- Lien d'inscription publique (FC-002C §3, écran Paramètres) ---------- */
.fcc-parametres-lien-public {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--couleur-bordure);
}
.fcc-parametres-lien-public__ligne {
    display: flex;
    gap: 8px;
    margin: 6px 0 12px;
}
.fcc-parametres-lien-public__ligne input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
}

/* ---------- FC-004 §3 : « Imprimer la fiche » — feuille simplifiée (sans menu ni boutons), fiche de
   consultation uniquement (public/validation-adhesion-dossier.php). Best-effort compte tenu du délai
   de cette tâche : masque le gabarit commun et les actions, garde le contenu de la fiche tel quel
   (les blocs <details> de la fiche sont déjà "open" en permanence, cf. page). ---------- */
.fcc-gestion-adherents__actions {
    display: flex;
    gap: 10px;
    margin: 12px 0;
    flex-wrap: wrap;
}
@media print {
    .fcc-entete, .fcc-corps > .fcc-barre-laterale, .fcc-menu, .fcc-nav-mobile, .fcc-pied,
    .fcc-banniere-environnement, .fcc-validation-page > p:first-child,
    .fcc-validation-page form, .fcc-validation-page .fcc-bouton,
    .fcc-gestion-adherents__actions {
        display: none !important;
    }
    .fcc-qr-bloc__actions {
        display: none !important;
    }
}