/* ═══════════════════════════════════════════════════════════════════════════
   LA FEUILLE DE STYLE — le châssis (MANAGED par doctrine-core).

   Ce fichier appartient au core : il porte la structure de TOUT ce que le
   core rend — page, navigation, cartes, contrôles, tableaux, dialogues,
   composants. Une instance ne le modifie jamais ; elle déclare ses jetons
   dans web/instance.css (chargé APRÈS) et habille ses cartes locales dans
   web/cartes/*.css, en jetons (docs/method/methode.md, § 6). Rien ici ne
   nomme une instance, une de ses cartes ni une de ses clés.

   AUCUNE COULEUR DE MARQUE ICI. Les jetons attendus de l'instance :
   --bg --panel --panel2 --border --text --muted --accent
   --good --warn --bad --perime --serie-1…8 --police
   Facultatifs, avec repli sur ce contrat : --corail --bleu --bleu-clair
   --violet --orange --ombre.
   Les teintes dérivées se calculent (color-mix sur ces jetons) : une ombre
   est l'encre de l'instance diluée, jamais du noir posé en dur.

   La grammaire (mesurée sur la maquette validée) : bordure 1px partout,
   rayon 8px sur ce qui est dans le flux, AUCUNE ombre sur ce qui est dans
   le flux — l'ombre est le privilège de ce qui quitte le plan (menus,
   dialogues). Le survol ne déplace rien. La capsule est réservée à ce qui
   est ovale par nature.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --radius: 8px;
  /* Alias historiques, appelés par d'anciens styles : l'instance peut les
     redéfinir dans instance.css (chargé après, donc prioritaire). */
  --fg: var(--text);
  --border-strong: color-mix(in srgb, var(--text) 28%, transparent);
  --ombre-flottante: 0 4px 6px -1px color-mix(in srgb, var(--text) 6%, transparent),
                     0 12px 28px -8px color-mix(in srgb, var(--text) 16%, transparent);
}

* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--text);
  font: 14px/1.5 var(--police, -apple-system, "Segoe UI", Roboto, sans-serif);
  -webkit-font-smoothing: antialiased; }

/* ── L'en-tête historique : le châssis le vide dans la barre unique et le
   masque ; il reste stylé a minima pour l'instant où le script n'a pas
   encore tourné. ── */
/* L'en-tête d'instance ne s'affiche JAMAIS : c'est une réserve de pièces
   (marque, boutons propres à l'application) que le châssis déménage dans sa
   barre. Le masquer en JS seulement le laissait peint jusqu'à la réponse de
   /api/meta — l'ancien bandeau revenait une seconde à chaque rechargement.
   Ses pièces gardent leurs styles ci-dessous : elles servent, déplacées. */
header { display: none; }
.brand { display: flex; gap: 12px; align-items: center; }
.logo { color: var(--accent); font-size: 22px; }
h1 { font-size: 17px; }
h2 { font-size: 15px; }
h3 { font-size: 13.5px; }
.ctx { color: var(--muted); font-size: 12px; display: none; }
.actions { display: flex; gap: 10px; align-items: center; }

/* ── Les contrôles ──────────────────────────────────────────────────────── */
button { background: var(--accent); border: 0; color: var(--accent-encre, #fff);
  padding: 8px 14px; border-radius: calc(var(--radius) - 2px); cursor: pointer;
  font-weight: 600; font-family: inherit; }
button:hover { filter: brightness(1.08); }
button.ghost { background: transparent; border: 1px solid var(--border);
  color: var(--muted); padding: 6px 10px; font-size: 12px; line-height: 16px; }
button.ghost:hover { filter: none; border-color: var(--accent); color: var(--text); }
:is(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.refresh-status { color: var(--warn); font-size: 12px; }

/* ── LA BARRE — une seule, blanche, tout dedans ─────────────────────────── */
nav { display: flex; align-items: center; gap: 0; padding: 0 22px; flex-wrap: wrap;
  background: var(--panel); border-bottom: 1px solid var(--border); }
nav > a { color: var(--muted); text-decoration: none; padding: 15px 11px;
  font-weight: 500; font-size: 13.5px; line-height: 1; position: relative;
  white-space: nowrap; }
nav > a:hover { color: var(--text); }
nav > a.active { color: var(--text); font-weight: 600; }
nav > a.active::after, .nav-portes .porte.active > .porte-btn::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.cockpit-marque { display: inline-flex; align-items: center; margin-right: 14px; }
.cockpit-marque h1 { font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  white-space: nowrap; }
.cockpit-marque .ctx { display: none; }
.nav-portes .porte { position: relative; }
/* `font: 500 13.5px/1 inherit` n'était pas lu (le mot-clé `inherit` ne se
   glisse pas dans le raccourci) : toute porte s'affichait en gras, comme
   la porte ouverte. */
.nav-portes .porte-btn { display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1;
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); padding: 15px 11px; position: relative; border-radius: 0; }
.nav-portes .porte-btn:hover { color: var(--text); filter: none; }
.nav-portes .porte.active > .porte-btn { color: var(--text); font-weight: 600; }
.nav-portes .porte-chev { font-size: 9px; opacity: .6; }
.nav-portes .porte-menu { display: none; position: absolute; top: calc(100% + 4px);
  left: 0; z-index: 60; min-width: 210px; padding: 5px; background: var(--panel);
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--ombre-flottante); }
.nav-portes .porte.pop-ouvert > .porte-menu { display: block; }
.nav-portes .porte-menu .porte-q { font-size: 11px; line-height: 1.4;
  color: var(--muted); padding: 7px 10px 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.nav-portes .porte-menu a { display: block; padding: 8px 10px;
  border-radius: calc(var(--radius) - 2px); font-size: 13px;
  text-decoration: none; color: var(--text); }
.nav-portes .porte-menu a:hover { background: var(--panel2); }
.nav-portes .porte-menu a.active { font-weight: 600; }

/* La zone de droite : fraîcheur, icônes, compte. */
.cockpit-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pilule-fraicheur { position: relative; display: inline-flex; align-items: center;
  gap: 6px; padding: 5px 11px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--panel); font-size: 11.5px;
  font-weight: 500; color: var(--text); cursor: default;
  font-variant-numeric: tabular-nums; }
.pilule-fraicheur svg { width: 12px; height: 12px; color: var(--accent); }
/* L'attente : la même pilule, en sourdine — elle tient la place et ne
   prétend à aucune donnée tant que META n'est pas là. */
.pilule-attente { color: var(--muted); }
.pilule-attente svg { color: var(--muted); animation: tourne 1.1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pilule-attente svg { animation: none; } }
.pilule-fraicheur.alerte svg { color: var(--bad); }
/* La licence : la même capsule, en sourdine tant que la garantie tient (le
   numéro de version, rien de plus) ; en alerte, elle dit la suspension de la
   garantie sans rien arrêter — l'outil continue (ARCHITECTURE.md § 6). Les
   teintes se dérivent des jetons : aucune couleur posée ici. */
.pilule-licence { display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); font-size: 11.5px; font-weight: 500;
  color: var(--muted); cursor: default; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.pilule-licence.alerte { color: var(--bad); font-weight: 700;
  border-color: color-mix(in srgb, var(--bad) 55%, var(--border));
  background: color-mix(in srgb, var(--bad) 8%, var(--panel)); }
.pilule-licence:empty { display: none; }
.bulle { position: absolute; top: calc(100% + 8px); right: 0; width: 250px;
  padding: 9px 11px; border-radius: var(--radius); z-index: 70; text-align: left;
  background: var(--text); color: var(--panel); font: 400 11.5px/1.5 inherit;
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; }
:is(.pilule-fraicheur, .btn-icone):hover .bulle,
:is(.pilule-fraicheur, .btn-icone):focus-visible .bulle,
.pilule-fraicheur:focus-within .bulle { opacity: 1; visibility: visible; }
.btn-icone { position: relative; width: 30px; height: 30px; padding: 0;
  border-radius: calc(var(--radius) - 2px); cursor: pointer; box-sizing: border-box;
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.btn-icone:hover { border-color: var(--accent); filter: none; }
.btn-icone svg { width: 15px; height: 15px; }
.btn-compte { width: 30px; height: 30px; padding: 0; border-radius: 999px;
  cursor: pointer; box-sizing: border-box; flex: none;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font: 600 11px/1 inherit; display: inline-flex; align-items: center;
  justify-content: center; }
.btn-compte:hover { border-color: var(--accent); filter: none; }
.btn-compte svg { width: 15px; height: 15px; }
.btn-compte.anonyme { color: var(--muted); border-style: dashed; }
.compte { position: relative; }
.menu-compte { display: none; position: absolute; top: calc(100% + 6px); right: 0;
  width: 252px; padding: 5px; z-index: 80; background: var(--panel);
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--ombre-flottante); }
.compte.pop-ouvert .menu-compte { display: block; }
.menu-compte .qui { padding: 9px 10px 10px; }
.menu-compte .qui b { display: block; font-size: 13.5px; }
.menu-compte .qui span { display: block; font-size: 11.5px; color: var(--muted);
  margin-top: 1px; }
.menu-compte .etiquettes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.menu-compte .etq { font-size: 10px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 4px; color: var(--muted);
  border: 1px solid var(--border); }
.menu-compte hr { border: 0; border-top: 1px solid var(--border); margin: 4px -1px; }
.menu-compte .item { display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: calc(var(--radius) - 2px);
  background: transparent; font: inherit; font-size: 13px; color: var(--text);
  cursor: pointer; text-align: left; font-weight: 400; }
.menu-compte .item:hover { background: var(--panel2); filter: none; }
.menu-compte .item .ic { width: 14px; height: 14px; flex: none; color: var(--muted); }
.menu-compte .item .raccourci { margin-left: auto; font-size: 10.5px;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.menu-compte .avert { padding: 8px 10px; font-size: 11.5px; line-height: 1.5;
  color: var(--muted); }
.menu-compte .pastille { display: inline-grid; place-items: center; width: 14px;
  height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px;
  font: 700 9px/1 inherit; color: var(--panel); background: var(--warn); }

/* ── La connexion — quand les comptes sont la porte ─────────────────────── */
#connexion { position: fixed; inset: 0; z-index: 130; display: grid;
  place-items: center; background: var(--bg); }
#connexion form { width: min(360px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 26px 26px 22px; display: grid; gap: 10px; background: var(--panel);
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--ombre-flottante); }
#connexion h1 { font-size: 17px; margin: 0; }
#connexion p { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
#connexion label { display: grid; gap: 4px; font-size: 11.5px; color: var(--muted); }
#connexion input { font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); }
#connexion input:focus { border-color: var(--accent); outline: none; }
#connexion button { margin-top: 4px; padding: 9px 12px; border-radius: 7px; font-weight: 600; }
#connexion button:disabled { opacity: .6; cursor: wait; }
#connexion .erreur { min-height: 1.2em; font-size: 12px; color: var(--bad); }

/* ── « Trouver un chiffre » ─────────────────────────────────────────────── */
#rech-overlay { display: none; position: fixed; inset: 0; z-index: 140;
  background: color-mix(in srgb, var(--text) 45%, transparent);
  align-items: flex-start; justify-content: center; padding: 12vh 16px 0; }
.rech-boite { width: min(640px, 100%); max-height: 66vh; display: flex;
  flex-direction: column; overflow: hidden; border-radius: calc(var(--radius) + 6px);
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: var(--ombre-flottante); }
.rech-boite input { font: inherit; font-size: 16px; padding: 17px 19px; border: 0;
  border-bottom: 1px solid var(--border); outline: none; background: transparent;
  color: var(--text); }
.rech-res { overflow-y: auto; padding: 7px; }
.rech-res button { display: flex; width: 100%; gap: 12px; align-items: baseline;
  background: transparent; border: 0; border-radius: var(--radius);
  padding: 10px 12px; font: inherit; font-size: 13.5px; font-weight: 500;
  text-align: left; color: var(--text); cursor: pointer; }
.rech-res button:hover, .rech-res button.actif { background: var(--panel2);
  filter: none; }
.rech-res .rech-ou { margin-left: auto; font-size: 11.5px; font-weight: 400;
  color: var(--muted); white-space: nowrap; }
.rech-vide { padding: 15px 12px; font-size: 13px; color: var(--muted); }
.rech-pied { border-top: 1px solid var(--border); padding: 9px 19px;
  font-size: 11px; color: var(--muted); }

/* ── LE PLATEAU ─────────────────────────────────────────────────────────── */
main { padding: 24px 22px; display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 16px; max-width: 1500px; margin: 0 auto; }
.tab-note { grid-column: span 12;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-left: 4px solid var(--accent); border-radius: calc(var(--radius) + 2px);
  padding: 12px 16px; color: var(--text); font-size: 12.5px; line-height: 1.55; }
.tab-note strong { color: var(--accent); }
/* UN SEUL style d'intertitre : le titre appartient à ce qui le SUIT. */
.section-head, .surtitre, .a-regarder h2 { grid-column: span 12;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); border-bottom: 0;
  padding: 0; margin: 30px 0 12px; }
.section-head:first-child { margin-top: 0; }
/* Les sous-onglets : un SEGMENT — poids constant, la sélection se dit par
   le fond, le bouton ne change jamais de largeur. */
