/* Console marketing Glamzn — refonte du 25/09/2026 (demande du propriétaire : « un truc moderne et pro »)
   Même famille que le portail v12, SpaceD et les pages de connexion : CLAIR UNIQUEMENT (aucun mode sombre),
   fond #f7f7f5, panneaux blancs bordés de 1 px, Geist / Geist Mono, badges sobres, aucun logo, aucun dégradé, aucune ombre.
   Aucun script ni style en ligne (CSP) : menu mobile en <details>, jauges en <progress>.
   Les pages internes portent body.console ; la page de connexion garde son bloc body.connexion plus bas */
:root {
  color-scheme: light;
  --fond: #f7f7f5;
  --panneau: #ffffff;
  --survol: #fafaf8;
  --survol-nav: #efeeeb;
  --texte: #1c1917;
  --texte-2: #57534e;
  --texte-3: #6b6560;   /* 5,4:1 sur #f7f7f5 (#78716c n'y faisait que 4,47:1) : valeur du guide Crypto */
  --texte-4: #756f6a;   /* 4,6:1 sur #f7f7f5, 4,95:1 sur blanc (refonte du 23/10/2026 : #a8a29e ne faisait que 2,5:1 sur les flèches « → » et les jours hors du mois) */
  --bord: #e4e2df;
  --filet: #efedea;
  --piste: #e7e5e4;
  --encre: #44403c;
  --vert: #15803d;
  --ambre: #b45309;
  --rouge: #b42318;
  --rouge-fond: #fef3f2;
  --rouge-bord: #fecdca;
  --budget-fond: #fffbeb;
  --budget-bord: #fde68a;
  --budget-texte: #92400e;
  /* Code couleur du 23/10/2026 (refonte de la vue, « des couleurs sur les messages ou textes importants ») : rouge = ce qui bloque,
     ambre = ce qui attend un humain, vert = ce qui est fait, bleu = information, gris = neutre. Toujours un mot avec la couleur ;
     l'indigo --espace-ads reste à l'espace Ads ; le bleu n'habille jamais un bouton ni un titre */
  --vert-fond: #f0fdf4;
  --vert-bord: #bbf7d0;
  --attention: var(--ambre);
  --attention-texte: var(--budget-texte);   /* 6,8:1 sur --attention-fond, 5,7:1 sur --attention-bord */
  --attention-fond: var(--budget-fond);
  --attention-bord: var(--budget-bord);
  --bleu: #1d4ed8;                          /* 6,2:1 sur --bleu-fond */
  --bleu-fond: #eff6ff;
  --bleu-bord: #bfdbfe;
  --focus: #1c1917;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fond); }
body { margin: 0; }   /* commun aux pages internes et à la page de connexion (sans cette règle, la connexion descend de 8 px) */
a { text-decoration: none; }   /* idem : la page de connexion n'a jamais souligné ses renvois ; les pages internes le redéfinissent (.console a) */

/* Revue design du 17/10/2026 (niveau Linear / Stripe, famille v12) : échelle typographique tenue — 11 (étiquettes Geist Mono),
   12 (méta), 13 (notes, détails), 13,5 (cellules de données, comme BRVM), 14 (texte, titres de panneau), 22 (chiffres clés),
   24 (titre de page) ; plus de 10,5 / 11,5 / 12,5 / 14,5 ; focus visible partout ; survol de ligne seulement si elle mène ailleurs */
body.console {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.console a { color: var(--texte); text-decoration: underline; text-decoration-color: var(--bord); text-underline-offset: 3px; transition: color .12s ease, text-decoration-color .12s ease; }
.console a:hover { text-decoration-color: var(--texte-3); }
.console a:focus-visible, .console summary:focus-visible, .console button:focus-visible, .console input:focus-visible, .console select:focus-visible,
.console textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.console code, .console .code { font: 400 12px/1.4 var(--mono); letter-spacing: 0; color: var(--texte-2); }
.console ::placeholder { color: var(--texte-3); opacity: 1; }
/* Lien d'évitement : invisible jusqu'au premier Tab, il saute la barre latérale (16 à 19 liens) */
.console .evitement { position: absolute; left: 12px; top: 12px; z-index: 30; padding: 8px 12px; border: 1px solid var(--texte); border-radius: 8px;
  background: var(--panneau); color: var(--texte); font-size: 13px; font-weight: 500; text-decoration: none; transform: translateY(-200%); }
.console .evitement:focus-visible { transform: none; }
.console .code { white-space: nowrap; }
.console .gris, .console .vide { color: var(--texte-3); }
.console .ok { color: var(--vert); }
.console .rouge { color: var(--rouge); }

/* ---------- cadre : barre latérale + contenu ---------- */
/* Barre latérale sur le fond de la page (les panneaux blancs ressortent seuls), marque séparée par un filet comme BRVM et Crypto */
.cadre { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: var(--haut); height: calc(100vh - var(--haut)); overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 0 12px 14px; border-right: 1px solid var(--bord); background: var(--fond);
}
.lat-marque { padding: 2px 10px 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.lat-marque span { color: var(--texte-3); font-weight: 500; }
.lateral > .lat-marque { flex: none; height: 56px; margin: 0 -12px; padding: 0 22px; line-height: 56px; border-bottom: 1px solid var(--bord); }
/* Refonte du 23/10/2026 (« revoir la sidebar, c'est encombrant, on voit pas bien ») : 13 entrées et 3 titres tiennent sans défiler à
   1280×800, « Plus » ouvert compris (entrées de 28 px, assez pour la souris) ; entrées en encre (#1c1917), titres de groupe en Geist 12 px 600 au lieu du mono gris, un filet entre les groupes,
   « Plus » replié (<details>, aucun script), compteurs en pastilles de couleur */
.nav { display: flex; flex-direction: column; gap: 14px; }
.lateral .nav { gap: 0; }
.lateral .nav > .nav-groupe + .nav-groupe, .lateral .nav > .nav-plus { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bord); }
.nav-groupe { display: flex; flex-direction: column; gap: 1px; }
.nav-titre { margin: 0; padding: 3px 10px 4px; font: 600 12px/1.2 var(--sans); letter-spacing: 0.01em; color: var(--texte); }
.console .nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 8px; color: var(--texte); font-size: 14px; text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.console .nav a:hover { background: var(--survol-nav); color: var(--texte); }
/* page ouverte (aria-current="page") ou zone d'une page sortie du menu (aria-current="true", table PARENT) : même marque */
.console .nav a[aria-current] { background: var(--panneau); border-color: var(--bord); color: var(--texte); font-weight: 600; }
.console .nav a:focus-visible { outline-offset: -2px; border-radius: 8px; }
/* « Plus » : un titre de groupe qu'on ouvre, chevron dessiné en bordures ; quand la page ouverte y est rangée, son nom s'écrit dans le
   titre, marqué comme une entrée allumée (il ne s'ouvre plus de lui-même : ouvert, le menu dépassait l'écran de 800 px) */
.nav-plus > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px;
  font: 600 12px/1.2 var(--sans); letter-spacing: 0.01em; color: var(--texte); cursor: pointer; list-style: none; transition: background-color .12s ease;
}
.nav-plus > summary::-webkit-details-marker { display: none; }
.nav-plus > summary::after { content: ""; flex: none; width: 6px; height: 6px; margin: 0 3px 3px 0; border-right: 1.5px solid var(--texte-2); border-bottom: 1.5px solid var(--texte-2); transform: rotate(45deg); transition: transform .12s ease; }
.nav-plus[open] > summary::after { margin: 3px 3px 0 0; transform: rotate(-135deg); }
.nav-plus > summary:hover { background: var(--survol-nav); }
.console .nav-plus > summary:focus-visible { outline-offset: -2px; border-radius: 8px; }
.nav-plus > .nav-groupe { margin-top: 1px; }
.nav-plus.ici > summary { position: relative; background: var(--panneau); border-color: var(--bord); }
.nav-plus.ici > summary::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--espace); }
.nav-plus-ici { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.2 var(--sans); letter-spacing: 0; }
.nav-plus-ici::before { content: "· "; color: var(--texte-2); font-weight: 400; }
/* compteurs en pastilles (code couleur) : gris = stock permanent, ambre = attend un humain, rouge = au moins une critique */
.compteur {
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: var(--piste); color: var(--texte-2); font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums;
}
.compteur.attente { background: var(--attention-bord); color: var(--attention-texte); }
.compteur.critique { background: var(--rouge); color: #ffffff; }
.lat-pied { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 12px 0 0; border-top: 1px solid var(--bord); font-size: 13px; }
.console .lat-pied a { display: flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 8px; color: var(--texte-3); text-decoration: none; }
.console .lat-pied a:hover { color: var(--texte); background: var(--survol-nav); }
/* Un seul menu (23/10/2026) : 17 entrées visibles. Quand la barre défile (« Plus » ouvert), « Tout mettre en pause » (pages de la pub,
   propriétaire) reste collé au pied de la barre, toujours visible. Écran de 860 px de haut ou moins (1280 × 800, 1366 × 768) : entrées
   de 26 px et filets resserrés, pour que tout le menu et l'arrêt tiennent sans défiler, « Plus » replié */
.console .lateral > .lat-pied { position: sticky; bottom: -14px; z-index: 1; background: var(--fond); }
@media (min-width: 901px) and (max-height: 860px) {
  .console .lateral .nav a, .console .lateral .nav-plus > summary { min-height: 26px; }
  .lateral .nav > .nav-groupe + .nav-groupe, .lateral .nav > .nav-plus { margin-top: 4px; padding-top: 4px; }
  .lateral { gap: 8px; }
  .lateral > .lat-espace { padding-top: 8px; padding-bottom: 8px; }
  .console .lateral > .lat-pied { padding-top: 8px; }
  .console .lateral > .lat-pied a.arret { margin-bottom: 4px; }
}

.principal { min-width: 0; display: flex; flex-direction: column; }
.barre-mobile { display: none; }

/* ---------- espaces : barre du haut commune à la console (Marketing) et au centre publicitaire (Ads), 18/10/2026 ---------- */
/* Demande du propriétaire : « quand on clique sur Ads on ne sait pas si le menu a changé ». Deux espaces d'un même produit :
   la barre est identique partout, l'onglet courant est souligné de la couleur de son espace (encre pour Marketing, indigo
   #4338ca pour Ads, 7,9:1 sur blanc), et la tête de la barre latérale nomme l'espace avec la même couleur */
:root { --haut: 52px; --espace-marketing: #1c1917; --espace-ads: #4338ca; }
body.console { --espace: var(--espace-marketing); }
body.console.ads { --espace: var(--espace-ads); }
/* les pages Publier servies par le centre portent console.ads et espace-marketing : elles gardent la couleur de Marketing (audit L4) */
body.console.ads.espace-marketing { --espace: var(--espace-marketing); }
.espaces {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: stretch; gap: 24px; height: var(--haut);
  padding: 0 24px 0 22px; border-bottom: 1px solid var(--bord); background: var(--panneau);
}
.console .espaces a { text-decoration: none; }
.console .espaces-marque { display: flex; align-items: center; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--texte); white-space: nowrap; }
.espaces-onglets { display: flex; align-items: stretch; gap: 2px; }
.console .espace { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--texte-3); font-size: 14px; font-weight: 500; white-space: nowrap; }
.console .espace::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; opacity: 0.4; }
.console .espace.marketing::before { background: var(--espace-marketing); }
.console .espace.ads::before { background: var(--espace-ads); }
.console .espace:hover { color: var(--texte); }
.console .espace[aria-current] { color: var(--espace); }
.console .espace[aria-current]::before { opacity: 1; }
.console .espace[aria-current]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--espace); }
.console .espace:focus-visible { outline-offset: -4px; }
.espaces-droite { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; white-space: nowrap; }
.console .espaces-sortie { color: var(--texte-3); }
.console .espaces-sortie:hover { color: var(--texte); }
/* qui est connecté : nom (point vert = session ouverte) et rôle ; « Lecture seule » en ambre pour qu'on ne la confonde pas */
.qui { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--bord); border-radius: 999px; background: var(--fond); font-size: 13px; }
.qui-nom { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--texte); }
.qui-nom::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
.qui-nom + .qui-role { padding-left: 8px; border-left: 1px solid var(--bord); }
.qui-role { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-3); }
.qui.lecteur .qui-role { color: var(--ambre); }
.qui-menu { margin: 16px 0 0; font-size: 13px; color: var(--texte-3); }
.qui-menu strong { font-weight: 500; color: var(--texte); }
/* tête de la barre latérale : nom de l'espace et ce qu'on y fait */
.lat-espace { flex: none; display: flex; flex-direction: column; gap: 3px; margin: 0 -12px; padding: 12px 22px 11px; border-bottom: 1px solid var(--bord); }
.lat-espace-nom { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.lat-espace-nom::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--espace); }
.lat-espace-role { padding-left: 18px; font-size: 12px; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console.ads .lat-espace-nom { color: var(--espace-ads); }   /* dans Ads, le nom de l'espace porte sa couleur : on voit tout de suite qu'on a changé d'espace */
.console.ads.espace-marketing .lat-espace-nom { color: var(--espace-marketing); }
/* l'entrée active du menu porte un trait de la couleur de l'espace (3 px depuis le 23/10/2026, pour qu'on le voie) */
.console .nav a[aria-current] { position: relative; }
.console .nav a[aria-current]::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--espace); }
/* Un seul menu (refonte de l'espace Ads du 23/10/2026) : la pub est le groupe « Pub payante » ; son titre garde l'indigo de la pub
   (avec le carré de l'ancien onglet Ads) et le trait de son entrée active aussi. Les onglets « Marketing | Ads » de la barre du haut
   sont partis ; leurs règles (.espaces-onglets, .espace) restent pour un centre d'avant, servi avec cette feuille */
