/* Cockpit Phénoménologique — palette monochrome ambre / vert olive (specs UX L56), sombre et claire.
   DA-04 (avenant UI/UX L49) : thèmes sombre et clair, bascule automatique sur la préférence du système
   (`prefers-color-scheme`, annexe n° 22, écart E16 / page-021). La palette claire est un comment du constructeur
   (K19b) : les mêmes teintes ambre et olive, assombries pour un fond clair, aussi lisibles que la sombre.
   Toute couleur vit en variable : aucune règle n'en écrit une, et chaque thème les redéfinit toutes.
   Aucune police distante, aucun CDN : souveraineté autant que sûreté (DT-UI-01). */

:root {
  --fond: #0d0f0c;
  --fond-zone: #14170f;
  --trait: #2a2f22;
  --ambre: #d8a14a;
  --ambre-pale: #8a6b33;
  --olive: #8fa05c;
  --texte: #d7d9cc;
  --texte-faible: #7d8272;
  /* La couleur du NON MESURÉ. Volontairement éteinte, jamais alarmante : une absence de mesure
     n'est pas une panne. Elle ne doit surtout pas ressembler à un zéro ni à une jauge vide. */
  --non-mesure: #55594c;
  /* LE CREUX DU SURVOL. Cette variable était EMPLOYÉE sans être DÉCLARÉE — `.composeur textarea` (l.149)
     et `.composeur-pied button:hover` (l.169) l'attendaient depuis le Sprint 12, et `var()` sans repli
     retombe silencieusement sur `transparent` : un survol qui ne répond pas, contre la norme 1.3.1 de
     Bastien & Scapin (feedback immédiat < 50 ms) que l'avenant §1.3 pose en invariant. Défaut PRÉEXISTANT,
     découvert en propageant la variable à la Zone 4 — trois règles l'attendent désormais. */
  --fond-creux: #1b1f16;
  --pas: 0.75rem;
  /* RANG 13, K19b : le rétroéclairage de la posture clinique. Le cobalt est à la clinique, l'ambre à l'incongruence, jamais le rouge. */
  --cobalt: #3f6fb5;
  --cobalt-pale: #8fb0dc;
  --fond-cobalt: #0b121d;
  --fond-zone-cobalt: #101a2a;
  --trait-cobalt: #24364f;
  --fond-jauge: #1b1e16;
  --hachure: #232619;
  --fond-toile: #10130e;
  --ombre: rgba(0, 0, 0, 0.45);
  color-scheme: dark light;
}

/* LE THÈME CLAIR (DA-04) : la même palette, sur papier. Quand le système demande le clair, chaque couleur change ;
   la posture clinique garde son cobalt, l'incongruence son ambre, jamais le rouge. */
@media (prefers-color-scheme: light) {
  :root {
    --fond: #f3efe3;
    --fond-zone: #e9e4d4;
    --trait: #c9c1a6;
    --ambre: #7a4f0e;
    --ambre-pale: #7d602d;
    --olive: #4f5f22;
    --texte: #1f2218;
    --texte-faible: #575b4b;
    --non-mesure: #7e8172;
    --fond-creux: #dfd9c6;
    --cobalt: #2c5797;
    --cobalt-pale: #2c5797;
    --fond-cobalt: #e9eef6;
    --fond-zone-cobalt: #dfe7f2;
    --trait-cobalt: #a9bcd8;
    --fond-jauge: #dbd5c1;
    --hachure: #cec7b0;
    --fond-toile: #efeadc;
    --ombre: rgba(60, 48, 20, 0.18);
  }
}

* { box-sizing: border-box; }

/* L'ATTRIBUT `hidden` DOIT GAGNER, TOUJOURS. Sans cette règle, `main { display: grid }` ci-dessous
   l'écrase : `[hidden] { display: none }` vient de la feuille du NAVIGATEUR, et toute règle d'auteur
   qui pose un `display` sur le même élément la bat, quelle que soit sa spécificité. Le Cockpit restait
   donc affiché SOUS le porche d'éveil, avec des « — » partout — un tableau de bord qui a l'air figé
   alors que le Noyau n'a simplement jamais été éveillé. C'est exactement le mensonge que DA-10.04
   interdit, commis non par une valeur mais par une feuille de style.
   Une seule règle globale, jamais une exception par élément : le correctif posé élément par élément est
   ce qui a laissé passer le défaut — `.porche[hidden]` était traité, `main[hidden]` ne l'était pas. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font: 14px/1.5 ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* --- Bandeau ------------------------------------------------------------- */
