/* public/assets/css/mobile.css — FC-002M : parcours mobile (connexion, accueil, demande d'adhésion).
 *
 * Chargé UNIQUEMENT sous 768px : chaque page l'inclut via
 *   <link rel="stylesheet" href="…/mobile.css" media="(max-width: 767px)">
 * (cf. includes/header.php et public/login.php). Un <link> dont le media ne correspond pas n'est tout
 * simplement jamais appliqué par le navigateur, exactement comme si tout ce fichier était enveloppé
 * dans `@media (max-width: 767px) { … }` — c'est donc l'UNIQUE garde nécessaire (§0 de la tâche) :
 * aucune règle ci-dessous n'a besoin d'être re-enveloppée dans un @media pour rester sans effet sur
 * PC/tablette (≥768px). Rien dans public/assets/css/base.css n'est modifié ni supprimé ; les anciennes
 * règles ≤599px/≤480px/≤399px de base.css restent actives et sont simplement surchargées ici quand
 * nécessaire (ce fichier est chargé après base.css dans le <head>, cascade standard).
 *
 * Variables de thème uniquement (A/B/C) — aucune couleur en dur, sauf les ombres neutres (rgba) déjà
 * utilisées de la même façon dans base.css.
 */

/* =================================================================================================
   §1. Gabarit commun mobile
   ================================================================================================= */

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, .08);
}
body.fcc-page {
    /* Corps de texte ≥16px (évite le zoom automatique d'iOS dans les champs) ; marges de sécurité des
       téléphones à encoche. */
    font-size: 16px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
.fcc-page :focus-visible {
    outline: 3px solid var(--couleur-accent);
    outline-offset: 2px;
}

/* ---------- En-tête compact (hauteur visée ≤64px — FC-002B1E §B, remplace FC-002M3 §1) ---------- */
.fcc-entete {
    padding: 8px 10px;
    column-gap: 8px;
}
.fcc-entete__logo-pastille {
    width: 40px;
    height: 40px;
    padding: 4px;
}
/* FC-002B1E §B3.1 — CAUSE IDENTIFIÉE du bug signalé par le client (« FédéCC-Connect » apparaît deux
   fois, rôle aligné sous le logo) : FC-002M3 dissolvait .fcc-entete__identite via `display: contents`
   puis réordonnait ses enfants avec `order` pour faire passer SEULEMENT le rôle (.fcc-entete__texte-
   identite, flex-basis:100%) sur une 2e ligne pleine largeur — cette 2e ligne démarre nécessairement au
   bord GAUCHE du conteneur flex (.fcc-entete), donc sous le LOGO (1er item de la ligne 1), jamais sous
   "FédéCC-Connect" (2e item) : c'est la cause du mauvais alignement. `display: contents` combiné à
   `order` sur ses enfants dissous est par ailleurs un déclencheur CONNU de bugs de rendu/duplication
   visuelle sur certaines versions de WebKit/Safari mobile (comportement non garanti par la spec CSS
   dans ce cas précis) — cause probable du second "FédéCC-Connect" signalé, qu'aucune relecture de code
   seule ne peut confirmer à 100 % sans un appareil réel (cf. LIVRAISON_FC-002B1E.md, "points non
   vérifiés"). Les deux problèmes sont résolus par la même refonte : `display: contents` et tout
   `order` sont supprimés ci-dessous, remplacés par .fcc-entete__identite-mobile (nouveau bloc, balisage
   dans includes/header.php, cf. commentaire FC-002B1E §B qui y renvoie) placé dans le flux NORMAL juste
   après le logo — aucune réorganisation CSS nécessaire. Le titre "PC" ci-dessus doit donc être masqué
   sur mobile (remplacé visuellement par .fcc-entete__titre-mobile du nouveau bloc) : conservé dans le
   HTML pour ne rien changer sur PC (§B3.2 de la tâche), seulement cette règle le rend invisible ici. */
.fcc-entete__titre {
    display: none;
}
/* Nouveau bloc (§B2) : logo à gauche, puis cette colonne de 2 lignes alignées à gauche ("FédéCC-
   Connect" / rôle), avatar et déconnexion ensuite — tout sur UNE seule ligne de flux (plus de ligne 2
   forcée). */
.fcc-entete__identite-mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    min-width: 0;
}
.fcc-entete__titre-mobile {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.15;
}
/* Rôle en entier, retour à la ligne autorisé (FC-002M2 §1, conservé), jamais de coupure/ellipse —
   rôles longs testés par la tâche : "Représentant d'Organisation / Syndicat", "Représentant de
   Coopérative", "Agent de Validation". */
.fcc-entete__role-mobile {
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.85;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: none;
}
/* L'ancien bloc "texte-identité" (nom + rôle, FC-002A/FC-001H) fait double emploi sur mobile avec
   .fcc-entete__identite-mobile ci-dessus : masqué ici. .fcc-entete__identite (qui le contient, avec
   avatar/déconnexion) N'EST PLUS dissous par display:contents — il reste un simple flex row (base.css,
   inchangé) ; avatar et déconnexion, seuls enfants encore visibles, gardent donc leur ordre naturel
   SANS qu'aucun `order` ne soit nécessaire (le texte-identité masqué est retiré du flux, pas seulement
   invisible). */