.subtab-nav { grid-column: span 12; display: inline-flex; justify-self: start;
  gap: 2px; padding: 3px; border-radius: calc(var(--radius) + 2px);
  background: var(--panel2); border: 1px solid var(--border); margin: 2px 0 4px; }
.subtab { border: 0; background: transparent; color: var(--muted);
  padding: 8px 14px; font-size: 13px; line-height: 1; font-weight: 500;
  border-radius: calc(var(--radius) - 2px); cursor: pointer; font-family: inherit;
  transition: color .12s, background .12s; }
.subtab:hover { color: var(--text); filter: none; }
.subtab.active { background: var(--panel); color: var(--text); font-weight: 500;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent); }

/* ── LA CARTE — plate, 8px, l'anatomie de la maquette ───────────────────── */
.card { background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 17px; grid-column: span 6;
  min-height: 0; box-shadow: none; }
.card.scalar { grid-column: span 3; }
.card.table { grid-column: span 12; }
.card.perime { box-shadow: inset 3px 0 0 var(--perime, var(--warn)); }
/* La ligne du haut : un LIBELLÉ, pas un titre — et à droite le delta puis
   le menu d'actions de la carte. */
.ck-tete { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 9px; }
.ck-label { font-size: 12.5px; font-weight: 500; color: var(--muted);
  line-height: 1.35; }
.ck-actions { display: inline-flex; align-items: center; gap: 6px; flex: none;
  position: relative; }
.ck-menu-btn { width: 22px; height: 22px; padding: 0; border: 0;
  background: transparent; color: var(--muted); cursor: pointer;
  border-radius: calc(var(--radius) - 2px); font: 600 14px/1 inherit; flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.ck-menu-btn:hover { background: var(--panel2); color: var(--text); filter: none; }
.ck-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px);
  z-index: 60; min-width: 210px; padding: 5px; background: var(--panel);
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--ombre-flottante); }
.ck-actions.pop-ouvert .ck-menu { display: block; }
.ck-menu-meta { padding: 7px 10px 8px; font-size: 11px; color: var(--muted);
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
  font-variant-numeric: tabular-nums; }
.ck-item { display: block; width: 100%; text-align: left; padding: 8px 10px;
  border: 0; border-radius: calc(var(--radius) - 2px); background: transparent;
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.ck-item:hover { background: var(--panel2); filter: none; }
/* Le chiffre, l'unité sur la ligne de base, le delta en pilule sobre. */
.big { display: flex; align-items: baseline; gap: 6px; font-size: 29px;
  font-weight: var(--num-poids, 600); letter-spacing: -1px; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums; }
.big .unit { font-size: 13px; font-weight: 500; letter-spacing: 0;
  color: var(--muted); margin: 0; }
.subtitle { color: var(--muted); font-size: 11.5px; line-height: 1.45;
  margin-top: 9px; }
.delta { display: inline-flex; align-items: center; font-size: 11.5px;
  font-weight: 500; padding: 2px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums; border: 1px solid var(--border);
  color: var(--muted); }
.delta.good { color: var(--good);
  border-color: color-mix(in srgb, var(--good) 34%, transparent); background: transparent; }
.delta.bad { color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 30%, transparent); background: transparent; }
.card .desc { color: var(--muted); font-size: 12px; line-height: 1.6;
  margin-top: 10px; }
.card .desc[hidden] { display: none; }
.card .meta-line { display: flex; justify-content: space-between;
  align-items: center; color: var(--muted); font-size: 10.5px; margin-top: 10px; }