.nav-pub > .nav-titre { display: flex; align-items: center; gap: 7px; color: var(--espace-ads); }
.nav-pub > .nav-titre::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--espace-ads); }
.console .nav-pub a[aria-current]::before { background: var(--espace-ads); }
/* lien qui change d'espace : il le dit avec la pastille de l'espace d'arrivée */
.puce-espace { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; border: 1px solid var(--bord); border-radius: 999px; font: 500 11px/1 var(--mono); color: var(--texte-2); }
.puce-espace::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--espace-marketing); }
.puce-espace.ads::before { background: var(--espace-ads); }
.console main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 36px 40px 64px; display: grid; gap: 20px; align-content: start; }
.pied { width: 100%; max-width: 1240px; margin: 0 auto; padding: 20px 40px 28px; border-top: 1px solid var(--bord); font-size: 13px; color: var(--texte-3); }

/* ---------- en-tête de page : titre, une phrase de contexte, actions à droite (pas de surtitre) ---------- */
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; padding-bottom: 8px; }
.surtitre { margin: 0 0 8px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-3); }
.console h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.sous-titre { margin: 6px 0 0; max-width: 78ch; color: var(--texte-2); font-size: 14px; text-wrap: pretty; }

/* ---------- mises en page ---------- */
.grille { display: grid; gap: 20px; align-items: start; }
.grille.egale { align-items: stretch; }
.grille.egale > .pile { display: flex; flex-direction: column; }
.grille.egale > .pile > .panneau:only-child { flex: 1; }   /* deux panneaux côte à côte finissent à la même hauteur */
.grille.large-etroite { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.grille.egale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pile { display: grid; gap: 20px; min-width: 0; align-content: start; }

/* ---------- panneaux ---------- */
.panneau { min-width: 0; background: var(--panneau); border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; scroll-margin-top: 72px; }
/* titre et action sur la même ligne, la note occupe toute la largeur dessous */
.panneau-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-content: center; min-height: 52px; padding: 13px 20px 12px; border-bottom: 1px solid var(--filet); }
.panneau-titres { display: contents; }
.panneau-tete h2 { grid-column: 1; grid-row: 1; margin: 0; font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; }
.console .panneau-tete .note { grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0; max-width: 90ch; font-size: 13px; line-height: 1.45; color: var(--texte-3); text-wrap: pretty; }
.console .panneau-action { grid-column: 2; grid-row: 1; align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: -4px -8px -4px 0; padding: 0 8px;
  border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--texte-2); text-decoration: none; white-space: nowrap; transition: background-color .12s ease, color .12s ease; }