.fcc-entete__texte-identite {
    display: none;
}
.fcc-entete__avatar {
    width: 36px;
    height: 36px;
    font-size: .9rem;
}
/* Bouton de déconnexion en icône (balisage inchangé, cf. includes/header.php) : cible ≥48px, reste
   collé au bord droit de la ligne (le spacer, flex:1, absorbe tout l'espace avant lui — inchangé). */
.fcc-entete__deconnexion-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    color: var(--couleur-fond);
    flex-shrink: 0;
    text-decoration: none;
}
.fcc-entete__deconnexion-mobile-icone {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fcc-entete__deconnexion-mobile:hover,
.fcc-entete__deconnexion-mobile:focus,
.fcc-entete__deconnexion-mobile:active,
.fcc-entete__deconnexion-mobile:focus-visible {
    /* Fixé explicitement (règle générique a:hover/a:focus du projet) : jamais de dépendance au survol
       seul, pas d'effet autre qu'un léger fond translucide neutre au clic/focus. */
    color: var(--couleur-fond);
    background: rgba(255, 255, 255, .18);
}

/* ---------- Menu horizontal + barre latérale PC masqués ---------- */
.fcc-menu {
    display: none;
}
.fcc-corps {
    flex-direction: column;
    min-height: 0;
}
.fcc-corps__principal {
    width: 100%;
}
/* Pages non admin : la barre latérale (qui ne contient alors que Déconnexion, désormais dans
   l'en-tête ci-dessus) disparaît entièrement. */
.fcc-barre-laterale:not(.fcc-barre-laterale--admin) {
    display: none;
}

/* ---------- Pages d'administration : bande horizontale défilante sous l'en-tête ---------- */
.fcc-barre-laterale--admin {
    width: 100%;
    position: static;
}
.fcc-barre-laterale--admin .fcc-barre-laterale__liste {
    position: static;
    top: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 8px 10px;
    gap: 8px;
}
.fcc-barre-laterale--admin .fcc-barre-laterale__liste::-webkit-scrollbar {
    display: none;
}
.fcc-barre-laterale__titre-admin {
    display: none;
}
.fcc-barre-laterale--admin .fcc-barre-laterale__sous-lien,
.fcc-barre-laterale--admin .fcc-barre-laterale__lien--deconnexion {
    flex-shrink: 0;
    flex-direction: row;
    white-space: nowrap;
    min-height: 48px;
}
/* Le libellé (masqué ≤599px par base.css, icône seule) redevient visible : la bande défile
   horizontalement, plus besoin de ne garder que l'icône pour économiser la place. */
.fcc-barre-laterale--admin .fcc-barre-laterale__libelle {
    display: inline;
}
.fcc-barre-laterale--admin .fcc-barre-laterale__item-deconnexion {
    margin-top: 0;
}

/* ---------- Barre de navigation principale (bas d'écran) ---------- */
.fcc-nav-mobile {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--couleur-carte);
    border-top: 1px solid var(--couleur-bordure);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fcc-nav-mobile__liste {
    display: flex;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fcc-nav-mobile__item {
    flex: 1;
    min-width: 0;
    display: flex;
}
.fcc-nav-mobile__lien {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 2px;
    text-decoration: none;
    background: var(--couleur-accent-clair);
    color: var(--couleur-texte);
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
}
.fcc-nav-mobile__lien span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fcc-nav-mobile__icone {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Couleur de texte/icône fixée explicitement au repos ET au survol/focus/clic (règle générique
   a:hover, a:focus du projet) — jamais de dépendance au survol seul (inexistant au doigt). */
.fcc-nav-mobile__lien,
.fcc-nav-mobile__lien:hover,
.fcc-nav-mobile__lien:focus,
.fcc-nav-mobile__lien:active {
    color: var(--couleur-texte);
}
.fcc-nav-mobile__lien--actif,
.fcc-nav-mobile__lien--actif:hover,
.fcc-nav-mobile__lien--actif:focus,
.fcc-nav-mobile__lien--actif:active {
    background: var(--couleur-primaire);
    color: var(--couleur-fond);
}
.fcc-nav-mobile__lien:focus-visible {
    outline: 3px solid var(--couleur-accent);
    outline-offset: -3px;
}

/* Le contenu et le pied de page ne doivent jamais être masqués par la barre fixe du bas. */
.fcc-contenu {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
.fcc-pied {
    padding-bottom: calc(20px + 76px + env(safe-area-inset-bottom, 0px));
}

/* =================================================================================================
   §2. Connexion (public/login.php)
   ================================================================================================= */

.fcc-login-centre {
    padding: 16px;
    min-height: 100dvh;
    min-height: 100vh;
    align-items: center;
}
.fcc-login-carte {
    max-width: none;
    padding: 28px 20px;
}
.fcc-login-pastille {
    width: 128px;
    height: 128px;
}
.fcc-login-carte input {
    min-height: 56px;
    font-size: 1.1rem;
}
.fcc-login-carte label {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
}
/* Bouton afficher/masquer le mot de passe (nouveau balisage, cf. public/login.php) : œil, cible
   ≥48px, visible seulement sur mobile — mobile.js bascule l'attribut type de #mot_de_passe. */
.fcc-login-champ-mdp {
    position: relative;
}
.fcc-login-mdp-bouton {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--couleur-texte-discret);
}
.fcc-login-mdp-bouton svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fcc-login-mdp-icone--ferme {
    display: none;
}
.fcc-login-mdp-bouton--visible .fcc-login-mdp-icone--ouvert {
    display: none;
}
.fcc-login-mdp-bouton--visible .fcc-login-mdp-icone--ferme {
    display: block;
}
.fcc-login-champ-mdp input {
    padding-right: 52px;
}
/* Bouton « Se connecter » : orange au repos (hérité de .fcc-bouton--action, inchangé), vert plein
   SEULEMENT à l'état tactile/pression (:active) et au focus clavier — jamais de :hover seul, qui
   n'existe pas au doigt. Spécificité (1 classe du composant + pseudo-classe) déjà supérieure à
   a:hover/a:focus (élément + pseudo-classe) et à .fcc-bouton--action:focus (même schéma que
   .fcc-login-carte .fcc-bouton:focus déjà en base.css, repris ici à l'identique pour le mobile). */
.fcc-login-carte .fcc-bouton {
    min-height: 56px;
    font-size: 1.3rem;
}
.fcc-login-carte .fcc-bouton:active,
.fcc-login-carte .fcc-bouton:focus-visible {
    background: var(--couleur-primaire);
    color: var(--couleur-fond);
}
.fcc-login-carte .fcc-bouton:disabled {
    opacity: .75;
}
#messageErreur {
    font-size: 1rem;
}

/* =================================================================================================
   §3. Accueil (public/index.php)
   ================================================================================================= */

/* Bouton d'action principal « Nouvelle demande d'adhésion » (nouveau balisage, mobile seul).
   FC-002M3 §2 : CAUSE du libellé mal centré verticalement — `.fcc-bouton` (base.css) est
   `display: inline-flex; align-items: center; justify-content: center;` (centrage déjà posé par
   flexbox) ; mais cette règle écrasait `display` à `block`, qui n'est PAS un contexte flex : une fois
   `display` repassé à `block`, `align-items`/`justify-content` de `.fcc-bouton` n'ont plus AUCUN
   effet (ce sont des propriétés de conteneur flex/grid, ignorées hors de ce contexte) — le texte
   retombe alors au comportement d'un simple bloc, aligné en haut de la boîte par défaut. Corrigé en
   repassant à `display: flex` (équivalent "pleine largeur" de inline-flex) et en réaffirmant
   explicitement le centrage. */
.fcc-accueil-cta-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    font-size: 1.1rem;
    margin-bottom: 20px;
}
.fcc-grille-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}
@media (max-width: 340px) {
    .fcc-grille-kpi {
        grid-template-columns: 1fr;
    }
}
.fcc-kpi {
    min-height: 150px;
    padding: 16px 8px;
}
.fcc-kpi__icone {
    width: 48px;
    height: 48px;
}
.fcc-kpi__icone svg {
    width: 24px;
    height: 24px;
}
.fcc-kpi__valeur {
    font-size: 1.6rem;
}
.fcc-kpi__libelle {
    font-size: .9rem;
    /* Jamais de mot coupé en milieu (§3) : overflow-wrap seul (déjà en base.css) peut couper
       n'importe où faute d'alternative — on l'interdit ici, un mot trop long passe simplement sur la
       ligne suivante en entier. */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
/* Adhérents par région : liste à 1 colonne (base.css passe à 2 colonnes dès 600px, dans la plage
   mobile 600-767px désormais couverte par ce fichier) — jamais de tableau large ni de défilement
   horizontal. */
.fcc-liste-regions {
    columns: 1;
}
.fcc-liste-regions__nom {
    font-size: 1rem;
}
/* FC-003A2 §4 bis : zone tactile ≥48px pour les lignes de région et la carte Objectif devenues des
   liens — rendu visuel inchangé sinon (ces règles n'ajoutent qu'une hauteur minimale, aucune couleur
   ni mise en page nouvelle). */
.fcc-liste-regions__ligne {
    min-height: 48px;
    align-items: center;
}
.fcc-carte-objectif[href] {
    display: block;
    min-height: 48px;
}

/* =================================================================================================
   §4. Demande d'adhésion — parcours en 5 étapes (public/demande-adhesion.php)
   ================================================================================================= */

.fcc-adhesion-page .fcc-titre-page {
    font-size: 1.5rem;
}
/* Espace ≥28px sous la barre orange du titre, déjà garanti par la règle de base.css
   (.fcc-adhesion-page .fcc-titre-page { margin-bottom: 28px }, FC-002A3 §2.5) — non répété ici,
   juste confirmé applicable (aucune règle mobile ne la réduit). */

/* Indicateur d'étapes PC caché sur mobile, remplacé par le bandeau compact (nouveau balisage,
   <details>/<summary>, cf. public/demande-adhesion.php) — natif, sans JavaScript. */
.fcc-adhesion-etapes,
.fcc-adhesion-etapes-separateur {
    display: none;
}
.fcc-adhesion-etapes-mobile {
    display: block;
    margin-bottom: 20px;
}
.fcc-adhesion-etapes-mobile__resume {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--couleur-primaire-fonce);
    cursor: pointer;
    min-height: 48px;
    display: flex;
    align-items: center;
    list-style: none;
}
.fcc-adhesion-etapes-mobile__resume::-webkit-details-marker {
    display: none;
}
.fcc-adhesion-etapes-mobile__barre {
    height: 10px;
    background: var(--couleur-accent-clair);
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0 4px;
}
.fcc-adhesion-etapes-mobile__barre-remplissage {
    height: 100%;
    background: var(--couleur-primaire);
    border-radius: inherit;
}
.fcc-adhesion-etapes-mobile__liste {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    border-top: 1px solid var(--couleur-bordure);
}
.fcc-adhesion-etapes-mobile__liste li {
    border-bottom: 1px solid var(--couleur-bordure);
}
.fcc-adhesion-etapes-mobile__liste a,
.fcc-adhesion-etapes-mobile__liste span {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 6px 4px;
    text-decoration: none;
    color: var(--couleur-texte);
    font-weight: 600;
}
.fcc-adhesion-etapes-mobile__liste a:hover,
.fcc-adhesion-etapes-mobile__liste a:focus {
    color: var(--couleur-texte);
    background: var(--couleur-fond);
}
.fcc-adhesion-etapes-mobile__liste [aria-current="step"] {
    color: var(--couleur-primaire-fonce);
    font-weight: 700;
}