.sans-reponse { background: var(--panel2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin: 4px 0 2px;
  font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.sans-reponse strong { display: block; color: var(--text); font-weight: 700;
  font-size: 13.5px; margin-bottom: 3px; }
.chart-wrap { position: relative; height: 260px; }

/* ── DIALOGUES, PRÉSENTATION, CONSOLE SQL — les surfaces qui quittent le
   plan : elles portent l'ombre, le flux reste plat. ── */
/* ------ Dialog « Comprendre ce KPI » ------ */
.card h3 { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }

#info-overlay { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--text) 50%, transparent); z-index: 100; align-items: center; justify-content: center; }
.info-dialog { background: var(--panel); border: 1px solid var(--border); box-shadow: var(--ombre-flottante); border-radius: calc(var(--radius) + 6px); width: min(680px, 94vw); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.info-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.info-head h2 { font-size: 15px; }
.info-body { padding: 16px 18px; overflow-y: auto; font-size: 13.5px; line-height: 1.6; }
.info-section { margin-bottom: 16px; }
.info-section h4 { font-size: 12px; color: var(--accent); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.info-date { color: var(--muted); font-size: 11.5px; margin-top: 8px; font-style: italic; }
/* La carte dépliée : on vérifie un chiffre sans quitter sa ligne —
   tout ce qui le justifie au même endroit (maquette du 01/09/2026). */
#kpi-overlay { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--text) 50%, transparent); z-index: 110; align-items: center; justify-content: center; }
.kpi-dialog { background: var(--panel); border: 1px solid var(--border); box-shadow: var(--ombre-flottante); border-radius: calc(var(--radius) + 6px); width: min(1060px, 94vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.kpi-pied { color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.kpi-pied p + p { margin-top: 6px; }
/* L'explication ⓘ dans la fenêtre : lisible comme du texte, pas comme une
   note de bas de page — c'est souvent ce qu'on est venu chercher. */
.kpi-pied h4 { font-size: 11px; color: var(--accent); letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 4px; }
.kpi-pied p:has(h4) { color: var(--text); font-size: 13px; line-height: 1.6;
  margin-top: 12px; }
.info-tech summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.info-tech p { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* ------ Mode présentation ------ */
body.pres-open { overflow: hidden; }
#pres-overlay { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 120; flex-direction: column; }
.pres-top { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--border); }
.pres-context { color: var(--text); font-size: 14px; font-weight: 700; }
.pres-counter { color: var(--muted); font-size: 13px; margin-left: auto; }
.pres-stage { flex: 1; min-height: 0; display: flex; gap: 28px; padding: 22px 80px 26px; }
.pres-left { flex: 1.4; min-width: 0; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.pres-left.grid { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.pres-left.grid .pres-section { grid-column: 1 / -1; }
.pres-section { flex: none; color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pres-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); padding: 20px 24px; }
.pres-kpi h3 { font-size: 18px; margin-bottom: 14px; }
.pres-kpi .big { font-size: 54px; }
.pres-kpi .big .unit { font-size: 20px; }
.pres-kpi .subtitle { font-size: 14px; margin-top: 8px; }
.pres-kpi .delta { font-size: 16px; }
.pres-kpi.solo { flex: 1; min-height: 320px; display: flex; flex-direction: column; }
.pres-kpi.solo .pres-kpi-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pres-kpi.solo .chart-wrap { flex: 1; height: auto; min-height: 280px; }
#pres-overlay .table-scroll { max-height: calc(100vh - 320px); }
#pres-overlay table { font-size: 14px; }
.pres-right { flex: 1; min-width: 0; max-width: 620px; overflow-y: auto; border-left: 1px solid var(--border); padding-left: 28px; font-size: 15.5px; line-height: 1.7; }
.pres-exp { margin-bottom: 26px; }
.pres-exp h3 { font-size: 15px; margin-bottom: 8px; color: var(--text); }
.pres-exp h4 { font-size: 12.5px; color: var(--accent); letter-spacing: .05em; text-transform: uppercase; margin: 14px 0 6px; }
.pres-exp h4:first-child { margin-top: 0; }
.pres-exp p { margin-bottom: 4px; }
.pres-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--border); color: var(--text); font-size: 28px; line-height: 1; padding: 0; z-index: 121; }
.pres-arrow:hover { border-color: var(--accent); color: var(--accent); filter: none; }
#pres-prev { left: 14px; }
#pres-next { right: 14px; }

/* ------ Console SQL ------ */
#sql-overlay { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--text) 65%, transparent); z-index: 100; align-items: center; justify-content: center; }
.sql-dialog { background: var(--panel); border: 1px solid var(--border); box-shadow: var(--ombre-flottante); border-radius: calc(var(--radius) + 6px); width: min(1280px, 94vw); height: min(820px, 90vh); display: flex; flex-direction: column; overflow: hidden; }
.sql-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.sql-hint { color: var(--muted); font-size: 11.5px; margin-left: 10px; }
.sql-body { flex: 1; display: flex; min-height: 0; }
.sql-tree { width: 290px; flex: none; overflow: auto; border-right: 1px solid var(--border); padding: 10px 8px; font-size: 12px; }
.sql-tree details { margin-bottom: 2px; }
.sql-tree summary { cursor: pointer; padding: 3px 6px; border-radius: 6px; list-style-position: inside; }
.sql-tree summary:hover { background: var(--panel2); }
.sql-tree .sql-table { margin-left: 14px; }
.sql-tree .sql-table > summary { color: var(--text); }
.sql-insert { background: transparent; border: 1px solid var(--border); color: var(--accent); padding: 0 6px; font-size: 11px; border-radius: 5px; margin-left: 4px; cursor: pointer; }
.sql-insert:hover { border-color: var(--accent); }
.sql-cols { margin: 2px 0 6px 26px; }
.sql-col { color: var(--muted); padding: 1px 6px; border-radius: 5px; cursor: pointer; }
.sql-col:hover { background: var(--panel2); color: var(--text); }
.dim { color: var(--muted); font-size: 10.5px; }
.sql-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 12px 14px; gap: 10px; }
#sql-input { height: 130px; flex: none; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; resize: vertical; }
#sql-input:focus { border-color: var(--accent); }
.sql-actions { display: flex; align-items: center; gap: 10px; }
.sql-actions .ghost { font-size: 12px; padding: 6px 12px; }
.sql-info { color: var(--muted); font-size: 11.5px; }
.sql-result { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.sql-scroll { max-height: none; flex: 1; border: 1px solid var(--border); border-radius: 9px; }

/* ── LES TABLEAUX — 36px de ligne, survol, filet allégé ─────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 10px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--panel); }
td { padding: 8px 10px; white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
tbody tr:not(.grp):hover > td { background: var(--panel2); }
.table-scroll { max-height: 420px; overflow: auto; }
td a { color: var(--accent); text-decoration: none; }
td a:hover { text-decoration: underline; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; margin-bottom: 8px; }
.filter-chip .chip-x { background: transparent; border: 0; color: var(--muted);
  cursor: pointer; padding: 0 2px; font-size: 12px; }
.filter-chip .chip-x:hover { color: var(--bad); filter: none; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 10px; }
.pager .pg-info { color: var(--muted); font-size: 11.5px; }
.pager button { font-size: 12px; padding: 4px 12px;
  border-radius: calc(var(--radius) - 2px); }
.error { color: var(--bad); font-size: 12px; padding: 8px 0; }
.loading { color: var(--muted); font-style: italic; }
.dim { color: var(--muted); font-size: 10.5px; }

/* ── Le magasin, dans la carte dépliée ──────────────────────────────────── */
/* ── La carte dépliée — les composants (maquette « huit briques ») ── */
.d-head { display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px;
  border-bottom: 1px solid var(--border); }
.d-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.d-head .per { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.d-id { min-width: 0; }
.d-num { margin-left: auto; text-align: right; flex: none; }
.d-num b { display: block; font-size: 32px; font-weight: 700; letter-spacing: -1.1px;
  line-height: 1.05; font-variant-numeric: tabular-nums; }
.d-num .unit { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.d-num > span { font-size: 12px; color: var(--muted); }
/* Le composant ne doit RIEN hériter : boîte et padding explicites. */
.x { width: 28px; height: 28px; padding: 0; border-radius: 7px;
  border: 1px solid var(--border); background: var(--panel2); color: var(--muted);
  display: grid; place-items: center; cursor: pointer; font-size: 14px; flex: none; }
.x:hover { color: var(--text); }
.d-corps { overflow-y: auto; min-height: 0; }
.d-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.d-left { border-right: 1px solid var(--border); min-width: 0; }
.d-right { min-width: 0; }
.d-block { padding: 18px 22px; border-bottom: 1px solid var(--border); }
.d-left > .d-block:last-child, .d-right > .d-block:last-child { border-bottom: 0; }
.d-lab { font: 600 10.5px/1 var(--police); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 11px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-vue[hidden] { display: none; }
.chart-note { font-size: 11.5px; color: var(--muted); margin-top: 9px; line-height: 1.5; }
/* La bascule Graphe / Tableau — un segment, pas des boutons. */
.tog { display: inline-flex; gap: 2px; padding: 2px; background: var(--panel2);
  border: 1px solid var(--border); border-radius: 7px; }
.tog button { font: 500 11.5px/1 var(--police); padding: 5px 10px; border: 0;
  border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.tog button[aria-selected="true"] { background: var(--panel); color: var(--text);
  font-weight: 600; }
/* Le tableau de la carte dépliée (jumeau, historique). */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font: 500 11px/1 var(--police); color: var(--muted);
  padding: 0 8px 8px; border-bottom: 1px solid var(--border); }
.tbl td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.tbl td.n { font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.def-change td { border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 6%, transparent); }
.carte-depliee .table-scroll { max-height: 300px; overflow-y: auto; }
/* La provenance : clé/valeurs, puis le code sous dépliant. */
.meta-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px;
  font-size: 12.5px; margin: 0; }
.meta-kv dt { color: var(--muted); }
.meta-kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.prov { margin-top: 11px; }
.prov summary { cursor: pointer; font: 500 12.5px/1.4 var(--police);
  color: var(--accent); list-style: none; padding: 2px 0; }
.prov summary::-webkit-details-marker { display: none; }
.prov summary::before { content: "▸ "; }
.prov[open] summary::before { content: "▾ "; }
.prov .in { margin-top: 11px; }
.prov pre { padding: 12px 14px; overflow: auto; max-height: 380px;
  font: 11.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: var(--radius); }
/* Les notes signées : avatar du badge, en-tête, texte. */
.ann { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.ann:last-of-type { border-bottom: 0; }
.av { width: 25px; height: 25px; padding: 0; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--border); display: grid;
  place-items: center; flex: none;
  font: 600 9.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); }
.ann-b { min-width: 0; flex: 1; }
.ann-b .hd { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.ann-b .hd b { color: var(--text); font-weight: 600; }
.ann-b .hd u { text-decoration: none;
  font: 400 11px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.ann-b p { margin: 0; font-size: 12.5px; line-height: 1.55; }
.note-btn { background: transparent; border: 0; color: var(--muted);
  cursor: pointer; padding: 0 3px; font-size: 12px; }
.note-btn:hover { color: var(--text); filter: none; }
.ann-new { display: grid; gap: 8px; margin-top: 12px; }
.ann-new textarea, .ann-new input { font: inherit; font-size: 12.5px;
  color: var(--text); background: var(--panel); border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 11px; resize: vertical; min-width: 0; }
.ann-new textarea::placeholder, .ann-new input::placeholder { color: var(--muted); }
.ann-new-pied { display: flex; gap: 8px; }
.ann-new-pied input { flex: 1; }
.ann-b textarea { width: 100%; font: inherit; font-size: 12.5px;
  color: var(--text); background: var(--panel); border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 11px; margin-bottom: 6px; }
/* Le pied d'actions : copier (avec la période), CSV, le domaine, la version. */
.d-foot { display: flex; align-items: center; gap: 8px; padding: 12px 22px;
  border-top: 1px solid var(--border); flex-wrap: wrap; }
.d-foot .sp { margin-left: auto; font: 600 10px/1 var(--police);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.btn { font: 500 12.5px/1 var(--police); padding: 8px 13px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--panel2); color: var(--text);
  cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--accent); filter: none; }
.btn.solid { background: var(--text); color: var(--panel); border-color: var(--text); }
@media (max-width: 860px) {
  .d-cols { grid-template-columns: 1fr; }
  .d-left { border-right: 0; border-bottom: 1px solid var(--border); }
}
.magasin-note { color: var(--muted); font-size: 11.5px; line-height: 1.5;
  margin-bottom: 8px; }
/* Le badge de couloir : une valeur hors de sa bande déclarée. */
.ck-couloir { display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent);
  white-space: nowrap; }

/* ── « À regarder » et les domaines (le cap) ────────────────────────────── */
.a-regarder { grid-column: span 12; }
.a-regarder h2 { margin: 0 0 10px; }
.ar-ligne { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px;
  border-radius: calc(var(--radius) + 2px); margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--warn) 36%, transparent);
  background: color-mix(in srgb, var(--warn) 7%, transparent); }
.ar-ligne .ar-point { width: 6px; height: 6px; border-radius: 50%; flex: none;
  margin-top: 7px; background: var(--warn); }
.ar-ligne p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.ar-ligne a { color: var(--text); font-weight: 600; white-space: nowrap; }
.domaines-titre { grid-column: span 12; font-size: 17px; font-weight: 700;
  letter-spacing: -.2px; margin: 26px 0 0; }
.domaines { grid-column: span 12; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.domaine { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px;
  padding: 15px 17px; border-radius: calc(var(--radius) + 2px); cursor: pointer;
  text-align: left; font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--border); transition: border-color .15s; }
.domaine:hover { border-color: var(--accent); transform: none; box-shadow: none;
  filter: none; }
.domaine .do-t { font-weight: 700; font-size: 14px; }
.domaine .do-q { grid-column: 1; font-size: 12.5px; line-height: 1.45;
  color: var(--muted); }
.domaine .do-f { grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 17px; color: var(--muted); }

/* ── Le bandeau de santé et le voyant de poste ──────────────────────────── */
.bandeau-sante { display: flex; flex-direction: column; gap: 6px;
  background: var(--bad); color: var(--panel); padding: 12px 16px;
  border-radius: calc(var(--radius) + 2px); margin: 14px 22px 2px; font-size: 14px; }
.bandeau-sante[hidden] { display: none; }
.bs-titre { font-weight: 800; font-size: 15px; display: flex;
  align-items: center; gap: 8px; }
.bs-point { width: 10px; height: 10px; border-radius: 50%; background: var(--panel);
  flex: none; animation: bs-pulse 1.6s ease-in-out infinite; }
@keyframes bs-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.bs-motifs { margin: 0; padding-left: 20px; }
.bs-motifs li { margin: 2px 0; }
.bandeau-sante a { color: var(--panel); text-decoration: underline; font-weight: 700; }
.voyant-cache { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 14px 22px 0; padding: 7px 13px; font-size: 11.5px;
  border-radius: var(--radius); background: transparent;
  border: 1px solid var(--border); color: var(--muted); }
.voyant-cache[hidden] { display: none; }
.vc-point { width: 6px; height: 6px; border-radius: 50%;
  background: var(--perime, var(--warn)); flex: none; }
.vc-btn { font: 600 11.5px/16px inherit; cursor: pointer; background: transparent;
  border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 3px 11px; }
.vc-btn:hover { border-color: var(--accent); color: var(--text); filter: none; }
.vc-btn:disabled { opacity: .7; cursor: progress; }
.vc-lien { font-size: 11.5px; color: var(--muted); }

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

/* ═══════════════════════════════════════════════════════════════════════════
   ⑨ ROADMAP — surface de présentation en réunion.
   Couleurs : des jetons, aucune couleur de marque en dur.
   Parti pris : aucun tableau et aucun scroll interne — des BOARDS de cartes
   qui se lisent en un coup d'œil et se projettent en réunion.
   ═══════════════════════════════════════════════════════════════════════════ */
.card.roadmap, .card.board, .card.onglets, .card.charge,
.card.orgchart { grid-column: span 12; }

/* ── Les 4 chiffres de tête : l'anatomie vit désormais dans le socle
   (ck-tete / ck-label / big) — l'ancien réordonnancement par h3 et le
   cercle décoratif sont retirés avec elle. ── */
/* ── La frise ───────────────────────────────────────────────────────────── */
.rm-frise { position: relative; font-size: 12px; }
.rm-ligne, .rm-entete { display: grid; grid-template-columns: var(--label-w) 1fr; align-items: center; gap: 14px; }
.rm-entete { margin-bottom: 10px; }
.rm-piste { display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: center; min-height: 30px; }
.rm-cell { grid-row: 1; height: 100%; border-left: 1px solid var(--border); }
.rm-cell.now { background: color-mix(in srgb, var(--corail, var(--warn)) 13%, transparent); border-left: 2px solid var(--corail, var(--warn)); }
.rm-mois-row { min-height: 40px; }
.rm-mois { grid-row: 1; text-align: center; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.25; text-transform: capitalize; }
.rm-mois .an { font-size: 9.5px; opacity: .6; font-weight: 500; }
.rm-mois.now { color: var(--corail, var(--warn)); font-weight: 700; }
.rm-legende { color: var(--muted); font-size: 11px; font-style: italic; }

.rm-cat { display: flex; align-items: center; gap: 9px; margin: 18px 0 6px; color: var(--text);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rm-pastille { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: none; }
.rm-cat-n { color: var(--muted); font-weight: 500; letter-spacing: 0; font-size: 11px; }
.rm-titre { color: var(--text); font-size: 12.5px; font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; padding-left: 20px; }

/* Barres en CAPSULE */
.rm-barre { grid-row: 1; height: 24px; border-radius: 999px; display: flex; align-items: center;
  justify-content: flex-end; gap: 6px; padding: 0 10px; cursor: default;
  transition: transform .12s, box-shadow .12s; box-shadow: 0 1px 3px rgba(0, 0, 0, .10); }
.rm-barre:hover { transform: translateY(-1px) scale(1.012); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.rm-barre.av { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.rm-barre.ap { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.rm-barre.st-en_cours { background: var(--c); }
.rm-barre.st-suivi { background: color-mix(in srgb, var(--c) 72%, white); }
.rm-barre.st-livre { background: color-mix(in srgb, var(--c) 34%, white); box-shadow: none; }
.rm-barre.st-livre::before { content: '✓'; margin-right: auto; color: var(--c); font-weight: 800; font-size: 12px; }
.rm-barre.st-prevu { background: color-mix(in srgb, var(--c) 12%, white); border: 1.5px dashed var(--c); box-shadow: none; }
.rm-barre.st-pause { background: repeating-linear-gradient(45deg, var(--panel2), var(--panel2) 5px, transparent 5px, transparent 10px);
  border: 1.5px solid var(--border); box-shadow: none; }
.rm-barre.st-abandonne { background: transparent; border: 1px solid var(--border); opacity: .5; box-shadow: none; }
.rm-taille { font-size: 10px; font-weight: 800; color: #fff; letter-spacing: .03em; }
/* La charge SUR la barre : « 120 JO · 3 pers. ». `min-width: 0` + ellipse pour
   qu'une barre d'un seul mois tronque proprement au lieu de déborder. Rien
   n'est écrit quand l'équipe n'est pas renseignée : sur une roadmap sans
   responsables, ce serait autant de fois le même bruit. Le trou se signale
   au bon endroit — la ligne « NON chiffré » de la synthèse, qui les nomme. */
.rm-charge { font-size: 10px; font-weight: 600; color: #fff; opacity: .92;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  font-variant-numeric: tabular-nums; }
.rm-barre.st-prevu .rm-taille, .rm-barre.st-pause .rm-taille,
.rm-barre.st-livre .rm-taille, .rm-barre.st-abandonne .rm-taille,
.rm-barre.st-prevu .rm-charge, .rm-barre.st-pause .rm-charge,
.rm-barre.st-livre .rm-charge, .rm-barre.st-abandonne .rm-charge {
  color: var(--text); opacity: .75; }
/* Piloté par un tiers */
.rm-barre.ext { outline: 2px dotted var(--violet, var(--serie-3)); outline-offset: 2px; }
.rm-barre.ext::after { content: 'EXT'; font-size: 8.5px; font-weight: 800; color: #fff; opacity: .9; }
.rm-barre.st-prevu.ext::after { color: var(--violet, var(--serie-3)); opacity: 1; }

.rm-pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px;
  padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.rm-lg { display: inline-flex; align-items: center; gap: 6px; }
.rm-lg::before { content: ''; width: 20px; height: 11px; border-radius: 999px; background: var(--muted); }
.rm-lg.st-en_cours::before { background: var(--bleu, var(--serie-1)); }
.rm-lg.st-suivi::before { background: color-mix(in srgb, var(--bleu, var(--serie-1)) 72%, white); }
.rm-lg.st-prevu::before { background: color-mix(in srgb, var(--bleu, var(--serie-1)) 12%, white); border: 1.5px dashed var(--bleu, var(--serie-1)); }
.rm-lg.st-livre::before { background: color-mix(in srgb, var(--bleu, var(--serie-1)) 34%, white); }
.rm-lg.st-pause::before { background: repeating-linear-gradient(45deg, var(--panel2), var(--panel2) 4px, transparent 4px, transparent 8px); border: 1px solid var(--border); }
.rm-sep { flex: 1; }

/* Carte de détail (frise, boards, plan de charge) : survol = aperçu, clic = épinglé */
.rm-carte { position: absolute; z-index: 20; width: 400px; max-width: 92%; background: var(--panel);
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .20); }
/* Le pilotage complet d'une initiative peut être long : il défile ici, ce qui
   borne la hauteur de la carte (donc son placement) et garde le ✕ au coin. */
.rm-carte-in { max-height: min(62vh, 540px); overflow-y: auto; }
.rm-carte-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-left: 4px solid; padding-left: 11px; margin-bottom: 10px; padding-right: 22px; }
.rm-carte-head strong { font-size: 14px; }
/* L'état de la ligne, juste sous le titre : créneau et étapes à gauche,
   échéance à droite — la date se cherche toujours au même endroit. */
.rm-avct { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; font-size: 11.5px; margin-bottom: 9px; }
.rm-pourquoi { color: var(--text); font-size: 12.5px; line-height: 1.55; margin-bottom: 10px; }
.rm-carte-metr { margin-bottom: 10px; padding-top: 8px; border-top: 1px solid var(--border); }

.rm-carte a { color: var(--accent); text-decoration: none; font-weight: 600; }
.rm-carte a:hover { text-decoration: underline; }

/* ── Jetons partagés (chips, métriques, étapes) ─────────────────────────── */
.rm-chip { background: var(--panel2); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 10px; font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.rm-chip.ext { color: var(--violet, var(--serie-3)); border-color: color-mix(in srgb, var(--violet, var(--serie-3)) 45%, transparent); background: color-mix(in srgb, var(--violet, var(--serie-3)) 10%, transparent); }
.rm-chip.st-en_cours { color: color-mix(in srgb, var(--corail, var(--warn)) 70%, var(--text)); border-color: color-mix(in srgb, var(--corail, var(--warn)) 50%, transparent); background: color-mix(in srgb, var(--corail, var(--warn)) 14%, transparent); }
.rm-chip.st-livre { color: var(--bleu, var(--serie-1)); border-color: color-mix(in srgb, var(--bleu, var(--serie-1)) 40%, transparent); background: color-mix(in srgb, var(--bleu, var(--serie-1)) 10%, transparent); }

.rm-step { font-size: 12px; line-height: 1.5; padding: 2px 0; color: var(--text); }
.rm-step.done { color: var(--muted); text-decoration: line-through; opacity: .6; font-size: 11px; }
.rm-step.next { font-weight: 600; }
.rm-t-muted { color: var(--muted); font-style: italic; opacity: .85; }
.rm-metr { font-size: 12px; line-height: 1.5; padding: 2px 0; }
.rm-metr-lib { color: var(--muted); }
.rm-metr strong { color: var(--text); font-weight: 700; }
.rm-live { color: var(--bleu, var(--serie-1)); font-size: 10px; vertical-align: middle; }
.rm-live.off { color: var(--muted); opacity: .55; }
.rm-metr-src { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
  margin-left: 7px; opacity: .8; font-weight: 600; }
.rm-delta { color: var(--good); font-size: 11px; font-weight: 700; }
.rm-dl { font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.rm-dl.retard { color: var(--bad); }

/* ── BOARD : le composant qui remplace les tableaux ─────────────────────── */
/* ⚠ Le conteneur ne doit PAS s'appeler « board » : la carte porte déjà la
   classe du TYPE de KPI (card board), et la grille s'appliquerait à elle. */
.rm-board { display: grid; gap: 16px; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); align-items: start; }
.rm-bcol { min-width: 0; }
.rm-bcol-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 9px;
  margin-bottom: 12px; border-bottom: 2px solid var(--c, var(--border)); }
.rm-bcol-head .pt { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--muted)); flex: none; }
.rm-bcol-head h4 { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.rm-bcol-head .n { margin-left: auto; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.rm-bcol-head .somme { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.bcards { display: flex; flex-direction: column; gap: 10px; }
.bcard { background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; box-shadow: var(--ombre, 0 0 transparent); border-left: 4px solid var(--c, var(--border));
  transition: transform .12s, box-shadow .12s; }
.bcard:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .11); }
.bcard-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.bcard h5 { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--text); flex: 1; min-width: 0; }
.bcard .obj { color: var(--muted); font-size: 11.5px; font-style: italic; line-height: 1.45; margin-bottom: 8px; }
.bcard .pourquoi { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.bcard-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.bcard-bloc { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 8px; }
.bcard-pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 8px; margin-top: 9px; }
.bcard-resp { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.bcard-resp .ini { width: 20px; height: 20px; border-radius: 50%; background: var(--c, var(--accent));
  color: #fff; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.bcard-pied .rm-dl { margin-left: auto; }
/* Colonne compacte : des libellés, pas des fiches. Divise la hauteur par ~3
   sur les listes longues (rétrospective, backlog) — objectif « sans scroll ». */
.rm-bcol.compact .bcards { gap: 6px; }
.rm-bcol.compact .bcard { padding: 7px 11px; border-radius: 10px; border-left-width: 3px; box-shadow: none; }
.rm-bcol.compact .bcard:hover { transform: none; box-shadow: var(--ombre, 0 0 transparent); }
.rm-bcol.compact .bcard-head { margin-bottom: 0; }
.rm-bcol.compact .bcard h5 { font-size: 12px; font-weight: 600; line-height: 1.3; }
.rm-bcol.compact .bcard-chips { margin: 5px 0 0; gap: 4px; }
.rm-bcol.compact .rm-chip { font-size: 9.5px; padding: 1px 7px; }
.rm-bcol.compact .pourquoi { display: none; }
/* Carte survolable : on annonce l'interaction sans alourdir le repos. */
.bcard.surv { cursor: help; }
.bcard.surv:hover { border-color: var(--c); box-shadow: 0 4px 18px rgba(0,0,0,.28); }

/* Sorti du plan : présent, mais qui ne vole pas la vedette au livré. */
.rm-sortis { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rm-sortis-t { width: 100%; color: var(--muted); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.rm-parque { display: inline-flex; align-items: baseline; gap: 6px; cursor: help;
  padding: 3px 10px; border-radius: 11px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  color: var(--muted); font-size: 11.5px; }
.rm-parque:hover { color: var(--fg); border-color: var(--muted); }
.rm-parque em { font-style: normal; opacity: .6; font-size: 10px; }

/* Détail au survol : les étapes du chantier telles que Notion les porte. */
.rm-carte-steps { margin: 6px 0; display: grid; gap: 2px; }

/* Le pilotage du lundi en tableau : on descend la colonne « prochaine étape »,
   l'œil ne saute pas d'un bloc à l'autre comme avec des cartes. */
.rm-t-init { display: flex; align-items: baseline; gap: 7px; }
.rm-t-init strong { font-size: 12.5px; line-height: 1.35; }
.rm-pt { width: 8px; height: 8px; border-radius: 50%; background: var(--c);
  flex: 0 0 8px; }
.rm-t-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 3px 15px; }
.rm-t-init + .rm-t-chips + .rm-t-muted { margin-left: 15px; display: block; }
.rm-t-alerte { color: var(--bad); font-size: 11px; margin-top: 5px; line-height: 1.4; }
.rm-t-resp { font-size: 11.5px; white-space: nowrap; }
/* Largeurs FIXÉES : laissées libres, les colonnes s'étalaient à 2400 px pour
   1680 disponibles. L'étape du lundi prend la plus large part, l'échéance la
   plus étroite — c'est l'ordre d'importance du rituel. */
/* Pas de scroll interne : le lundi, on descend la liste ENTIÈRE d'un regard.
   Un cadre qui défile oblige à chercher ce qui reste dessous — exactement ce
   qu'un rituel hebdomadaire ne doit pas demander. */
.rm-vue-pilotage .table-scroll { max-height: none; overflow: visible; }
.rm-vue-pilotage table { table-layout: fixed; width: 100%; }
/* Les tableaux du BI sont en `nowrap` (colonnes de chiffres) ; celui-ci porte
   du TEXTE, il doit revenir à la ligne — sans ça les cellules se chevauchent. */
.rm-vue-pilotage td, .rm-vue-pilotage td * { white-space: normal; }
.rm-vue-pilotage td { vertical-align: top; overflow-wrap: anywhere; }
.rm-vue-pilotage th:nth-child(1), .rm-vue-pilotage td:nth-child(1) { width: 24%; }
.rm-vue-pilotage th:nth-child(2), .rm-vue-pilotage td:nth-child(2) { width: 32%; }
.rm-vue-pilotage th:nth-child(3), .rm-vue-pilotage td:nth-child(3) { width: 26%; }
.rm-vue-pilotage th:nth-child(4), .rm-vue-pilotage td:nth-child(4) { width: 11%; }
.rm-vue-pilotage th:nth-child(5), .rm-vue-pilotage td:nth-child(5) { width: 7%; }

/* La charge en jours ouvrés : le chiffre doit se lire avant le texte qui
   l'explique. `fort` = le semestre ne rentre pas ; `manque` = pas chiffrable. */
.rm-jo { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.rm-jo.fort { color: var(--bad); }
.rm-jo.manque { color: var(--muted); font-size: 13px; font-weight: 600; }

/* Onglets de vue DANS une carte : la même donnée sous deux angles, à la façon
   des vues d'une base Notion. Volontairement plus discrets que les sous-onglets
   de page — c'est une bascule de lecture, pas un changement de sujet. */
.rm-vues { display: flex; gap: 6px; margin-bottom: 12px; }
.rm-vue { background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.rm-vue:hover { color: var(--fg); border-color: var(--accent); }
.rm-vue.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Séparateur de catégorie : le pilotage porte les mêmes en-têtes que la frise,
   dans le même ordre — c'est ce qui rend la bascule entre les deux gratuite. */
tr.grp td { background: var(--bg); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
  padding: 10px 8px 6px; border-bottom: 1px solid var(--border); }
tr.grp .rm-pt { display: inline-block; vertical-align: middle; margin-right: 7px; }
.rm-grp-n { margin-left: 8px; color: var(--muted); font-weight: 400;
  letter-spacing: 0; text-transform: none; }
/* Le libellé d'un KPI mène au KPI : une métrique doit être vérifiable. */
a.rm-metr-lib { color: inherit; text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 2px; cursor: pointer; }
a.rm-metr-lib:hover { color: var(--accent); }

/* Carte épinglée : elle reste, donc on peut lancer une vidéo, cliquer un lien
   Jira, la fermer. Sans épinglage, tout média serait décoratif. */
.rm-carte.epingle { box-shadow: 0 12px 40px rgba(0,0,0,.45);
  border-color: var(--accent); max-height: 70vh; overflow-y: auto; }
.rm-carte-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1;
  background: var(--border); color: var(--fg); display: none; }
.rm-carte.epingle .rm-carte-x { display: block; }
.rm-carte-x:hover { background: var(--accent); color: #fff; }
.surv-actif { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Plan de charge : grille personne × mois. Le CREUX doit se voir autant que
   la surcharge — c'est lui qui dit à qui confier la ligne suivante. */
.ch-legende { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px;
  color: var(--muted); font-size: 11px; align-items: center; }
.ch-legende span { display: inline-flex; align-items: center; gap: 5px; }
.ch-legende i.lg { width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid var(--border); display: inline-block; }
.ch-grille { display: grid; gap: 3px; }
.ch-ligne { display: grid; grid-template-columns: var(--lw) 1fr; gap: 8px;
  align-items: center; }
.ch-nom { font-size: 12px; font-weight: 600; text-align: right; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ch-piste { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; }
.ch-head .ch-mois { text-align: center; font-size: 10px; color: var(--muted);
  line-height: 1.25; }
.ch-head .ch-mois.now { color: var(--accent); font-weight: 700; }
.ch-mois .an { opacity: .6; font-size: 9px; }
.ch-cell { height: 30px; border-radius: 5px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 700; }
.ch-cell[data-survol] { cursor: help; }
.ch-cell[data-survol]:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Une ligne de la carte de survol : pastille de catégorie + le chantier. */
.ch-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0;
  border-top: 1px solid var(--border); font-size: 12px; line-height: 1.4; }
.ch-item:first-of-type { border-top: 0; }
.ch-item .rm-pt { margin-top: 5px; }
.ch-cell.now { outline: 2px solid var(--accent); outline-offset: -2px; }
.ch-cell.libre { background: repeating-linear-gradient(45deg,
  transparent 0 4px, color-mix(in srgb, var(--muted) 10%, transparent) 4px 8px); }
.ch-cell.ok { background: color-mix(in srgb, var(--bleu, var(--serie-1)) 26%, transparent); }
.ch-cell.tendu { background: color-mix(in srgb, var(--corail, var(--warn)) 52%, transparent); }
.ch-cell.surcharge { background: color-mix(in srgb, var(--bad) 62%, transparent);
  color: #fff; }
.ch-legende i.lg.libre { background: repeating-linear-gradient(45deg,
  transparent 0 3px, color-mix(in srgb, var(--muted) 22%, transparent) 3px 6px); }
.ch-legende i.lg.ok { background: color-mix(in srgb, var(--bleu, var(--serie-1)) 26%, transparent); }
.ch-legende i.lg.tendu { background: color-mix(in srgb, var(--corail, var(--warn)) 52%, transparent); }
.ch-legende i.lg.surcharge { background: color-mix(in srgb, var(--bad) 62%, transparent); }
/* Une pastille par chantier : la couleur dit la catégorie d'investissement. */
.ch-cell i { width: 5px; height: 5px; border-radius: 50%; background: var(--c);
  display: inline-block; }
.ch-n { opacity: .85; }

/* Médias d'une initiative : la preuve visuelle de ce qui a été livré. */
.rm-medias { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.rm-media { max-width: 100%; max-height: 190px; border-radius: 6px;
  border: 1px solid var(--border); display: block; background: #000; }
.rm-media-fic { font-size: 11px; color: var(--accent); text-decoration: none;
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; }

.bcard.vide { border-left-color: var(--border); text-align: center; color: var(--muted);
  font-style: italic; font-size: 12px; padding: 18px 14px; box-shadow: none; background: transparent;
  border-style: dashed; }
.board-total { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 11.5px;
  /* Les blocs « sorti du plan » s'empilent sous le total plutôt que de se
     tasser en colonnes à côté de lui. */
  flex-wrap: wrap; }
.board-total .rm-sortis { flex: 1 0 100%; }
.board-total strong { color: var(--text); font-size: 15px; font-weight: 700; }

.card.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 100% { box-shadow: var(--ombre, 0 0 transparent); } 15% { box-shadow: 0 0 0 3px var(--accent); } }

/* Mode présentation : tout grossit */
.rm-frise.big { font-size: 14px; }
.rm-frise.big .rm-titre { font-size: 14.5px; }
.rm-frise.big .rm-barre { height: 28px; }
.rm-frise.big .rm-mois { font-size: 12.5px; }
.rm-frise.big .rm-cat { font-size: 13px; }
#pres-overlay .bcard h5 { font-size: 15px; }
#pres-overlay .rm-board { gap: 18px; }

@media (max-width: 1400px) { .rm-board { --cols: 2 !important; } }
@media (max-width: 900px) { .rm-board { --cols: 1 !important; } }

@media (max-width: 1100px) { .card { grid-column: span 12; } .card.scalar { grid-column: span 6; } }

/* ─── Organigramme (type "orgchart") ──────────────────────────────────────
   Cartes reliées par des traits, reconstruites depuis le SIRH à chaque
   calcul. Les connecteurs sont en CSS pur (bordures
   sur ::before/::after des <li>) : aucune librairie, et ça reste net au zoom. */
.og-barre { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.og-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 11px; transition: color .12s, border-color .12s, background .12s; }
.og-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); }
.og-chip:hover { color: var(--text); border-color: var(--muted); }
.og-chip.active { color: var(--text); background: var(--panel2); border-color: var(--c, var(--accent)); }
.og-chip-n { color: var(--muted); font-weight: 500; }
.og-info { font-size: 11.5px; margin-bottom: 6px; }

/* L'arbre déborde en largeur par construction : il défile DANS sa carte,
   jamais la page (règle de responsive du dashboard). */
.og-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 0 10px; }
.og-scroll.grand { font-size: 13px; }
.og-tree { display: inline-block; min-width: 100%; }
.og-tree ul { display: flex; justify-content: center; padding: 0; margin: 0;
  list-style: none; position: relative; }
.og-tree li { position: relative; list-style: none; padding: 16px 5px 0;
  display: flex; flex-direction: column; align-items: center; }
/* Les deux demi-traits horizontaux qui relient une fratrie */
.og-tree li::before, .og-tree li::after { content: ''; position: absolute; top: 0;
  width: 50%; height: 16px; border-top: 1px solid var(--border); }
.og-tree li::before { right: 50%; }
.og-tree li::after { left: 50%; }
.og-tree li:only-child::before, .og-tree li:only-child::after { display: none; }
.og-tree li:first-child::before, .og-tree li:last-child::after { border-top: 0; }
.og-tree li:last-child::before { border-right: 1px solid var(--border);
  border-radius: 0 6px 0 0; }
.og-tree li:first-child::after { border-left: 1px solid var(--border);
  border-radius: 6px 0 0 0; }
/* Le trait vertical qui descend d'un parent vers sa fratrie d'enfants */
.og-tree ul ul { padding-top: 16px; }
.og-tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%;
  height: 16px; border-left: 1px solid var(--border); }
.og-tree > ul > li { padding-top: 0; }
.og-tree > ul > li::before, .og-tree > ul > li::after { display: none; }

.og-carte { position: relative; min-width: 132px; max-width: 190px;
  background: var(--panel); border: 1px solid var(--border);
  border-top: 3px solid var(--c, var(--accent)); border-radius: 8px;
  padding: 7px 10px 8px; box-shadow: var(--ombre, 0 0 transparent); text-align: center; }
.og-carte[data-pliable] { cursor: pointer; }
.og-carte[data-pliable]:hover { border-color: var(--muted); }
/* Encadrant d'une autre direction, affiché pour le contexte de rattachement */
.og-carte.hors { background: var(--panel2); box-shadow: none; opacity: .72; }
.og-carte.ferme { border-bottom: 3px double var(--border); }
.og-nom { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.25; }
.og-poste { font-size: 10.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.og-meta { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 5px; }
.og-badge { font-size: 9.5px; font-weight: 600; color: var(--warn);
  background: var(--panel2); border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 6px; }
.og-equipe { font-size: 9.5px; font-weight: 700; color: var(--panel);
  background: var(--c, var(--accent)); border-radius: 999px; padding: 1px 7px; }
.og-abs { font-size: 10px; color: var(--accent); margin-left: 4px; vertical-align: 1px; }
.og-plus { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 700; color: var(--muted); background: var(--panel);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; }

/* Le bouton d'export du support. Poussé à droite de la barre de filtres :
   c'est une action, pas un filtre — le regrouper avec les puces de direction
   le ferait lire comme une vue de plus. */
.og-pdf { margin-left: auto; cursor: pointer; font: inherit; font-size: 11.5px;
  font-weight: 700; color: var(--panel); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 5px 13px;
  transition: opacity .12s; }
.og-pdf:hover { opacity: .88; }
.og-pdf:disabled { opacity: .55; cursor: progress; }

/* Linter de vérité sur la console SQL (celui de l'instance) :
   il n'empêche jamais la requête — il dit ce que le chiffre ne dit pas. */
.sql-doctrine { margin: 0 0 10px; font-size: 11.5px; }
.sql-doctrine ul { margin: 0; padding-left: 18px; }
.sql-doctrine .sd-warn { color: var(--warn); }
.sql-doctrine .sd-warn b { font-weight: 600; }
.sql-doctrine .sd-note { margin-top: 4px; }

/* --- Entonnoir (type `funnel`) -------------------------------------------
   Barres décroissantes plutôt que trapèze : sur un entonnoir qui perd
   neuf dixièmes de son entrée, un trapèze à l'échelle écrase les dernières
   étapes jusqu'à l'illisible. La piste garde la largeur pleine, la barre porte
   la proportion — on compare donc à l'œil sans perdre le bas de l'entonnoir. */
.funnel { display: flex; flex-direction: column; gap: 7px; padding: 2px 0; }
.fn-ligne { display: grid; grid-template-columns: 74px 1fr 132px;
  align-items: center; gap: 10px; }
.fn-nom { font-size: 12px; font-weight: 600; color: var(--text); }
.fn-piste { position: relative; background: var(--border); border-radius: 5px;
  height: 26px; overflow: hidden; }
.fn-barre { height: 100%; border-radius: 5px; transition: width .2s; }
.fn-val { position: absolute; inset: 0; display: flex; align-items: center;
  padding-left: 9px; font-size: 12px; font-weight: 700; color: var(--text); }
.fn-taux { display: flex; align-items: baseline; justify-content: flex-end;
  gap: 7px; font-size: 11px; }
/* Le taux de passage depuis l'étape précédente : c'est LUI qui dit où l'on
   perd. En dessous de 50 %, il se signale — une étape qui divise par deux. */
.fn-chute { font-weight: 700; color: var(--text); }
.fn-alerte { color: var(--bad); }
.fn-part { color: var(--muted); }
.fn-note { color: var(--muted); font-size: 11px; margin-top: 9px;
  line-height: 1.45; }
.funnel-grand .fn-ligne { grid-template-columns: 110px 1fr 190px; }
.funnel-grand .fn-piste { height: 38px; }
.funnel-grand .fn-nom, .funnel-grand .fn-val { font-size: 16px; }
.funnel-grand .fn-taux { font-size: 14px; }

.lf-controls { display: flex; flex-direction: column; gap: 11px;
  margin-bottom: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
/* Un bloc = une ligne « intitulé + contrôles ». `hidden` doit battre le
   display du bloc, sinon la plage personnalisée reste visible. */
.lf-bloc { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.lf-bloc[hidden] { display: none; }
.lf-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.lf-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-chip { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--muted); background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px;
  transition: color .12s, border-color .12s, background .12s; }
.lf-chip:hover { color: var(--text); border-color: var(--muted); }
.lf-chip.active { color: var(--text); background: var(--panel2); border-color: var(--accent); }
.lf-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  min-width: 0; max-width: 100%; }
.lf-controls select, .lf-controls input[type="month"] { font-family: inherit;
  font-size: 13px; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; }
/* Un `select` se dimensionne sur son option la plus large : un libellé
   long suivi de son compteur faisait déborder la carte en largeur sur petit
   écran. Le max-width le ramène dans la carte, le texte est tronqué à
   l'affichage mais entier dans la liste ouverte. */
.lf-controls select { min-width: 150px; max-width: 100%; }
.lf-controls select:focus, .lf-controls input[type="month"]:focus {
  outline: none; border-color: var(--accent); }
/* Les avertissements de plage : discrets par défaut, colorés quand la plage
   retenue censure une étape de l'entonnoir. */

/* ─── Bloc d'alerte (type "alerte") ───────────────────────────────────────
   Le rouge (--bad), réservé à ce qui empêche une mesure d'être ce qu'elle
   paraît. La NATURE de chaque risque (mesuré / lu dans le code / non mesurable)
   est affichée en tête de bloc : un bandeau rouge qui ne dit pas d'où il tient
   ses affirmations est une alarme, pas une information. */
.card.alerte { grid-column: span 12; }
.al-bandeau { display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  border-radius: 10px; margin-bottom: 12px; font-size: 13.5px;
  border: 1px solid var(--al-c); background: color-mix(in srgb, var(--al-c) 12%, var(--panel)); }
.al-bandeau.niveau-critique { --al-c: var(--bad); }
.al-bandeau.niveau-attention { --al-c: var(--warn); }
.al-pastille { font-size: 15px; color: var(--al-c); }
.al-bandeau .al-n { margin-left: auto; font-size: 11px; color: var(--muted); }
.al-liste { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.al-risque { border: 1px solid var(--border); border-left: 3px solid var(--g-c, var(--muted));
  border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.al-risque.grav-haute { --g-c: var(--bad); }
.al-risque.grav-moyenne { --g-c: var(--warn); }
.al-tete { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.al-nature { font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap; cursor: help; }
.al-chiffre { margin-left: auto; font-size: 15px; font-weight: 700;
  color: var(--g-c, var(--text)); font-variant-numeric: tabular-nums; }
.al-risque h4 { font-size: 12.5px; font-weight: 700; color: var(--text);
  margin: 0 0 4px; line-height: 1.35; }
.al-risque p { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin: 0; }
/* Replié = les paragraphes disparaissent, les titres et les chiffres restent :
   l'alerte garde sa force sans manger l'écran. */
.al-liste.replie .al-risque p { display: none; }
.al-liste.replie .al-risque { padding-bottom: 8px; }
.lf-note.replie { display: none; }
.al-plier { margin-left: 10px; font: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer; color: var(--al-c); background: transparent;
  border: 1px solid var(--al-c); border-radius: 999px; padding: 2px 10px; }
.al-plier:hover { background: color-mix(in srgb, var(--al-c) 12%, transparent); }

/* ─── Synthèse d'onglet (type "insights") ─────────────────────────────────
   Trois familles, trois couleurs, trois rôles de lecture. Un constat
   MESURÉ et un point À VÉRIFIER ne doivent jamais se ressembler : le lecteur
   pressé repartirait avec une fausse certitude. D'où des colonnes distinctes,
   une pastille de nature, et un liseré de couleur par famille. */
.card.insights { grid-column: span 12; }
.ins-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ins-grille.solo { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ins-col > header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 2px solid var(--ins-c, var(--border)); }
.ins-col > header h3 { font-size: 13px; font-weight: 700; color: var(--text);
  margin: 0; letter-spacing: -.01em; }
.ins-pastille { font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--panel); background: var(--ins-c, var(--muted));
  border-radius: 999px; padding: 2px 8px; }
.ins-n { margin-left: auto; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.ins-col-constat { --ins-c: var(--bleu, var(--serie-1)); }
.ins-col-reco { --ins-c: var(--violet, var(--serie-3)); }
.ins-col-verif { --ins-c: var(--warn); }
.ins-bloc { border: 1px solid var(--border); border-left: 3px solid var(--ins-c, var(--border));
  border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; background: var(--panel); }
.ins-bloc.poids-fort { background: color-mix(in srgb, var(--ins-c) 7%, var(--panel)); }
.ins-bloc.poids-faible { opacity: .82; }
.ins-bloc h4 { font-size: 12.5px; font-weight: 700; color: var(--text);
  margin: 0 0 5px; line-height: 1.35; }
.ins-bloc p { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin: 0; }
.ins-chiffre { font-size: 17px; font-weight: 700; color: var(--ins-c, var(--text));
  font-variant-numeric: tabular-nums; line-height: 1.2; margin-bottom: 3px; }
/* L'en-tête d'une analyse : figée (chiffres arrêtés à une date, une source
   hors DWH) ou vivante (recalculée à chaque synchro) — sans ce mot, un
   chiffre figé lu sur un dashboard synchronisé toutes les heures passe pour
   du jour. La pastille `mesure` dit d'où vient chaque bloc. */
.ins-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); }
.ins-entete b { font-size: 13px; color: var(--text); }
.ins-etat { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); }
.ins-entete.fige .ins-etat { border-color: var(--warn); color: var(--warn); }
.ins-meta { font-size: 11px; color: var(--muted); }
.ins-mesure { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 6px; margin-bottom: 4px; }
@media (max-width: 900px) { .ins-grille { grid-template-columns: 1fr; } }

/* ─── Voyant « à recalculer » (poste de développement) ────────────────────
   Une couleur qui n'est utilisée QUE pour ça : ni le bleu des séries, ni le
   rouge des erreurs — l'écran n'est pas cassé, il est en retard. L'orange de
   l'instance porte ce sens, et rien d'autre ne l'utilise en fond plein. */
:root { --perime: var(--orange, var(--warn)); }
.voyant-cache { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--perime); background: color-mix(in srgb, var(--perime) 14%, var(--panel));
  font-size: 13px; color: var(--text); }
.voyant-cache[hidden] { display: none; }
.vc-point { width: 9px; height: 9px; border-radius: 50%; background: var(--perime);
  flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--perime) 25%, transparent); }
.vc-btn { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--panel); background: var(--perime); border: 1px solid var(--perime);
  border-radius: 999px; padding: 5px 13px; }
.vc-btn:hover { opacity: .9; }
.vc-btn:disabled { opacity: .7; cursor: progress; }
.vc-lien { font-size: 12px; color: var(--muted); }

/* La carte concernée porte la même couleur, en filet : on la retrouve dans la
   grille sans que la page devienne orange. */
.card.perime { border-color: var(--perime);
  box-shadow: inset 3px 0 0 var(--perime), var(--ombre, 0 0 transparent); }
.perime-badge { font-size: 10.5px; font-weight: 700; color: var(--perime);
  border: 1px solid var(--perime); border-radius: 999px; padding: 1px 8px;
  margin-right: 8px; white-space: nowrap; }
button.ghost.urgent { color: var(--perime); border-color: var(--perime); font-weight: 700; }

/* Carte du voyant (type fraicheur_cache) */
.card.fraicheur_cache { grid-column: span 12; }
.fc-tete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px; }
.fc-chiffre { font-size: 30px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; }
.fc-chiffre.alerte { color: var(--perime); }
.fc-chiffre.ok { color: var(--good); }
.fc-lab { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.fc-sub { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

.lf-controls input[type="date"] { font-family: inherit; font-size: 13px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--text); cursor: pointer; max-width: 100%; }
.lf-controls input[type="date"]:focus { outline: none; border-color: var(--accent); }

.lf-flag { font-size: 11px; color: var(--muted); }
.lf-flag strong { color: var(--text); font-variant-numeric: tabular-nums; }
.lf-flag.warn { color: var(--warn); }

.lf-note { margin-top: 16px; padding-top: 11px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 11px; line-height: 1.55; }

/* ─── Sélecteur de variante (jeux de cartes sur un même gabarit) ─────────
   Plus affirmé que les chips internes aux cartes : il commande TOUTE la page,
   il doit donc se distinguer d'un filtre local. Posé sous la barre de
   sous-onglets, avant la première section. */
.vert-nav { grid-column: span 12; display: flex; align-items: center;
  flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border); }
.vert-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.vert-chip { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--muted); background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 15px;
  transition: color .12s, border-color .12s, background .12s; }
.vert-chip:hover { color: var(--text); border-color: var(--muted); }
.vert-chip.active { color: var(--panel); background: var(--accent);
  border-color: var(--accent); }

.ck-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 11.5px; }

/* ── Carte « non mesuré » (châssis) ────────────
   Le vide doit se VOIR : une cellule « non mesuré » ne s'écrit pas de la
   même encre qu'un chiffre. C'est la règle de rendu de la doctrine
   métier, appliquée au pixel. */
/* Le type de carte vaut aussi comme classe CSS (core.js : `card ${k.type}`)
   — comme une table, cette carte prend la largeur. */
.card.non_mesure { grid-column: span 12; }
.nm-wrap { overflow-x: auto; }
.nm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.nm-table th { text-align: left; padding: 7px 10px; color: var(--muted);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.nm-table td { padding: 8px 10px; border-bottom: 1px solid var(--panel2);
  vertical-align: top; }
.nm-table tr:last-child td { border-bottom: 0; }
.nm-sujet { font-weight: 600; color: var(--text); }
.nm-vide { font-weight: 700; color: var(--warn); white-space: nowrap;
  background: repeating-linear-gradient(135deg, transparent 0 6px,
    color-mix(in srgb, var(--warn) 10%, transparent) 6px 12px); border-radius: 5px; }
.nm-note { margin-top: 12px; padding: 10px 13px; border-radius: 9px;
  background: var(--panel2); border-left: 3px solid var(--accent);
  color: var(--muted); font-size: 11.5px; line-height: 1.55; }

.fm-lg.gris::before { border-top: 2px dashed var(--muted); }

.fm-taux.pire { background: color-mix(in srgb, var(--bad) 7%, var(--panel)); }

.fm-tip i.gris { background: var(--muted); }

.fm-cell-zoom .fm-cwrap.grande { flex: 1 1 auto; height: auto; min-height: 220px; }

.fm-d.down { color: var(--bad); font-weight: 600; }

.fm-dl.mauvais { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }

.fm-sc-t tr.pire { background: color-mix(in srgb, var(--bad) 7%, var(--panel)); }
.fm-sc-t tr.bout { font-weight: 700;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }

/* — Responsive : sous 1100 px la colonne courbe se replie, le large scrolle
     dans son conteneur — la page, elle, ne défile jamais horizontalement. — */

/* ═══════════════════════════════════════════════════════════════════════════
   LA CONFORMITÉ — la liste des mois, et le rapport déplié

   Une ligne par mois, pliée : le niveau se lit d'un coup d'œil (pastille), le
   texte ne s'ouvre qu'à la demande — douze rapports dépliés feraient un mur
   de six écrans pour une question qui tient en un mot. Les deux teintes de
   niveau sont des JETONS sémantiques (--good, --warn) : aucune couleur ici,
   comme partout dans cette feuille.
   ═══════════════════════════════════════════════════════════════════════════ */
.conf-liste { list-style: none; margin: 0; padding: 0; }
.conf-ligne + .conf-ligne { border-top: 1px solid var(--border); }
.conf-mois { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 4px; border: 0; border-radius: calc(var(--radius) - 2px);
  background: transparent; font: inherit; font-size: 13px; color: var(--text);
  text-align: left; cursor: pointer; font-weight: 400; }
.conf-mois:hover { background: var(--panel2); filter: none; }
.conf-pastille { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--muted); }
.conf-pastille.niveau-ok { background: var(--good); }
.conf-pastille.niveau-alert { background: var(--warn); }
.conf-libelle { font-weight: 600; font-variant-numeric: tabular-nums; }
.conf-etat { color: var(--muted); font-size: 12px; }
.conf-att { margin-left: auto; font-size: 11px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
  white-space: nowrap; }
.conf-mois[aria-expanded="true"] { background: var(--panel2); }
.conf-detail { padding: 2px 4px 14px; }
.conf-rapport { font-size: 13px; line-height: 1.6; color: var(--text); }
.conf-rapport h3 { font-size: 14px; margin-bottom: 6px; }
.conf-rapport h4 { font-size: 11.5px; color: var(--accent); letter-spacing: .05em;
  text-transform: uppercase; margin: 14px 0 4px; }
.conf-rapport p { margin: 4px 0; }
.conf-rapport ul { margin: 4px 0 4px 1.1rem; }
.conf-rapport li { margin: 2px 0; }
.conf-pied { margin-top: 12px; }
.conf-vide { color: var(--muted); font-size: 12.5px; line-height: 1.6; padding: 4px 0; }

/* ── LES COMPTES — mes jetons, l'administration (dans le dialogue) ─────── */
.comptes-nav { margin-bottom: 14px; }
.comptes-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  margin: 0 0 14px; padding: 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--panel2); }
.comptes-form label { display: grid; gap: 4px; font-size: 11.5px; color: var(--muted);
  flex: 1 1 160px; }
.comptes-form label.case { display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: 12.5px; color: var(--text); }
.comptes-form input, .comptes-form select { font: inherit; font-size: 13px; padding: 7px 9px;
  border-radius: 7px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.comptes-form input:focus, .comptes-form select:focus { border-color: var(--accent); outline: none; }
.comptes-form button { flex: 0 0 auto; }
.form-msg { font-size: 12px; color: var(--bad); min-height: 1.2em; align-self: center; }
button.mini { font-size: 11.5px; padding: 4px 9px; }
.comptes-table td { white-space: normal; vertical-align: middle; }
.comptes-table select { font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.comptes-table .actions { white-space: nowrap; }
.comptes-table .actions button + button { margin-left: 6px; }
.compte-ferme td:first-child { color: var(--muted); text-decoration: line-through; }
.jeton-revoque td { color: var(--muted); }
.jetons-de td { background: var(--panel2); padding: 10px 12px; }
.journal-refus td { color: var(--bad); }
/* Un secret montré une fois (la clé d'API neuve, le lien d'activation) :
   masqué par défaut ; révélé, un clic le sélectionne en entier — le recours
   à la main quand le presse-papiers manque. */
.secret-une-fois { margin: 0 0 14px; padding: 12px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.secret-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 4px; }
.secret-ligne code { font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all;
  padding: 4px 8px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border);
  user-select: all; }
.secret-etat { margin: 4px 0 0; min-height: 1.2em; font-size: 12px; color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   LES VUES DU COCKPIT — l'accueil, « Règles et cap », « Sous le capot »,
   l'installation (0.45.0), et ce qu'elles posent dans la barre

   La maquette « Cockpit de démonstration », en jetons : aucune couleur ici,
   les teintes se dérivent des jetons de l'instance (color-mix), et suivent
   donc son thème, clair ou sombre. Tout est plat : l'ombre reste le
   privilège de ce qui quitte le plan. Les titres prennent la police de
   titre de l'instance si elle en déclare une (--police-titre, facultatif).

   Les cinq états ont chacun un habit, le même partout — puce, badge,
   légende : Déjà là (le bon), À confirmer (l'accent), Exemple (l'alerte),
   À remplir (le pointillé), Renseigné (le filet du bon, sur fond neutre).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --vue-teinte-accent: color-mix(in srgb, var(--accent) 9%, var(--panel));
  --vue-filet-accent: color-mix(in srgb, var(--accent) 42%, var(--border));
  --vue-teinte-bon: color-mix(in srgb, var(--good) 9%, var(--panel));
  --vue-filet-bon: color-mix(in srgb, var(--good) 40%, var(--border));
  --vue-teinte-alerte: color-mix(in srgb, var(--warn) 11%, var(--panel));
  --vue-filet-alerte: color-mix(in srgb, var(--warn) 48%, var(--border));
  --vue-encre-alerte: color-mix(in srgb, var(--warn) 70%, var(--text));
  --vue-filet-vide: color-mix(in srgb, var(--muted) 55%, var(--border));
  --vue-filet-doux: color-mix(in srgb, var(--border) 55%, var(--panel));
  --vue-fond-doux: color-mix(in srgb, var(--panel2) 45%, var(--panel));
  --vue-encre-accent: var(--accent-encre, var(--panel));
}

/* ── Dans la barre : la démonstration, l'installation, le badge « Exemple » ── */
.pilule-fraicheur.pilule-demo { color: var(--vue-encre-alerte); white-space: nowrap;
  background: var(--vue-teinte-alerte); border-color: var(--vue-filet-alerte); }
.pilule-demo .point { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--warn); }
/* La bulle hérite du `nowrap` de la pilule : sans ceci, son texte courrait
   sur une seule ligne, hors de la page. */
.pilule-demo .bulle { white-space: normal; }
.pilule-installation { display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); font-size: 11.5px; font-weight: 500; color: var(--text);
  text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
a.pilule-installation[href] { cursor: pointer; }
a.pilule-installation[href]:hover { border-color: var(--accent); }
.badge-etat { display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: 4px; border: 1px solid var(--border); background: var(--panel);
  color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap; flex: none; line-height: 1;
  vertical-align: middle; }
.badge-deja { color: var(--good); background: var(--vue-teinte-bon); border-color: var(--vue-filet-bon); }
.badge-renseigne { color: var(--good); border-color: var(--vue-filet-bon); }
.badge-confirmer { color: var(--accent); background: var(--vue-teinte-accent);
  border-color: var(--vue-filet-accent); }
.badge-exemple { color: var(--vue-encre-alerte); background: var(--vue-teinte-alerte);
  border-color: var(--vue-filet-alerte); }
.badge-remplir { border-style: dashed; border-color: var(--vue-filet-vide); background: transparent; }
.ck-actions .badge-exemple { height: 18px; font-size: 9.5px; padding: 0 6px; }
.pres-kpi h3 .badge-exemple { margin-left: 8px; }

/* ── La page ─────────────────────────────────────────────────────────────── */
.vue { grid-column: span 12; min-width: 0; display: flex; flex-direction: column; gap: 34px;
  padding: 8px 0 32px; }
.vue a { color: var(--accent); }
.vue code { font: 12.5px/1.4 ui-monospace, "SF Mono", Menlo, monospace; padding: 1px 5px;
  border-radius: 4px; background: var(--panel2); border: 1px solid var(--border);
  overflow-wrap: anywhere; }
.vue-titre { font-family: var(--police-titre, inherit); font-size: 40px; font-weight: 600;
  line-height: 1.05; letter-spacing: -.01em; }
.vue-accueil .vue-titre { font-size: 46px; }
.vue-titre-2 { font-family: var(--police-titre, inherit); font-size: 27px; font-weight: 600;
  line-height: 1.12; }
.vue-chapo { font-size: 16px; line-height: 1.55; max-width: 44em; color: var(--text); }
.vue-doux { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.vue-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); }
.vue-surtitre { font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); }
.vue-sous-titre { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.vue-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vue-vide { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.vue-alerte { font-size: 13px; line-height: 1.5; padding: 9px 12px; border-radius: var(--radius);
  color: var(--vue-encre-alerte); background: var(--vue-teinte-alerte);
  border: 1px solid var(--vue-filet-alerte); }
.vue-avis { flex: 0 1 420px; display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius); font-size: 13px; line-height: 1.5;
  color: var(--vue-encre-alerte); background: var(--vue-teinte-alerte);
  border: 1px solid var(--vue-filet-alerte); }
.vue-avis .badge-etat { background: var(--panel); }
.vue-entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px 36px; }
.vue-entete > div:first-child { flex: 1 1 460px; min-width: 0; display: flex;
  flex-direction: column; gap: 10px; }
.vue-carte { background: var(--panel); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px); padding: 20px 22px; min-width: 0; }
.vue-carte > h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.vue-carte h3 { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; }
.vue-carte h3 .ic { width: 16px; height: 16px; color: var(--accent); flex: none; }
.vue-carte > p + p { margin-top: 8px; }
.vue-carte-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vue-carte-tete h2 { font-size: 16px; font-weight: 600; }
.vue-carte-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
  padding-top: 12px; margin-top: 14px; border-top: 1px solid var(--vue-filet-doux); }