.console .panneau-action span { color: var(--texte-4); transition: transform .12s ease, color .12s ease; display: inline-block; }
.console .panneau-action:hover { color: var(--texte); background: var(--survol); }
.console .panneau-action:hover span { transform: translateX(2px); color: var(--texte); }
.panneau-corps { padding: 0 20px; }
.panneau-corps > .table, .panneau-corps > details > .table { margin: 0 -20px; }
.panneau-corps > .chiffres { margin: 0 -20px; border: 0; border-radius: 0; }
.console .note { margin: 12px 0; font-size: 13px; color: var(--texte-3); }
.note.hors-panneau { margin: -8px 0 0; }
.etat-vide { margin: 0; padding: 20px 0; color: var(--texte-3); font-size: 13px; }
.console h3 { margin: 20px 0 8px; font-size: 13px; font-weight: 600; }

/* ---------- chiffres clés : cellules à filets dans un seul panneau, valeur en Geist Mono (famille v12) ---------- */
.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin: 0;
  background: var(--filet); border: 1px solid var(--bord); border-radius: 10px; overflow: hidden;
}
.chiffres > div { min-width: 0; padding: 16px 20px; background: var(--panneau); }
.chiffres dt { font-size: 13px; color: var(--texte-3); }
.chiffres dd { margin: 8px 0 0; font: 500 22px/1.15 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chiffres dd a { color: inherit; text-decoration: none; }
.chiffres dd a:hover { text-decoration: underline; text-decoration-color: var(--texte-4); }
.chiffres dd .vide { font: 400 14px/1.4 var(--sans); letter-spacing: 0; color: var(--texte-3); }
.chiffres dd .gris { font: 400 13px/1.4 var(--sans); letter-spacing: 0; color: var(--texte-3); }
.chiffres dd.sous { margin-top: 6px; font: 400 12px/1.45 var(--sans); letter-spacing: 0; color: var(--texte-3); }
/* Les mots ne sont pas des chiffres : statut, pays, dates restent en Geist (le mono est réservé aux nombres) */
.chiffres dd.mot { padding-top: 4px; font: 500 15px/1.35 var(--sans); letter-spacing: -0.005em; }
.chiffres dd .badge { font-family: var(--sans); letter-spacing: 0; }
.chiffres dd.sous a { text-decoration: underline; text-decoration-color: var(--bord); }
.chiffres.compacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chiffres.compacts dd { font-size: 18px; }
.chiffres.compacts > div { padding: 14px 20px; }

/* ---------- tableaux : en-têtes Geist Mono 11 px (famille), lignes de 40 px, nombres à droite ---------- */
.table { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--texte-4) transparent; }
.console .table:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 4px; }
.console table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.console th {
  height: 36px; padding: 0 12px; background: var(--survol); border-bottom: 1px solid var(--bord); text-align: left; white-space: nowrap; vertical-align: middle;
  font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-3);
}
.console td { padding: 10px 12px; border-bottom: 1px solid var(--filet); vertical-align: top; color: var(--texte); }
.console th:first-child, .console td:first-child { padding-left: 20px; }
.console th:last-child, .console td:last-child { padding-right: 20px; }
.console tbody tr:last-child td { border-bottom: 0; }
.console tbody tr { background: var(--panneau); transition: background-color .12s ease; }
/* Tableaux larges (7 colonnes ou plus) : la première colonne reste visible quand le tableau défile dans son panneau */
.console table:has(th:nth-child(7)) :is(th, td):first-child { position: sticky; left: 0; z-index: 1; }
.console table:has(th:nth-child(7)) td:first-child { background: inherit; }
.console table:has(th:nth-child(8)) td:first-child { min-width: 180px; }
/* États rares (guide Crypto) : dans un tableau, un état normal est un point et un mot ; seuls attente, critique et budget gardent la pastille */
.console td .badge.ok, .console td .badge.neutre { height: auto; padding: 0; border: 0; background: none; }
.console tbody tr:has(a):hover { background: var(--survol); }
.console td.n, .console th.n { width: 1%; padding-left: 24px; text-align: right; }
.console td.n { white-space: nowrap; }
.console td .detail { display: block; margin-top: 2px; font-size: 12px; color: var(--texte-3); }