.bandeau {
  display: flex; align-items: center; gap: var(--pas);
  padding: var(--pas) calc(var(--pas) * 1.5);
  border-bottom: 1px solid var(--trait);
  background: var(--fond-zone);
}
.marque { color: var(--ambre); letter-spacing: 0.28em; font-weight: 700; }
.lien { margin-left: auto; color: var(--texte-faible); font-size: 12px; }
.lien[data-vivant="oui"] { color: var(--olive); }
.lien[data-vivant="non"] { color: var(--ambre-pale); }

/* --- Posture (K19b) : dite en mots au bandeau, teintée sans rien cacher ni désactiver, sans mouvement ---- */
.posture { margin: 0; color: var(--texte-faible); font-size: 12px; }
body[data-posture="incongruence"] .bandeau { border-bottom-color: var(--ambre); }
body[data-posture="incongruence"] .posture { color: var(--ambre); }
body[data-posture="clinique"] {
  --fond: var(--fond-cobalt);
  --fond-zone: var(--fond-zone-cobalt);
  --trait: var(--trait-cobalt);
}
body[data-posture="clinique"] .bandeau { border-bottom-color: var(--cobalt); }
body[data-posture="clinique"] .posture { color: var(--cobalt-pale); }

/* --- Zones --------------------------------------------------------------- */
main { display: grid; gap: var(--pas); padding: var(--pas); max-width: 1100px; margin: 0 auto; }
/* RANG 13, K19b — LA RECOMPOSITION. Le balisage est dans l'ordre où la page se lit ; aucune propriété `order`. Une colonne d'abord (sous 860 px la
   Scène est donc sous l'échange) ; le panneau — l'échange à gauche, la Scène et le tiroir de la pesée à droite — ne se scinde qu'au-delà. */
.panneau { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pas); align-items: start; }
@media (min-width: 860px) { .panneau { grid-template-columns: 1fr 1fr; } }
.panneau-scene { display: grid; gap: var(--pas); min-width: 0; }
/* Dans un groupe (tiroir ou section), les lectures ne refont pas de cadre : un filet les sépare. */
.zone-groupe .zone { background: transparent; border-width: 1px 0 0; border-radius: 0; padding: var(--pas) 0 0; margin-top: var(--pas); }