.vue-section { display: flex; flex-direction: column; gap: 14px; }
.vue-section-tete { display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap; }
.vue-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.vue-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px;
  border-radius: calc(var(--radius) - 2px); border: 1px solid var(--accent);
  background: var(--accent); color: var(--vue-encre-accent); font-family: inherit;
  font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
.vue a.vue-btn { color: var(--vue-encre-accent); }
.vue-btn:hover { filter: brightness(1.08); }
.vue-btn.second, .vue a.vue-btn.second { background: var(--panel); color: var(--text);
  border-color: var(--border-strong); font-weight: 500; }
.vue-btn.second:hover { filter: none; border-color: var(--accent); }
.vue-btn.petit { min-height: 32px; padding: 0 12px; font-size: 13px; }
.vue-btn:disabled { opacity: .6; cursor: progress; }
.vue-btn .ic, .vue-lien .ic { width: 15px; height: 15px; flex: none; }
.vue-lien { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  text-decoration: none; }
.vue-lien:hover { text-decoration: underline; }
.vue-tuile { flex: none; width: 30px; height: 30px; border-radius: 7px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--accent);
  background: var(--vue-teinte-accent); }
.vue-tuile .ic { width: 16px; height: 16px; }
.vue-tuile.pleine { background: var(--accent); color: var(--vue-encre-accent); }