/* Une seule colonne, un champ par ligne. */
.fcc-adhesion-grille {
    grid-template-columns: 1fr;
}
.fcc-adhesion-page .fcc-champ label {
    font-size: 1.1rem;
}
.fcc-adhesion-page .fcc-champ input,
.fcc-adhesion-page .fcc-champ select,
.fcc-adhesion-page .fcc-champ textarea,
.fcc-adhesion-page .fcc-bouton {
    min-height: 56px;
    font-size: 1.1rem;
}

/* FC-002M2 §3 : date de naissance — calendrier natif ET saisie manuelle JJ/MM/AAAA. Balisage construit
   par public/assets/js/mobile.js à partir du champ <input type="date"> d'origine (jamais modifié ici
   par PHP) : le champ texte visible hérite déjà, par simple cascade (descendant de .fcc-champ-requis,
   règle de base.css), du fond/bordure doré et de la hauteur 56px fixée juste au-dessus — rien à
   redéfinir pour ça. Seules la disposition du bouton calendrier et le masquage du champ d'origine sont
   propres à ce bloc. */
.fcc-mobile-date-naissance {
    display: flex;
    align-items: stretch;
    gap: 8px;
    position: relative;
}
.fcc-mobile-date-naissance__texte {
    flex: 1 1 auto;
    min-width: 0;
}
.fcc-mobile-date-naissance__bouton {
    flex-shrink: 0;
    width: 48px;
    min-width: 48px;
    border: 1px solid var(--couleur-champ-requis-bordure);
    border-radius: var(--rayon-bouton);
    background: var(--couleur-champ-requis-fond);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--couleur-primaire-fonce);
}
.fcc-mobile-date-naissance__bouton:hover,
.fcc-mobile-date-naissance__bouton:focus,
.fcc-mobile-date-naissance__bouton:focus-visible,
.fcc-mobile-date-naissance__bouton:active {
    /* Couleurs fixées explicitement (règle générique a:hover/a:focus du projet ; ce bouton n'est pas
       un <a>, mais le même principe de prudence s'applique). */
    color: var(--couleur-primaire-fonce);
    border-color: var(--couleur-primaire);
    background: var(--couleur-champ-requis-fond);
}
.fcc-mobile-date-naissance__icone {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Jamais display:none (showPicker()/click() doivent rester fonctionnels sur iOS et Android) : juste
   retiré du rendu visuel et du flux normal. */
.fcc-mobile-date-naissance__origine {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* Webcam PC (dialogue getUserMedia) et lien de secours masqués : sur mobile, deux boutons dédiés
   (nouveau balisage, cf. includes/adhesion_champ_photo.php) ouvrent directement l'appareil photo ou
   la galerie — mêmes contrôles de format/taille/aperçu/envoi (adhesion.js, inchangé). */
.fcc-adhesion-photo-boutons [data-ouvrir-webcam],
.fcc-adhesion-lien-secours {
    display: none;
}
.fcc-adhesion-photo-mobile-boutons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.fcc-adhesion-photo-mobile-boutons .fcc-bouton {
    /* FC-002M3 §2 : centrage réaffirmé explicitement par précaution (même principe que la cause
       identifiée ci-dessus pour .fcc-accueil-cta-mobile) — ces boutons n'étaient PAS concernés par le
       bug (display resté inline-flex ici), mais la tâche demande la même garantie sur tous les
       boutons du parcours mobile. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 56px;
}

/* FC-002M3 §4 : la barre d'actions COLLANTE de FC-002M est ABANDONNÉE sur mobile — demandé
   explicitement par la tâche (deux boutons empilés y occuperaient trop de hauteur en position
   sticky). Retour au flux normal, en fin de formulaire : plus de `position: sticky`, plus de marges
   négatives "pleine largeur" (`margin: 16px -16px -20px`), plus d'ombre/fond détachant la barre du
   reste de la page. Boutons empilés un par ligne, plus petits qu'ailleurs dans le module (48px/1rem,
   contre 56px/1.1rem pour les champs — spécificité de ce sélecteur, 3 classes, suffisante pour
   l'emporter sur la règle générique `.fcc-adhesion-page .fcc-bouton { min-height:56px; … }` plus haut
   dans ce fichier). `padding-bottom` dimensionné explicitement pour ne jamais passer sous la barre de
   navigation du bas (56px, cf. `.fcc-nav-mobile__lien { min-height:56px }` plus haut) + sa zone de
   sécurité + 16px — redondant mais sans conflit avec le `padding-bottom` déjà posé sur `.fcc-contenu`
   (§1, inchangé), qui protège déjà toute la page de la même façon. */
.fcc-adhesion-page .fcc-adhesion-pied {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0 0 calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
    background: none;
    box-shadow: none;
    z-index: auto;
}
/* « Renvoyer le dossier complété » (étape 5, dossier en complément) est enveloppé dans un <form>,
   direct enfant de .fcc-adhesion-pied au même titre que les <a> des autres boutons — même précaution
   qu'en §3 pour le bouton « Supprimer » des cartes. */
.fcc-adhesion-page .fcc-adhesion-pied form {
    width: 100%;
}
.fcc-adhesion-page .fcc-adhesion-pied .fcc-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 700;
    padding: 0 16px;
    white-space: normal;
    text-align: center;
}
/* Ordre VISUEL seulement (propriété CSS `order`, sans effet sur l'ordre DOM ni sur la navigation au
   clavier/lecteur d'écran) : dans les 5 gabarits de ce module, « Précédent » est TOUJOURS le premier
   bouton du code source (vérifié dans public/demande-adhesion.php, étapes 1 à 5, tous statuts) — le
   remonter visuellement en dernier suffit donc, dans tous les cas (1, 2 ou 3 boutons), à obtenir
   l'ordre demandé : l'action principale (verte) en haut, « Précédent » (orange) tout en bas. Remplace
   entièrement les anciens calculs de pourcentage (38/58, 47/47/100) et le forçage d'ordre ad hoc de
   FC-002M, inutiles dès que chaque bouton occupe toute la largeur sur sa propre ligne. */
.fcc-adhesion-page .fcc-adhesion-pied > :first-child {
    order: 99;
}

/* Écran de confirmation : texte agrandi + boutons dédiés (nouveau balisage, mobile seul). */
.fcc-adhesion-confirmation__texte {
    font-size: 1.4rem;
}
.fcc-adhesion-confirmation__numero {
    font-size: 1.9rem;
}
.fcc-adhesion-confirmation-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}
.fcc-adhesion-confirmation-actions .fcc-bouton {
    /* FC-002A5 §2.2 : les deux boutons sont désormais de simples <a> (plus de <form> "creer_dossier",
       qui écrivait en base dès le clic) — règle inchangée, seul le sélecteur "form" devenu mort est
       retiré. FC-002M3 §2 : centrage réaffirmé par précaution (display resté inline-flex ici, non
       concerné par le bug de .fcc-accueil-cta-mobile ci-dessus, cf. cause nommée dans la livraison). */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

/* Listes "Mes demandes en cours de saisie" / "Mes demandes soumises" : cartes empilées plutôt que des
   tableaux larges.
   FC-002M2 §2 : CAUSE IDENTIFIÉE de l'onglet Demande vide sur mobile — le sélecteur groupé
   ci-dessous valait `.fcc-adhesion-page .fcc-admin-tableau, .fcc-adhesion-page .fcc-admin-tableau
   thead { display: none; }`. La virgule applique `display:none` aux DEUX sélecteurs séparément :
   non seulement au `thead` (l'intention), mais aussi à la `<table>` elle-même (1er sélecteur de la
   liste) — masquant donc tout son contenu, `tbody`/`tr`/`td` inclus, quel que soit leur propre
   `display` plus bas (`tbody{display:block}` etc. ne pouvaient plus avoir aucun effet visible, leur
   ancêtre étant déjà display:none). Les deux listes utilisant la même classe `.fcc-admin-tableau`,
   ce seul sélecteur fautif suffisait à vider les deux sections à la fois — cause unique, confirmée
   après relecture du HTML produit par public/demande-adhesion.php (aucune classe fcc-mobile-seul
   mal posée sur le conteneur de liste) et du lien "Demande" de includes/barre_navigation_mobile.php
   (pointe déjà sur la liste, sans ?etape). Corrigé en ne ciblant plus que le thead. */
.fcc-adhesion-page .fcc-admin-tableau thead {
    display: none;
}
/* FC-002M3 §3 : CAUSE RÉELLE du défilement horizontal des cartes — base.css (ligne ~1383) fixe
   `.fcc-admin-tableau { width: 100%; min-width: 640px; }` (pensé pour le tableau PC, scrollable dans
   son propre conteneur via .fcc-admin-tableau-conteneur { overflow-x: auto } sur petit écran PC/
   tablette, cf. commentaire de base.css "jamais la page entière"). Le correctif FC-002M2 ci-dessus
   (display:block, width:100%) ne reprenait PAS `min-width`, qui continuait donc à s'appliquer : la
   `<table>` restait forcée à 640px minimum même transformée en cartes. Comme FC-002M2 a aussi changé
   `.fcc-admin-tableau-conteneur` en `overflow-x: visible` (cf. plus bas) — nécessaire pour que les
   cartes empilées ne soient plus coupées par un défilement interne — cette largeur minimale de 640px
   n'était plus contenue DANS son propre conteneur : elle débordait directement de la page entière à
   320-390px (640px > largeur d'écran), entraînant tout son contenu — dont les boutons `width:100%`
   des cartes, désormais larges de 100% de 640px et non de l'écran réel — au-delà du bord droit.
   Corrigé en annulant `min-width` ici. */
.fcc-adhesion-page .fcc-admin-tableau {
    display: block;
    width: 100%;
    min-width: 0;
}
.fcc-adhesion-page .fcc-admin-tableau-conteneur {
    overflow-x: visible;
    max-width: 100%;
}
.fcc-adhesion-page .fcc-admin-tableau tbody {
    display: block;
}
.fcc-adhesion-page .fcc-admin-tableau tr {
    display: block;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    padding: 14px;
    margin-bottom: 14px;
}
.fcc-adhesion-page .fcc-admin-tableau td {
    display: block;
    border: none;
    padding: 4px 0;
    font-size: 1rem;
}
/* FC-002B1B §1 : base.css fixe `td:last-child { width:1%; white-space:nowrap; }` pour que la colonne
   Actions ne force jamais le tableau PC à s'élargir (astuce "width:1%" valide uniquement en layout
   table). Sur mobile, ce même `<td>` devient un bloc empilé (display:block ci-dessus) — `width:1%`
   l'écraserait alors à une largeur quasi nulle au lieu de la pleine largeur de la carte : annulé ici. */
.fcc-adhesion-page .fcc-admin-tableau td:last-child {
    width: auto;
    white-space: normal;
}
.fcc-adhesion-page .fcc-admin-tableau td:empty {
    display: none;
}
/* FC-002M2 §2.3 : repère "N° <id>" de la liste "en cours de saisie" (cf. nouvelle cellule .fcc-mobile-
   seul de public/demande-adhesion.php) — un brouillon n'a pas encore de numero_dossier, ce repère
   mobile en tient lieu (même convention que le message "en cours de saisie (n° …)" déjà utilisé côté
   serveur pour les doublons de téléphone). Spécificité (3 sélecteurs + 1 classe) largement supérieure
   à .fcc-mobile-seul (1 classe) de base.css : s'affiche donc bien sur mobile malgré cette classe. */
.fcc-adhesion-page .fcc-admin-tableau td.fcc-adhesion-liste-numero-mobile {
    display: block;
    font-weight: 700;
    color: var(--couleur-primaire-fonce);
}
/* FC-002B1B §1 : les deux boutons d'une paire (Consulter/Modifier, Reprendre/Supprimer) sont désormais
   CÔTE À CÔTE à 50% chacun sur mobile, au lieu d'être empilés pleine largeur (remplace la disposition
   column de FC-002M3/FC-001N4, explicitement demandée différente par cette tâche). flex:1 1 0 sur
   chaque enfant direct (le <a> « Reprendre »/« Consulter » ET le <form> qui enveloppe « Supprimer »,
   cf. public/demande-adhesion.php) partage la ligne à parts égales ; min-width:0 empêche tout
   débordement/défilement horizontal à 320-390px. Un bouton seul (ex. « Consulter » sans « Modifier »)
   reste naturellement sur 100% de la largeur : unique enfant flexible de la ligne, rien à ajouter. */
.fcc-adhesion-page .fcc-admin-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
}
.fcc-adhesion-page .fcc-admin-actions > .fcc-bouton,
.fcc-adhesion-page .fcc-admin-actions > form {
    flex: 1 1 0;
    min-width: 0;
}
.fcc-adhesion-page .fcc-admin-actions .fcc-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 700;
    white-space: normal;
}