.zone {
  background: var(--fond-zone);
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: var(--pas);
}
.zone h2 {
  margin: 0 0 var(--pas);
  font-size: 12px; font-weight: 600;
  color: var(--ambre-pale);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* --- Grandeurs et provenance --------------------------------------------- */
.grandeur { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pas); margin: 0.4rem 0; }
.etiquette { color: var(--texte-faible); min-width: 11rem; }
.valeur { color: var(--ambre); font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* DA-10.04 — LE RENDU DU « NON MESURÉ ».
   Il ne doit ressembler EN RIEN à un zéro : pas de chiffre, pas de jauge vide, pas d'animation.
   Un mot, en creux, et le motif au survol. */
.grandeur[data-sincerite="non_mesuree"] .valeur {
  color: var(--non-mesure);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.04em;
}
/* La valeur HÉRITÉE est réelle — elle a été mesurée, dans une vie antérieure. Elle s'affiche donc
   comme un nombre, mais dans un ambre éteint, et le JavaScript écrit à côté d'elle ce qu'elle est.
   Le texte vit là-bas et non ici : une légende posée en `content:` CSS ne se sélectionne pas, ne se
   lit pas par un lecteur d'écran fiable, et divergerait de la table close du fichier JavaScript. */
.grandeur[data-sincerite="heritee"] .valeur { color: var(--ambre-pale); }

/* Rang 11 : les listes de la confiance (Zone 1) et de CPT-e. Aucune couleur selon la valeur ni selon le jugement (ADR-0006). */
.parts { margin: 0 0 var(--pas) 16px; padding: 0; list-style: none; font-size: 13px; }
.parts li { margin: 2px 0; }
.parts li[data-sincerite="non_mesuree"] { color: var(--non-mesure); font-style: italic; }
.parts ul { margin: 2px 0 2px 16px; padding: 0; list-style: none; }
.attentes { margin: 4px 0 0 16px; padding: 0; list-style: none; color: var(--non-mesure); font-size: 12px; }
.provenance { color: var(--non-mesure); font-size: 11px; }

/* --- Jauge --------------------------------------------------------------- */
.jauge {
  height: 6px; background: var(--fond-jauge); border-radius: 3px; overflow: hidden; margin-bottom: var(--pas);
}
.jauge-remplissage {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--ambre-pale), var(--ambre));
  /* Feedback < 50 ms (avenant §1.3.1) : la transition ne retarde jamais la prise en compte. */
  transition: width 120ms linear;
}
/* Une jauge NON MESURÉE est hachurée, jamais vide — une barre à zéro serait lue comme « G_conf = 0 ». */
.jauge[data-sincerite="non_mesuree"] .jauge-remplissage {
  width: 100%;
  background: repeating-linear-gradient(45deg, var(--fond-jauge), var(--fond-jauge) 5px, var(--hachure) 5px, var(--hachure) 10px);
}

canvas { width: 100%; height: 120px; display: block; background: var(--fond-toile); border-radius: 3px; }

/* --- Tiroirs et listes ---------------------------------------------------- */
.tiroir { margin-top: var(--pas); }
.tiroir summary { cursor: pointer; color: var(--texte-faible); font-size: 12px; }
.pastille {
  display: inline-block; min-width: 1.4em; text-align: center;
  background: var(--fond-jauge); color: var(--ambre-pale); border-radius: 8px; padding: 0 0.4em; font-size: 11px;
}
.scars, .non-mesure { list-style: none; margin: var(--pas) 0 0; padding: 0; }
.scars li, .non-mesure li {
  padding: 0.4rem 0; border-top: 1px solid var(--trait); font-size: 12px; color: var(--texte-faible);
}
.non-mesure li b { color: var(--non-mesure); font-weight: 600; }
.note { color: var(--texte-faible); font-size: 12px; margin: 0 0 var(--pas); }
.metabolisme { margin-top: var(--pas); }

/* ZONE 3, moitié gauche — le fil et son composeur. Aucune règle `!important` : la garde G14 exige que
   seule `[hidden]` en porte une, faute de quoi une feuille d'auteur pourrait rivaliser avec le masquage. */
.zone-fil { min-width: 0; }
/* ZONE 3, moitié droite — la Scène des Affordances (avenant UI/UX §3) : à côté de l'échange dès que la page est assez large ; la prédiction de
   l'Hôte est un tiroir plus bas. Aucune couleur ne dépend d'une valeur (ADR-0006) : la surface du « non mesuré » est celle des parts. */
