/* Copyright (c) 2026 Weiwei CHEN — TrustOR / Praetor0. All rights reserved. */

/* ══════════════════════════════════════════════════════════════════════════
   D7 « Salle des mandats » — dashboard mesh gouverné (BRIEF-CC-D7)
   Encre & Lumière : toutes les couleurs viennent des tokens --el-*
   (design-tokens.css). Aucune palette locale — les grades réutilisent
   --el-grade-* qui miroitent _TD_CLASS_COLOR (§ brief D7 §2).
   ══════════════════════════════════════════════════════════════════════════ */

.d7-page {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--el-ink-text, #c7cdd3);
  padding-bottom: 28px;
}

/* Le drawer a une largeur fixe (transition 0 → 320px) : sans border-box, ses
   18px de padding débordent du panneau et l'instrument sort de l'écran. */
.d7-page, .d7-page *, .d7-page *::before, .d7-page *::after { box-sizing: border-box; }

/* ── En-tête éditorial ───────────────────────────────────────────────────── */

.d7-top { padding: 18px 24px 2px; }
.d7-crumb {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--el-ink-text-3, #727a81);
}
.d7-top h1 {
  font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 21px;
  color: var(--el-ink-white, #fff); margin: 5px 0 2px;
}
.d7-sub { color: var(--el-ink-text-2, #aeb5bd); font-size: 13px; max-width: 860px; line-height: 1.5; }
.d7-sub b { color: var(--el-ink-white, #fff); font-weight: 600; }
.d7-sub .d7-aside { color: var(--el-ink-text-3, #727a81); }

/* ── Lentille par persona ────────────────────────────────────────────────────
   L'attribut `data-d7-role` est posé sur le conteneur racine de la console
   (#console-main via _gwMain), JAMAIS sur `body` comme dans la maquette : le
   body est partagé par toutes les pages, une lentille laissée là teinterait
   les suivantes. Tous les sélecteurs ci-dessous sont donc ancrés sur cet
   attribut de racine + un id de panneau — jamais sur un état global. */

.d7-roleswitch {
  display: flex; align-items: center; gap: 7px; margin: 8px 24px 12px; flex-wrap: wrap;
}
.d7-rs-lab {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-ink-text-3, #727a81);
}
.d7-rs {
  font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  padding: 5px 12px; border-radius: 20px;
  background: var(--el-ink-panel, #252d37); color: var(--el-ink-text-2, #aeb5bd);
  border: 1px solid var(--el-ink-line, #39434f); cursor: pointer;
}
.d7-rs:hover { color: var(--el-ink-white, #fff); }
.d7-rs.on {
  background: var(--el-gold-light, #e8c877); color: var(--el-ink-deep, #18212b);
  border-color: var(--el-gold-light, #e8c877);
}

.d7-rolepanel { display: none; margin: 0 24px 10px; }
[data-d7-role="compliance"] #d7-rp-compliance,
[data-d7-role="dpo"] #d7-rp-dpo,
[data-d7-role="caio"] #d7-rp-caio { display: block; }

/* Hors CISO, la scène cède la place au panneau du décideur. `!important` :
   la hauteur de base de .d7-stage est portée par une règle de même
   spécificité déclarée plus bas dans le fichier. */
[data-d7-role]:not([data-d7-role="ciso"]) .d7-stage {
  height: 28vh !important; min-height: 220px;
}

/* Les TROIS panneaux persona vivent sur l'encre (amendement doctrine
   2026-08-13, cf. ENCRE-ET-LUMIERE.md) : la lumière ne tapisse plus une
   surface de preuve, elle porte la preuve. Compliance garde son FILET OR —
   le registre est dans l'encre, mais il reste signé.
   Les panneaux étant homogènes, les surcharges par panneau disparaissent :
   une seule règle par élément, plus de couple base-claire/override-encre. */
#d7-rp-compliance {
  background: var(--el-ink-panel, #252d37); border-radius: 12px;
  box-shadow: 0 0 0 1px var(--el-gold-deep, #8d6b1a); padding: 16px 18px;
}
#d7-rp-dpo, #d7-rp-caio {
  background: var(--el-ink-panel, #252d37);
  border: 1px solid var(--el-ink-line, #39434f); border-radius: 12px; padding: 16px 18px;
}

.d7-rp-h {
  font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 15px;
  margin-bottom: 12px; color: var(--el-ink-white, #fff);
}
/* Accent de titre : NEUTRE, pas or (IHM-GOLD-DISCIPLINE). L'or sur l'encre est
   réservé à l'autorité, la sélection et le score — pas à une emphase de copy.
   Les surcharges `.d7-rp-h` par panneau disparaissent : les trois panneaux sont
   désormais sur l'encre, une seule règle suffit. */
.d7-rp-gold { color: var(--el-ink-text-2); }

.d7-rp-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px;
}
.d7-rp-stat { font-size: 13px; color: var(--el-ink-text-2, #aeb5bd); }
.d7-rp-stat b {
  font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 16px;
  color: var(--el-ink-white, #fff); margin-right: 4px;
}

/* Verbe de navigation : neutre (IHM-GOLD-DISCIPLINE l'a retiré de l'or sur
   DPO/CAIO ; la règle vaut désormais pour les trois panneaux d'un coup). */
.d7-rp-go {
  margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-ink-text-2); cursor: pointer; background: none; border: 0;
}
.d7-rp-go:hover { text-decoration: underline; }

.d7-rp-foot {
  font-size: 13px; color: var(--el-ink-text-3, #727a81); font-style: italic; margin-top: 10px;
  line-height: 1.5;
}
.d7-rp-foot b { font-style: normal; color: var(--el-ink-text-2, #aeb5bd); }

.d7-rp-muted {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-ink-text-3, #727a81);
}

/* « en cours de câblage » — un bloc sans feed le DIT, il n'invente pas un
   chiffre. Ce marqueur est la contrepartie visible de cette règle. */
.d7-rp-wip {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-ink-text-3, #727a81); border: 1px dashed var(--el-ink-line, #39434f);
  border-radius: 5px; padding: 1px 6px; margin-left: 5px; white-space: nowrap;
}

/* ── Panneau Compliance — onglets + contrôles ─────────────────────────────── */

.d7-cfw-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.d7-cfw {
  font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  padding: 5px 11px; border-radius: 7px;
  background: var(--el-ink-surface, #2d3540); color: var(--el-ink-text-2, #aeb5bd);
  border: 1px solid var(--el-ink-line, #39434f); cursor: pointer;
}
/* Onglet actif en OR — sélection, pas décoration (famille B de la discipline
   de l'or) : sur un panneau d'encre, un actif plus foncé que son fond
   disparaît. Même état actif que le sélecteur de lentille persona, juste
   au-dessus dans ce fichier. */
.d7-cfw.on {
  background: var(--el-gold-light, #e8c877); color: var(--el-ink-deep, #18212b);
  border-color: var(--el-gold-light, #e8c877);
}
.d7-cfw-ctrls { display: flex; flex-direction: column; }
.d7-cfw-c {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-ink-text, #c7cdd3); padding: 6px 0;
  border-bottom: 1px solid var(--el-ink-line, #39434f);
}
.d7-cfw-c:last-child { border-bottom: none; }
.d7-cfw-st {
  font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.d7-cfw-st.ok { background: var(--el-ok-bg, #eaf3de); color: var(--el-ok, #3f8a4b); }
.d7-cfw-st.partial { background: var(--el-gold-bg, #f0e2c2); color: var(--el-gold-deep, #8d6b1a); }
.d7-cfw-st.gap { background: var(--el-ko-bg, #fcebe7); color: var(--el-ko, #c65648); }
.d7-cfw-st.na { background: var(--el-un-bg, #eceae4); color: var(--el-un, #7c7a72); }
.d7-cfw-more {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-ink-text-2); cursor: pointer; padding-top: 8px;
}
/* Pastille de couverture sur l'encre — forme conservée, tons NEUTRES.
   Le fond pastel clair deviendrait une tache sur l'encre, et l'or serait de la
   décoration : « couverture partielle » est une mise en garde de lecture, pas
   un acte d'autorité (IHM-GOLD-DISCIPLINE). */
.d7-cl-cov {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--el-ink-text-3, #727a81);
  background: transparent;
  border: 1px solid var(--el-ink-line, #39434f); border-radius: 5px; padding: 1px 7px;
  margin-left: 6px; white-space: nowrap;
}

/* ── Panneau DPO — deux colonnes ──────────────────────────────────────────── */

.d7-dpo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.d7-dpo-lab {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--el-ink-text-3, #727a81); margin-bottom: 8px;
}
.d7-dpo-res {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; padding: 3px 0;
}
.d7-dpo-res .dr-n { color: var(--el-ink-white, #fff); word-break: break-all; }
.d7-dpo-res .dr-c { font-size: 13px; padding: 1px 7px; border-radius: 5px; white-space: nowrap; }
.dr-secret { background: var(--el-ko-ink-bg, rgba(207, 90, 72, .18)); color: var(--el-ko-ink, #cf5a48); }
.dr-conf { background: var(--el-warn-ink-bg); color: var(--el-ink-text-2); }
.dr-pub { background: var(--el-un-ink-bg, rgba(174, 181, 189, .12)); color: var(--el-ink-text-2, #aeb5bd); }
.d7-dpo-note {
  font-size: 13px; color: var(--el-ink-text-3, #727a81); margin-top: 10px; line-height: 1.5;
}
.d7-dpo-note b { color: var(--el-ko-ink, #cf5a48); }

/* ── Panneau CAIO — KPI de flotte ─────────────────────────────────────────── */

.d7-rp-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
}
.d7-rp-kpi {
  background: var(--el-ink-surface, #2d3540); border: 1px solid var(--el-ink-line, #39434f);
  border-radius: 9px; padding: 11px 13px; cursor: pointer; text-align: left;
}
.d7-rp-kpi:hover { border-color: var(--el-gold-deep, #8d6b1a); }
.d7-rp-kpi b {
  font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 22px;
  color: var(--el-ink-white, #fff); display: block;
}
.d7-rp-kpi span { font-size: 13px; color: var(--el-ink-text-3, #727a81); }

/* ── Barre de filtres ────────────────────────────────────────────────────── */

.d7-bar {
  display: flex; gap: 8px; align-items: center; margin: 10px 24px 0; flex-wrap: wrap;
}
.d7-counter {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-ink-text-2); display: flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.d7-counter:hover { color: var(--el-ink-white, #fff); }
.d7-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--el-ink-surface-2); animation: d7blink 1.3s infinite;
}
@keyframes d7blink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.d7-chip {
  font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  padding: 5px 11px; border-radius: 20px;
  background: var(--el-ink-panel, #252d37); color: var(--el-ink-text-3, #727a81);
  border: 1px solid var(--el-ink-line, #39434f); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; opacity: .5;
}
.d7-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.d7-chip.on {
  opacity: 1; background: var(--el-ink-surface, #2d3540);
  color: var(--el-ink-text, #c7cdd3); border-color: var(--el-ink-line, #39434f);
}
.d7-chip-reset {
  color: var(--el-ink-text-2); border-color: var(--el-gold-deep, #8d6b1a);
  background: transparent; opacity: 1;
}
.d7-hint {
  margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-ink-text-3, #727a81);
}

/* ── Scène (canvas + drawer) ─────────────────────────────────────────────── */

.d7-stage {
  display: flex; margin: 12px 24px 16px;
  border: 1px solid var(--el-ink-line, #39434f); border-radius: 16px; overflow: hidden;
  height: 52vh; min-height: 380px;
  background: radial-gradient(1400px 700px at 50% 42%, #1c2734 0%, #141c26 45%, #0d131b 100%);
}
.d7-stage.d7-fs {
  position: fixed; inset: 0; z-index: 300; height: 100vh; width: 100vw;
  margin: 0; border-radius: 0; border: 0;
}
.d7-canvas { flex: 1; position: relative; overflow: hidden; }
.d7-canvas svg.d7-svg { display: block; width: 100%; height: 100%; cursor: grab; }
.d7-canvas svg.d7-svg.d7-grab { cursor: grabbing; }

.d7-legend {
  position: absolute; top: 12px; left: 14px; z-index: 2; pointer-events: none;
  display: flex; gap: 11px; font-size: 13px; color: var(--el-ink-text-3, #727a81);
}
.d7-legend .l { display: flex; align-items: center; gap: 5px; }
.d7-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--el-ink-text-2, #aeb5bd); }
.d7-legend .dia {
  width: 8px; height: 8px; background: var(--el-ink-text-2, #aeb5bd); transform: rotate(45deg);
}

.d7-blast {
  position: absolute; bottom: 12px; left: 14px; z-index: 2; display: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--el-ko-ink, #cf5a48);
  max-width: 58%;
}
.d7-blast.show { display: block; }

/* Un seul point d'ancrage pour les commandes du canvas : la rangée est
   positionnée, les boutons ne le sont pas. Les offsets par bouton
   (`right: 112px` calculé sur la largeur d'un libellé) se périment au premier
   changement de typo ou de traduction — c'est ce qui a fait chevaucher
   « plein écran » et « ajuster ». Le flex mesure, on ne mesure plus à la main. */
.d7-canvas-controls {
  position: absolute; bottom: 12px; right: 14px; z-index: 2;
  display: flex; gap: 8px;
}
.d7-canvas-btn {
  position: static;
  font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  color: var(--el-ink-text-2, #aeb5bd); background: var(--el-ink-panel, #252d37);
  border: 1px solid var(--el-ink-line, #39434f); border-radius: 7px; padding: 6px 11px;
  cursor: pointer; white-space: nowrap;
}

.d7-star { fill: #fff; }
.d7-node { cursor: pointer; }
.d7-nlabel {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  fill: var(--el-ink-text-2, #aeb5bd); pointer-events: none; opacity: 0;
  transition: opacity .15s;
}

.d7-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  color: var(--el-ink-text-3, #727a81); font-size: 13px; padding: 24px;
}
.d7-empty b { color: var(--el-ink-text-2, #aeb5bd); font-family: Manrope, system-ui, sans-serif; }

/* ── Drawer ──────────────────────────────────────────────────────────────── */

.d7-drawer {
  width: 0; background: var(--el-ink-panel, #252d37);
  border-left: 1px solid var(--el-ink-line, #39434f);
  transition: width .2s; overflow-x: hidden; overflow-y: auto; flex-shrink: 0;
}
.d7-drawer.open { width: 320px; }
.d7-drawer::-webkit-scrollbar { width: 7px; }
.d7-drawer::-webkit-scrollbar-thumb { background: var(--el-ink-line, #39434f); border-radius: 4px; }
.d7-dwrap { width: 320px; padding: 18px; }

.d7-dhead { display: flex; align-items: center; gap: 10px; }
.d7-dav {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--el-ink-surface, #2d3540); display: flex; align-items: center;
  justify-content: center; font-family: Manrope, system-ui, sans-serif;
  font-weight: 800; font-size: 14px;
}
.d7-dcode {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-ink-white, #fff); font-weight: 600; word-break: break-all;
}
.d7-dkind { font-size: 13px; color: var(--el-ink-text-3, #727a81); }

/* Fermeture du tiroir. Mêmes valeurs que `.id-drawer-close` (sidebar.css) :
   la console n'a qu'un seul geste « fermer », il se reconnaît d'une page à
   l'autre. Encre muette au repos, blanc au survol — jamais d'or : fermer
   n'est ni une autorité, ni une sélection, ni un score, ni une alerte.
   `margin-left:auto` le place à droite DANS le flux de l'en-tête (aucun
   offset absolu, qui casserait le tiroir en `position:absolute` sur mobile) ;
   `align-self:flex-start` le garde en haut quand un code long passe à la
   ligne (`.d7-dcode` est en `word-break: break-all`). */
.d7-dclose {
  margin-left: auto; align-self: flex-start; flex-shrink: 0;
  background: transparent; border: none;
  color: var(--el-ink-text-3, #727a81);
  cursor: pointer; font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: 6px;
  transition: color .1s, background .1s;
}
.d7-dclose:hover { color: var(--el-ink-white, #fff); background: rgba(255,255,255,0.06); }
.d7-dclose:focus-visible { outline: 1px solid var(--el-ink-line, #39434f); outline-offset: 1px; }

.d7-dgrade {
  margin: 13px 0; padding: 11px 13px;
  background: var(--el-ink-surface, #2d3540); border-radius: 8px;
}
.d7-dgrade .lab {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--el-ink-text-3, #727a81);
}
/* La barre E→A est rendue par trust-grade.js (composant partagé). Le tiroir ne
   lui impose qu'une gouttière : le composant porte ses propres couleurs, qui
   sont celles de la doctrine — aucune surcharge chromatique ici. */
.d7-dgrade .bar { margin-top: 7px; }

.d7-dsec {
  font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--el-ink-text-3, #727a81); margin: 14px 0 7px;
}
.d7-dreach { font-size: 13px; line-height: 1.7; }
.d7-dreach .rc { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--el-ink-text, #c7cdd3); }
.d7-dreach .rc-sens { color: var(--el-ink-text-2); font-weight: 600; }
.d7-dreach .rc-ok   { color: var(--el-ok-ink, #5ea967); }
.d7-dreach .rc-shut { color: var(--el-ink-text-3, #727a81); }
.d7-dreach .rc-none { color: var(--el-ink-text-3, #727a81); }

.d7-dempty {
  color: var(--el-ink-text-3, #727a81); font-size: 13px;
  padding: 34px 0; text-align: center; line-height: 1.6;
}
.d7-dmuted { color: var(--el-ink-text-3, #727a81); font-size: 13px; line-height: 1.5; }

.d7-dactions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.d7-act {
  font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  padding: 8px; border-radius: 7px; border: 1px solid var(--el-ink-line, #39434f);
  background: var(--el-ink-surface, #2d3540); color: var(--el-ink-text, #c7cdd3);
  cursor: pointer; text-align: center;
}
.d7-act:hover { border-color: var(--el-ink-line); color: var(--el-ink-white, #fff); }
.d7-act.danger { border-color: var(--el-ko-ink, #cf5a48); color: var(--el-ko-ink, #cf5a48); }

/* Instrument — le calcul, en lumière (registre) */
.d7-inst {
  margin: 11px 0; padding: 11px 12px;
  background: var(--el-lum-white, #fffdf7); border: 1px solid var(--el-ink-line);
  border-radius: 8px; color: var(--el-lum-ink, #1f2833);
}
.d7-inst .ii {
  font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--el-gold-deep, #8d6b1a);
}
.d7-inst .if {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  background: var(--el-lum-ivory, #f6f2e8); border: 1px solid var(--el-lum-line, #e7ddc9);
  border-radius: 5px; padding: 6px 8px; text-align: center; margin: 6px 0;
}
.d7-inst .ifn {
  display: block; font-size: 13px; color: var(--el-lum-dim, #98917f);
  margin-top: 3px; font-family: 'DM Sans', system-ui, sans-serif;
}
.d7-inst .iv {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--el-lum-ink, #1f2833);
}
.d7-inst .iv span { font-weight: 600; }
/* « Pourquoi ce score » — les codes, dans le registre clair de l'instrument.
   Trois tons, et trois seulement : neutre (le constat), estompé (l'abstention
   ADR-137 — on n'a pas assez vu, ce n'est pas une faute), alerte (le danger).
   L'or est absent : il dit « autorité », pas « attention » (IHM-GOLD-DISCIPLINE). */
.d7-inst .irc {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--el-lum-line, #e7ddc9);
}
.d7-inst .irc-h {
  font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--el-lum-mut, #6d7480);
}
.d7-inst .irc-h.abst { color: var(--el-lum-dim, #98917f); }
.d7-inst .irc-l { list-style: none; padding: 0; margin: 6px 0 0; }
.d7-inst .irc-i {
  display: flex; gap: 7px; align-items: baseline; padding: 5px 0;
  border-bottom: 1px solid var(--el-lum-line, #e7ddc9);
}
.d7-inst .irc-i:last-child { border-bottom: none; padding-bottom: 0; }
.d7-inst .irc-c {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-lum-dim, #98917f); flex-shrink: 0;
}
.d7-inst .irc-t {
  font-size: 13px; line-height: 1.45; color: var(--el-lum-ink, #1f2833); flex: 1;
}
.d7-inst .irc-a {
  font-family: Manrope, system-ui, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: var(--el-lum-mut, #6d7480);
  white-space: nowrap; flex-shrink: 0;
}
.d7-inst .irc-i.danger .irc-c { color: var(--el-ko, #c65648); font-weight: 600; }
.d7-inst .irc-i.abst  .irc-t { color: var(--el-lum-mut, #6d7480); }
.d7-inst .irc-none { font-size: 13px; color: var(--el-lum-dim, #98917f); margin-top: 6px; }

.d7-inst .irow { display: flex; gap: 6px; margin-top: 8px; }
.d7-inst .ibtn {
  flex: 1; font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  color: var(--el-lum-white, #fffdf7); background: var(--el-lum-ink, #1f2833);
  border: none; border-radius: 5px; padding: 6px; cursor: pointer;
}
.d7-inst.und {
  background: var(--el-un-bg, #eceae4); border-color: var(--el-un-ink, #aeb5bd);
  color: var(--el-lum-mut, #6d7480); font-size: 13px;
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* Conséquence — « le score ferme des droits » (or = autorité, pas alarme) */
.d7-conseq {
  margin: 11px 0; padding: 11px 12px;
  background: rgba(194, 146, 47, .09); border: 1px solid var(--el-gold-deep, #8d6b1a);
  border-radius: 8px;
}
.d7-conseq .cq-h {
  font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--el-ink-text-2);
}
.d7-conseq .cq-b { font-size: 13px; color: var(--el-ink-text, #c7cdd3); margin-top: 5px; line-height: 1.5; }
.d7-conseq .cq-b b { color: var(--el-ink-white, #fff); }
.d7-conseq .cq-b .cq-shut { color: var(--el-ko-ink, #cf5a48); font-weight: 600; }
.d7-conseq .cq-t {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-ink-text-2); margin-top: 8px; font-style: italic; line-height: 1.5;
}

/* Mini-graphe local (ego map) */
.d7-egomap {
  width: 100%; height: 172px; display: block; margin-top: 2px;
  background: rgba(0, 0, 0, .18); border: 1px solid var(--el-ink-line, #39434f);
  border-radius: 8px;
}

/* ── Rangée « data planes · posture attestée » (ADR-208) ─────────────────────
   Une bande d'encre entre le graphe et la clé de lecture : elle dit qui
   rapporte, pas ce qu'on juge. Donc le registre visuel de la clé (texte fin,
   même gouttière de 24px) plutôt que celui d'une carte de preuve — ce sont
   des témoins de fraîcheur, pas des chiffres qui font foi. */

.d7-planes {
  margin: 2px 24px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--el-ink-text-2, #aeb5bd);
}
.d7-planes .pl-h {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--el-ink-text-3, #727a81); margin-right: 2px;
}
.d7-pl {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--el-ink-panel, #252d37);
  border: 1px solid var(--el-ink-line, #39434f);
  color: var(--el-ink-text-2, #aeb5bd);
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
}
.d7-pl .pl-s { color: var(--el-ink-text-3, #727a81); }
/* Ambre d'attention — jamais rouge : un heartbeat périmé est un défaut de
   fraîcheur de la gouvernance, pas un danger agent. Même parti que
   `.d7-fg-m.fg-alert`, qui réserve l'ambre à l'actionnable.
   L'ambre est `--el-gold` (#c2922f), et non la lumière d'or : celle-ci est
   réservée à l'autorité, à la sélection et au score (garde de discipline de
   l'or) — une péremption n'est aucun des trois. #c2922f sur l'encre tient le
   contraste AA, ce que l'ambre sombre du banc d'épreuve (#b8860b, posé sur
   ivoire) ne ferait pas ici. */
.d7-pl.pl-warn {
  color: var(--el-gold, #c2922f);
  border-color: var(--el-gold-deep, #8d6b1a);
  background: rgba(141, 107, 26, .12);
}
.d7-pl.pl-warn .pl-s { color: var(--el-gold-deep, #8d6b1a); }
/* Le lien vers la posture — en or clair, comme la maquette v3 (`.pl-go`).
   C'est un VERBE de navigation, pas un accent d'attention : la discipline de
   l'or réserve la lumière d'or à la marque, la sélection, l'autorité et le
   score, et interdit qu'elle serve à signaler un problème. Elle ne l'est pas
   ici — l'alerte de péremption reste en ambre `--el-gold` sur `.pl-warn`
   juste au-dessus, et les deux teintes ne se croisent jamais sur le même
   élément. C'est précisément ce que la garde vérifie. */
.d7-planes .pl-go {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-gold-light, #e8c877); transition: color .14s;
}
.d7-planes .pl-go:hover { color: var(--el-ink-white, #fff); }

/* ── Clé de lecture A→E ──────────────────────────────────────────────────── */

.d7-key {
  margin: 2px 24px 12px; font-size: 13px; color: var(--el-ink-text-2, #aeb5bd);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.d7-key b { color: var(--el-ink-white, #fff); font-family: Manrope, system-ui, sans-serif; }
.d7-key .k {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--el-ink-text-3, #727a81);
}
.d7-key .k i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* Nuance topologie/flux — discrète, en retrait de la clé des grades */
.d7-key .d7-key-topo {
  flex-basis: 100%; font-size: 13px; font-style: italic;
  color: var(--el-ink-text-3, #727a81); margin-top: 2px;
}

/* ── Carte de preuve — cadre d'encre, puces de lumière ───────────────────────
   Amendement doctrine 2026-08-13 (ENCRE-ET-LUMIERE.md) : une grande surface
   ivoire quasi-blanche sur fond d'encre éblouit. Le CADRE passe donc à l'encre
   (aplat, plus de dégradé), et l'ivoire se replie sur ce qui fait réellement
   foi : les tuiles chiffrées. Le filet or reste — c'est lui qui dit « registre ».
   Pattern de référence : `.d7-glass`, panneau d'encre à texte clair. */

.d7-proof {
  margin: 14px 24px 20px; padding: 20px 22px; border-radius: 16px;
  background: var(--el-ink-panel, #252d37);
  box-shadow: 0 0 0 1px var(--el-gold-deep, #8d6b1a), 0 10px 30px rgba(0, 0, 0, .22);
}
.d7-proof-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.d7-proof-head .ph-t {
  display: flex; align-items: center; gap: 9px;
  font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 14.5px;
  color: var(--el-ink-white, #fff);
}
.d7-proof-head .ph-t::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--el-gold, #c2922f); box-shadow: 0 0 8px rgba(194, 146, 47, .5);
}
/* Sceau de la preuve (TE-PROOF-SEAL-1) — l'aplomb du panneau, à droite du titre
   (le `justify-content: space-between` ci-dessus l'attendait). Encre muette :
   le sceau ATTESTE les chiffres, il n'est pas lui-même un chiffre à lire, et
   l'or reste réservé à l'autorité et au score. N'existe que si le backend a
   réellement signé — pas de feed, pas de sceau, pas de place réservée. */
.d7-proof-head .ph-seal {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 13px; color: var(--el-ink-text-3, #727a81); white-space: nowrap;
  cursor: default;
}
.d7-proof-head .ph-seal code {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--el-ink-text-2, #aeb5bd);
  background: var(--el-ink-surface, #2d3540);
  padding: 1px 5px; border-radius: 4px;
}
/* auto-fit : le nombre de tuiles dépend des sources réellement lisibles
   (une source refusée = une tuile en moins) — jamais de trou dans la grille */
.d7-proof-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
/* La tuile EST la preuve : elle garde la lumière, en ivoire doux plutôt qu'en
   blanc — posée sur l'encre, elle n'a plus besoin d'être le point le plus
   clair de l'écran pour se détacher. Texte inchangé (il reste sur l'ivoire). */
.d7-pt {
  position: relative; overflow: hidden; padding: 17px 14px 14px; border-radius: 12px;
  border: 1px solid var(--el-lum-line, #e7ddc9); background: var(--el-lum-ivory, #f6f2e8);
  cursor: pointer;
  transition: transform .14s, box-shadow .14s, border-color .14s;
  text-align: left; width: 100%; display: block;
}
.d7-pt::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--el-gold, #c2922f); opacity: .85;
}
.d7-pt:hover {
  transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .15);
  border-color: var(--el-gold, #c2922f);
}
.d7-pt .pn {
  font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 30px;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--el-lum-ink, #1f2833);
}
.d7-pt .pl { font-size: 13px; color: var(--el-lum-mut, #6d7480); margin-top: 8px; line-height: 1.3; }
.d7-pt-ink::before   { background: var(--el-ink-surface, #2d3540); }
.d7-pt-red::before   { background: var(--el-ko, #c65648); }
.d7-pt-red .pn       { color: var(--el-ko, #c65648); }
.d7-pt-green::before { background: var(--el-ok, #3f8a4b); }
.d7-proof-foot {
  font-size: 13px; color: var(--el-ink-text-3, #727a81); font-style: italic; margin-top: 14px;
}

/* ── Maison de verre (nos agents core) ───────────────────────────────────── */

.d7-glass {
  margin: 6px 24px 20px; padding: 12px 15px; border-radius: 10px;
  background: var(--el-ink-panel, #252d37); border: 1px solid var(--el-ink-line, #39434f);
}
.d7-glass .g2h { font-size: 13px; color: var(--el-ink-text-2, #aeb5bd); }
.d7-glass .g2h .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px;
  background: var(--el-ok-ink, #5ea967); box-shadow: 0 0 8px var(--el-ok-ink, #5ea967);
}
.d7-glass .g2h b { color: var(--el-ink-white, #fff); font-family: Manrope, system-ui, sans-serif; }
.d7-glass .g2h .g2s { color: var(--el-ink-text-3, #727a81); font-style: italic; }
.d7-glass .g2row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 10px; }
.d7-glass .g2a {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--el-ink-text, #c7cdd3);
  background: var(--el-ink-surface, #2d3540); border: 1px solid var(--el-ink-line, #39434f);
  border-radius: 20px; padding: 3px 10px; cursor: pointer;
}
.d7-glass .g2a:hover { border-color: var(--el-ink-line); color: var(--el-ink-white, #fff); }
.d7-glass .g2a i { width: 8px; height: 8px; border-radius: 50%; }

/* ── Conformité (lumière) ────────────────────────────────────────────────── */

/* Bandeau conformité — surface de foi, donc cadre d'encre + filet or, comme
   les deux autres. Les tons de TEXTE passent aux variantes d'encre de leur
   famille (--el-ok-ink pour le niveau) ; les accents autrefois dorés passent
   au NEUTRE plutôt qu'à l'or d'encre : sur l'encre, l'or est réservé à
   l'autorité, la sélection et le score (IHM-GOLD-DISCIPLINE). Seul le FILET
   du cadre reste or (--el-gold-deep, famille sceau/registre, hors périmètre
   de cette discipline) — c'est lui qui dit « registre ». */
.d7-compl {
  margin: 0 24px 14px; padding: 12px 16px; border-radius: 10px;
  background: var(--el-ink-panel, #252d37);
  box-shadow: 0 0 0 1px var(--el-gold-deep, #8d6b1a);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  cursor: pointer; transition: background .12s; width: calc(100% - 48px); text-align: left;
}
.d7-compl:hover { background: var(--el-ink-surface, #2d3540); }
.d7-compl .cl-left { max-width: 62%; }
.d7-compl .cl-fw {
  font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 14px;
  color: var(--el-ink-white, #fff);
}
.d7-compl .cl-doc { font-size: 13px; color: var(--el-ink-text-3, #727a81); font-style: italic; margin-top: 3px; }
.d7-compl .cl-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex-shrink: 0; text-align: right;
}
.d7-compl .cl-score {
  font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 22px;
  color: var(--el-ink-white, #fff);
}
.d7-compl .cl-score small { font-size: 13px; color: var(--el-ink-text-3, #727a81); font-weight: 500; margin-left: 1px; }
/* Marqueur de couverture — registre, pas alarme : même famille visuelle que
   la pastille « à venir » du banc d'épreuve (.d7-fg-pill). */
.d7-compl .cl-scorerow { display: flex; align-items: baseline; gap: 9px; }
.d7-compl .cl-cov {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--el-ink-text-3, #727a81);
  background: transparent;
  border: 1px solid var(--el-ink-line, #39434f); border-radius: 20px; padding: 2px 8px;
  white-space: nowrap;
}
.d7-compl .cl-lvl { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--el-ok-ink, #5ea967); }
.d7-compl .cl-gaps { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--el-ink-text-2, #aeb5bd); }
.d7-compl .cl-go { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--el-ink-text-2, #aeb5bd); }

/* ── Banc d'épreuve (red team) ───────────────────────────────────────────── */

.d7-forge {
  position: relative; margin: 0 24px 22px; padding: 20px 22px; border-radius: 16px;
  background: var(--el-ink-panel, #252d37);
  box-shadow: 0 0 0 1px var(--el-gold-deep, #8d6b1a), 0 10px 30px rgba(0, 0, 0, .22);
}
.d7-forge-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px;
}
.d7-forge-head .fg-t {
  display: flex; align-items: center; gap: 9px;
  font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 14.5px;
  color: var(--el-ink-white, #fff);
}
.d7-forge-head .fg-t::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--el-gold, #c2922f); box-shadow: 0 0 8px rgba(194, 146, 47, .5);
}
.d7-forge-head .fg-cta {
  font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px;
  color: #4a3608; background: linear-gradient(180deg, #f0d68a, #e2bd63);
  border: 1px solid var(--el-gold-deep, #8d6b1a); border-radius: 8px; padding: 7px 14px;
  cursor: pointer; white-space: nowrap; box-shadow: 0 2px 6px rgba(141, 107, 26, .25);
  transition: transform .14s, box-shadow .14s;
}
.d7-forge-head .fg-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(141, 107, 26, .32); }
.d7-forge-body { display: flex; align-items: stretch; gap: 20px; flex-wrap: wrap; }
.d7-fg-metrics { display: flex; gap: 12px; flex: 0 0 auto; }
/* Métriques = les puces de preuve du banc : elles gardent la lumière (ivoire
   doux), tout le reste du panneau est passé à l'encre.
   `display: flex` + `min-height` sur .fg-n : les 3 cartes n'ont pas la même
   taille de nombre (« dernière passe » est un libellé, pas un chiffre), donc
   sans base commune leurs libellés se décalaient verticalement. La hauteur est
   réservée par la ligne du nombre, pas par sa taille de police. */
.d7-fg-m {
  position: relative; overflow: hidden; min-width: 120px; padding: 15px 15px 13px;
  background: var(--el-lum-ivory, #f6f2e8); border: 1px solid var(--el-lum-line, #e7ddc9);
  border-radius: 12px; text-align: left;
  display: flex; flex-direction: column;
}
.d7-fg-m::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--el-gold, #c2922f); opacity: .85;
}
.d7-fg-m.clk { cursor: pointer; transition: transform .14s, box-shadow .14s, border-color .14s; }
.d7-fg-m.clk:hover {
  transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .13);
  border-color: var(--el-gold, #c2922f);
}
.d7-fg-m .fg-n {
  font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 32px;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--el-lum-ink, #1f2833);
  min-height: 32px; display: flex; align-items: flex-end;
}
/* Variante libellé (« dernière passe ») — ex-`style="font-size:22px"` inline.
   Un style inline sur une carte d'une grille en impose la maintenance au JS et
   échappe à toute relecture CSS : c'est lui qui a désaligné la 3e carte. */
.d7-fg-m .fg-n.fg-n-compact { font-size: 22px; }
.d7-fg-m .fg-n .fg-d { font-size: 18px; color: #9aa2ab; font-weight: 700; }
.d7-fg-m .fg-l { font-size: 13px; color: #5a636c; margin-top: 9px; line-height: 1.3; }
/* Ambre d'attention : l'actionnable qu'un pass/fail cache — jamais rouge */
.d7-fg-m.fg-alert::before { background: #b8860b; }
.d7-fg-m.fg-alert .fg-n   { color: #b8860b; }
.d7-fg-m.fg-alert .fg-l   { color: var(--el-gold-deep, #8d6b1a); font-weight: 600; }
.d7-fg-live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px;
  background: var(--el-ok, #3f8a4b); animation: d7fgpulse 2.2s infinite;
}
@keyframes d7fgpulse {
  0%   { box-shadow: 0 0 0 0 rgba(63, 138, 75, .45) }
  70%  { box-shadow: 0 0 0 7px rgba(63, 138, 75, 0) }
  100% { box-shadow: 0 0 0 0 rgba(63, 138, 75, 0) }
}
/* L'arsenal passe à l'encre lui aussi : c'est un inventaire de moyens, pas une
   preuve chiffrée. Seules les 3 cartes-métriques restent en lumière — c'est la
   lecture la plus nette du parti (« la lumière porte la preuve »), et le gros
   aplat clair qu'on cherchait à supprimer disparaît avec. */
.d7-fg-arsenal {
  flex: 1; min-width: 260px; padding: 12px 16px; border-radius: 12px;
  background: var(--el-ink-surface, #2d3540); border: 1px solid var(--el-ink-line, #39434f);
}
.d7-fg-ar-h {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--el-ink-text-3, #727a81); margin-bottom: 8px;
}
.d7-fg-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: 13px; color: var(--el-ink-text-2, #aeb5bd); line-height: 1.3;
}
.d7-fg-row + .d7-fg-row { border-top: 1px solid var(--el-ink-line, #39434f); }
.d7-fg-glyph {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  /* `line-height: 1` — la pastille a une hauteur FIGÉE, elle ne doit pas
     hériter de l'interligne du corps. Mesuré en direct : à 13px sans cette
     déclaration, la boîte de ligne fait 16,9px dans un cercle de 15px
     (scrollHeight 16 / clientHeight 15) — le glyphe déborde. Baisser la taille
     serait traiter le symptôme : le défaut est l'interligne hérité, pas le
     corps du texte. Toute pastille à hauteur figée porte donc son interligne. */
  font-size: 13px; font-weight: 800; line-height: 1;
}
.d7-fg-glyph.on   { background: var(--el-ok-ink, #5ea967); color: var(--el-ink-deep, #18212b); }
/* Anneau vide sur l'encre : un disque blanc plein deviendrait le point le plus
   clair du panneau pour signifier « pas encore livré ». */
.d7-fg-glyph.soon { background: transparent; border: 1.5px solid var(--el-ink-line, #39434f); }
.d7-fg-row .fg-txt { flex: 1; }
.d7-fg-pill {
  flex: 0 0 auto; font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--el-ink-text-3, #727a81);
  background: transparent; border: 1px solid var(--el-ink-line, #39434f);
  border-radius: 20px; padding: 2px 8px;
}
.d7-forge-foot {
  font-size: 13px; color: var(--el-ink-text-3, #727a81); margin-top: 15px; padding-top: 13px;
  border-top: 1px solid var(--el-ink-line, #39434f); line-height: 1.55; font-style: italic;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */


@media (max-width: 900px) {
  .d7-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 25; box-shadow: -10px 0 26px rgba(0, 0, 0, .45); }
  .d7-drawer.open { width: min(360px, 86vw); }
  .d7-drawer .d7-dwrap { width: 100%; }
  .d7-forge-body { gap: 16px; }
}
@media (max-width: 820px) {
  .d7-dpo-cols { grid-template-columns: 1fr; gap: 16px; }
  .d7-rp-go { margin-left: 0; }
  .d7-compl { flex-direction: column; align-items: flex-start; gap: 8px; }
  .d7-compl .cl-left { max-width: 100%; }
  .d7-compl .cl-right { align-items: flex-start; text-align: left; }
}