/* ── Les puces d'état et la légende ─────────────────────────────────────── */
.vue-puces { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.vue-puces.colonne { flex-direction: column; align-items: flex-start; }
.puce { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 10px;
  border-radius: calc(var(--radius) - 2px); border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); font-size: 12.5px; font-weight: 500;
  line-height: 1.3; max-width: 100%; overflow-wrap: anywhere; }
.puce .ic { width: 12px; height: 12px; flex: none; }
.puce-deja { color: var(--good); background: var(--vue-teinte-bon); border-color: var(--vue-filet-bon); }
.puce-renseigne { background: var(--panel); border-color: var(--vue-filet-bon); }
.puce-renseigne .ic { color: var(--good); }
.puce-confirmer { color: var(--accent); background: var(--vue-teinte-accent);
  border-color: var(--vue-filet-accent); }
.puce-exemple { color: var(--vue-encre-alerte); background: var(--vue-teinte-alerte);
  border-color: var(--vue-filet-alerte); }
.puce-remplir { color: var(--muted); background: transparent; border-style: dashed;
  border-color: var(--vue-filet-vide); font-weight: 400; }
.vue-legende { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; padding-top: 16px;
  border-top: 1px solid var(--border); }
.vue-legende-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.vue-legende-item { display: inline-flex; align-items: center; gap: 9px; font-size: 13px;
  color: var(--muted); min-width: 0; }