/* ---------- badges de statut : texte + point, jamais la couleur seule ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--bord); border-radius: 999px;
  background: var(--panneau); color: var(--texte-2); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle;
}
.badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--texte-4); }
/* Code couleur du 23/10/2026 : « ok » en texte vert (5:1 sur blanc), « attente » en pastille pleine ambre (un à-faire doit se voir),
   « critique » garde son fond rouge partout, listes de validations comprises ; « info » en bleu (programmé, feu vert donné, en cours) */
.console .badge.ok { color: var(--vert); }
.badge.ok::before { background: var(--vert); }
.badge.attente { color: var(--attention-texte); background: var(--attention-fond); border-color: var(--attention-bord); }
.badge.attente::before { background: var(--attention); }
.badge.critique { color: var(--rouge); background: var(--rouge-fond); border-color: var(--rouge-bord); }
.badge.critique::before { background: var(--rouge); }
.badge.info { color: var(--bleu); background: var(--bleu-fond); border-color: var(--bleu-bord); }
.badge.info::before { background: var(--bleu); }
.badge.budget { color: var(--budget-texte); background: var(--panneau); border-color: var(--bord); }   /* carré ambre, sans fond jaune */
.badge.budget::before { border-radius: 1px; background: var(--ambre); }

/* ---------- messages (avis) : succès, erreur, attention, information ; les mêmes dans la console et dans le centre ---------- */
.console .avis { margin: 0; padding: 10px 14px; border: 1px solid var(--bord); border-radius: 8px; background: var(--panneau); font-size: 13.5px; color: var(--texte-2); }
.console .avis.ok { border-color: var(--vert-bord); background: var(--vert-fond); color: var(--vert); }
.console .avis.erreur { border-color: var(--rouge-bord); background: var(--rouge-fond); color: var(--rouge); }
.console .avis.attention { border-color: var(--attention-bord); background: var(--attention-fond); color: var(--attention-texte); }
.console .avis.info { border-color: var(--bleu-bord); background: var(--bleu-fond); color: var(--bleu); }

/* ---------- onglets d'une zone (rendu.onglets), communs à la console et aux pages Publier du centre ---------- */
/* Le soulignement de l'onglet actif se pose sur le filet ; à droite, le bouton de la zone (sous-nav-droite) */
.console .sous-nav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 20px; margin: 0; padding: 0; border-bottom: 1px solid var(--bord); font-size: 14px; }
.console .sous-nav > a { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 8px 0 10px; border-bottom: 2px solid transparent; color: var(--texte-2); text-decoration: none; transition: color .12s ease, border-color .12s ease; }
.console .sous-nav > a:hover { color: var(--texte); border-bottom-color: var(--bord); }
.console .sous-nav > a[aria-current="page"] { color: var(--texte); font-weight: 500; border-bottom-color: var(--texte); }
.console .sous-nav-droite { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 6px; }

/* ---------- bouton qui efface (danger) : contour rouge, jamais le même que « Enregistrer » ---------- */
.console .bouton.danger { color: var(--rouge); background: var(--panneau); border-color: var(--rouge); }
.console .bouton.danger:hover { color: var(--rouge); background: var(--rouge-fond); border-color: var(--rouge); }

/* ---------- jauges ---------- */
.jauge { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 8px 0 2px; border: 0; border-radius: 3px; background: var(--piste); color: var(--encre); overflow: hidden; }
.jauge::-webkit-progress-bar { background: var(--piste); border-radius: 3px; }
.jauge::-webkit-progress-value { background: var(--encre); border-radius: 3px; }
.jauge::-moz-progress-bar { background: var(--encre); border-radius: 3px; }
.jauge.attention::-webkit-progress-value { background: var(--ambre); }
.jauge.attention::-moz-progress-bar { background: var(--ambre); }
.jauge.critique::-webkit-progress-value { background: var(--rouge); }
.jauge.critique::-moz-progress-bar { background: var(--rouge); }
.jauge-ligne { display: grid; gap: 2px; padding: 14px 0 0; font-size: 13px; color: var(--texte-2); }

/* ---------- listes ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--filet); }
.liste li:last-child { border-bottom: 0; }
.liste .num { font: 500 12px/1.4 var(--mono); color: var(--texte-3); font-variant-numeric: tabular-nums; }
.liste .titre { min-width: 0; font-weight: 500; }
.liste .detail { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--texte-2); }
.liste .detail.gris { color: var(--texte-3); }
.liste .etat { font-size: 13px; color: var(--texte-2); text-align: right; white-space: nowrap; }
.liste .etat.ok, .liste .etat.attente, .liste .etat.refusee { display: inline-flex; align-items: center; gap: 7px; justify-self: end; }
.liste .etat.ok::before, .liste .etat.attente::before, .liste .etat.refusee::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.liste .etat.ok::before { background: var(--vert); }
.liste .etat.attente::before { background: var(--ambre); }
.liste .etat.refusee { color: var(--texte-3); }
.liste .etat.refusee::before { background: var(--texte-4); }
.liste li.courante .titre { font-weight: 600; }
.liste li.courante .num { color: var(--texte); }
.liste.compacte li { padding: 10px 0; }
.liste.dates li { grid-template-columns: 96px minmax(0, 1fr) auto; }
.liste .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-weight: 400; }
.liste .source { font: 400 12px/1.3 var(--sans); color: var(--texte-3); }
.liste.decisions .titre { text-wrap: pretty; }
.liste.regles li, .liste.objectifs li { grid-template-columns: minmax(0, 1fr) auto; }
.liste.objectifs .etat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: normal; text-align: right; max-width: 110px; }
.liste.objectifs .source { display: block; margin-top: 6px; }
.liste.objectifs .valeur { font-size: 15px; font-weight: 600; color: var(--texte); }
.liste.objectifs .valeur .gris { font-size: 12px; font-weight: 400; }
.liste.objectifs .jauge { max-width: 280px; }
.alertes-liste li { grid-template-columns: 92px minmax(0, 1fr); }
.alertes-liste .etat { grid-column: 2; justify-self: start; text-align: left; white-space: normal; font-size: 12px; color: var(--texte-3); }
.alertes-liste .num { font-family: var(--sans); }
.puces { list-style: none; margin: 0; padding: 0; }
.puces li { padding: 11px 0; border-bottom: 1px solid var(--filet); font-size: 13.5px; color: var(--texte-2); }
.puces li:last-child { border-bottom: 0; }
.lignes-simples { list-style: none; margin: 0; padding: 0; }
.lignes-simples li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.lignes-simples li:last-child { border-bottom: 0; }
.lignes-simples .detail { display: block; margin-top: 3px; font-size: 12px; color: var(--texte-3); }

/* paires libellé · valeur (budget, semaine du plan) */
.cle-valeur { margin: 0; }
.cle-valeur > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--filet); }
.cle-valeur > div:last-child { border-bottom: 0; }
.cle-valeur dt { font-size: 13px; color: var(--texte-3); padding-top: 1px; }
.cle-valeur dd { margin: 0; min-width: 0; font-size: 13.5px; }
.cle-valeur .detail { display: block; margin-top: 3px; font-size: 12px; color: var(--texte-3); }