/* K15b : la proposition unique, en tête de la Scène — la même surface que les voies, aucune couleur ne dépend de sa classe ni de sa proximité. */
.proposition { margin: 0 0 var(--pas); padding-left: var(--pas); border-left: 3px solid var(--olive); overflow-wrap: anywhere; }
.proposition p { margin: 2px 0; font-size: 13px; }
.scene-voies { list-style: none; margin: 0 0 var(--pas); padding: 0; overflow-wrap: anywhere; }
.scene-voies > li { margin: 0 0 var(--pas); padding-left: var(--pas); border-left: 3px solid var(--olive); }
.scene-voies p { margin: 2px 0; font-size: 13px; }
.sous-titre { margin: var(--pas) 0 4px; font-size: 12px; font-weight: 600; color: var(--texte-faible); }
.zone-convergence { overflow-wrap: anywhere; }
.double-reponse { margin: 0 0 var(--pas); }
.double-cotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pas); }
.double-cote { border-left: 3px solid var(--olive); padding: 0 var(--pas); }
.double-texte { white-space: pre-wrap; overflow-wrap: anywhere; }
.fil { list-style: none; margin: 0 0 var(--pas); padding: 0; max-height: 18rem; overflow-y: auto; }
.fil li {
  border-left: 2px solid var(--ambre-pale);
  padding: 0.3rem var(--pas);
  margin-bottom: 0.35rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fil li[data-verdict="refuse"] { border-left-color: var(--non-mesure); color: var(--texte-faible); }
.fil li[data-verdict="attente"] { border-left-color: var(--olive); }
/* La parole d'ARKO : même surface que celle de l'Hôte, provenance distincte. Un dialogue montre
   qui parle, sans quoi l'Hôte lirait sa propre pensée comme une réponse. */
.fil li[data-verdict="arko"] { border-left-color: var(--ambre); color: var(--ambre); }
.fil li[data-verdict="arko"]::before { content: "Arko · "; color: var(--texte-faible); }
/* UNE PAROLE D'INITIATIVE (MET-a ; rang 13 K21a, rang 15 K21b) : Arko parle le premier, hors de tout tour de l'Hôte — la métacognition, le tour
   correctif, l'Acte d'Apprentissage appliqué. Même ambre, un trait pointillé : il parle de lui-même, il ne répond à rien. */
.fil li[data-verdict="arko"][data-initiative] { border-left-style: dotted; }
.fil li[data-verdict="arko"][data-initiative]::before { content: "Arko, de moi-même · "; }
/* UN SILENCE N'EST PAS UNE RÉPONSE : ni l'ambre de la parole d'Arko, ni son trait plein. Trait pointillé, texte
   éteint et penché — Arko dit pourquoi il se tait, il ne répond pas. */
.fil li[data-verdict="silence"] {
  border-left: 2px dotted var(--non-mesure); color: var(--texte-faible); font-style: italic;
}
.fil li[data-verdict="silence"]::before { content: "Arko se tait · "; font-style: normal; }
/* LA PAROLE D'ARKO RENDUE (6-4 ; le modèle écrit en Markdown, la page en fait des nœuds de lecture). Le premier paragraphe reste dans la ligne, après
   « Arko · » ; les blocs qui suivent ont leur place. Une liste imbriquée ne reprend pas le trait ni les marges d'une ligne du fil. Rien n'est cliquable. */
.fil li[data-verdict="arko"] > p:first-child { display: inline; }
.fil li[data-verdict="arko"] p, .fil li[data-verdict="arko"] ul, .fil li[data-verdict="arko"] ol, .fil li[data-verdict="arko"] pre,
.fil li[data-verdict="arko"] blockquote, .fil li[data-verdict="arko"] .md-tableau { margin: 0.4rem 0 0; }
.fil li[data-verdict="arko"] ul, .fil li[data-verdict="arko"] ol { padding-left: 1.4rem; }
.fil li[data-verdict="arko"] li { border-left: none; padding: 0; margin: 0; }
.fil li[data-verdict="arko"] code { font-family: ui-monospace, monospace; background: var(--fond-creux); padding: 0 0.25em; border-radius: 2px; }
.fil li[data-verdict="arko"] pre { padding: var(--pas); background: var(--fond-creux); overflow-x: auto; }
.fil li[data-verdict="arko"] pre code { padding: 0; background: none; }
.fil li[data-verdict="arko"] blockquote { padding-left: var(--pas); border-left: 2px solid var(--olive); color: var(--texte-faible); }
.fil li[data-verdict="arko"] hr { margin: 0.5rem 0; border: 0; border-top: 1px solid var(--trait); }
.fil li[data-verdict="arko"] .md-tableau { overflow-x: auto; }
.fil li[data-verdict="arko"] table { border-collapse: collapse; }
.fil li[data-verdict="arko"] th, .fil li[data-verdict="arko"] td { padding: 0.2rem 0.5rem; border: 1px solid var(--trait); text-align: left; }
.fil li[data-verdict="arko"] [data-alignement="droite"] { text-align: right; }
.fil li[data-verdict="arko"] [data-alignement="centre"] { text-align: center; }
.fil li[data-verdict="arko"] .md-url { color: var(--texte-faible); }
.composeur { display: flex; flex-direction: column; gap: 0.4rem; }
.composeur textarea {
  width: 100%;
  min-height: 3.4rem;
  resize: vertical;
  background: var(--fond-creux);
  color: var(--texte);
  border: 1px solid var(--ambre-pale);
  border-radius: 3px;
  padding: var(--pas);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.composeur textarea:focus { outline: 1px solid var(--ambre); }
.composeur-pied { display: flex; align-items: center; gap: var(--pas); }
.composeur-pied button {
  margin-left: auto;
  background: transparent;
  color: var(--ambre);
  border: 1px solid var(--ambre);
  border-radius: 3px;
  padding: 0.3rem 1.1rem;
  font: inherit;
  cursor: pointer;
}
.composeur-pied button:hover { background: var(--fond-creux); }

/* ZONE 2 — CE QUE L'HÔTE DIT DE SA TRÉSORERIE. Même surface d'écriture que la co-pensée : une case de
   saisie d'Arko se reconnaît, où qu'elle soit. Aucune règle `!important` (garde G14), aucun grisage : une
   case désactivée dirait à l'Hôte qu'il n'a pas le droit de parler (DA-10.02). */
.declaration { display: flex; flex-direction: column; gap: 0.3rem; margin-top: var(--pas); }
.declaration .etiquette { min-width: 0; font-size: 12px; }
.declaration input {
  background: var(--fond-creux);
  color: var(--texte);
  border: 1px solid var(--ambre-pale);
  border-radius: 3px;
  padding: 0.4rem var(--pas);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.declaration input:focus { outline: 1px solid var(--ambre); }
.declaration input::placeholder { color: var(--non-mesure); }

/* --- Porche d'éveil ------------------------------------------------------- */
/* --- Zone 4 · Miroir de friction ---------------------------------------- */
/* AMBRE, JAMAIS ROUGE. Le rouge est la couleur de la panne ; une incongruence n'est pas une panne, c'est
   une question que l'Organe pose. La palette reste celle du Cockpit (specs UX §54) : rien d'alarmant,
   rien de clignotant — l'anti-miroir informe, il ne somme pas. */
.miroir {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  margin: 0 auto; max-width: 46rem;
  background: var(--fond-zone); border: 1px solid var(--ambre-pale);
  border-bottom: none; border-radius: 6px 6px 0 0;
  padding: calc(var(--pas) * 1.25);
  box-shadow: 0 -6px 24px var(--ombre);
  max-height: 60vh; overflow-y: auto;   /* l'overlay grandit avec ses déclarations et son champ : il ne couvre jamais la page entière */
}
.miroir h2 {
  margin: 0 0 var(--pas); color: var(--ambre);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
}
.miroir-grille { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem var(--pas); margin: var(--pas) 0; }
.miroir-grille dt { color: var(--texte-faible); }
.miroir-grille dd { margin: 0; color: var(--ambre); font-variant-numeric: tabular-nums; }
/* K21a : deux déclarations opposées, CÔTE À CÔTE ; le champ de reformulation prend la largeur de l'overlay. */
.miroir-opposees h3 { margin: var(--pas) 0 0.3rem; color: var(--ambre); font-size: 12px; font-weight: 600; }
.miroir-opposees-liste { list-style: none; margin: 0; padding: 0; }
.miroir-opposees-liste li { display: flex; gap: var(--pas); margin: 0.3rem 0; }
.miroir-opposees-liste .declaration {
  flex: 1 1 0; padding: 0.4rem 0.6rem; border: 1px solid var(--ambre-pale); border-radius: 3px; overflow-wrap: anywhere;
}
.miroir label { display: block; margin-top: var(--pas); color: var(--texte-faible); font-size: 12px; }
.miroir textarea {
  width: 100%; box-sizing: border-box; margin: 0.3rem 0; background: var(--fond-creux); color: var(--texte);
  border: 1px solid var(--trait); border-radius: 3px; padding: 0.4rem 0.6rem; font: inherit; resize: vertical;
}
.miroir textarea:focus { outline: 1px solid var(--ambre); }
.miroir button {
  background: transparent; color: var(--texte-faible);
  border: 1px solid var(--trait); border-radius: 3px;
  padding: 0.35rem 0.8rem; font: inherit; font-size: 12px; cursor: pointer;
}
.miroir button:hover { background: var(--fond-creux); color: var(--texte); }

.porche { max-width: 40rem; margin: 4rem auto; padding: calc(var(--pas) * 2); text-align: center; }
.porche h1 { color: var(--ambre); font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; }
/* L'ENTRÉE (rang 5) : chaque bloc ne paraît que dans l'état que le porche porte. Aucune bascule `hidden` : G14. */
.porche-bloc { display: none; margin: var(--pas) 0; }
.porche[data-etat="passkey"] .porche-passkey,
.porche[data-etat="passkey"] .porche-passphrase,
.porche[data-etat="passphrase"] .porche-passphrase,
.porche[data-etat="naissance"] .porche-naissance,
.porche[data-etat="question"] .porche-question,
/* Un Coffre existe et la question est posée : la passphrase qui le prouve paraît avec elle (sans elle, la
   réponse « premier éveil » est refusée et l'Hôte n'aurait nulle part où la donner). */
.porche[data-etat="question"][data-passphrase="requise"] .porche-passphrase { display: block; }
/* Windows Hello d'abord : le bouton du geste est la voie, la passphrase le secours (§4.5, DA-10.02). */
.porche-passkey button { border-color: var(--ambre-pale); color: var(--ambre); padding: 0.7rem 1.4rem; }
.porche-bloc input {
  display: block; margin: 0.3rem auto var(--pas); width: 22rem; max-width: 100%;
  background: var(--fond-creux); color: var(--texte);
  border: 1px solid var(--ambre-pale); border-radius: 3px; padding: 0.45rem var(--pas); font: inherit;
}
.porche-bloc input:focus { outline: 1px solid var(--ambre); }
#porche-reponses button { margin: 0 0.4rem; }
#porche-etat { color: var(--ambre); min-height: 1.5em; }

/* LE CANAL PERDU DEPUIS PLUS DE 2 S (§4.5 ; blueprint UX L153) : opacité réduite et « je ne t'entends plus »
   au bandeau, jusqu'à la reconnexion. Posé par le script sur <body>, jamais par une bascule d'affichage (G14) :
   la page reste lisible, rien n'est caché, rien n'est bloqué — elle dit seulement qu'elle n'entend plus. */
body[data-canal="perdu"] main,
body[data-canal="perdu"] .porche,
body[data-canal="perdu"] .pied { opacity: 0.45; transition: opacity 200ms linear; }
body[data-canal="perdu"] .lien { color: var(--ambre); font-weight: 600; }

/* L'alerte de la copie, au bandeau : ambre, jamais rouge — elle informe, elle ne somme pas. */
.alerte { color: var(--ambre); font-size: 12px; }
.alerte:empty { display: none; }

/* Mes Passkeys : un tiroir de toute la largeur, sous « Non mesuré ». */
.zone-passkeys { grid-column: 1 / -1; margin-top: 0; }
.zone-passkeys label { display: block; margin-top: var(--pas); color: var(--texte-faible); font-size: 12px; }
.zone-passkeys input {
  background: var(--fond-creux); color: var(--texte); border: 1px solid var(--ambre-pale);
  border-radius: 3px; padding: 0.4rem var(--pas); font: inherit; margin: 0.3rem 0.5rem 0.3rem 0;
}
#passkeys-liste button, #tiroir-sauvegarde button { margin-left: 0.5rem; padding: 0.25rem 0.8rem; }
/* Un Arko qui n'est pas celui de l'Hôte n'offre pas « sauvegarder sous » : il serait refusé (ADR-0076 §4.3). */
#tiroir-sauvegarde[data-hors-machine="ecartee"] #sauvegarde-support,
#tiroir-sauvegarde[data-hors-machine="ecartee"] label[for="sauvegarde-support"],
#tiroir-sauvegarde[data-hors-machine="ecartee"] #sauvegarde-sous { display: none; }
#tiroir-sauvegarde label { display: block; margin-top: var(--pas); color: var(--texte-faible); font-size: 12px; }
#tiroir-sauvegarde input {
  background: var(--fond-creux); color: var(--texte); border: 1px solid var(--ambre-pale);
  border-radius: 3px; padding: 0.35rem var(--pas); font: inherit; margin-top: 0.3rem;
}
.tiroir ul:not(.scars) { margin: 0.4rem 0; padding-left: 1.2rem; font-size: 12px; }
.porche-bloc label { display: block; margin-top: calc(var(--pas) / 2); }
button {
  font: inherit; color: var(--texte); background: var(--fond-jauge);
  border: 1px solid var(--trait); border-radius: 3px; padding: 0.5rem 1rem; cursor: pointer;
}
button:hover, button:focus-visible { border-color: var(--ambre-pale); color: var(--ambre); }
button:focus-visible { outline: 2px solid var(--ambre-pale); outline-offset: 2px; }

.pied {
  display: flex; gap: var(--pas); justify-content: center;
  padding: var(--pas); color: var(--non-mesure); font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .jauge-remplissage { transition: none; }
}

/* --- K19a : tiroirs de zone, bulles, pages ----------------------------------- */
/* Les Zones 1 et 2 sont des tiroirs (avenant §1.2.3) : le titre est le résumé, cliquable et focalisable en natif. */
.zone-tiroir > summary { cursor: pointer; }
.zone-tiroir > summary h2 { display: inline; margin: 0; }
.zone-tiroir[open] > summary { margin-bottom: var(--pas); }
/* Une bulle s'ouvre sous sa grandeur ou sa ligne : un <details> natif, sans survol ni script. */
.bulle { flex-basis: 100%; font-size: 12px; color: var(--texte-faible); }
.bulle summary { cursor: pointer; display: inline; }
.bulle span { display: block; margin-top: 0.2rem; padding: 0.3rem 0.5rem; border-left: 2px solid var(--trait); }
/* Pages : précédent, où l'on en est, suivant. */
.pages { display: flex; align-items: center; gap: var(--pas); margin: 0.4rem 0; font-size: 12px; color: var(--texte-faible); }
.pages button { padding: 0.2rem 0.7rem; }

/* RANG 9, K23 (Livre 3 §2) : L'EXTINCTION DE L'ÉCRAN. Posé par le script sur <body> à la trame d'extinction ou à la fermeture sur
   le code réservé : opacité 0, SANS transition, plus aucun geste possible ; la page ne se reconnecte pas. */
body[data-extinction="oui"] { opacity: 0; transition: none; pointer-events: none; }
.sevrage { border-left: 3px solid var(--ambre); padding-left: 0.6rem; }

/* K29 — un fichier ou un dossier donné à Arko : l'ancre ambre est ce que l'Hôte a déclaré ; un refus se dit, sans rouge (ambre pâle). */
.depot { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.4rem 0; }
.depot label { color: var(--ambre-pale); font-size: 12px; }
.depot input[type="file"] { font-size: 12px; max-width: 14rem; }
.depot input[type="text"] { font-size: 12px; flex: 1 1 14rem; min-width: 10rem; }
.depot button { font-size: 12px; }
.depot-liste { flex: 1 1 100%; list-style: none; margin: 0; padding: 0; }
.depot-liste li { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.1rem 0; font-size: 12px; overflow-wrap: anywhere; }
.ancre-ambre { color: var(--ambre); border: 1px solid var(--ambre-pale); border-radius: 10px; padding: 0 0.6em; }
.depot-liste li[data-etat="refuse"] .ancre-ambre { color: var(--ambre-pale); border-style: dashed; }
.depot-liste li[data-etat="en-cours"] .ancre-ambre { opacity: 0.6; }
body[data-depot="survol"] .composeur { outline: 2px dashed var(--ambre); outline-offset: 4px; }