.vue-legende-item .puce { flex: none; min-height: 24px; font-size: 12px; }

/* ── L'accueil ──────────────────────────────────────────────────────────── */
.vue-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
  align-items: start; }
.vue-hero-texte { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.vue-hero .vue-chapo { font-size: 17px; }
.savoir { display: flex; flex-direction: column; gap: 14px; }
.savoir-ligne { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px;
  align-items: start; padding-top: 14px; border-top: 1px solid var(--vue-filet-doux); }
.savoir-quoi { display: flex; gap: 9px; align-items: flex-start; }
.savoir-quoi b, .couche-quoi b, .capot-modele-tete b { display: block; font-size: 14px; font-weight: 600; }
.savoir-quoi small, .couche-quoi small, .capot-modele-tete small { display: block; font-size: 12px;
  line-height: 1.4; color: var(--muted); }
.savoir .vue-carte-pied { margin-top: 0; }
/* Le déroulé : un rail qui relie les étapes, plein jusqu'à la dernière faite. */
.etapes { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; }
.etape { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.etape:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: 38px;
  right: -12px; height: 2px; border-radius: 1px; background: var(--border); }
.etape-faite:not(:last-child)::after { background: var(--accent); }
.etape-rond, .jalon-rond { width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 2px solid var(--vue-filet-vide); background: var(--panel); color: var(--muted);
  font-size: 13px; font-weight: 600; }
.etape-rond { margin-bottom: 8px; }
.etape-rond .ic, .jalon-rond .ic { width: 14px; height: 14px; }
.etape-faite .etape-rond, .jalon-faite .jalon-rond { background: var(--accent);
  border-color: var(--accent); color: var(--vue-encre-accent); }
.etape-courante .etape-rond, .jalon-courante .jalon-rond { border-color: var(--accent);
  color: var(--accent); }
.etape-nom { font-size: 14px; font-weight: 600; }
.etape-quand { font-size: 12px; color: var(--muted); }
.etape-quand.faite { color: var(--good); font-weight: 600; }
.etape-quand.courante { color: var(--accent); font-weight: 600; }
.etape .vue-eyebrow { margin-top: 6px; font-size: 10.5px; }
.etape-allume { font-size: 13px; line-height: 1.45; }
.etape-avec { font-size: 12px; color: var(--muted); margin-top: 2px; }
.vue-questions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.vue-question { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; }
.vue-question-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vue-question-tete h3 { font-size: 14.5px; font-weight: 500; line-height: 1.4; }
.vue-question .vue-carte-pied { margin-top: auto; }
.vue-bande { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 36px;
  align-items: center; padding: 28px 30px; border-radius: calc(var(--radius) + 2px);
  background: var(--vue-teinte-accent); border: 1px solid var(--vue-filet-accent); }
.vue-bande-texte { display: flex; flex-direction: column; gap: 10px; }
.vue-bande-texte p:not(.vue-surtitre) { font-size: 14.5px; line-height: 1.6; }
.vue-flux { display: grid; align-items: center; row-gap: 10px;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1.25fr) 22px minmax(0, 1fr); }
.flux-boite { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px; min-width: 0;
  border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
.flux-boite b, .flux-modele b { display: flex; align-items: center; gap: 7px; font-size: 13.5px;
  font-weight: 600; }
.flux-boite small, .flux-modele small { font-size: 12px; color: var(--muted); }
.flux-coeur { border: 1.5px solid var(--accent); gap: 6px; }
.flux-coeur span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.flux-coeur .ic, .flux-modele .ic { width: 15px; height: 15px; color: var(--accent); flex: none; }
.flux-fleche { display: inline-flex; justify-content: center; color: var(--muted); }
.flux-fleche .ic { width: 16px; height: 16px; }
.flux-modele { grid-column: 5; display: flex; flex-direction: column; gap: 3px; padding: 10px 13px;
  border-radius: var(--radius); background: var(--vue-fond-doux);
  border: 1px dashed var(--vue-filet-vide); }
.flux-modele .ic { color: var(--muted); }
.vue-prochaine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px;
  border-color: var(--accent); padding: 26px 28px; }
