/* Espace privé — même sobriété que le site public : polices système, pas de framework CSS,
   mobile d'abord (les référents regardent ça au bord du terrain). */
:root { --bleu:#2563eb; --gris:#6b7280; --bordure:#e5e7eb; --fond:#f8fafc; --alerte:#b45309; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
       color:#111827; background:var(--fond); }

header { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 16px;
         background:#fff; border-bottom:1px solid var(--bordure); }
.marque { font-weight:700; text-decoration:none; color:#111827; }
header nav { display:flex; gap:14px; flex-wrap:wrap; }
header nav a { color:var(--bleu); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.deconnexion { margin-left:auto; display:flex; align-items:center; gap:8px; }
.qui { color:var(--gris); font-size:13px; }

main { max-width:960px; margin:0 auto; padding:16px 16px 60px; }
footer { max-width:960px; margin:0 auto; padding:0 16px 30px; color:var(--gris); font-size:13px; }
footer a { color:var(--gris); }

h1 { font-size:21px; margin:4px 0 4px; }
h2 { font-size:17px; margin:22px 0 8px; }
p.chapo { color:var(--gris); margin-top:0; }

.carte { background:#fff; border:1px solid var(--bordure); border-radius:10px; padding:13px 14px; margin-bottom:10px; }
.message { background:#ecfdf5; color:#047857; border-radius:8px; padding:10px 12px; }
.erreur { background:#fef2f2; color:#b91c1c; border-radius:8px; padding:10px 12px; }
.alerte { background:#fffbeb; color:var(--alerte); border-radius:8px; padding:10px 12px; }

label { display:block; font-size:12px; color:var(--gris); margin:9px 0 3px; }
input, select, textarea { width:100%; padding:10px; border:1px solid var(--bordure);
                          border-radius:8px; font:inherit; background:#fff; }
button, .bouton { min-height:44px; padding:0 16px; border-radius:8px; border:1px solid var(--bordure);
                  background:#fff; cursor:pointer; font:inherit; display:inline-flex; align-items:center;
                  text-decoration:none; color:inherit; }
button.primaire, .bouton.primaire { background:var(--bleu); color:#fff; border-color:var(--bleu); }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.actions.navigation { align-items:center; margin-bottom:12px; }
.actions.lot { align-items:center; }
/* Un bord de suite : « début » et « fin » gardent la place du bouton pour que la barre ne
   se réorganise pas d'une fiche à l'autre — on clique au même endroit d'un bout à l'autre. */
.bouton.inerte { opacity:.45; cursor:default; }
th.colonne-case, td.colonne-case { width:34px; padding-right:0; }
td.colonne-case input, th.colonne-case input { width:auto; }

table { width:100%; border-collapse:collapse; background:#fff; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--bordure); font-size:14px; }
th { color:var(--gris); font-weight:600; font-size:12px; }

.puce { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; }
.puce.ok { background:#ecfdf5; color:#047857; }
.puce.attente { background:#fffbeb; color:var(--alerte); }
.puce.absent { background:#fef2f2; color:#b91c1c; }
.puce.info { background:#eff6ff; color:#1d4ed8; }
.puce.gris { background:#f3f4f6; color:var(--gris); }

.compteurs { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:9px; margin:12px 0; }
.compteur { background:#fff; border:1px solid var(--bordure); border-radius:10px; padding:11px; text-align:center; }
.compteur .n { font-size:23px; font-weight:700; line-height:1.1; }
.compteur .l { font-size:11px; color:var(--gris); }

.notif { border-left:3px solid var(--bleu); padding-left:10px; margin-bottom:8px; }
.notif .quand { color:var(--gris); font-size:12px; }
.vide { color:var(--gris); text-align:center; padding:24px; }
.connexion { max-width:380px; margin:40px auto; }

/* Le champ-piège de l'inscription : invisible pour un humain, REMPLISSABLE par un automate.
   ⚠ Surtout pas « display:none » ni « hidden » — un robot un peu sérieux les saute, et le piège
   ne prend plus rien. Il faut le sortir de l'écran en le laissant dans le flux du formulaire.
   Même parti pris que le champ « site » du signalement, côté carte publique. */
.piege { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Les codes de secours : montrés une seule fois, donc recopiés à la main ou imprimés. Grands,
   espacés, en chasse fixe — et une grille qui tient sur une feuille comme sur un téléphone. */
.codes { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:7px; margin:10px 0; }
.codes code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px;
  letter-spacing:.06em; text-align:center; padding:8px 4px; background:#f9fafb;
  border:1px solid var(--bordure); border-radius:7px; user-select:all; }
@media print { header, footer, form, .actions { display:none; } }

/* Le code QR de la double authentification. Fond blanc porté par le SVG lui-même : il doit rester
   sombre-sur-clair même en thème sombre, un code inversé n'étant pas lu par tous les téléphones. */
.qr { display:flex; justify-content:center; margin:12px 0; }
.qr svg { max-width:100%; height:auto; border:1px solid var(--bordure); border-radius:8px; }

/* ---------- Audience ----------
   Rien de neuf côté couleurs : le graphique reprend COULEURS_FAMILLES de web/index.html (lues
   dans audience.js, pas recopiées ici) et le reste vit avec les variables du dessus. */
code { font-size:12px; background:#f3f4f6; padding:1px 5px; border-radius:5px; word-break:break-all; }

.periodes { display:flex; gap:6px; flex-wrap:wrap; }
.grille-filtres { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0 12px; }
.limite { margin:10px 0 0; line-height:1.5; }

.compteur .evo { font-size:12px; color:var(--gris); }
.compteur .evo.hausse { color:#047857; }
.compteur .evo.baisse { color:#b91c1c; }

.graphe { width:100%; height:auto; display:block; }
#legende-courbe { display:flex; gap:14px; flex-wrap:wrap; margin:8px 0 0; }
.pastille { display:inline-block; width:10px; height:10px; border-radius:3px; vertical-align:middle; }
.cle { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--gris); }

/* Les deux volets « IA » : côte à côte quand l'écran le permet, et JAMAIS additionnés — la
   séparation visuelle porte une partie du message. */
.deux-volets { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.deux-volets h3, .bloc-axe h3 { font-size:14px; margin:14px 0 4px; }

/* Les référents et le chef de projet regardent ça au téléphone : un tableau plus large que
   l'écran défile DANS son bloc, il ne fait pas défiler la page entière de travers. */
.bloc-axe, .deux-volets > div, #campagnes { overflow-x:auto; }
.bloc-axe { margin-bottom:6px; }
td.nombre, th.nombre { text-align:right; white-space:nowrap; }
td.cliquable { color:var(--bleu); cursor:pointer; }
td.cliquable:hover, td.cliquable:focus { text-decoration:underline; outline:none; }
td:first-child { max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jauge { width:110px; }
.barre { display:block; height:7px; border-radius:4px; background:var(--bleu); opacity:.35; min-width:1px; }

/* ---------- Corrections (espace référent) ----------
   Des CARTES empilées, jamais un tableau : ces écrans se lisent au bord d'un terrain, sur un
   téléphone, et un tableau à sept colonnes y est illisible. La coordination, elle, garde son
   tableau — elle survole des centaines de lignes sur un écran large, ce n'est pas le même geste. */
.correction .entete-correction { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.correction .resume { margin:0 0 4px; font-weight:600; }
.correction .qui { display:block; margin:0 0 6px; }
.motif { margin:6px 0; color:#374151; font-style:italic; }
.correction .actions { margin-top:8px; }

/* La liste des motifs de refus d'un formulaire : dans le bloc d'erreur, sans puces à rallonge. */
.erreur ul { margin:6px 0 0; padding-left:20px; }
.erreur li { margin:3px 0; }

/* ── Santé des sources (IDEE-53, lot 1) ─────────────────────────────────────────────────────
   Les cartes du référent : une grille qui s'empile toute seule sur un téléphone. Le tableau de
   l'administration, lui, réutilise .bloc-axe — il défile dans son bloc, pas la page. */
.releves { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:10px; }

/* Un taux sous le seuil « vide » du projet (10 %) se voit sans qu'on lise le nombre. C'est un
   signal, pas une alerte : l'alerte du scraper exige en plus que le champ ait été plein au run
   d'avant, ce que le fichier — qui ne garde que le dernier relevé — ne sait plus dire. */
.part-basse { color:#b45309; font-weight:600; }

/* ── Anomalies (IDEE-53, lot 3) ─────────────────────────────────────────────────────────────
   Un seul gabarit de ligne pour toutes les sections, comme le contrat l'impose au fichier :
   les lignes se séparent d'un filet, le bouton de correction reste sous le pouce. */
.anomalie { border-top:1px solid var(--bordure); padding:8px 0 2px; }
.anomalie .resume { margin:0 0 2px; }
.anomalie .qui { display:block; margin:0; }
.anomalie .actions { margin-top:6px; }