/* ---------- filtres (rendus côté serveur) ---------- */
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.filtres + .filtres { margin-top: -12px; }
.filtres-titre { margin-right: 4px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-3); min-width: 76px; }
.console .filtres a {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--bord); border-radius: 999px;
  background: var(--panneau); color: var(--texte-2); font-size: 13px; text-decoration: none;
}
.console .filtres a span { font: 500 12px/1 var(--mono); color: var(--texte-3); }
.console .filtres a:hover { border-color: var(--texte-4); color: var(--texte); }
/* filtre actif : blanc bordé encre, comme l'élément actif de la barre latérale (plus de pilule noire pleine) */
.console .filtres a[aria-current="page"] { background: var(--panneau); border-color: var(--texte); color: var(--texte); font-weight: 500; }
.console .filtres a[aria-current="page"] span { color: var(--texte-2); }

/* ---------- plan 30 jours ---------- */
.frise { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 16px 0 4px; padding: 0; }
.frise li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.frise li::before { content: ""; height: 4px; border-radius: 2px; background: var(--piste); margin-bottom: 4px; }
.frise li.passee::before { background: var(--texte-3); }   /* 4:1 sur la piste (2:1 avant) ; la semaine courante porte aussi aria-current */
.frise li.courante::before { background: var(--texte); }
.frise-code { font: 500 11px/1.2 var(--mono); color: var(--texte-3); }
.frise li.courante .frise-code { color: var(--texte); }
.frise-dates { font-size: 12px; line-height: 1.3; color: var(--texte-3); }
.ligne-phase { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 12px 0 14px; border-top: 1px solid var(--filet); font-size: 13px; }

/* ---------- publications par jour ---------- */
.jour + .jour { border-top: 1px solid var(--bord); }
.console .jour-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 0 6px; font-size: 13px; font-weight: 600; }
.jour-tete .gris { font-weight: 400; font-size: 13px; }
.pubs { list-style: none; margin: 0; padding: 0 0 6px; }
.pub { display: grid; grid-template-columns: 92px 150px minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--filet); font-size: 13.5px; }
.pub-heure { font: 500 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.pub-heure .gris, .pub-compte .gris { display: block; font: 400 12px/1.4 var(--sans); color: var(--texte-3); }
.pub-sujet { min-width: 0; }
.pub-sujet .detail { display: block; margin-top: 2px; font-size: 12px; color: var(--texte-3); }
.pub-statut { justify-self: end; }
.console .suite { margin: 0; padding: 4px 0 12px; font-size: 13px; }
.jours-suivants { list-style: none; margin: 0; padding: 4px 0 8px; border-top: 1px solid var(--bord); }
.jours-suivants li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--filet); }
.jours-suivants li:last-child { border-bottom: 0; }
/* « Ce qui bloque le départ » : encadré ambre en tête du bloc (refonte de la vue du 23/10/2026 ; avant, titre ambre de 11 px en bas sur gris) */
.bloquants { margin: 16px 0 6px; padding: 11px 14px 12px; background: var(--attention-fond); border: 1px solid var(--attention-bord); border-radius: 8px; }
.bloquants-titre { margin: 0 0 4px; font: 600 13px/1.4 var(--sans); color: var(--attention-texte); }
.bloquants ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--attention-texte); }
.bloquants li + li { margin-top: 4px; }

/* ---------- repliables (sans script) ---------- */
.replie { margin: 4px 0 8px; }
.replie > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 13px; font-weight: 500; color: var(--texte-2); list-style: none; }
.replie > summary::-webkit-details-marker { display: none; }
/* chevron dessiné en bordures (aucune image), tourné à l'ouverture */
.replie > summary::before { content: ""; width: 6px; height: 6px; margin: 0 4px 0 2px; border-right: 1.5px solid var(--texte-3); border-bottom: 1.5px solid var(--texte-3); transform: rotate(-45deg); transition: transform .12s ease; }
.replie[open] > summary::before { transform: rotate(45deg); }
.replie > summary:hover { color: var(--texte); }
.replie p { margin: 4px 0; font-size: 13px; color: var(--texte-2); }
.pub-sujet .replie { margin: 2px 0 0; }
.pub-sujet .replie > summary { padding: 2px 0; font-weight: 400; color: var(--texte-3); }
.panneau-corps > .replie > .table { margin: 0 -20px; border-top: 1px solid var(--bord); }

/* ---------- blocs hérités (documents, archives, alertes de registre) ---------- */
.phare { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 16px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.phare span { font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--texte-2); }
/* avis sobre : fond blanc, filet, point rouge sur la première phrase (plus de boîte rouge pleine) */
.alerte { margin: 16px 0; padding: 12px 14px; border: 1px solid var(--bord); background: var(--panneau); border-radius: 8px; color: var(--texte-2); font-size: 13.5px; }
.alerte p { margin: 0 0 6px; }
.alerte > p:first-child { display: flex; align-items: baseline; gap: 8px; color: var(--texte); font-weight: 500; }
.alerte > p:first-child::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); transform: translateY(-1px); }
.alerte ul { margin: 0 0 6px; padding-left: 18px; }
.alertes { margin: 12px 0; padding-left: 18px; color: var(--rouge); }
.sources { list-style: none; margin: 0; padding: 0; }
.sources li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: 13.5px; }
.archives { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0; padding: 0; font-size: 13.5px; }
.archives li[aria-current] { font-weight: 600; }
.doc { padding: 4px 0 16px; }
.doc p, .doc li, .doc blockquote { max-width: 76ch; }
.doc h2, .doc h3, .doc h4, .doc h5, .doc h6 { margin: 22px 0 8px; font-size: 14px; font-weight: 600; }
.doc p, .doc li { color: var(--texte-2); }
.doc blockquote { margin: 14px 0; padding-left: 14px; border-left: 2px solid var(--bord); color: var(--texte-2); }
.doc pre { overflow-x: auto; padding: 12px 0; font: 12px/1.5 var(--mono); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.doc hr { border: 0; border-top: 1px solid var(--filet); margin: 24px 0; }
.doc .table { margin: 12px 0; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.doc th:first-child, .doc td:first-child { padding-left: 0; }
.doc th { background: none; }

/* ---------- mobile ---------- */
@media (max-width: 1180px) {
  .grille.trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille.trois > .pile:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .grille.large-etroite { grid-template-columns: minmax(0, 1fr); }
  /* vue d'ensemble sur une colonne : les deux colonnes se fondent et l'ordre de lecture de la refonte revient (classes ordre-N) */
  .grille.accueil > .pile { display: contents; }
  .grille.accueil .ordre-1 { order: 1; } .grille.accueil .ordre-2 { order: 2; } .grille.accueil .ordre-3 { order: 3; } .grille.accueil .ordre-4 { order: 4; }
  .grille.accueil .ordre-5 { order: 5; } .grille.accueil .ordre-6 { order: 6; } .grille.accueil .ordre-7 { order: 7; } .grille.accueil .ordre-8 { order: 8; }
}
@media (max-width: 900px) {
  .cadre { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  /* téléphone : la barre des espaces reste en haut ; dessous, le menu de l'espace courant sur toute la largeur */
  .espaces { gap: 12px; padding: 0 12px 0 16px; }
  .console .espace { padding: 0 10px; }
  .console .espaces-sortie { display: none; }   /* dans le menu */
  .barre-mobile {
    display: flex; position: sticky; top: var(--haut); z-index: 10; align-items: center; gap: 12px;
    height: 56px; padding: 0 16px; background: var(--fond); border-bottom: 1px solid var(--bord);
  }
  .barre-mobile .lat-marque { min-width: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 320-360 px : la marque cède, jamais la page */
  .barre-mobile .menu { flex: 1; min-width: 0; }
  .menu > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid var(--bord); border-radius: 8px;
    background: var(--panneau); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none;
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-libelle { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-3); padding-left: 10px; border-left: 1px solid var(--bord); }
  .menu[open] > summary { border-color: var(--texte); }
  .menu-panneau {
    position: absolute; left: 0; right: 0; top: 56px; max-height: calc(100vh - 56px - var(--haut)); max-height: calc(100dvh - 56px - var(--haut)); overflow-y: auto;
    padding: 16px 16px 20px; background: var(--fond); border-bottom: 1px solid var(--bord);
  }
  .menu-panneau .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .menu-panneau .nav-groupe:first-child { grid-column: 1 / -1; }
  .menu-panneau .lat-pied { margin-top: 16px; }
  .console .menu-panneau .lat-pied a { min-height: 44px; }
  .console main { padding: 24px 16px 48px; gap: 16px; }
  .pied { padding: 20px 16px 28px; }
  .console h1 { font-size: 24px; }
  .grille, .pile { gap: 16px; }
  .grille.egale, .grille.trois { grid-template-columns: minmax(0, 1fr); }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .chiffres > div { padding: 14px 16px; }
  .chiffres dd { font-size: 20px; }
  .panneau-tete { padding: 13px 16px 12px; }
  .panneau-corps { padding: 0 16px; }
  .panneau-corps > .table, .panneau-corps > details > .table, .panneau-corps > .chiffres, .panneau-corps > .replie > .table { margin-left: -16px; margin-right: -16px; }
  .console th { white-space: normal; }   /* en-têtes longs sur deux lignes plutôt qu'une colonne cachée */
  .console th:first-child, .console td:first-child { padding-left: 16px; }
  /* cibles au doigt : 44 px dans le menu, actions de panneau et chiffres cliquables agrandis sans changer la mise en page */
  .console .menu-panneau .nav a { min-height: 44px; }
  .menu > summary { height: 44px; }
  .console .panneau-action { min-height: 40px; margin-block: -10px; }
  .chiffres dd a { display: inline-block; margin: -6px 0; padding: 6px 0; }
  .console td:first-child { min-width: 8em; }
  html { scroll-padding-top: 64px; }
  .console .filtres a { height: 36px; }
  .liste.decisions .source { display: none; }   /* la source (souvent PLAN_30_JOURS.md) reste sur ordinateur et dans Sources et règles */
  .console th:last-child, .console td:last-child { padding-right: 16px; }
  .liste li { grid-template-columns: 40px minmax(0, 1fr); }
  .liste .etat { grid-column: 2; text-align: left; justify-self: start; white-space: normal; }
  .liste .etat.ok, .liste .etat.attente, .liste .etat.refusee { justify-self: start; }
  .liste.regles li { grid-template-columns: minmax(0, 1fr); }
  .liste.regles .etat { grid-column: 1; }
  .liste.objectifs li { grid-template-columns: minmax(0, 1fr) auto; }
  .liste.objectifs .etat { grid-column: 2; }
  .liste.dates li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .liste.dates .etat { grid-column: 1; }
  .alertes-liste li { grid-template-columns: minmax(0, 1fr); }
  .alertes-liste .etat { grid-column: 1; }
  .cle-valeur > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .pub { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 4px 10px; }
  .pub-heure { grid-column: 1; grid-row: 1 / span 2; }
  .pub-compte { grid-column: 2; grid-row: 1; }
  .pub-statut { grid-column: 3; grid-row: 1; }
  .pub-sujet { grid-column: 2 / -1; grid-row: 2; }
  .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .filtres-titre { min-width: 100%; margin-bottom: 2px; }
  .filtres + .filtres { margin-top: -6px; }
  .note.hors-panneau { margin-top: -4px; }
}
/* page de connexion — style commun des connexions Glamzn Group (25/09/2026) : clair uniquement, sans logo,
   même famille que la page d'accueil v12. Aucun bloc sombre : la connexion n'utilise pas les variables de :root
   Référence : /root/portal/propositions/2026-09-25-connexion-reference.html */
html:has(body.connexion) { color-scheme: light; background: #f7f7f5; }
body.connexion {
  --cx-fond: #f7f7f5; --cx-panneau: #ffffff; --cx-texte: #1c1917; --cx-texte-2: #57534e; --cx-texte-3: #8a847e;
  --cx-bord: #e4e2df; --cx-champ: #d6d3d1; --cx-champ-survol: #a8a29e; --cx-anneau: rgba(28, 25, 23, 0.10);
  --cx-bouton: #1c1917; --cx-bouton-survol: #292524;
  --cx-err: #b42318; --cx-err-fond: #fef3f2; --cx-err-bord: #fecdca; --cx-err-anneau: rgba(180, 35, 24, 0.12);
  color-scheme: light; background: var(--cx-fond); color: var(--cx-texte);
  font: 400 15px/1.5 "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: normal; -moz-osx-font-smoothing: grayscale;
}
body.connexion .cx-page { max-width: 1080px; margin: 0 auto; padding: 0 40px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.connexion .cx-haut { display: flex; align-items: center; height: 68px; border-bottom: 1px solid var(--cx-bord); }
body.connexion .cx-marque { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
body.connexion .cx-marque span { color: var(--cx-texte-3); font-weight: 500; }
body.connexion .cx-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 0 72px; }
body.connexion .cx-panneau { width: 100%; max-width: 392px; padding: 32px; background: var(--cx-panneau); border: 1px solid var(--cx-bord); border-radius: 12px; }
body.connexion .cx-titre { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
body.connexion .cx-sous-titre { margin: 4px 0 0; font-size: 14px; color: var(--cx-texte-2); }
body.connexion .cx-formulaire { margin: 28px 0 0; display: grid; gap: 18px; }
body.connexion .cx-champ { display: grid; gap: 6px; }
body.connexion .cx-champ label { font-size: 13px; font-weight: 500; }
body.connexion .cx-saisie { display: block; width: 100%; height: 42px; margin: 0; padding: 0 12px; background: #ffffff; color: var(--cx-texte);
  border: 1px solid var(--cx-champ); border-radius: 8px; font: inherit; font-size: 15px; transition: border-color .12s ease, box-shadow .12s ease; }
body.connexion .cx-saisie:hover { border-color: var(--cx-champ-survol); }
body.connexion .cx-saisie:focus { outline: none; border-color: var(--cx-texte); box-shadow: 0 0 0 3px var(--cx-anneau); }
body.connexion .cx-saisie[aria-invalid="true"] { border-color: var(--cx-err); }
body.connexion .cx-saisie[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--cx-err-anneau); }
/* captcha (spec commune du 25/09/2026) : SVG en ligne 220×64 dans un cadre #fafaf8, bordure #e5e3de, rayon 6 */
body.connexion .cx-captcha { width: 100%; max-width: 222px; background: #fafaf8; border: 1px solid #e5e3de; border-radius: 6px; line-height: 0; overflow: hidden; }
body.connexion .cx-captcha svg { display: block; width: 100%; max-width: 220px; height: auto; }
body.connexion .cx-bouton { height: 42px; width: 100%; margin-top: 6px; border: 0; border-radius: 8px; background: var(--cx-bouton); color: #ffffff;
  font-family: inherit; font-size: 14.5px; font-weight: 500; line-height: 1; cursor: pointer; transition: background-color .12s ease; }
body.connexion .cx-bouton:hover { background: var(--cx-bouton-survol); }
body.connexion .cx-bouton:focus-visible { outline: 2px solid var(--cx-texte); outline-offset: 2px; }
body.connexion .connexion-erreur { margin: 16px 0 0; padding: 10px 12px; background: var(--cx-err-fond); border: 1px solid var(--cx-err-bord);
  border-radius: 8px; color: var(--cx-err); font-size: 13.5px; line-height: 1.45; }
body.connexion .cx-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap;
  padding: 24px 0 32px; border-top: 1px solid var(--cx-bord); font-size: 13px; color: var(--cx-texte-3); }
body.connexion .cx-pied a { color: var(--cx-texte-2); }
body.connexion .cx-pied a:hover { color: var(--cx-texte); }
body.connexion .cx-pied a:focus-visible { outline: 2px solid var(--cx-texte); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 760px) {
  body.connexion .cx-page { padding: 0 16px; }
  body.connexion .cx-haut { height: 60px; }
  body.connexion .cx-main { align-items: flex-start; padding: 32px 0 48px; }
  body.connexion .cx-panneau { padding: 24px 20px; }
  body.connexion .cx-saisie { font-size: 16px; } /* 16 px : iOS ne zoome pas au focus */
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Veille : liste des veilles et fichiers bruts (26/09) */
.liste.veilles li { grid-template-columns: 104px 1fr auto; align-items: start; }
.liste.veilles .actions { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13px; font-weight: 400; }
.liste.veilles .detail .badge { margin-right: 6px; }
pre.brut { max-height: 70vh; overflow: auto; padding: 16px; border: 1px solid var(--bord); border-radius: 8px; background: var(--fond); font: 12.5px/1.55 "Geist Mono", ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 720px) {
  .liste.veilles li { grid-template-columns: 1fr; gap: 6px; }
  .liste.veilles .etat { grid-column: 1; text-align: left; justify-self: start; }
}

/* Décisions de la veille (28/09) */
.liste.decisions-veille li { grid-template-columns: 40px 1fr auto; align-items: start; }
.liste.decisions-veille .titre-decision { display: block; font-weight: 500; }
.liste.decisions-veille .detail b { font-weight: 500; color: var(--texte-2); }
@media (max-width: 720px) { .liste.decisions-veille li { grid-template-columns: 32px 1fr; } .liste.decisions-veille .etat { grid-column: 2; text-align: left; } }
/* espaces sur les plus petits téléphones (320-420 px) : la marque et les deux onglets tiennent, la mention « Lecture seule » reste au pied de page */
/* téléphone : la marque cède sa place, le rôle reste en haut, le nom complet est dans le menu (« Connecté : … ») */
@media (max-width: 560px) { .console .espaces-marque { display: none; } .qui-nom { display: none; } .qui { padding: 0 9px; } }
@media (max-width: 420px) { .espaces { gap: 6px; padding: 0 8px 0 10px; } .console .espace { padding: 0 8px; } }

/* ---------- pages de la console : refonte de la vue du 23/10/2026 (docs/refonte-ui/01-architecture.md § 2.5 et § 3) ----------
   Ce qui attend un geste en haut et en couleur, le secondaire replié. La couleur ne parle jamais seule : un mot la porte toujours */
.console .ambre { color: var(--attention-texte); }
/* chiffres clés qui demandent un geste (tuiles({ ton })) : fond pâle, filet de couleur en haut, chiffre coloré */
.chiffres > div { position: relative; }
.chiffres > .ton-critique, .chiffres > .ton-attente { padding-top: 16px; }
.chiffres > .ton-critique::before, .chiffres > .ton-attente::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.chiffres > .ton-critique { background: var(--rouge-fond); }
.chiffres > .ton-critique::before { background: var(--rouge); }
.chiffres > .ton-critique > dd:not(.sous) { color: var(--rouge); }
.chiffres > .ton-attente { background: var(--attention-fond); }
.chiffres > .ton-attente::before { background: var(--attention); }
.chiffres > .ton-attente > dd:not(.sous) { color: var(--attention-texte); }
.chiffres > .ton-ok > dd:not(.sous) { color: var(--vert); }
.chiffres > .ton-critique dt, .chiffres > .ton-attente dt { color: var(--texte-2); font-weight: 500; }
.chiffres dd .mot { font: 600 18px/1.25 var(--sans); letter-spacing: -0.01em; }   /* un mot (Gelé) n'est pas un chiffre : Geist, pas le mono */

/* un seul signal fort en tête d'un bloc (« 7 décisions en retard ») ; dans la liste, les échéances passent en texte coloré sans fond */
.console .signal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 16px 0 4px; padding: 10px 14px;
  border: 1px solid var(--rouge-bord); border-radius: 8px; background: var(--rouge-fond); color: var(--rouge); font-size: 13px; }
.signal strong { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; }
.signal strong::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
.console .signal.attente { border-color: var(--attention-bord); background: var(--attention-fond); color: var(--attention-texte); }
.liste.decisions .meta .badge { height: auto; padding: 0; border: 0; background: none; }
.liste.decisions .meta { gap: 4px 14px; }

/* alertes : un trait de couleur à gauche de chaque ligne (rouge critique, ambre attention) ; sur la vue d'ensemble, détail limité à 3 lignes */
.alertes-liste li { margin: 0 -20px; padding: 13px 20px 13px 17px; border-left: 3px solid transparent; }
.alertes-liste li.critique { border-left-color: var(--rouge); }
.alertes-liste li.attention { border-left-color: var(--attention); }
.grille.accueil .alertes-liste .detail { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* objectifs à J30 (bas de la vue d'ensemble) sur deux colonnes : la référence prend deux fois moins de hauteur */
.liste.objectifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.liste.objectifs li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

/* panneau replié (rendu.repliable) : même tête qu'un panneau, chevron à droite, nombre d'éléments en pastille grise */
.panneau.repliable > summary { position: relative; display: block; min-height: 52px; padding: 13px 56px 12px 20px; cursor: pointer; list-style: none; transition: background-color .12s ease; }
.panneau.repliable > summary::-webkit-details-marker { display: none; }
.panneau.repliable > summary::after { content: ""; position: absolute; right: 24px; top: 20px; width: 7px; height: 7px; border-right: 1.5px solid var(--texte-2); border-bottom: 1.5px solid var(--texte-2); transform: rotate(45deg); transition: transform .12s ease; }
.panneau.repliable[open] > summary::after { top: 24px; transform: rotate(-135deg); }
.panneau.repliable > summary:hover { background: var(--survol); }
.panneau.repliable[open] > summary { border-bottom: 1px solid var(--filet); }
.console .panneau.repliable > summary:focus-visible { outline-offset: -2px; border-radius: 10px; }
.panneau.repliable > summary h2 { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: -0.005em; }
.repli-compte { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: var(--piste); color: var(--texte-2); font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; vertical-align: 1px; }
.console .panneau.repliable > summary .note { display: block; margin: 2px 0 0; max-width: 90ch; font-size: 13px; line-height: 1.45; color: var(--texte-3); }

/* avis en bloc (anomalies d'un registre, renvoi d'information) : mêmes tons que .avis, une phrase forte puis le détail */
.console .avis.bloc p { margin: 0; }
.console .avis.bloc ul { margin: 6px 0 0; padding-left: 18px; }
.console .avis .replie { margin: 6px 0 0; }
.console .avis .replie > summary { padding: 2px 0; color: inherit; }
.console .avis .replie > summary::before { border-color: currentColor; }
.console .avis a { color: inherit; text-decoration-color: currentColor; }
.console .phare.attente { color: var(--attention-texte); }

/* résumé d'une ligne (Comptes réseaux sur Comptes par pays) */
.resume-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 14px 0 2px; font-size: 13.5px; }
.resume-ligne strong { font-size: 15px; font-weight: 600; }

/* bilan : ce qui marche (point vert), ce qui stagne (point ambre) */
.puces.marche li, .puces.stagne li { display: flex; align-items: baseline; gap: 10px; color: var(--texte); }
.puces.marche li::before, .puces.stagne li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-1px); }
.puces.marche li::before { background: var(--vert); }
.puces.stagne li::before { background: var(--ambre); }

/* veille : alertes du rapport en rouge, décisions en évidence, fichiers et texte complet repliés */
.alertes-veille { list-style: none; display: grid; gap: 6px; margin: 16px 0 0; padding: 0; }
.alertes-veille li { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border: 1px solid var(--rouge-bord); border-radius: 8px; background: var(--rouge-fond); color: var(--rouge); font-size: 13.5px; font-weight: 500; }
.alertes-veille li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); transform: translateY(-1px); }
.actions-rapport { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 14px 0 4px; font-size: 13.5px; }
.console .action-forte { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--attention-bord); border-radius: 8px;
  background: var(--attention-fond); color: var(--attention-texte); font-weight: 500; text-decoration: none; }
.console .action-forte:hover { border-color: var(--attention); color: var(--attention-texte); }
.replie.rapport { margin: 6px 0 12px; }
.replie.rapport > summary { font-size: 13.5px; color: var(--texte); }
.liste.veilles .titre > .actions a { font-weight: 500; }
.liste.veilles .fichiers { margin: 2px 0 0; }
.liste.veilles .fichiers > summary { padding: 4px 0 0; font-size: 12px; font-weight: 400; color: var(--texte-3); }
.liste.veilles .fichiers .actions { margin-top: 4px; }
/* décisions de la veille : trait ambre sur celles qui attendent le propriétaire */
.liste.decisions-veille li { margin: 0 -20px; padding: 13px 20px 13px 17px; border-left: 3px solid transparent; }
.liste.decisions-veille li.statut-attente { border-left-color: var(--attention); }
.liste.decisions-veille li.statut-neutre .titre-decision { color: var(--texte-3); }
@media (max-width: 900px) {
  .alertes-liste li, .liste.decisions-veille li { margin: 0 -16px; padding-right: 16px; padding-left: 13px; }
  .liste.objectifs { display: block; }
}

/* Les réponses du propriétaire (23/10/2026, « comment dire qu'on a résolu ou lu ? ») : « Validée », « Refusée », « Plus d'actualité »
   sur les décisions du plan, « Vu, je m'en occupe » sur les alertes ; petits boutons sous l'élément, « Annuler » en texte */
.console .reponses { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.console form.marque { display: inline; margin: 0; }
.console .bouton-marque { font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; padding: 6px 10px; border: 1px solid var(--bord); border-radius: 6px;
  background: var(--panneau); color: var(--texte); cursor: pointer; }
.console .bouton-marque:hover { background: var(--survol-nav); }
.console .bouton-marque:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }
.console .bouton-marque.ok { border-color: var(--vert-bord); background: var(--vert-fond); color: var(--vert); }
.console .bouton-marque.discret { border-color: transparent; background: transparent; color: var(--texte-3); text-decoration: underline; padding-inline: 4px; }
.console .marque-faite { font-size: 12.5px; color: var(--texte-3); }
.console .alertes-liste li.vue .titre { color: var(--texte-3); }