.vue-prochaine-texte { display: flex; flex-direction: column; gap: 10px; }
.vue-prochaine-texte > p:not(.vue-surtitre):not(.vue-alerte) { font-size: 14.5px; line-height: 1.6; }
.vue-prochaine-attentes { display: flex; flex-direction: column; gap: 10px; }
.vue-termine { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; font-size: 13.5px;
  line-height: 1.5; border-radius: var(--radius); background: var(--vue-teinte-bon); }
.vue-termine .vue-eyebrow { color: var(--good); }
.vue-attentes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vue-attentes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  padding: 9px 0; border-top: 1px solid var(--vue-filet-doux); font-size: 13.5px; line-height: 1.45; }
.vue-attentes li:last-child { border-bottom: 1px solid var(--vue-filet-doux); }
.vue-attentes small { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.vue-attentes li.longue small { color: var(--vue-encre-alerte); font-weight: 600; }

/* ── « Règles et cap » ──────────────────────────────────────────────────── */
.vue-ancres { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-top: -14px;
  border-bottom: 1px solid var(--border); }
.vue-ancres a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; }
.vue-ancres a:hover { color: var(--text); }
.dv-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.dv-principal { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dv-cote { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dv-section { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  scroll-margin-top: 16px; min-width: 0; }
.dv-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 14px; }
.dv-tete h2 { font-size: 17px; font-weight: 600; }
.dv-etats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nature { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--panel2); color: var(--muted);
  font-size: 11px; font-weight: 500; white-space: nowrap; cursor: help; }
.nature-hypothese { color: var(--accent); background: var(--vue-teinte-accent);
  border-color: var(--vue-filet-accent); }
.dv-pied { display: flex; justify-content: flex-end; padding-top: 10px;
  border-top: 1px solid var(--vue-filet-doux); }
.dv-journal td { white-space: normal; vertical-align: top; }
.dv-journal td.n { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.vue-coches { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 24px; }
.vue-coches li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.vue-coches .ic { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--good); }
.dv-familles { display: flex; flex-direction: column; gap: 8px; padding-top: 12px;
  border-top: 1px solid var(--vue-filet-doux); }
.dv-proposer { border-color: var(--accent); display: flex; flex-direction: column; gap: 8px; }
.dv-proposer > h2 { margin-bottom: 0; font-size: 17px; }
.dv-proposer p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.dv-propositions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dv-propositions li { display: flex; flex-direction: column; gap: 6px; padding: 12px 0;
  border-top: 1px solid var(--vue-filet-doux); }
.dv-prop-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dv-prop-tete .vue-doux { font-size: 12px; }
.dv-prop-texte { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.dv-reponse { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px;
  border-radius: var(--radius); background: var(--vue-fond-doux); font-size: 13px; }
.dv-reponse p { white-space: pre-wrap; overflow-wrap: anywhere; }
.dv-form { display: flex; flex-direction: column; gap: 12px; }
.dv-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); }
.dv-form textarea { font: inherit; font-size: 14px; line-height: 1.5; padding: 10px 12px;
  border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--text); resize: vertical; min-height: 120px; }
.dv-form textarea:focus { border-color: var(--accent); outline: none; }
.dv-form-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vue-envoyee { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px;
  border-radius: var(--radius); background: var(--vue-teinte-bon); border: 1px solid var(--vue-filet-bon); }
.vue-envoyee .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--good); }
.vue-envoyee p { margin-top: 2px; font-size: 13px; color: var(--muted); }

/* La doctrine vivante : les entrées en base par genre, la fenêtre
   d'écriture et l'historique d'une ancre. Une entrée en conflit porte le
   filet de l'accent, comme son badge « À confirmer ». */
.dv-genre { display: flex; flex-direction: column; gap: 10px; padding-top: 14px;
  border-top: 1px solid var(--vue-filet-doux); }
