/* Maquettes PPA-CI — feuille commune.
 *
 * Préfigure la feuille du back-office. Les jetons sont ceux du skill
 * design-ppaci (.claude/skills/design-ppaci/assets/tokens.css) : toute
 * divergence ici est un bug, pas une variante.
 */

:root {
  --foret-50:#eef4fb; --foret-100:#d9e6f6; --foret-200:#b7cfeb;
  --foret-500:#3562a8; --foret-600:#274d8a; --foret-700:#1f3e70;
  --foret-800:#1a3459; --foret-900:#12294a;
  --azur-100:#d0ecfb; --azur-500:#1a9ede; --azur-600:#0e88c6; --azur-700:#0d6fa2;
  --mandarine-100:#ffe6cc; --mandarine-600:#e06f00; --mandarine-700:#b85900;
  --feuille-500:#009e60; --feuille-600:#00814f;
  --sable:#f7f2e9; --ivoire:#eef2f7; --papier:#fff;
  --encre-50:#f4f6f9; --encre-100:#e6eaf1; --encre-200:#d0d7e2;
  --encre-300:#adb8c9; --encre-400:#8390a4; --encre-500:#626f83;
  --encre-600:#4b5768; --encre-700:#3a4453; --encre-900:#171c25;
  --actif:#1e7a4c; --suspendu:#b3362a;
  --rayon:8px; --rayon-large:12px;
  --pas-1:4px; --pas-2:8px; --pas-3:12px; --pas-4:16px; --pas-5:24px; --pas-6:32px;
  --transition:140ms ease;
}
@media (prefers-reduced-motion: reduce){ :root{ --transition:0ms } }

*{ box-sizing:border-box }

/* « hidden » cache, quoi qu'en dise le reste de la feuille.
   L'attribut ne tient que par un « display: none » du navigateur, que la
   moindre règle d'auteur emporte : « .panneau-pied { display: flex } »
   laissait ainsi les trois pieds du panneau visibles à la fois. Posé ici une
   fois pour toutes, plutôt qu'à corriger à chaque nouvelle classe qui déclare
   un display. */
[hidden]{ display:none !important }
body{
  margin:0; display:flex; min-height:100vh; padding-top:52px;
  background:var(--papier); color:var(--encre-900);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ═════════════════════════ barre supérieure ══════════════════════════════

   Pleine largeur, au-dessus de la barre latérale : elle dit où l'on est
   (l'application) et qui l'on est (le compte), deux informations qui ne
   changent pas d'un écran à l'autre. Pas d'emblème ici — rond et chargé d'un
   texte en couronne, il deviendrait une tache à cette hauteur, et son bleu ne
   tient pas sur fond Forêt. Le nom écrit fait mieux. */

.barre-haut{ position:fixed; top:0; left:0; right:0; height:52px; z-index:20;
             background:var(--foret-900); color:#fff;
             display:flex; align-items:center; gap:var(--pas-4);
             padding:0 var(--pas-4) }
.marque{ font-weight:650; font-size:16px; letter-spacing:-.01em; white-space:nowrap }

.compte{ position:relative }
.compte-bouton{ display:flex; align-items:center; gap:var(--pas-2);
                height:34px; padding:0 var(--pas-2) 0 var(--pas-1);
                background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
                border-radius:999px; color:#fff; font:inherit; font-size:14px; cursor:pointer }
.compte-bouton:hover{ background:rgba(255,255,255,.18) }
.compte-bouton:focus-visible{ outline:2px solid var(--azur-500); outline-offset:2px }
.compte-pastille{ width:26px; height:26px; border-radius:50%; flex:none;
                  background:var(--azur-600); display:grid; place-items:center;
                  font-size:11px; font-weight:700; letter-spacing:.02em }
.compte-chevron{ width:14px; height:14px; stroke:currentColor; fill:none;
                 stroke-width:2; opacity:.8 }

.compte-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:230px;
              background:var(--papier); color:var(--encre-900);
              border:1px solid var(--encre-200); border-radius:var(--rayon);
              box-shadow:0 8px 28px rgba(18,41,74,.18); overflow:hidden; z-index:30 }
.compte-menu-tete{ padding:var(--pas-3) var(--pas-4);
                   border-bottom:1px solid var(--encre-100) }
.compte-nom{ font-weight:650 }
.compte-action{ display:flex; align-items:center; gap:var(--pas-3); width:100%;
                padding:var(--pas-3) var(--pas-4); background:none; border:0;
                font:inherit; text-align:left; cursor:pointer; color:var(--encre-700) }
.compte-action:hover{ background:var(--encre-50) }
.compte-action svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7 }
.compte-action--sortie{ color:var(--suspendu); border-top:1px solid var(--encre-100) }
.compte-action--sortie:hover{ background:#fbeae8 }
a.compte-action{ text-decoration:none }
/* Sur un téléphone, la pastille suffit : le nom prendrait la place du titre. */
@media (max-width:600px){ .compte-libelle{ display:none } }

/* ───────────────────── menu déroulant générique ─────────────────────────
   Même recette que .compte-menu, sous des noms qui ne supposent pas un
   compte : un bouton porte data-menu-bouton="id-du-panneau" (js/app.js
   l'ouvre et le ferme, comme le menu du compte). */
.menu-clic{ position:relative; display:inline-block }
.menu-clic-panneau{ position:absolute; top:calc(100% + 6px); right:0; min-width:210px;
                    background:var(--papier); color:var(--encre-900);
                    border:1px solid var(--encre-200); border-radius:var(--rayon);
                    box-shadow:0 8px 28px rgba(18,41,74,.18); overflow:hidden; z-index:30 }
.menu-clic-action{ display:flex; align-items:center; gap:var(--pas-3); width:100%;
                   padding:var(--pas-3) var(--pas-4); background:none; border:0;
                   font:inherit; font-size:14px; text-align:left; text-decoration:none;
                   cursor:pointer; color:var(--encre-700) }
.menu-clic-action:hover{ background:var(--encre-50) }
.menu-clic-action svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; flex:none }

/* ───────────────────────────── impression ────────────────────────────────
   « Imprimer » n'est que window.print() : la page se rend elle-même,
   graphiques Chart.js et couleurs comprises — reconstruire tout ça côté
   serveur (QuestPDF) redirait la même chose en pire. Ici, on ne fait que
   retirer le cadre de l'application et forcer l'impression des couleurs de
   fond, que les navigateurs otent par défaut pour économiser l'encre. */
@media print {
  .no-print{ display:none !important }
  .barre-haut, .nav, .voile, .voile-nav{ display:none !important }
  body{ padding-top:0 }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important }
  .graphe-toile canvas{ max-width:100% }
  table{ page-break-inside:auto }
  tr{ page-break-inside:avoid }
}

/* Le même cadrage, hors impression, pour « Exporter en PDF » (js/etats.js,
   exporterPdf) : html2canvas photographie le DOM tel qu'affiché à l'écran,
   pas tel que @media print le changerait — il faut donc lui appliquer la même
   coupe par une classe, le temps de la capture. */
body.pdf-export .no-print,
body.pdf-export .barre-haut,
body.pdf-export .nav,
body.pdf-export .voile,
body.pdf-export .voile-nav{ display:none !important }
body.pdf-export{ padding-top:0 !important }

/* ═══════════════════════════════ barre latérale ═══════════════════════════ */

/* Épinglée sous la barre du haut : un écran plus long que la fenêtre fait
   défiler .contenu, jamais le menu — .nav-corps garde son propre défilement,
   interne, pour les sous-menus déployés qui dépasseraient la hauteur. */