/* FC-002B1 §6 : écran de choix du type — cartes PLEINE LARGEUR (1 colonne) sur tout l'intervalle
   mobile couvert par ce fichier (≤767px), là où base.css passerait déjà à 2 colonnes dès 480px pour
   les tablettes/PC étroits. Même logique que .fcc-liste-regions (§3) : cette règle surcharge
   uniquement la largeur de bande 480-767px, sans aucun effet ≥768px (fichier non chargé). */
.fcc-adhesion-choix-grille {
    grid-template-columns: 1fr;
}
.fcc-adhesion-choix-carte {
    min-height: 100px;
    font-size: 1.2rem;
}

/* FC-002B1 §3 Étape 2 : zones couvertes — "liste simple" explicitement demandée sur mobile (1
   colonne), là où base.css passerait à 2-3 colonnes dès 600px. Boutons Tout cocher/Tout décocher
   empilés pleine largeur, mêmes dimensions que les autres boutons du module (52px/1.1rem, déjà posé
   par .fcc-adhesion-page .fcc-bouton ci-dessus, réaffirmé ici pour le centrage). */
.fcc-adhesion-zones-liste {
    columns: 1;
}
.fcc-adhesion-zones-actions {
    flex-direction: column;
}
.fcc-adhesion-zones-actions .fcc-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

/* =================================================================================================
   FC-002B1C — Recherche et pagination de "Demandes soumises" (mobile ≤767px). §4 de la tâche.
   ================================================================================================= */

/* Champ de recherche pleine largeur, empilé au-dessus des boutons. §4 : "hauteur 52 px" — valeur
   DIFFÉRENTE à dessein des 56px déjà posés sur .fcc-adhesion-page .fcc-champ input/.fcc-bouton
   (règle générique plus haut dans ce fichier) : .fcc-adhesion-recherche__champ n'est PAS un .fcc-champ
   (évite d'hériter silencieusement de 56px), cette règle dédiée applique donc la valeur demandée au
   pixel près, sans toucher aux autres champs du module. */
.fcc-adhesion-page .fcc-adhesion-recherche {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.fcc-adhesion-page .fcc-adhesion-recherche__champ-bloc {
    flex: none;
    width: 100%;
}
.fcc-adhesion-page .fcc-adhesion-recherche__champ {
    min-height: 52px;
    font-size: 1.1rem;
}
/* Boutons Rechercher/Effacer côte à côte à 50% chacun (§4). Hauteur ≥48px déjà garantie par la règle
   générique .fcc-adhesion-page .fcc-bouton { min-height:56px } plus haut dans ce fichier — rien à
   répéter ici, seul le partage de la ligne à parts égales est propre à ce bloc. */
.fcc-adhesion-page .fcc-adhesion-recherche__actions {
    flex-wrap: nowrap;
    gap: 8px;
}
.fcc-adhesion-page .fcc-adhesion-recherche__actions > .fcc-bouton {
    flex: 1 1 0;
    min-width: 0;
}

/* Pagination compacte (§4) : pas de liste de numéros ; "Page X sur Y" centré AU-DESSUS de Précédent/
   Suivant, qui passent côte à côte à 50% chacun. order:-1 + flex-basis:100% force l'état sur sa propre
   ligne avant les deux boutons, sans changer leur ordre dans le DOM (navigation clavier/lecteur
   d'écran inchangée — seul l'ordre VISUEL change, même principe que .fcc-adhesion-pied > :first-child
   plus haut dans ce fichier). */
.fcc-adhesion-page .fcc-adhesion-pagination__barre {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.fcc-adhesion-page .fcc-adhesion-pagination__etat {
    order: -1;
    flex-basis: 100%;
    text-align: center;
}
.fcc-adhesion-page .fcc-adhesion-pagination__bouton {
    flex: 1 1 0;
    min-width: 0;
}
.fcc-adhesion-page .fcc-adhesion-pagination__numeros {
    display: none;
}

/* =================================================================================================
   FC-003A — Validation administrative des dossiers d'adhésion (mobile ≤767px uniquement — la version
   PC, scopée .fcc-validation-page dans base.css, n'est touchée par AUCUNE règle de ce fichier, cf.
   media du <link> sur mobile.css, inchangé depuis FC-002M).
   ================================================================================================= */

/* Pagination : même disposition compacte que .fcc-adhesion-page (FC-002B1E §A), dupliquée ici car
   .fcc-validation-page est un scope INDÉPENDANT (jamais .fcc-adhesion-page, cf. base.css). */
.fcc-validation-page .fcc-adhesion-pagination__barre {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.fcc-validation-page .fcc-adhesion-pagination__etat {
    order: -1;
    flex-basis: 100%;
    text-align: center;
}
.fcc-validation-page .fcc-adhesion-pagination__bouton {
    flex: 1 1 0;
    min-width: 0;
}
.fcc-validation-page .fcc-adhesion-pagination__numeros {
    display: none;
}

/* Champs/boutons ≥48px sur mobile — même convention que .fcc-adhesion-page plus haut dans ce fichier,
   dupliquée sous ce scope indépendant. */
.fcc-validation-page .fcc-champ input,
.fcc-validation-page .fcc-champ select,
.fcc-validation-page .fcc-champ textarea,
.fcc-validation-page .fcc-bouton {
    min-height: 48px;
    font-size: 1rem;
}
.fcc-validation-page .fcc-validation-panneau textarea {
    min-height: 100px;
}

/* Filtres repliables sous un bouton "Filtres" (§3 de la tâche) : sur PC (base.css), le <summary> est
   masqué et le formulaire toujours visible — ici, c'est l'inverse : le <summary> devient le bouton
   visible (≥48px) et le formulaire suit le comportement NATIF ouvert/fermé de <details> (fermé par
   défaut, aucun attribut "open" posé côté HTML). */
.fcc-validation-page .fcc-validation-filtres__bouton {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    font-weight: 700;
    color: var(--couleur-fond);
    background: var(--couleur-primaire);
    border-radius: var(--rayon-bouton);
    cursor: pointer;
    list-style: none;
}
.fcc-validation-page .fcc-validation-filtres__bouton::-webkit-details-marker {
    display: none;
}
.fcc-validation-page .fcc-validation-filtres:not([open]) > .fcc-validation-filtres__formulaire {
    display: none;
}
.fcc-validation-page .fcc-validation-filtres__formulaire {
    flex-direction: column;
    align-items: stretch;
    margin-top: 10px;
}
.fcc-validation-page .fcc-validation-filtres__formulaire .fcc-champ {
    flex: none;
    width: 100%;
}
.fcc-validation-page .fcc-validation-filtres__actions {
    flex-direction: column;
}
.fcc-validation-page .fcc-validation-filtres__actions .fcc-bouton {
    width: 100%;
}

/* FC-003A2 §1 : "sur mobile 2x2 en grille, hauteur ≥56px, aucun défilement horizontal" — remplace la
   disposition empilée (1 colonne) livrée avec FC-003A, cette tâche demandant explicitement 2x2. */
.fcc-validation-compteurs {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
/* FC-003A3 §1 : plus de min-height propre au mobile (56px, devenu insuffisant avec le libellé à
   1.05rem sur 2 lignes + le nombre + le padding) — hérite simplement du plancher commun de base.css
   (100px), supérieur au minimum de 56px déjà demandé par FC-003A2 et jamais retiré. */

/* Tableau -> cartes empilées (§3), même transformation que .fcc-adhesion-page plus haut dans ce
   fichier (FC-002M2/M3), dupliquée sous ce scope indépendant — aucune des deux pages ne partage la
   moindre règle, zéro risque de régression croisée. */
.fcc-validation-page .fcc-admin-tableau thead {
    display: none;
}
.fcc-validation-page .fcc-admin-tableau {
    display: block;
    width: 100%;
    min-width: 0;
}
.fcc-validation-page .fcc-admin-tableau-conteneur {
    overflow-x: visible;
    max-width: 100%;
}
.fcc-validation-page .fcc-admin-tableau tbody {
    display: block;
}
.fcc-validation-page .fcc-admin-tableau tr {
    display: block;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    padding: 14px;
    margin-bottom: 14px;
}
.fcc-validation-page .fcc-admin-tableau td {
    display: block;
    border: none;
    padding: 4px 0;
    font-size: 1rem;
}
.fcc-validation-page .fcc-admin-tableau td:empty {
    display: none;
}
.fcc-validation-page .fcc-admin-tableau .fcc-bouton {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

/* Panneau de décision : boutons pleine largeur empilés (vert, orange foncé, rouge — §4 : "≥48px"
   déjà garanti par la règle générique .fcc-bouton ci-dessus). */
.fcc-validation-page .fcc-validation-panneau__actions {
    flex-direction: column;
}
.fcc-validation-page .fcc-validation-panneau__actions .fcc-bouton {
    width: 100%;
}
/* FC-003A4 §1.3 : même largeur pleine page pour la pastille "Statut actuel : …" du panneau "Corriger
   la décision" (cf. base.css), empilée comme les boutons voisins, ≥48px déjà garanti par la règle
   commune (base.css, .fcc-validation-panneau__actions .fcc-statut). */
.fcc-validation-page .fcc-validation-panneau__actions .fcc-statut {
    width: 100%;
}

/* FC-003A2 §4 : fenêtre modale — "occupe toute la largeur (feuille du bas ou plein écran)... boutons
   empilés pleine largeur ≥48px (Confirmer en haut, Annuler dessous)... clavier virtuel sans masquer
   les boutons". Feuille du bas : ancrée en bas du viewport plutôt que centrée (plus naturel au pouce
   sur téléphone, et plus simple à garder au-dessus du clavier virtuel qu'une fenêtre centrée). Hauteur
   bornée à 85vh + défilement INTERNE (la zone de texte peut être longue) ; les boutons restent dans le
   même bloc que le contenu défilant, jamais recouverts par le clavier puisqu'ils font partie du même
   panneau fixe ancré en bas (le clavier redimensionne la vue visuelle, le panneau suit). */
.fcc-validation-modale {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    margin: 0;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    border-radius: var(--rayon-carte) var(--rayon-carte) 0 0;
    overflow-y: auto;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
}
.fcc-validation-modale textarea {
    min-height: 120px;
}
.fcc-validation-modale__actions {
    flex-direction: column-reverse;
    gap: 10px;
}
.fcc-validation-modale__actions .fcc-bouton {
    width: 100%;
    min-height: 48px;
}
/* FC-003B §3 : ligne d'aide (destinataire masqué / absence de numéro) centrée, pleine largeur, sous
   les boutons empilés — text-align:right (base.css, pensé pour l'alignement à droite des boutons PC)
   n'a plus de sens une fois les boutons empilés pleine largeur. */
.fcc-validation-modale__aide-notification {
    text-align: center;
}
/* FC-003B3 §2 : même raisonnement pour la ligne de diagnostic ADMIN. */
.fcc-validation-modale__diagnostic-admin {
    text-align: center;
}

/* Photos : miniatures adaptées, une par ligne, jamais plus large que l'écran. */
.fcc-validation-page .fcc-validation-photos {
    flex-direction: column;
}
.fcc-validation-page .fcc-validation-photo-bloc {
    flex: none;
    width: 100%;
}
.fcc-validation-page .fcc-validation-photo-img {
    max-width: 100%;
}

/* Navigation précédent/suivant : empilée pleine largeur. */
.fcc-validation-page .fcc-validation-nav-dossier {
    flex-direction: column;
}
.fcc-validation-page .fcc-validation-nav-dossier .fcc-bouton {
    width: 100%;
    justify-content: center;
}

/* =================================================================================================
   Code QR de l'adhérent (FC-003C §5) — QR centré, légende centrée, boutons empilés pleine largeur
   ≥ 48 px de hauteur (zone de clic tactile). Règle commune aux 3 pages qui affichent ce bloc.
   ================================================================================================= */
.fcc-qr-bloc__contenu {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.fcc-qr-bloc__image {
    width: 160px;
    height: 160px;
}
.fcc-qr-bloc__infos {
    width: 100%;
    min-width: 0;
}
.fcc-qr-bloc__actions {
    flex-direction: column;
    width: 100%;
}
.fcc-qr-bloc__actions .fcc-bouton {
    width: 100%;
    min-height: 48px;
    justify-content: center;
}

/* =================================================================================================
   Parcours public (FC-002C §8) — priorité mobile : conteneur sans marge, en-tête compacte, boutons
   de navigation d'étape empilés pleine largeur.
   ================================================================================================= */
.fcc-conteneur-publique {
    margin: 12px auto;
    padding: 0 12px 32px;
}
.fcc-entete-public {
    padding: 12px 14px;
}
.fcc-entete-public__titre {
    font-size: 0.95rem;
}
.fcc-inscription-nav {
    flex-direction: column;
}
.fcc-inscription-nav .fcc-bouton {
    width: 100%;
    justify-content: center;
}
.fcc-inscription-verif__actions {
    flex-direction: column;
}
.fcc-inscription-verif__actions .fcc-bouton {
    width: 100%;
    justify-content: center;
}
.fcc-captcha-image {
    max-width: 100%;
    height: auto;
}