.dv-genre-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dv-genre-tete h3 { font-size: 15px; font-weight: 600; }
.dv-genre-tete .vue-btn { margin-left: auto; }
.dv-entrees, .dv-versions, .dv-existant { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; }
.dv-entree, .dv-version, .dv-existant li { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 12px 0; border-top: 1px solid var(--vue-filet-doux); }
.dv-entree:first-child, .dv-version:first-child { border-top: 0; padding-top: 4px; }
.dv-entree.en-conflit { padding-left: 12px; border-left: 3px solid var(--vue-filet-accent); }
.dv-entree-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.dv-entree-titre { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.dv-entree-pied { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.dv-entree-pied code { font-size: 11.5px; }
.dv-lien { font: inherit; font-size: 12px; font-weight: 500; color: var(--accent); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dv-mesure { font-size: 13px; }
.dv-mesure summary { cursor: pointer; color: var(--muted); overflow-wrap: anywhere; }
.dv-mesure .md { margin-top: 8px; }
.dv-version-remplacee .dv-entree-titre, .dv-version-retiree .dv-entree-titre,
.dv-version-retrait .dv-entree-titre { color: var(--muted); }
.dv-historique { display: flex; flex-direction: column; gap: 10px; }
/* Un champ caché le reste : `label` et `fieldset` sont en flex dans la fenêtre. */
.dv-form [hidden] { display: none; }
.dv-form input, .dv-form select { font: inherit; font-size: 14px; min-height: 38px; padding: 7px 10px;
  border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--text); min-width: 0; }
.dv-form input:focus, .dv-form select:focus { border-color: var(--accent); outline: none; }
.dv-form input[type="checkbox"], .dv-form input[type="radio"] { min-height: 0; padding: 0; margin: 3px 0 0;
  flex: none; accent-color: var(--accent); }
.dv-form fieldset { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0;
  padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.dv-form legend { padding: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dv-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dv-aide { font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--muted); }
.dv-form label.dv-choix { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 13px;
  font-weight: 400; color: var(--text); }
.dv-confronte { display: flex; flex-direction: column; gap: 10px; }

/* Le Markdown de l'instance : lisible comme un document, sans rien de brut. */
.md { font-size: 14px; line-height: 1.6; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.md > * + * { margin-top: 10px; }
.md h3 { font-size: 16px; font-weight: 600; }
.md h4 { font-size: 14.5px; font-weight: 600; }
.md h5 { font-size: 13.5px; font-weight: 600; }
.md h6 { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); }
.md ul, .md ol { padding-left: 1.3em; }
.md li + li, .md li > ul, .md li > ol { margin-top: 3px; }
.md blockquote { padding: 8px 14px; color: var(--muted); background: var(--vue-fond-doux);
  border-left: 3px solid var(--border-strong); border-radius: 0 var(--radius) var(--radius) 0; }
.md blockquote > * + * { margin-top: 6px; }
.md pre { padding: 12px 14px; overflow: auto; border-radius: var(--radius);
  background: var(--panel2); border: 1px solid var(--border); }
.md pre code { padding: 0; border: 0; background: transparent; white-space: pre; }
.md hr { border: 0; border-top: 1px solid var(--border); }
.md-table { overflow-x: auto; }
.md-table table { font-size: 13px; }
.md-table th { position: static; }
.md-table td { white-space: normal; vertical-align: top; }
.md-adapter { display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: 4px; border: 1px dashed var(--vue-filet-vide); color: var(--muted);
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  vertical-align: 1px; }

/* ── « Sous le capot » ──────────────────────────────────────────────────── */
.capot-couches { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 44px;
  align-items: center; padding: 24px 26px; }
.couches { display: flex; flex-direction: column; min-width: 0; }
.couche { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--vue-fond-doux); }
.couche-coeur { align-items: start; border: 1.5px solid var(--accent); background: var(--panel); }
.couche-quoi { display: flex; gap: 11px; align-items: flex-start; }
.couche-quoi b { font-size: 15px; }
.couche-corps { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.couche-fleche { height: 26px; display: flex; align-items: center; padding-left: 25px;
  color: var(--vue-filet-vide); }
.couche-fleche .ic { width: 14px; height: 20px; }
.couche-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.couche-colonne { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.couche-col-titre { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.couche-col-titre .ic { width: 15px; height: 15px; color: var(--accent); flex: none; }
.capot-modele { position: relative; }
.capot-modele::before { content: ""; position: absolute; left: -44px; top: 50%; width: 44px;
  border-top: 1.5px dashed var(--vue-filet-vide); }
.capot-lit { position: absolute; left: -36px; top: calc(50% - 22px); font-size: 11.5px;
  font-weight: 500; color: var(--muted); }
.capot-modele-boite { display: flex; flex-direction: column; gap: 10px; padding: 18px;
  border-radius: calc(var(--radius) + 2px); background: var(--vue-fond-doux);
  border: 1.5px dashed var(--vue-filet-vide); font-size: 13.5px; line-height: 1.55; }
.capot-modele-tete { display: flex; align-items: center; gap: 10px; }
.capot-modele-tete .vue-tuile { color: var(--muted); background: var(--panel);
  border: 1px solid var(--border); }
.capot-modele .fort { padding-top: 10px; border-top: 1px solid var(--border); font-weight: 600; }
.memoire { display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr); }
.memoire .vue-carte { display: flex; flex-direction: column; gap: 7px; }
.memoire .vue-carte p { font-size: 14px; line-height: 1.55; }
.memoire .flux-fleche { align-self: center; }
.vue-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vue-deux .vue-carte { display: flex; flex-direction: column; gap: 8px; }
.vue-deux .vue-carte > p:not(.vue-doux) { font-size: 14px; line-height: 1.6; }

/* ── L'installation ─────────────────────────────────────────────────────── */
.progression { flex: 0 1 420px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.progression-chiffre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.progression-chiffre b { font-size: 30px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; }
.progression-chiffre span { font-size: 13px; color: var(--muted); }
.progression-barre { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.segment { height: 8px; border-radius: 2px; background: var(--border); }
.segment.fait { background: var(--accent); }
.segment.en-cours { background: color-mix(in srgb, var(--accent) 38%, var(--panel)); }
.inst-grille { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; }
.jalons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.jalon { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; }
.jalon-rail { display: flex; flex-direction: column; align-items: center; }
.jalon-rond.petit { width: 22px; height: 22px; margin-top: 2px; border: 0;
  background: color-mix(in srgb, var(--accent) 40%, var(--panel)); color: var(--vue-encre-accent); }
.jalon-rond.petit .ic { width: 12px; height: 12px; }
.jalon-trait { flex: 1; width: 2px; min-height: 14px; margin-top: 4px; background: var(--border); }
.jalon-trait.fait { background: var(--accent); }
.jalon-corps { display: flex; flex-direction: column; gap: 6px; padding-bottom: 22px; min-width: 0; }
.jalon-corps p { font-size: 13.5px; line-height: 1.55; }
.jalon-carte { display: flex; flex-direction: column; gap: 10px; border: 1.5px solid var(--accent); }
.jalon-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.jalon-tete h2 { font-size: 17px; font-weight: 600; }
.jalon-a-venir .jalon-tete h2 { color: var(--text); }
.pilule-etat { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px;
  border-radius: 999px; border: 1px solid var(--border); font-size: 12px; color: var(--muted);
  line-height: 1.35; }
.pilule-etat.faite { color: var(--good); background: var(--vue-teinte-bon); border-color: var(--vue-filet-bon); }
.pilule-etat.courante { color: var(--vue-encre-accent); background: var(--accent);
  border-color: var(--accent); font-weight: 600; }
.jalon-preuve { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; font-size: 13px;
  line-height: 1.5; border-radius: var(--radius); background: var(--vue-teinte-bon);
  border: 1px solid var(--vue-filet-bon); }
.jalon-preuve .ic { width: 13px; height: 13px; flex: none; margin-top: 3px; color: var(--good); }
.jalon-debut .jalon-corps { padding-bottom: 20px; }
.inst-cote { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.inst-cote .vue-carte > p { font-size: 13.5px; line-height: 1.55; }
.inst-cote .vue-carte > p.vue-doux { margin-top: 10px; font-size: 12.5px; }
.carnet { list-style: none; margin: 0; padding: 0; }
.carnet li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--vue-filet-doux); font-size: 13.5px; line-height: 1.45; }
.carnet li:last-child { border-bottom: 1px solid var(--vue-filet-doux); }
.carnet-quand { font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.carnet-etape { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  border: 1px solid var(--border); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ── Plus étroit : une colonne, sans rail horizontal ────────────────────── */
@media (max-width: 1200px) {
  .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 24px; }
  .etape::after { display: none; }
}
@media (max-width: 1100px) {
  .vue-hero, .vue-bande, .vue-prochaine, .dv-grille, .inst-grille, .capot-couches {
    grid-template-columns: minmax(0, 1fr); }
  .capot-modele::before, .capot-lit { display: none; }
}
@media (max-width: 760px) {
  /* La zone de droite de la barre passe à la ligne plutôt que d'élargir la
     page : avec la démonstration et l'installation, elle ne tient plus sur
     un téléphone. */
  .cockpit-actions { flex-wrap: wrap; row-gap: 6px; padding: 4px 0 10px; }
  .vue { gap: 26px; }
  .vue-titre, .vue-accueil .vue-titre { font-size: 30px; }
  .vue-titre-2 { font-size: 22px; }
  .etapes, .vue-legende-grille, .vue-coches, .couche-colonnes, .vue-deux {
    grid-template-columns: minmax(0, 1fr); }
  .savoir-ligne, .couche { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vue-flux, .memoire { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .flux-fleche { transform: rotate(90deg); }
  .flux-modele { grid-column: 1; }
  .vue-carte, .dv-section { padding: 16px; }
  .dv-deux { grid-template-columns: minmax(0, 1fr); }
  .vue-bande { padding: 20px 18px; }
  .carnet li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES KPI EN SQL — proposés, non officiels

   Une marque, la même partout où l'un d'eux s'affiche (⌘K, la carte
   dépliée) : l'habit de « À confirmer », l'accent de l'instance — un
   chiffre proposé, pas un module du dépôt. En jetons, comme le reste.
   ═══════════════════════════════════════════════════════════════════════════ */
.badge-sql { color: var(--accent); background: var(--vue-teinte-accent);
  border-color: var(--vue-filet-accent); }
.rech-res .badge-sql { height: 18px; font-size: 9.5px; padding: 0 6px; align-self: center; }
/* La requête : sa définition entière, lue d'emblée — les longues lignes se replient. */
.prov-sql pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Coupée à 500 lignes : la fenêtre le dit, dans l'encre de l'alerte. */
.kpi-coupe { color: var(--vue-encre-alerte); font-weight: 600; }
.btn-retirer { color: var(--bad); }
.btn-retirer:hover { border-color: var(--bad); }
.btn-retirer:disabled { opacity: .6; cursor: default; }
.kpi-retrait-msg { font-size: 12px; color: var(--muted); }
.kpi-retrait-msg.refus { color: var(--bad); }

/* ═══════════════════════════════════════════════════════════════════════════
   LES TABLEAUX ET « MON ESPACE »

   Un en-tête qui prend la largeur du plateau — le titre, la portée, le
   propriétaire, les cartes comptées, les gestes permis —, puis les cartes
   du mécanisme des onglets, telles quelles. Chaque portée a son habit, en
   jetons : Officiel le filet du bon (il engage : calibré, sous mandat —
   vérifié à chaque lecture), Officiel · suspendu celui de l'alerte (il
   n'engage plus), Partagé l'accent, Personnel le badge neutre. Un KPI en
   SQL garde sa marque sur la carte elle-même : une capture d'écran ne la
   perd pas.
   ═══════════════════════════════════════════════════════════════════════════ */
.tdb-entete { grid-column: span 12; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 12px 24px; padding: 4px 0 8px; }
.tdb-entete-texte { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tdb-titre { font-family: var(--police-titre, inherit); font-size: 26px; font-weight: 600; line-height: 1.15;
  letter-spacing: -.01em; overflow-wrap: anywhere; }
.tdb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px;
  color: var(--muted); overflow-wrap: anywhere; }
.tdb-note { font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 62em; }
.tdb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vue-btn.second.tdb-supprimer { color: var(--bad); }
.vue-btn.second.tdb-supprimer:hover { border-color: var(--bad); }
.tdb-msg { flex-basis: 100%; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.tdb-msg.refus { color: var(--bad); }
.tdb-msg:empty { display: none; }
.tdb-plein { grid-column: span 12; min-width: 0; }
.tdb-message { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 16px; }
.tdb-message .vue-lien { color: var(--accent); }
.tdb-vide { display: flex; flex-direction: column; gap: 10px; }
.tdb-vide > h2 { margin-bottom: 0; }
.tdb-comment { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px;
  font-size: 13.5px; line-height: 1.55; }
.badge-portee-officiel { color: var(--good); background: var(--vue-teinte-bon); border-color: var(--vue-filet-bon); }
.badge-portee-suspendu { color: var(--warn); background: var(--vue-teinte-alerte);
  border-color: var(--vue-filet-alerte); }
.badge-portee-partage { color: var(--accent); background: var(--vue-teinte-accent);
  border-color: var(--vue-filet-accent); }
/* L'entrée « Tableaux » : un titre venu de la base peut être long — il passe
   à la ligne, le menu ne sort pas de l'écran. */
.nav-portes .porte-tableaux .porte-menu { max-width: min(360px, calc(100vw - 32px)); }
.nav-portes .porte-tableaux .porte-menu a { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; overflow-wrap: anywhere; }
.porte-menu .badge-portee { height: 18px; font-size: 9.5px; padding: 0 6px; }
.ck-marque { margin: -4px 0 10px; min-width: 0; }
/* Une carte étroite (deux chiffres côte à côte sur un téléphone) : la marque se replie, entière. */
.ck-marque .badge-sql { height: auto; min-height: 18px; padding: 2px 6px; font-size: 9.5px;
  line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.ck-item.refus { color: var(--bad); }
.kpi-epingle-msg { font-size: 12px; color: var(--muted); }
.kpi-epingle-msg.refus { color: var(--bad); }
.tdb-calibrage { font-size: 13px; font-weight: 600; color: var(--text); }
.tdb-non-calibrees { margin: 0; padding-left: 1.2em; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) {
  .tdb-titre { font-size: 22px; }
}