.nav{ width:232px; flex:none; align-self:flex-start; background:var(--encre-50);
      display:flex; flex-direction:column; transition:width var(--transition);
      position:sticky; top:52px; height:calc(100vh - 52px) }
.nav--repliee{ width:56px }

.nav-tete{ display:flex; align-items:center; gap:var(--pas-3);
           padding:var(--pas-3); min-height:52px }
.pastille{ width:28px; height:28px; flex:none; border-radius:6px;
           background:var(--foret-700); color:#fff; display:grid; place-items:center;
           font-size:12px; font-weight:700; letter-spacing:.02em }
.nav-projet{ font-weight:650; white-space:nowrap; overflow:hidden }
.nav--repliee .nav-projet,
.nav--repliee .nav-libelle,
.nav--repliee .nav-groupe{ display:none }

.nav-corps{ flex:1; overflow-y:auto; padding-bottom:var(--pas-2) }

.nav-lien{ display:flex; align-items:center; gap:var(--pas-3);
           height:38px; padding:0 var(--pas-3); color:var(--encre-700);
           text-decoration:none; border-left:3px solid transparent; white-space:nowrap }
.nav-lien:hover{ background:var(--encre-100) }
.nav-lien svg{ width:18px; height:18px; flex:none; stroke:currentColor; fill:none;
               stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

/* La rubrique ouverte garde sa marque pendant qu'on navigue dans ses enfants. */
.nav-lien--ouvert{ background:var(--encre-100); color:var(--encre-900); font-weight:650 }

/* L'entrée courante : fond ET filet d'accent. Le fond seul s'évanouit sur un
   écran délavé ou en plein jour. */
.nav-lien--actif{ background:var(--encre-100); color:var(--foret-800);
                  font-weight:650; border-left-color:var(--azur-600) }

.nav-groupe{ margin-left:calc(var(--pas-3) + 9px); border-left:1px solid var(--encre-200) }
/* Une sous-entrée longue passe à la ligne plutôt que d'être coupée. */
.nav-groupe .nav-lien{ height:auto; min-height:34px; padding-top:6px; padding-bottom:6px; padding-left:var(--pas-4);
                       white-space:normal; line-height:1.25; color:var(--encre-600) }
.nav-groupe .nav-lien svg{ width:15px; height:15px; opacity:.75 }
.nav-groupe .nav-lien--actif{ color:var(--foret-800) }

.nav-pied{ border-top:1px solid var(--encre-200); padding:var(--pas-2) 0 }
.nav-pied-rangee{ display:flex; align-items:center }
.nav-replier{ margin:0 var(--pas-2) 0 auto; padding:var(--pas-1) var(--pas-2);
              background:none; border:0; color:var(--encre-500); cursor:pointer;
              border-radius:6px; font-size:16px; line-height:1 }
.nav-replier:hover{ background:var(--encre-100); color:var(--encre-900) }
.nav--repliee .nav-replier{ margin:0 auto; transform:rotate(180deg) }

/* ═══════════════════════════════ contenu ═════════════════════════════════ */

.contenu{ flex:1; min-width:0; background:var(--ivoire); display:flex; flex-direction:column }
.entete{ background:var(--papier); border-bottom:1px solid var(--encre-100);
         padding:var(--pas-4) var(--pas-5); display:flex; align-items:baseline;
         gap:var(--pas-4); flex-wrap:wrap }
h1{ margin:0; font-size:22px; font-weight:650; letter-spacing:-.01em }
h2{ margin:0; font-size:19px; font-weight:650; letter-spacing:-.01em }
.fil{ color:var(--encre-500); font-size:13px }
.fil a{ color:var(--azur-700); text-decoration:none }
.fil a:hover{ text-decoration:underline }
.zone{ padding:var(--pas-5); flex:1 }
.pousse{ margin-left:auto }

/* Tuiles de compteurs : le chiffre porte l'information, pas le cadre. */
.tuiles{ display:flex; gap:var(--pas-3); flex-wrap:wrap; margin-bottom:var(--pas-5) }
.tuile{ background:var(--papier); border:1px solid var(--encre-100);
        border-radius:var(--rayon); padding:var(--pas-3) var(--pas-4); min-width:160px }
.tuile-libelle{ color:var(--encre-500); font-size:12px }
.tuile-valeur{ font-size:26px; font-weight:650; letter-spacing:-.02em;
               font-variant-numeric:tabular-nums; margin-top:2px }
.tuile-delta{ font-size:12px; color:var(--actif) }
.tuile-delta--neutre{ color:var(--encre-500) }
.tuile-delta--attente{ color:var(--mandarine-700) }

/* ─────────────────────────────── contrôles ───────────────────────────── */

.barre-outils{ display:flex; gap:var(--pas-2); margin-bottom:var(--pas-3);
               flex-wrap:wrap; align-items:center }
.champ{ flex:1; min-width:220px; height:36px; padding:0 var(--pas-3);
        border:1px solid var(--encre-200); border-radius:var(--rayon);
        background:var(--papier); font:inherit; color:inherit }
.champ:focus{ outline:2px solid var(--azur-600); outline-offset:-1px;
              border-color:var(--azur-600) }
.bouton{ height:36px; padding:0 var(--pas-4); border-radius:var(--rayon);
         border:1px solid var(--encre-200); background:var(--papier);
         font:inherit; color:var(--encre-700); cursor:pointer;
         display:inline-flex; align-items:center; gap:var(--pas-2) }
.bouton:hover{ background:var(--encre-50) }
.bouton:focus-visible{ outline:2px solid var(--azur-600); outline-offset:1px }
.bouton--principal{ background:var(--foret-700); border-color:var(--foret-700);
                    color:#fff; font-weight:600 }
.bouton--principal:hover{ background:var(--foret-800) }
.bouton--danger{ color:var(--suspendu); border-color:var(--encre-200) }
.bouton--danger:hover{ background:#fbeae8 }
.bouton[disabled]{ opacity:.5; cursor:not-allowed }
.bouton svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8 }

/* Filtres par onglets : moins lourd qu'un menu déroulant pour quatre états. */
.filtres{ display:flex; gap:2px; background:var(--encre-100);
          padding:3px; border-radius:var(--rayon) }
.filtre{ padding:5px var(--pas-3); border:0; background:none; border-radius:6px;
         font:inherit; font-size:13px; color:var(--encre-600); cursor:pointer }
.filtre:hover{ color:var(--encre-900) }
.filtre--actif{ background:var(--papier); color:var(--foret-800); font-weight:600;
                box-shadow:0 1px 2px rgba(18,41,74,.08) }

/* ─────────────────────────────── tableaux ────────────────────────────── */

/* Pas de zébrure : elle compensait des bordures absentes. Une séparation fine
   d'Encre 100 fait mieux et se voit moins. */
table{ width:100%; border-collapse:collapse; background:var(--papier);
       border:1px solid var(--encre-100); border-radius:var(--rayon); overflow:hidden }
th{ text-align:left; font-size:12px; font-weight:600; color:var(--encre-500);
    padding:var(--pas-2) var(--pas-3); border-bottom:1px solid var(--encre-200);
    background:var(--encre-50); white-space:nowrap }
td{ padding:var(--pas-2) var(--pas-3); border-bottom:1px solid var(--encre-100); height:38px }
tr:last-child td{ border-bottom:0 }
tbody tr:hover{ background:var(--encre-50) }
tbody tr.cliquable{ cursor:pointer }
.mono{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:.92em }
.nombre{ font-variant-numeric:tabular-nums; text-align:right }
.discret{ color:var(--encre-500); font-size:13px }

/* Les statuts ne reposent jamais sur la seule couleur : le libellé est là, pour
   l'impression en noir et blanc et pour qui distingue mal les teintes. */
.etat{ display:inline-flex; align-items:center; gap:6px; font-size:12px;
       font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap }
.etat::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.etat--actif,   .etat--approuve{ color:var(--actif); background:#e8f5ee }
.etat--attente, .etat--depose{ color:var(--mandarine-700); background:var(--mandarine-100) }
.etat--suspendu,.etat--rejete{ color:var(--suspendu); background:#fbeae8 }
.etat--correction{ color:var(--azur-700); background:var(--azur-100) }

/* Signalement sur une ligne : un doublon possible, un champ manquant. */
.signal{ display:inline-flex; align-items:center; gap:5px; font-size:12px;
         font-weight:600; color:var(--mandarine-700) }
.signal svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2 }
tr.ligne--signalee td{ background:#fffaf3 }
tr.ligne--signalee:hover td{ background:#fff4e6 }

/* Ligne choisie dans un tableau maître, dont le détail vit ailleurs (Journal) :
   même famille que --signalee, mais la couleur d'action, pas d'alerte. */
tr.ligne--selectionnee td{ background:var(--azur-100) }
tr.ligne--selectionnee:hover td{ background:var(--azur-100) }

/* Tableau maître (défilement propre, en-tête fixe) + panneau de détail, à
   côté plutôt que dans une colonne supplémentaire trop étroite pour une
   phrase entière. */
.journal-disposition{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--pas-4); align-items:start }
.journal-tableau{ max-height:65vh; overflow-y:auto; border:1px solid var(--encre-100); border-radius:var(--rayon) }
.journal-tableau table{ border:none; border-radius:0 }
.journal-tableau thead th{ position:sticky; top:0; z-index:1 }
.journal-detail{ min-height:65vh; background:var(--papier); border:1px solid var(--encre-100);
                  border-radius:var(--rayon); padding:var(--pas-4); font-size:14px; line-height:1.5 }
.journal-detail-vide{ color:var(--encre-400) }

@media (max-width:900px) {
  .journal-disposition{ grid-template-columns:1fr }
  .journal-detail{ min-height:auto }
}

/* ───────────────────────── bandeaux et vides ─────────────────────────── */

.bandeau{ display:flex; align-items:flex-start; gap:var(--pas-3);
          padding:var(--pas-3) var(--pas-4); border-radius:var(--rayon);
          margin-bottom:var(--pas-4); font-size:14px }
.bandeau svg{ width:20px; height:20px; flex:none; stroke:currentColor;
              fill:none; stroke-width:1.8; margin-top:1px }
.bandeau--attention{ background:var(--mandarine-100); color:var(--mandarine-700) }
.bandeau--info{ background:var(--azur-100); color:var(--azur-700) }
.bandeau b{ font-weight:650 }

/* Les choix qu'une réponse ambiguë de l'IA propose (RechercheIa, outil
   proposer_choix) : des liens, pas des boutons de formulaire — cliquer
   cherche directement, sans repasser par l'IA. */
.choix-ia{ display:flex; flex-wrap:wrap; gap:var(--pas-2); margin-bottom:var(--pas-4) }
.verdict-ia{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--pas-2); margin-bottom:var(--pas-4) }

/* Un écran vide dit pourquoi il l'est et ce qu'on peut faire. Jamais un
   tableau nu. */
.vide{ text-align:center; padding:var(--pas-7,48px) var(--pas-5);
       background:var(--papier); border:1px solid var(--encre-100);
       border-radius:var(--rayon); color:var(--encre-500) }
.vide h3{ margin:0 0 var(--pas-2); font-size:17px; font-weight:650; color:var(--encre-900) }

.pied-liste{ display:flex; justify-content:space-between; align-items:center;
             margin-top:var(--pas-3); color:var(--encre-500); font-size:13px }

/* ─────────────────── barre d'action, en pied d'écran ─────────────────── */

/* L'action décisive ne se perd pas en haut de page : elle reste sous les yeux,
   avec le décompte de ce sur quoi elle porte. */
.barre-action{ position:sticky; bottom:0; background:var(--papier);
               border-top:1px solid var(--encre-200); padding:var(--pas-3) var(--pas-5);
               display:flex; align-items:center; gap:var(--pas-3); flex-wrap:wrap }

/* ───────────────────── panneau latéral (fiche complète) ──────────────────

   Une fiche de militant ne tient pas dans un tableau : photo, identité, pièce,
   rattachement à six niveaux. Un panneau plutôt qu'une page : la file reste
   sous les yeux, et on enchaîne les fiches sans perdre sa place — ce qui
   compte quand on en traite quarante d'affilée. */

.voile{ position:fixed; inset:0; z-index:25; background:rgba(18,41,74,.25); border:0;
        padding:0; cursor:pointer; animation:apparait var(--transition) }
@keyframes apparait{ from{ opacity:0 } to{ opacity:1 } }

.panneau{ position:fixed; top:0; right:0; bottom:0; z-index:26; width:min(520px,100vw);
          background:var(--papier); border-left:1px solid var(--encre-200);
          box-shadow:-8px 0 24px rgba(18,41,74,.10);
          display:flex; flex-direction:column; animation:glisse var(--transition) }
@keyframes glisse{ from{ transform:translateX(24px); opacity:.6 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion: reduce){ .panneau,.voile{ animation:none } }

.panneau-tete{ display:flex; align-items:center; gap:var(--pas-3);
               padding:var(--pas-3) var(--pas-4); border-bottom:1px solid var(--encre-100) }
.panneau-corps{ flex:1; overflow-y:auto; padding:var(--pas-4) }
.panneau-pied{ border-top:1px solid var(--encre-200); padding:var(--pas-3) var(--pas-4);
               display:flex; align-items:center; gap:var(--pas-2) }
.fermer{ margin-left:auto; background:none; border:0; font-size:20px; line-height:1;
         color:var(--encre-500); cursor:pointer; border-radius:6px; padding:2px 8px }
.fermer:hover{ background:var(--encre-100); color:var(--encre-900) }

.portrait{ width:88px; height:110px; border-radius:var(--rayon); object-fit:cover;
           background:var(--encre-100); display:grid; place-items:center;
           color:var(--encre-400); font-size:12px; text-align:center; flex:none }

/* Les champs par paires : deux colonnes tant que la place le permet. */
.groupe{ margin-bottom:var(--pas-5) }
.groupe-titre{ font-size:12px; font-weight:650; text-transform:uppercase;
               letter-spacing:.04em; color:var(--encre-500);
               padding-bottom:var(--pas-2); margin-bottom:var(--pas-3);
               border-bottom:1px solid var(--encre-100) }
.champs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--pas-3) }
.champs--plein{ grid-template-columns:1fr }
.ligne-champ{ display:flex; flex-direction:column; gap:3px }
.ligne-champ label{ font-size:12px; color:var(--encre-500) }

/* Une fiche s'ouvre TOUJOURS en lecture. L'édition se demande.
   Un écran de consultation qui ressemble à un formulaire invite à modifier ce
   qu'on venait seulement regarder — et sur une liste de militants, une
   modification involontaire ne se remarque pas. */
.ligne-champ .valeur{ min-height:34px; display:flex; align-items:center;
                      padding:0 2px; font-weight:500 }
.ligne-champ .valeur:empty::before{ content:"—"; color:var(--encre-400) }
.ligne-champ input, .ligne-champ select{ display:none;
  height:34px; padding:0 10px; border:1px solid var(--encre-200);
  border-radius:6px; background:var(--papier); font:inherit; color:inherit }
.panneau--edition .ligne-champ .valeur{ display:none }
.panneau--edition .ligne-champ input,
.panneau--edition .ligne-champ select{ display:block }
.ligne-champ input:focus, .ligne-champ select:focus{
  outline:2px solid var(--azur-600); outline-offset:-1px; border-color:var(--azur-600) }
.ligne-champ--modifie input{ border-color:var(--azur-600); background:#f5fbff }
.mention-modif{ font-size:11px; color:var(--azur-700) }

/* ───────────────────────── barre de contexte ─────────────────────────────

   Sous « Saisies », tout est lié à une fédération : le choix fait reste en
   vigueur jusqu'au suivant. Le risque de ce genre de contexte persistant est
   qu'on l'oublie — et qu'on approuve un lot en croyant être ailleurs. D'où un
   bandeau franc, d'une couleur qu'on ne croise nulle part ailleurs, plutôt
   qu'une mention discrète en haut de page. */

.contexte{ display:flex; align-items:center; gap:var(--pas-3);
           background:var(--sable); border-bottom:1px solid #e6dcc9;
           padding:var(--pas-2) var(--pas-5) }
.contexte svg{ width:18px; height:18px; stroke:var(--mandarine-700);
               fill:none; stroke-width:1.7; flex:none }
.contexte-libelle{ font-size:13px; color:var(--encre-600) }
.contexte-valeur{ font-weight:650; color:var(--encre-900) }
.contexte-chemin{ font-size:13px; color:var(--encre-500) }
.contexte .bouton{ height:30px; padding:0 var(--pas-3); font-size:13px;
                   background:var(--papier) }

/* Le choix se fait en deux listes — région, puis fédération — dans une petite
   boîte centrée. C'est la manière de l'ancienne application, que les agents
   connaissent : deux niveaux suffisent à désigner une fédération, redescendre
   les six de la cascade serait une corvée quotidienne. */
.modale{ position:fixed; inset:0; z-index:30; display:grid; place-items:center;
         padding:var(--pas-4) }
.modale-boite{ background:var(--papier); border-radius:var(--rayon-large);
               width:min(440px,100%); box-shadow:0 12px 40px rgba(18,41,74,.22);
               animation:surgit var(--transition) }
@keyframes surgit{ from{ transform:translateY(8px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion: reduce){ .modale-boite{ animation:none } }
.modale-tete{ display:flex; align-items:center; padding:var(--pas-4) var(--pas-4) var(--pas-2) }
.modale-tete h2{ font-size:18px }
.modale-corps{ padding:var(--pas-3) var(--pas-4) }
.modale-pied{ display:flex; align-items:center; justify-content:flex-end;
              gap:var(--pas-3); padding:var(--pas-3) var(--pas-4) var(--pas-4) }
.lien-action{ background:none; border:0; font:inherit; color:var(--azur-700);
              cursor:pointer; text-decoration:underline; padding:var(--pas-2) }
.lien-action:hover{ color:var(--foret-800) }

/* ──────────────────── cascade du découpage (six niveaux) ─────────────────

   Une colonne par niveau plutôt qu'un arbre dépliable : le chemin complet
   reste lisible d'un bout à l'autre, et l'on voit d'un coup où l'on est dans
   la cascade. Un arbre à six niveaux replie l'information sur elle-même et
   oblige à faire défiler pour comprendre. */

.cascade{ display:flex; overflow-x:auto; background:var(--papier);
          border:1px solid var(--encre-100); border-radius:var(--rayon);
          min-height:440px; scroll-behavior:smooth;
          /* Positionnée, pour que « offsetLeft » d'une colonne se mesure depuis
             ce conteneur et non depuis un ancêtre lointain : sinon la largeur
             de la barre latérale entre dans le calcul et les boutons visent à
             côté. */
          position:relative;
          /* La barre de défilement disparaît : on se déplace par les deux
             boutons, d'une colonne à la fois. Le défilement reste possible au
             clavier et au doigt, il n'est simplement plus dessiné. */
          scrollbar-width:none; -ms-overflow-style:none }
.cascade::-webkit-scrollbar{ display:none }
/* Pas de « scroll-snap » : le script vise déjà le bord exact d'une colonne, et
   le snap du navigateur entrait en concurrence avec lui — il corrigeait la
   position après coup, ce qui décalait la première colonne et faussait la
   détection des extrémités. */
@media (prefers-reduced-motion: reduce){ .cascade{ scroll-behavior:auto } }

/* Les deux boutons qui décalent l'ensemble d'une colonne, côte à côte. */
.defilement{ display:flex; gap:2px }
.bouton--defile{ width:34px; padding:0; justify-content:center;
                 font-size:18px; line-height:1 }
.bouton--defile[disabled]{ opacity:.35; cursor:not-allowed }
.colonne{ width:212px; flex:none; border-right:1px solid var(--encre-100);
          display:flex; flex-direction:column }
.colonne:last-child{ border-right:0 }
.colonne-tete{ padding:var(--pas-2) var(--pas-3); font-size:11px; font-weight:650;
               text-transform:uppercase; letter-spacing:.04em; color:var(--encre-500);
               background:var(--encre-50); border-bottom:1px solid var(--encre-100);
               display:flex; justify-content:space-between; gap:var(--pas-2) }
.colonne-corps{ flex:1; overflow-y:auto; padding:var(--pas-1) 0 }
.colonne-pied{ border-top:1px solid var(--encre-100); padding:var(--pas-1) }

/* Une entrée porte deux choses : le lien, qui occupe toute la largeur pour
   qu'on puisse viser large, et le menu des actions, qui vit à côté — un bouton
   ne peut pas être imbriqué dans un lien. */
.entree{ position:relative; display:flex; align-items:center; height:34px;
         border-left:3px solid transparent; font-size:14px }
.entree:hover{ background:var(--encre-50) }
.entree--clavier{ background:var(--encre-50); border-left-color:var(--encre-300) }
.entree--active{ background:var(--encre-100); border-left-color:var(--azur-600);
                 font-weight:600 }
.entree-lien{ flex:1; min-width:0; display:flex; align-items:center;
              gap:var(--pas-2); height:100%; padding:0 var(--pas-2) 0 var(--pas-3);
              color:var(--encre-700); text-decoration:none }
.entree--active .entree-lien{ color:var(--foret-800) }
.entree-nom{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.entree-suite{ margin-left:auto; color:var(--encre-400); font-size:12px;
               font-variant-numeric:tabular-nums; flex:none }

/* Les trois points n'apparaissent qu'au survol et au focus : toujours visibles,
   ils feraient une colonne de bruit sur une liste de soixante comités. Le focus
   les révèle aussi, sans quoi ils seraient hors de portée au clavier. */
.entree-actions{ flex:none; width:28px; height:28px; margin-right:4px;
                 display:grid; place-items:center; border:0; border-radius:6px;
                 background:none; color:var(--encre-500); cursor:pointer;
                 font-size:16px; line-height:1; opacity:0 }
.entree-actions svg{ width:17px; height:17px; stroke:currentColor; fill:none;
                     stroke-width:1.7 }
.entree:hover .entree-actions,
.entree-actions:focus-visible,
.entree-actions[aria-expanded="true"]{ opacity:1 }
.entree-actions:hover{ background:var(--encre-200); color:var(--encre-900) }
.entree-actions:focus-visible{ outline:2px solid var(--azur-600); outline-offset:-2px }

.menu-ligne{ position:absolute; right:var(--pas-2); top:calc(100% - 6px);
             z-index:40; min-width:170px; background:var(--papier);
             border:1px solid var(--encre-200); border-radius:var(--rayon);
             box-shadow:0 8px 28px rgba(18,41,74,.18); overflow:hidden;
             font-weight:400 }
.menu-ligne button{ display:flex; align-items:center; gap:var(--pas-3);
                    width:100%; padding:var(--pas-2) var(--pas-3); background:none;
                    border:0; font:inherit; font-size:14px; text-align:left;
                    cursor:pointer; color:var(--encre-700) }
.menu-ligne a{ display:flex; align-items:center; gap:var(--pas-3); width:100%;
               padding:var(--pas-2) var(--pas-3); font-size:14px;
               color:var(--encre-700); text-decoration:none; white-space:nowrap }
.menu-ligne a:hover,
.menu-ligne button:hover{ background:var(--encre-50) }
/* Dans une colonne qui défile, le menu est posé en « fixed » par le script :
   en absolu, le défilement le rognerait. */
.menu-ligne--fixe{ position:fixed; right:auto; top:auto }
.menu-ligne button svg{ width:15px; height:15px; stroke:currentColor; fill:none;
                        stroke-width:1.7 }
.menu-ligne .sortie{ color:var(--suspendu); border-top:1px solid var(--encre-100) }
.menu-ligne .sortie:hover{ background:#fbeae8 }
.ajouter{ display:flex; align-items:center; gap:var(--pas-2); width:100%;
          height:32px; padding:0 var(--pas-3); background:none; border:0;
          border-radius:6px; font:inherit; font-size:13px; color:var(--azur-700);
          cursor:pointer; text-align:left; text-decoration:none }
.ajouter:hover{ background:var(--azur-100) }

/* Saisie en série : une fédération transmet ses comités par dizaines. Le
   formulaire se rouvre après chaque enregistrement plutôt que d'imposer
   l'aller-retour d'une fenêtre pour chaque ligne. */
.ajout-ligne{ padding:var(--pas-2); display:flex; flex-direction:column;
              gap:var(--pas-2) }
/* box-sizing est déjà en border-box : la largeur inclut bordure et marge
   intérieure, le champ ne peut donc pas dépasser sa colonne. */
.ajout-ligne .champ{ min-width:0; width:100%; max-width:100%; font-size:14px }
/* L'étiquette au-dessus, comme dans les autres formulaires : le champ commence
   alors au même bord que la zone des noms, juste en dessous. À côté, il serait
   décalé vers la droite et, dans une colonne de 250 px, finirait par déborder. */
.ajout-rangee{ display:flex; flex-direction:column; align-items:flex-start; gap:3px }
.ajout-etiquette{ font-size:12px; color:var(--encre-500) }
/* Sélecteur aussi spécifique que « .ajout-ligne .champ », sans quoi le
   width:100% de celui-ci l'emporte et le champ pousse le reste hors de la
   colonne. Aligné à gauche sur la zone des noms, juste en dessous. */
.ajout-ligne .champ--code{ height:32px; width:84px; flex:none;
                           font-variant-numeric:tabular-nums }
/* Trois lignes : assez pour voir qu'on peut en coller plusieurs, assez peu
   pour ne pas manger la colonne. */
.champ--noms{ height:auto; padding:var(--pas-2) var(--pas-3); resize:vertical;
              font-family:inherit; line-height:1.4 }
.ajout-actions{ display:flex; align-items:center; gap:var(--pas-2) }
.ajout-actions .lien-action{ font-size:13px; padding:0 var(--pas-1) }
.ajout-erreur{ margin:0; font-size:12px; color:var(--suspendu) }
.ajout-confirmation{ margin:0; font-size:12px; color:var(--actif); font-weight:600 }

/* Le panneau de détail, à droite de la cascade : fixe, pas glissant. Il
   accompagne la navigation au lieu de la recouvrir. */
.detail{ width:300px; flex:none; background:var(--encre-50);
         border-left:1px solid var(--encre-100); padding:var(--pas-4);
         overflow-y:auto }
.detail-titre{ font-size:17px; font-weight:650; letter-spacing:-.01em;
               margin:0 0 var(--pas-1) }
.propriete{ display:flex; justify-content:space-between; gap:var(--pas-3);
            padding:var(--pas-2) 0; border-bottom:1px solid var(--encre-100);
            font-size:13px }
.propriete dt{ color:var(--encre-500); margin:0 }
.propriete dd{ margin:0; font-weight:500; text-align:right }

.vignette{ width:28px; height:28px; border-radius:50%; background:var(--encre-100);
           display:grid; place-items:center; font-size:11px; font-weight:600;
           color:var(--encre-500); flex:none }
.cellule-nom{ display:flex; align-items:center; gap:var(--pas-2) }

/* ═══════════════════════════ petits écrans ══════════════════════════════

   En dessous de 900 px — un téléphone tenu à la verticale, une tablette —
   l'écran ne tient plus deux colonnes de navigation côte à côte. Trois
   changements :

   - la barre latérale se superpose au contenu au lieu de le pousser, et part
     repliée : sur 390 px de large, lui en laisser 232 ne laisse rien au
     travail ;
   - les colonnes du découpage prennent toute la largeur, une à la fois, et
     les deux boutons deviennent le seul moyen de passer à la suivante ;
   - les en-têtes s'empilent au lieu de s'aligner, et les tableaux gardent
     leur propre défilement plutôt que d'écraser leurs colonnes. */

@media (max-width: 900px) {
  .barre-haut{ padding:0 var(--pas-3) }
  .marque{ font-size:15px }

  /* La barre latérale passe au-dessus du contenu : elle ne lui prend plus sa
     largeur, elle le recouvre le temps qu'on s'en serve. */
  .nav{ position:fixed; top:52px; bottom:0; left:0; z-index:18;
        width:min(280px, 84vw); box-shadow:2px 0 16px rgba(18,41,74,.18);
        transition:transform var(--transition) }
  .nav--repliee{ width:min(280px, 84vw); transform:translateX(-100%) }
  .nav--repliee .nav-projet,
  .nav--repliee .nav-libelle,
  .nav--repliee .nav-groupe{ display:block }
  .nav--repliee .nav-replier{ margin:0 var(--pas-2) 0 auto; transform:none }

  .contenu{ width:100% }
  .entete{ flex-direction:column; align-items:flex-start; gap:var(--pas-2);
           padding:var(--pas-3) var(--pas-4) }
  .entete .pousse{ margin-left:0 }
  h1{ font-size:19px }
  .zone{ padding:var(--pas-3) }
  .contexte{ flex-wrap:wrap; padding:var(--pas-2) var(--pas-4) }

  /* Une colonne par écran. Le « !important » l'emporte sur la largeur posée
     en attribut par le modèle : elle vaut pour un grand écran, pas ici. */
  .cascade{ min-height:60vh }
  .cascade .colonne{ width:calc(100vw - var(--pas-6)) !important;
                     max-width:none; flex:none }
  .detail{ width:calc(100vw - var(--pas-6)); flex:none }

  /* Les tuiles se lisent en bande défilante plutôt qu'en pile de six. */
  .tuiles{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--pas-2);
           scrollbar-width:none }
  .tuiles::-webkit-scrollbar{ display:none }
  .tuile{ flex:none }

  /* Un tableau large garde son propre défilement : le compresser rendrait ses
     colonnes illisibles. */
  table{ display:block; overflow-x:auto; white-space:nowrap }

  .barre-outils{ gap:var(--pas-2) }
  .champ{ min-width:0 }
  .filtres{ overflow-x:auto; scrollbar-width:none }
  .filtres::-webkit-scrollbar{ display:none }

  /* Panneaux et fenêtres occupent tout l'écran : sur 390 px, un panneau de
     520 px déborderait, et une fenêtre centrée laisserait des marges inutiles. */
  .panneau{ width:100vw }
  .modale{ padding:var(--pas-2) }

  .barre-action{ flex-wrap:wrap; padding:var(--pas-3) var(--pas-4) }

  /* Les trois points restent visibles : sans survol, ils seraient
     introuvables au doigt. */
  .entree-actions{ opacity:1 }
  .entree{ height:40px }
  .entree-lien{ padding-left:var(--pas-3) }
}

/* Le voile qui accompagne la barre latérale ouverte sur petit écran : un clic
   à côté la referme, comme on s'y attend d'un tiroir. */
.voile-nav{ position:fixed; inset:52px 0 0 0; z-index:17; border:0; padding:0;
            background:rgba(18,41,74,.30); cursor:pointer }
@media (min-width: 901px){ .voile-nav{ display:none } }

/* Le bouton de la barre latérale, dans la barre du haut. Il y vit plutôt qu'au
   fond du menu : sur un téléphone, celui-ci est replié par défaut, et son
   propre bouton serait donc hors de portée. */
.bascule-nav{ width:34px; height:34px; flex:none; display:grid; place-items:center;
              background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
              border-radius:8px; color:#fff; cursor:pointer; padding:0 }
.bascule-nav:hover{ background:rgba(255,255,255,.18) }
.bascule-nav:focus-visible{ outline:2px solid var(--azur-500); outline-offset:2px }
.bascule-nav svg{ width:18px; height:18px; stroke:currentColor; fill:none;
                  stroke-width:1.8; stroke-linecap:round }

/* ═══════════════════════════════ écrans d'accès ═══════════════════════════

   Connexion, mot de passe à changer, accès refusé. Une carte au centre, sur
   Ivoire, avec l'emblème du parti : c'est l'un des trois emplacements ronds
   que la charte lui réserve. Rien d'autre à l'écran — avant d'être entré, il
   n'y a rien à atteindre. */

body.acces{ display:block; padding-top:0; background:var(--ivoire) }
.acces-scene{ min-height:100vh; display:flex; flex-direction:column;
              align-items:center; justify-content:center;
              padding:var(--pas-5) var(--pas-4) }
.acces-carte{ width:100%; max-width:380px; background:var(--papier);
              border:1px solid var(--encre-200); border-top:4px solid var(--foret-700);
              border-radius:var(--rayon-large);
              box-shadow:0 1px 2px rgba(18,41,74,.06), 0 12px 32px rgba(18,41,74,.10);
              padding:var(--pas-6) var(--pas-5) var(--pas-5) }
.acces-embleme{ display:block; width:72px; height:72px; margin:0 auto var(--pas-3);
                border-radius:50% }
.acces-marque{ text-align:center; font-weight:700; font-size:18px;
               color:var(--foret-900); letter-spacing:-.01em }
.acces-sous-marque{ text-align:center; font-size:13px; color:var(--encre-500);
                    margin-bottom:var(--pas-5) }
.acces-titre{ font-size:16px; font-weight:650; color:var(--encre-900);
              margin:0 0 var(--pas-4); padding-top:var(--pas-4);
              border-top:1px solid var(--encre-100) }
.acces-formulaire{ display:flex; flex-direction:column }
.acces-etiquette{ font-size:13px; font-weight:600; color:var(--encre-700);
                  margin:0 0 var(--pas-1) }
.acces-champ{ width:100%; min-width:0; height:42px; font-size:16px;
              margin-bottom:var(--pas-4) }
.acces-regle{ display:block; font-size:12px; color:var(--encre-500);
              margin:calc(-1 * var(--pas-3)) 0 var(--pas-4) }
.acces-bouton{ width:100%; height:42px; justify-content:center; font-size:15px;
               margin-top:var(--pas-1); text-decoration:none;
               display:inline-flex; align-items:center }
.acces-erreur{ margin:0 0 var(--pas-4); padding:var(--pas-2) var(--pas-3);
               border-radius:var(--rayon); font-size:14px;
               background:#fbeae8; color:var(--suspendu);
               border-left:3px solid var(--suspendu) }
.acces-aide{ margin:var(--pas-4) 0 0; font-size:13px; color:var(--encre-500);
             text-align:center }
.acces-sortie{ margin:var(--pas-4) 0 0; text-align:center }
.acces-pied{ margin:var(--pas-4) 0 0; font-size:12px; color:var(--encre-500);
             text-align:center }

/* Ce qu'on consulte sans pouvoir le changer : dit en clair au pied du panneau,
   pour qu'un bouton absent ne passe pas pour un oubli. */
.lecture-seule-note{ font-size:13px; color:var(--encre-500) }
/* ═══════════════════════════════ comptes ══════════════════════════════════ */

/* Un formulaire qui porte tout le panneau : il reprend la colonne du panneau
   pour que le corps défile et que le pied reste en bas. */
.panneau-formulaire{ display:flex; flex-direction:column; flex:1; min-height:0; margin:0 }

.bandeau--succes{ background:#e8f5ee; color:var(--actif) }

/* Le mot de passe provisoire : gros, en chasse fixe, sélectionnable d'un
   double-clic — il se dicte ou se recopie, il doit se lire sans hésiter. */
.provisoire{ display:flex; align-items:center; gap:var(--pas-3); flex-wrap:wrap;
             margin-top:var(--pas-2) }
.provisoire span{ font-size:13px; color:var(--encre-700) }
.provisoire-valeur{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
                    font-size:20px; font-weight:650; letter-spacing:.06em;
                    color:var(--encre-900); background:var(--papier);
                    border:1px solid var(--encre-200); border-radius:var(--rayon);
                    padding:var(--pas-1) var(--pas-3); user-select:all }
.provisoire-note{ margin-top:var(--pas-2); font-size:13px; color:var(--encre-700) }

.choix-profil{ display:flex; flex-direction:column; gap:var(--pas-2) }
.choix{ display:flex; gap:var(--pas-3); align-items:flex-start; cursor:pointer;
        padding:var(--pas-3); border:1px solid var(--encre-200); border-radius:var(--rayon) }
.choix:has(input:checked){ border-color:var(--azur-600); background:#f5fbff }
.choix input{ margin-top:3px; accent-color:var(--foret-700) }
.choix span{ display:flex; flex-direction:column; gap:2px }
.choix small{ color:var(--encre-500); font-size:13px }

/* Les gestes de la fiche : chacun sur sa ligne, avec ce qu'il fait. */
.gestes{ display:flex; flex-direction:column; gap:var(--pas-2) }
.geste{ display:flex; align-items:center; gap:var(--pas-3); margin:0 }
.geste .bouton{ flex:none }
.geste small{ color:var(--encre-500); font-size:13px }
.geste select, .geste input{ flex:none; height:34px; padding:0 8px; border:1px solid var(--encre-200);
  border-radius:6px; background:var(--papier); font:inherit; color:inherit }
.geste select:focus, .geste input:focus{ outline:2px solid var(--azur-600); outline-offset:-1px; border-color:var(--azur-600) }
/* Sur téléphone, le champ et le bouton passent à la ligne, l'explication dessous. */
@media (max-width:900px){
  .geste{ flex-wrap:wrap; gap:var(--pas-2) }
  .geste select, .geste input{ flex:1 1 160px; min-width:0 }
  .geste small{ flex-basis:100% }
}
/* Afficher le mot de passe : un œil dans le champ, à droite. La cible fait
   42 px de côté, assez pour un pouce. Barré quand le mot de passe est visible,
   pour dire l'état et non l'action. */
.champ-secret{ position:relative; margin-bottom:var(--pas-4) }
.champ-secret .acces-champ{ margin-bottom:0; padding-right:48px }
.voir-secret{ position:absolute; top:0; right:0; width:42px; height:42px;
              display:grid; place-items:center; background:none; border:0;
              color:var(--encre-500); cursor:pointer; border-radius:0 var(--rayon) var(--rayon) 0 }
.voir-secret:hover{ color:var(--encre-900) }
.voir-secret:focus-visible{ outline:2px solid var(--azur-600); outline-offset:-2px }
.voir-secret svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8;
                  stroke-linecap:round; stroke-linejoin:round }
.voir-secret .barre{ display:none }
.voir-secret[aria-pressed="true"] .barre{ display:inline }
.champ-secret + .acces-regle{ margin-top:calc(-1 * var(--pas-3)) }
/* ══════════════════════════════ recadrage ══════════════════════════════════ */

/* Cropper.js a besoin d'un conteneur à la taille connue : la photo y tient en
   entier, sans dépasser l'écran d'un téléphone. */
.zone-recadrage{ height:min(60vh,460px); background:var(--encre-100); border-radius:var(--rayon) }
.zone-recadrage img{ display:block; max-width:100% }
/* Ce qui modifie — recadrer une photo, rétablir l'original — n'apparaît
   qu'en modification, comme les champs (règle du 20/09/2026). */
.panneau:not(.panneau--edition) .seulement-edition{ display:none !important }
/* Plusieurs gestes dans une cellule : côte à côte, et à la ligne s'il le faut. */
.gestes-ligne{ display:flex; gap:var(--pas-2); flex-wrap:wrap; justify-content:flex-end }
.gestes-ligne form{ margin:0 }

/* Un doublon dans la fenêtre d'approbation : la fiche, ce qu'elle rappelle, et la décision. */
.doublon{ border:1px solid var(--encre-200); border-radius:var(--rayon); padding:var(--pas-3); margin:0 0 var(--pas-3) }
.doublon legend{ padding:0 var(--pas-1) }
.choix-doublon{ display:flex; gap:var(--pas-2); align-items:flex-start; padding:var(--pas-1) 0; cursor:pointer; font-size:14px }
.choix-doublon input{ margin-top:3px; accent-color:var(--foret-700) }

/* ═════════════════════════════ recherche des militants ═════════════════════
   Le filtre, en carte : trois colonnes sur grand écran, une sur téléphone.
   Effacé après la recherche, il revient par la loupe. */
.filtre-recherche{ background:var(--papier); border:1px solid var(--encre-200); border-radius:var(--rayon-large);
                   padding:var(--pas-4) var(--pas-5); margin-bottom:var(--pas-5); box-shadow:0 1px 2px rgba(18,41,74,.06) }
.filtre-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--pas-3) var(--pas-4) }
.filtre-grille .champ{ width:100%; min-width:0 }
.filtre-actions{ display:flex; align-items:center; gap:var(--pas-3); margin-top:var(--pas-4); flex-wrap:wrap }
.pagination{ display:inline-flex; align-items:center; gap:var(--pas-3) }
/* ════════════════════════════════════ états ════════════════════════════════ */
.filtres-etat{ display:flex; gap:var(--pas-2); margin:0; flex-wrap:wrap }
.filtres-etat .champ{ min-width:180px; flex:0 1 auto }
.table-etat tfoot td{ font-weight:650; border-top:2px solid var(--encre-200); background:var(--encre-50) }
.table-etat .ligne-groupe td{ font-weight:650; background:var(--foret-50); color:var(--foret-900) }
.table-etat .ligne-vide td{ color:var(--encre-400) }
.table-etat td.nombre, .table-etat th.nombre{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.barre-jour{ display:flex; flex-direction:column; gap:3px; min-width:120px }
.barre{ display:block; height:7px; border-radius:4px; min-width:0 }
.barre--depots{ background:var(--azur-600) }
.barre--militants{ background:var(--feuille-500) }
.legende{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:400; color:var(--encre-600); margin-right:var(--pas-3) }
.legende .barre{ width:18px }
/* Les graphiques des états : des cartes, deux par rangée sur grand écran —
   la large à gauche, l'anneau à droite —, une par rangée sur téléphone. */
.graphes{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--pas-4); margin:0 0 var(--pas-5) }
.graphe{ margin:0; background:var(--papier); border:1px solid var(--encre-200); border-radius:var(--rayon-large);
         padding:var(--pas-4); box-shadow:0 1px 2px rgba(18,41,74,.06); min-width:0 }
.graphe--plein{ grid-column:1 / -1 }
.graphe figcaption{ font-weight:650; font-size:14px; color:var(--foret-900); margin-bottom:var(--pas-3) }
.graphe-toile{ position:relative; height:260px }
@media (max-width:900px){ .graphes{ grid-template-columns:1fr } }
/* Un critère du filtre : l'étiquette au-dessus, le champ toujours visible.
   Pas « .ligne-champ », qui masque ses champs hors du mode modification des
   panneaux — le filtre n'aurait montré que ses étiquettes. */
.champ-filtre{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.champ-filtre label{ font-size:12px; font-weight:600; color:var(--encre-600) }
.champ-filtre .champ{ width:100%; min-width:0 }/* ═══════════════════════ recherche en langage naturel ══════════════════════
   La loupe fait revenir le filtre, qui porte les deux manières de chercher,
   en onglets. */
.onglets-recherche{ display:inline-flex; margin-bottom:var(--pas-4) }
.question-ia{ width:100%; min-height:88px; height:auto; padding:var(--pas-2) var(--pas-3); resize:vertical; font:inherit; line-height:1.45 }
.exemples-ia{ display:flex; flex-wrap:wrap; gap:var(--pas-2); margin-top:var(--pas-3) }
.exemple-ia{ border:1px dashed var(--encre-300); background:var(--encre-50); color:var(--encre-700);
             border-radius:999px; padding:4px 12px; font:inherit; font-size:13px; cursor:pointer }
.exemple-ia:hover{ border-style:solid; border-color:var(--azur-600); color:var(--azur-700) }
.ia-attente{ display:none; align-items:center; gap:var(--pas-2); color:var(--encre-600); font-size:13px }
.ia-attente.visible{ display:inline-flex }
.ia-attente::before{ content:""; width:14px; height:14px; border:2px solid var(--encre-200);
                     border-top-color:var(--azur-600); border-radius:50%; animation:tourne .8s linear infinite }
@keyframes tourne{ to{ transform:rotate(360deg) } }
/* Paramètres : une carte par sujet. */
.carte-parametre{ max-width:760px }
.carte-parametre h2{ font-size:17px; margin:0 0 var(--pas-2); color:var(--foret-900) }
.carte-parametre h3{ font-size:14px; margin:var(--pas-5) 0 var(--pas-2); color:var(--encre-700) }
.carte-parametre p{ margin:0 0 var(--pas-3) }
.carte-parametre form{ margin:0 }
.rangee-parametre{ display:flex; align-items:flex-end; gap:var(--pas-3); flex-wrap:wrap; margin-bottom:var(--pas-2) !important }
/* La question, dans la barre du haut : présente partout, discrète tant qu'on
   ne s'en sert pas. Elle s'efface sur téléphone, où l'accueil la porte. */
.barre-question{ display:flex; align-items:center; gap:var(--pas-2); margin-left:var(--pas-5);
                 flex:0 1 420px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18);
                 border-radius:999px; padding:0 var(--pas-3); height:34px }
.barre-question:focus-within{ background:var(--papier); border-color:var(--papier) }
.barre-question svg{ width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:2; opacity:.8 }
.barre-question:focus-within svg{ color:var(--encre-500) }
.barre-question input{ flex:1; min-width:0; background:none; border:0; outline:0;
                       font:inherit; font-size:13.5px; color:inherit }
.barre-question input::placeholder{ color:rgba(255,255,255,.7) }
.barre-question:focus-within input{ color:var(--encre-900) }
.barre-question:focus-within input::placeholder{ color:var(--encre-400) }
@media (max-width:900px){ .barre-question{ display:none } }
/* L'accueil : la question d'abord, le reste ensuite. */
.accueil-question{ background:var(--papier); border:1px solid var(--encre-200); border-radius:var(--rayon-large);
                   padding:var(--pas-5); margin-bottom:var(--pas-5); box-shadow:0 1px 2px rgba(18,41,74,.06) }
.accueil-question h2{ margin:0 0 var(--pas-3); font-size:18px; color:var(--foret-900) }
.accueil-question-forme{ display:flex; gap:var(--pas-3); flex-wrap:wrap }
.accueil-question-forme .champ{ flex:1; min-width:240px; height:42px; font-size:15px }
.accueil-question-forme .bouton{ height:42px }
/* Le chemin d'un territoire, au-dessus de son contenu. */
.fil-ariane{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--pas-2); margin-bottom:var(--pas-3); font-size:14px }
.fil-ariane a{ color:var(--azur-700); text-decoration:none }
.fil-ariane a:hover{ text-decoration:underline }
.fil-ariane .separateur{ color:var(--encre-300) }
.cellule-action{ text-align:right; white-space:nowrap }
/* Impression : sur papier, la liste seule — ni barre, ni menu, ni filtre, et
   des couleurs qui ne vident pas une cartouche. */

@media print{
  .barre-haut, .nav, .voile, .voile-nav, #panneau-hote,
  .filtre-recherche, .entete .bouton, .pagination, .cellule-action,
  .bandeau--attention{ display:none !important }
  body{ background:#fff; color:#000 }
  .contenu{ margin:0; padding:0 }
  .zone{ padding:0 }
  .entete{ padding:0 0 8px; border-bottom:1px solid #999 }
  table{ font-size:11px; width:100% }
  thead{ display:table-header-group }
  tr{ break-inside:avoid }
  th{ background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact }
  a{ color:#000; text-decoration:none }
}
/* La grille des colonnes à cocher, avant un export. */
.grille-colonnes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--pas-2) var(--pas-4);
                  margin:var(--pas-4) 0 }
.choix-colonne{ display:flex; align-items:center; gap:var(--pas-2); font-size:14px; cursor:pointer }
.choix-colonne input{ accent-color:var(--foret-700) }
/* L'aperçu d'une carte : sur fond neutre, une ombre légère pour la détacher. */
.apercu-carte{ display:flex; justify-content:center; padding:var(--pas-6) 0; background:var(--encre-50);
              border-radius:var(--rayon-large); margin-bottom:var(--pas-4) }
.apercu-carte img{ max-width:min(480px, 90%); border-radius:10px; box-shadow:0 10px 30px rgba(18,41,74,.22) }

/* Questions à revoir (Agent IA) : une ligne qui s'ouvre sur sa correction. */
.question-ia-ligne{ border:1px solid var(--bordure, #d9dde3); border-radius:8px; padding:var(--pas-3); margin-top:var(--pas-3) }
.question-ia-ligne summary{ cursor:pointer }
.question-ia-ligne form{ margin-top:var(--pas-3) }

/* ═══════════════════════════ Export WP (PLAT-14) ═════════════════════════
   Une liste d'incohérences à trancher ligne par ligne. Le tableau garde son
   propre défilement sur un téléphone plutôt que d'écraser ses colonnes. */
/* L'action du menu à trois points est un formulaire : il s'efface, et son
   bouton prend la forme des autres entrées. */
.menu-ligne-formulaire{ display:contents }
/* Le menu de l'en-tête des régions : toujours visible, l'en-tête étant
   étroit, et sans la marge d'une entrée. */
.colonne-tete{ align-items:center }
.colonne-tete-actions{ opacity:1; width:22px; height:22px; margin:-4px -6px -4px 0;
                       color:var(--encre-500) }
.export-noeud{ margin-bottom:var(--pas-4) }
.export-noeud .export-noeud-nom{ font-size:19px; font-weight:650; letter-spacing:-.01em }
.export-titre{ font-size:17px }
.tableau-defilant{ overflow-x:auto; border-radius:var(--rayon) }
.tableau-export td{ vertical-align:top }
.tableau-export td:nth-child(3){ max-width:260px }
.choix-version{ display:flex; flex-direction:column; gap:2px; min-width:250px }
.choix-version .choix-colonne{ align-items:flex-start; min-height:28px }
.choix-version .choix-colonne input{ margin-top:4px }
.export-refus{ margin-top:var(--pas-1); align-items:flex-start }
.export-refus svg{ margin-top:2px; flex:none }
.export-action{ display:flex; align-items:center; justify-content:space-between; gap:var(--pas-4);
                flex-wrap:wrap; margin-top:var(--pas-4); padding-top:var(--pas-4);
                border-top:1px solid var(--encre-200) }
.export-action p{ margin:0; max-width:640px }
.export-action .bouton{ height:auto; min-height:36px; padding-block:var(--pas-2); text-align:left }

/* ════════════════ Découpage › Vérifier WordPress (PLAT-16) ════════════════
   L'écran « Vérifier le découpage » de l'extension : une famille de cas par
   tableau, la correction dans la dernière colonne. */
.verif-intro{ margin:0 0 var(--pas-4); max-width:860px }
.verif-filtre{ align-items:flex-end; margin-bottom:var(--pas-4) }
.verif-filtre .champ{ min-width:240px }
.verif-famille{ margin-top:var(--pas-6,32px) }
.verif-explication{ margin:var(--pas-1) 0 var(--pas-3); max-width:860px }
.verif-valeurs{ margin:0; padding:0 0 0 var(--pas-4); display:flex; flex-direction:column; gap:2px }
.verif-valeurs a{ color:var(--azur-700); text-decoration:none; white-space:nowrap }
.verif-valeurs a:hover{ color:var(--foret-800); text-decoration:underline }
.tableau-verif td:nth-child(3){ max-width:none }
.verif-case{ width:36px; text-align:center }
.verif-case input{ width:18px; height:18px; accent-color:var(--foret-700) }
.verif-code{ width:7ch; min-width:0; flex:none }
.verif-choix{ min-width:200px }
/* Découpage › Mettre à jour depuis WordPress (PLAT-18) : les mêmes tableaux,
   « Tout cocher » au bout du titre. */
.maj-tete{ display:flex; align-items:center; justify-content:space-between; gap:var(--pas-3); flex-wrap:wrap }
.case-option{ display:flex; align-items:center; gap:var(--pas-2); height:36px; color:var(--encre-700); cursor:pointer; white-space:nowrap }
.case-option input{ width:18px; height:18px; accent-color:var(--foret-700) }
/* Sur un téléphone, chaque ligne s'empile : la proposition est ce qu'on lit,
   elle ne doit pas sortir de l'écran. */
@media (max-width:900px){
  .tableau-maj thead{ display:none }
  .tableau-maj, .tableau-maj tbody, .tableau-maj tr, .tableau-maj td{ display:block; width:auto }
  .tableau-maj tr{ position:relative; padding:var(--pas-2) 0; border-bottom:1px solid var(--encre-100) }
  .tableau-maj{ min-width:0 }
  .tableau-maj td{ border:0; padding:3px var(--pas-3); height:auto; white-space:normal; max-width:none }
  .tableau-maj tr:has(.verif-case) td{ padding-left:48px }
  .tableau-maj tr td.verif-case{ position:absolute; left:0; top:var(--pas-2); width:48px; padding:3px 0 }
}
.masque{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }