/* chrome.css — habillage du chrome Fractal (bandeau N10b, footer, contrôles thème
 * et langue N10d, favicon N10c, largeur 375 N9). Toutes les couleurs viennent
 * des tokens sémantiques (tokens.css), zéro hex inventé.
 *
 * Deux thèmes par construction (parité N8). Les vues intérieures utilisent
 * encore massivement les utilitaires Tailwind stone et amber de Tailwind. — cette
 * feuille remappe les plus utilisés vers les tokens sombres sous
 * `[data-theme=dark]` pour que l'app reste lisible en attendant les refontes
 * par vue (lots suivants). C'est une COUCHE DE COMPATIBILITÉ, pas la cible.
 */

/* — Font boosting Android + iOS : neutralisé (N9) — */
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* Les ancres (#interpretations, …) atterrissent sous le bandeau sticky.
     Stimulus chrome-sticky met à jour la variable à la hauteur réelle. */
  scroll-padding-top: var(--chrome-sticky-offset, 9rem);
}

/* — Fond de page = surface sémantique (les deux thèmes) —
   min-height 100dvh, PAS height: 100 % : un html/body à hauteur figée casse
   position:sticky (le scroll monte sur html, le bandeau part avec).
   Colonne flex : page courte → le pied colle le bas du viewport ; page
   longue → le pied suit le contenu (pas un bandeau fixed). */
html, body {
  background: var(--surface);
  color: var(--text-primary);
  min-height: 100dvh;
}
body {
  display: flex;
  flex-direction: column;
}
.chrome-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--chrome-measure);
  margin-inline: auto;
}

/* — Bandeau (N10b) — barre 56 px, style parc undust (base/ops) — */
.chrome-header {
  position: sticky;
  top: 0;
  z-index: var(--layer-collant);
  background: var(--surface);
  border-bottom: var(--border-width-strong) solid var(--border-color-strong);
}
/* Plus haut que le quart de la fenêtre (Stimulus chrome-sticky) : le bandeau
   défile avec la page au lieu de la recouvrir. `relative` et pas `static` :
   le z-index garde les déroulants Admin / Prototype au-dessus du contenu. */
.chrome-header.chrome-header--defile { position: relative; }

.chrome-header__row {
  display: flex;
  align-items: stretch;
  height: 56px;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  max-width: var(--chrome-measure);
  margin: 0 auto;
}

.chrome-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-sans);
  flex: none;
  white-space: nowrap;
}
.chrome-brand:hover { color: var(--text-primary); }

.chrome-brand__mark {
  height: 22px;
  width: 22px;
  display: block;
  flex: none;
}
.chrome-brand__mark--dark { display: none; }
[data-theme="dark"] .chrome-brand__mark--light { display: none; }
[data-theme="dark"] .chrome-brand__mark--dark { display: block; }

.chrome-brand__product {
  font: 700 var(--type-small-size)/1 var(--font-sans);
  letter-spacing: -0.015em;
}

.chrome-brand__context {
  color: var(--text-secondary);
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Nav produit — mono compacte, soulignement accent sur la page courante. */
.chrome-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

/* La nav inline ne se COMPRIME pas : c'était la cause du chevauchement du
 * 07/09 — seul bloc rétrécissable de la rangée (marque et outils sont en
 * `flex: none`), elle se faisait écraser, et ses libellés `white-space:
 * nowrap` sortaient de sa boîte PAR-DESSUS les bascules d'aperçu. Si la
 * rangée ne tient plus, on veut un débordement franc (que le test de
 * chrome_header_fit_test.rb attrape) et pas une superposition illisible.
 * `overflow: hidden` n'est PAS une option ici : il masquerait les panneaux
 * des déroulants Admin / Prototype, qui sont des enfants absolus. */
.chrome-nav-inline { flex: none; }

.chrome-nav a,
.chrome-nav summary {
  display: inline-flex;
  align-items: center;
  /* 8 px et pas 10 : × 6 entrées, les 2 px rendus à la rangée sont ce qui
   * garde la nav inline sur un portable 1280 quand les bascules d'aperçu
   * sont là. L'écart se lit à peine, le repli dans le burger se voit. */
  padding: 0 8px;
  font: 400 12px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-secondary);
  white-space: nowrap;
  border-bottom: var(--border-width-strong) solid transparent;
  margin-bottom: calc(-1 * var(--border-width-strong));
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}
.chrome-nav a:hover,
.chrome-nav summary:hover { color: var(--text-accent); }
.chrome-nav a[aria-current="page"] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

/* Documents ajoute une destination : conserver la navigation visible sur
 * les portables en resserrant ses marges, sans comprimer les libellés. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .chrome-nav a,
  .chrome-nav summary { padding-inline: 4px; }
}

/* — « Prototype » — <details> natif en fin de nav (pages méthodologiques). */
/* Déroulants de nav — Prototype ET Admin partagent la même mécanique
 * (details/summary + panneau ancré). `__dropdown` = alias générique. */
.chrome-nav__prototype,
.chrome-nav__dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
}
.chrome-nav__prototype > summary,
.chrome-nav__dropdown > summary { list-style: none; height: 100%; }
.chrome-nav__prototype > summary::-webkit-details-marker,
.chrome-nav__dropdown > summary::-webkit-details-marker { display: none; }
.chrome-nav__prototype > summary::after,
.chrome-nav__dropdown > summary::after {
  content: " ▾";
  font-size: 9px;
}
.chrome-nav__prototype-panel,
.chrome-nav__dropdown-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: var(--layer-superpose);
  min-width: 180px;
  background: var(--surface);
  border: var(--border-width-hairline) solid var(--border);
  padding: 4px;
  box-shadow: 0 8px 24px var(--scrim);
  display: flex;
  flex-direction: column;
}
.chrome-nav__prototype-panel a,
.chrome-nav__dropdown-panel a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13px;
}
.chrome-nav__prototype-panel a:hover,
.chrome-nav__dropdown-panel a:hover {
  background: var(--surface-raised);
}

/* — Outils du bandeau : zone future, aide, thème, langue, déconnexion — */
.chrome-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex: none;
}

.chrome-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  color: var(--text-secondary);
  border: var(--border-width-hairline) solid transparent;
  font: 700 14px/1 var(--font-sans);
  cursor: pointer;
}
.chrome-icon-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-control);
}

/* Toggle thème UN clic (N8) — cadre, curseur accent, soleil/lune. */
.chrome-theme-toggle {
  display: block;
  box-sizing: border-box;
  width: 44px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
  cursor: pointer;
  flex: none;
  position: relative;
  border-radius: var(--radius-none);
  color: var(--on-accent);
}
.chrome-theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  display: grid;
  place-items: center;
  transition: transform var(--motion-duree-1) var(--motion-courbe-entree);
}
[data-theme="dark"] .chrome-theme-toggle__thumb { transform: translateX(20px); }
.chrome-theme-toggle__icon {
  display: none;
  width: 10px;
  height: 10px;
  stroke: var(--on-accent);
  fill: none;
  pointer-events: none;
}
/* Soleil = surface du côté clair, pas on-accent sombre. */
.chrome-theme-toggle__icon--sun { stroke: var(--surface); }
:root:not([data-theme="dark"]) .chrome-theme-toggle__icon--sun { display: block; }
[data-theme="dark"] .chrome-theme-toggle__icon--moon { display: block; }
@media (prefers-reduced-motion: reduce) {
  .chrome-theme-toggle__thumb { transition: none; }
}

/* Bascule de langue UN clic (N10d v2) — rotation, seul le courant visible. */
.chrome-locale-switch {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  text-decoration: none;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.chrome-locale-switch .is-current { color: var(--text-accent); }
.chrome-locale-switch:hover .is-current { color: var(--text-primary); }

/* Marques E/O dans l'énoncé (conseil de forme) — tokens sémantiques N7. */
.form-mark {
  background: var(--surface-raised);
  padding: 0 0.15em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.form-mark--et { box-shadow: inset 0 -2px 0 var(--tension); }
.form-mark--ou { box-shadow: inset 0 -2px 0 var(--accent); }
.form-mark__badge {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0 0.35em;
  font: 700 9px/1.4 var(--font-mono);
  letter-spacing: 0.04em;
  vertical-align: super;
  border-radius: 2px;
  color: var(--on-tension);
  background: var(--tension);
}
.form-mark--ou .form-mark__badge {
  color: var(--on-accent);
  background: var(--accent);
}
.form-mark--intervalle { box-shadow: inset 0 -2px 0 var(--status-info); }
.form-mark--intervalle .form-mark__badge {
  color: var(--surface);
  background: var(--status-info);
}
.form-mark--paquet { box-shadow: inset 0 -2px 0 var(--status-success); }
.form-mark--paquet .form-mark__badge {
  color: var(--surface);
  background: var(--status-success);
}
.form-mark--enumeration { box-shadow: inset 0 -2px 0 var(--status-pending); }
.form-mark--enumeration .form-mark__badge {
  color: var(--surface);
  background: var(--status-pending);
}
.form-mark--legende { box-shadow: inset 0 -2px 0 var(--border-control); }
.form-mark--legende .form-mark__badge {
  color: var(--text-primary);
  background: var(--surface-raised);
}
.form-mark--formule { box-shadow: inset 0 -2px 0 var(--status-warning); }
.form-mark--formule .form-mark__badge {
  color: var(--surface);
  background: var(--status-warning);
}
.form-mark--si { box-shadow: inset 0 -2px 0 var(--text-primary); }
.form-mark--si .form-mark__badge {
  color: var(--surface);
  background: var(--text-primary);
}

.form-mark-legend {
  margin-top: var(--space-4);
}
.form-mark-legend__kicker {
  margin: 0 0 var(--space-2);
  font: 700 var(--type-small-size)/1.4 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.form-mark-legend__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.form-mark-legend__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.form-mark-legend .form-mark__badge {
  vertical-align: baseline;
  margin-left: 0;
}

/* Énoncé : police du chrome (sans), jamais une serif d'apparat.
   Hauteur = contenu. Jamais de scrollbar interne (la page s'allonge). */
.enonce-body,
textarea.enonce-body {
  font-family: var(--font-sans);
}
textarea.enonce-body {
  field-sizing: content;
  min-height: var(--space-24);
  overflow: hidden;
  resize: none;
}

/* Pièces jointes : une rangée, titre rogné, taille, moins rouge à droite. */
.pj-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: nowrap;
  padding: var(--space-2) 0;
  font-size: var(--type-small-size);
}
.pj-remove-form { flex: none; }
.pj-remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: var(--border-width-strong) solid var(--status-critical);
  background: transparent;
  color: var(--status-critical);
  cursor: pointer;
}
.pj-remove:hover { background: var(--surface-raised); }
.pj-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border);
}
.pj-name:hover { text-decoration-color: var(--text-primary); }
.pj-size {
  flex: none;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-mono);
}
.pj-embedded-badge {
  flex: none;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--status-warning, var(--text-secondary));
  white-space: nowrap;
  cursor: help;
}

/* Diff d'énoncé (lignes + / −). */
.enonce-diff {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  overflow-x: auto;
}
.enonce-diff__line {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.enonce-diff__mark { flex: none; width: 1ch; }
.enonce-diff__line--add { background: color-mix(in srgb, var(--status-success) 16%, transparent); }
.enonce-diff__line--del { background: color-mix(in srgb, var(--status-critical) 16%, transparent); }
.enonce-diff--words {
  font-family: var(--font-sans);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  padding: var(--space-3);
  white-space: normal;
  overflow-wrap: anywhere;
}
.enonce-diff--words ins,
.enonce-diff--words del,
.enonce-diff--words .enonce-diff__skip {
  display: inline;
}
.enonce-diff__ins {
  background: color-mix(in srgb, var(--status-success) 22%, transparent);
  text-decoration: none;
}
.enonce-diff__del {
  background: color-mix(in srgb, var(--status-critical) 22%, transparent);
  text-decoration: line-through;
}
.enonce-diff__skip {
  color: var(--text-secondary);
}
.enonce-diff-rewrite__summary {
  cursor: pointer;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  color: var(--text-secondary);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.enonce-diff-rewrite__summary:hover { color: var(--text-primary); }
.enonce-diff-rewrite__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}
/* Un reset display:block sur les enfants ouvrirait le mur : on force. */
.enonce-diff-rewrite:not([open]) .enonce-diff { display: none; }
.enonce-diff-rewrite[open] .enonce-diff { margin-top: var(--space-2); }

.enonce-versions {
  margin-top: var(--space-6);
  border: var(--border-width-hairline) solid var(--border);
  border-radius: var(--space-3);
  background: var(--surface-raised);
  padding: var(--space-4);
}
.enonce-versions__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  cursor: pointer;
  font: 600 var(--type-small-size)/var(--type-small-leading) var(--font-sans);
  color: var(--text-primary);
}
.enonce-versions__summary-count {
  font: 400 var(--type-small-size)/var(--type-small-leading) var(--font-sans);
  color: var(--text-secondary);
}
.enonce-versions__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.enonce-versions__split {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-4);
}
@media (min-width: 1024px) {
  .enonce-versions__split {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}
.enonce-versions__list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.enonce-versions__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-2);
  align-items: center;
  min-height: calc(2 * var(--type-small-size) * var(--type-small-leading) + var(--space-2));
  padding-block: var(--space-2);
}
.enonce-versions__row + .enonce-versions__row {
  border-top: var(--border-width-hairline) solid var(--border);
}
.enonce-versions__link {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--space-1);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.enonce-versions__id {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.enonce-versions__email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enonce-versions__reason {
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enonce-versions__restore-form {
  grid-column: 2;
  grid-row: 2;
}
.enonce-versions__restore {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: var(--border-width-hairline) solid var(--border);
  border-radius: var(--space-1);
  background: var(--surface);
  color: var(--text-secondary);
  font: var(--type-ui-compact-weight) var(--type-ui-compact-size)/var(--type-ui-compact-leading) var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.enonce-versions__restore.is-ghost {
  grid-column: 2;
  grid-row: 2;
  visibility: hidden;
  pointer-events: none;
}
.enonce-versions__restore:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}
.enonce-versions__link:hover { background: var(--surface); }
.enonce-versions__link.is-current {
  background: var(--text-primary);
  color: var(--surface);
}
.enonce-versions__meta { color: var(--text-secondary); }
.enonce-versions__link.is-current .enonce-versions__meta,
.enonce-versions__link.is-current .enonce-versions__reason { color: inherit; opacity: 0.7; }

/* Citations : le soulignement porte le statut ; le survol localise les
   occurrences avec un fond opaque et un contour, sans déplacer le texte. */
mark.cite { background: transparent; color: inherit; cursor: pointer; }
.cite {
  padding: 0 0.12em;
  border-radius: var(--square-tick);
  box-shadow: inset 0 -2px 0 var(--tension);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cite--approche { box-shadow: inset 0 -2px 0 var(--status-warning); }
.cite--absent   { box-shadow: inset 0 -2px 0 var(--status-critical); }
.cite--corrige  { box-shadow: inset 0 -2px 0 var(--status-success); }
/* « Hypothèse outil » (POC) : rattachement posé par le bac à sable, pas par
   une personne. Couleur d'attente (--status-pending) plutôt que le vert des
   corrections humaines — le lecteur voit sur la citation qu'un geste manque. */
.cite--hypothese_outil { box-shadow: inset 0 -2px 0 var(--status-pending); }
/* Règle `homonymes_distincts` : deux données de même nom ne se lisent
   jamais pareil — une teinte par donnée (la même dans l'énoncé et sur le
   rail), une pastille devant le nom ; l'occurrence que rien ne rattache
   encore est cernée en tirets. La chaîne de parents ajoutée par l'outil
   (`cite__chain`) reste en retrait : ce n'est pas ce que le client a écrit. */
.cite--homonyme { background: color-mix(in srgb, var(--homonyme-tint) 16%, transparent); }
.cite--homonyme::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.25em;
  border-radius: 50%; background: var(--homonyme-tint); vertical-align: 0.1em;
}
.cite--homonyme-1 { --homonyme-tint: var(--chart-1); }
.cite--homonyme-2 { --homonyme-tint: var(--chart-2); }
.cite--homonyme-3 { --homonyme-tint: var(--chart-3); }
.cite--homonyme-4 { --homonyme-tint: var(--chart-4); }
.cite--homonyme-5 { --homonyme-tint: var(--chart-5); }
.cite--homonyme-6 { --homonyme-tint: var(--chart-6); }
.cite--homonyme-0 { --homonyme-tint: var(--status-critical); background: transparent; outline: 1px dashed var(--status-critical); }
.cite__chain { color: var(--text-secondary); font-size: 0.92em; }
.shape-rail__homonym-open { color: var(--status-critical); font-size: 0.85em; }
/* Pont prose → dictionnaire : la prose qui DÉSIGNE un élément du dictionnaire
   se souligne dans la même langue visuelle que les noms relevés, mais en
   POINTILLÉ — un trait plein dirait « relevé exact » d'une proposition que
   personne n'a confirmée. Une BORDURE, pas un box-shadow ni un
   text-decoration : le span englobe souvent un lien d'identifiant, à qui le
   soulignement de texte se transmettrait, et le fond `is-focus`/`is-hover`
   (plus spécifique) effacerait un dégradé. */
.cite--prose {
  box-shadow: none;
  border-bottom: var(--border-width-strong) dashed var(--tension);
}
/* Le terme du dictionnaire, rendu au CENTRE seulement, après la citation :
   mono italique et « ≈ ». Marqueur PERMANENT — un survol ne survit ni au PDF
   ni à la capture d'écran, et un terme lu par l'outil ne doit jamais devenir
   indiscernable d'un mot écrit par le client (EN 50128, spec eT6fsNwn).
   Un marqueur qu'on ne VOIT pas ne marque rien : mesuré à l'écran, le « ≈ »
   en taille de légende était plus petit que la phrase qu'il commente, et il
   restait seul en bout de ligne, séparé du terme qu'il qualifie (`5ELSX6qy`
   D2). D'où, ici : la taille du texte courant (`inherit`), et un BLOC —
   `inline-block` fait passer le signe et le nom à la ligne ENSEMBLE, jamais
   l'un sans l'autre, le nom pouvant toujours se couper à l'intérieur du bloc
   plutôt que déborder (375 px). La distinction tient sans la couleur : mono,
   italique, et le signe en romain gras. */
.prose-term {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: inherit;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.prose-term__sign { margin-right: 0.3em; font-style: normal; font-weight: 700; }
/* La respiration à gauche : dans le fil du texte, le terme se détache de la
   marque de prose, dont le contour et le fond de survol le mangeaient. Sur le
   rail, la ligne est une colonne — il n'y a rien dont se détacher. */
.cite-flow .prose-term { margin-left: 0.35em; }
/* Règle d'instance `proposition_prose_en_modale` : la prose soulignée et son
   terme S'OUVRENT. Le terme devient un lien — même signe, même mono italique,
   le marqueur permanent ne bouge pas — souligné au survol et au focus
   seulement, pour ne pas ajouter un trait sous la phrase. Les mots du client
   prennent la main du clic, rien d'autre : leur pointillé dit déjà « lu par
   l'outil ». */
.cite--prose[data-prose-id] { cursor: pointer; }
a.prose-term--link { text-decoration: none; cursor: pointer; }
/* Règle d'instance `deux_lectures_marquees` : la prose que le SCRIPT détecte
   sans savoir la lire. Un pointillé fin et gris — moins fort que le tireté de
   la prose lue avec le modèle : ce n'est pas une lecture, c'est ce qui en
   manque. Un passage qu'un modèle a lu prend la main du clic. */
.cite--residue { box-shadow: none; border-bottom: var(--border-width-1) dotted var(--text-secondary); }
.cite--residue[data-prose-id] { cursor: pointer; border-bottom-color: var(--tension); }
/* Les deux lectures, l'une sous l'autre, chacune titrée et numérotée : le
   rang se lit sans la couleur. */
.reading-block + .reading-block { margin-top: var(--space-4); padding-top: var(--space-2); border-top: var(--border-width-strong) solid var(--border); }
.reading-block__rank { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; margin-right: var(--space-1); border: var(--border-width-1) solid currentColor; border-radius: 50%; font-size: .85em; font-weight: 700; }
.reading-block__summary { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--type-legende-size); }
.reading-block__passages { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0 0; padding: var(--space-3); list-style: none; border: var(--border-width-1) solid var(--border); border-radius: var(--radius-card); font-size: var(--type-small-size, .875rem); }
.reading-block__unread { margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--type-legende-size); }
.reading-block__unread > summary { min-height: 2rem; padding: var(--space-1) 0; cursor: pointer; }
.reading-block__unread ul { margin: 0; padding-left: var(--space-3); list-style: disc; }
a.prose-term--link:hover .prose-term__name, a.prose-term--link:focus-visible .prose-term__name { text-decoration: underline; color: var(--text-primary); }
a.prose-term--link:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.prose-term.is-focus, .prose-term.is-hover { color: var(--text-primary); }
.prose-term.is-hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cite.is-focus {
  background: var(--tension);
  color: var(--on-tension);
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}
/* Le TEXTE DU CLIENT reste nu : ouvrir une case du rail allume ses noms dans
   la lecture de l'outil, pas dans la colonne de gauche — dix noms peints d'un
   coup y rendaient la phrase illisible (retour Luc 22/09 : « je préférais que
   le texte soit nu, on voit uniquement les éléments soulignés »). Le nom
   SURVOLÉ, lui, s'allume toujours des deux côtés : c'est ce qui relie les
   colonnes, et il n'y en a qu'un à la fois. */
.elucidation__original .cite.is-focus:not(.is-hover) {
  background: transparent;
  color: inherit;
  outline: 0;
}
/* Un nom allumé déborde de sa ligne (fond + contour) : sans interligne, deux
   marques de lignes voisines se chevauchent (retour Luc 22/09). Portée à
   l'élucidation seule : `_structured_statement` sert aussi Interprétations,
   qui garde son interligne. */
.elucidation .cite-flow { line-height: 2; }
@keyframes occurrence-flash {
  from { background: color-mix(in srgb, var(--status-warning) 45%, transparent); }
  to { background: transparent; }
}
.occurrence-flash {
  animation: occurrence-flash 2s ease-out;
}
/* Le nom SURVOLÉ se distingue de ceux que la case ouverte allume : le contour
   s'épaissit et le fond passe à l'accent, sans déplacer le texte. */
.cite.is-hover {
  background: var(--accent);
  color: var(--on-accent);
  outline-width: var(--border-width-frame);
}
.cite-legend {
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.cite-legend .cite { margin-right: var(--space-2); }
.cite-row { cursor: pointer; }
.cite-row td:first-child { padding-left: var(--space-3); }
.cite-row.is-citing { background: color-mix(in srgb, var(--tension) 10%, transparent); }
.cite-row.is-citing td:first-child { box-shadow: inset 3px 0 0 var(--tension); }
/* Conditions C1..Cn : le code sur sa ligne, le libellé dans ce qui reste.
   `minmax(0, 1fr)` et `anywhere` : un nom qualifié plus large que le rail
   se coupe au lieu d'élargir la colonne — et d'écraser le code en « C » / « 8 »
   (la colonne du rail hérite `anywhere`, qui coupait aussi le code). */
.conditions-readonly__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); }
.conditions-readonly__list dt { white-space: nowrap; }
.conditions-readonly__list dd { min-width: 0; overflow-wrap: anywhere; }
/* Condition C1..Cn qui cite des noms de l'énoncé : son survol les allume. */
.conditions-readonly__cited { cursor: pointer; }
.conditions-readonly__cited:hover { background: color-mix(in srgb, var(--tension) 10%, transparent); }
.cite-enum__values {
  display: none;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  color: var(--text-secondary);
  white-space: normal;
}
.cite-row:hover .cite-enum__values,
.cite-row:focus-within .cite-enum__values,
.cite-row.is-citing .cite-enum__values { display: block; }

.enonce-analyse {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-3);
  overflow-x: clip;
}
.enonce-analyse__text,
.enonce-analyse__tables {
  min-width: 0;
  overflow: visible;
}
.enonce-analyse__tables {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.enonce-analyse__tables table {
  width: 100%;
  table-layout: fixed;
}
.enonce-analyse__tables td {
  overflow-wrap: anywhere;
  vertical-align: top;
}
.enonce-analyse__tables td:nth-child(2) { width: 42%; }
.enonce-analyse__tables td:nth-child(3) { width: 3.5rem; }
@media (min-width: 1024px) {
  .enonce-analyse {
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
    align-items: start;
  }
}

/* Zone future compacte du bandeau (icône seule). */
.future-zone--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 14px;
}
.future-zone--noted,
.future-zone--noted .future-zone__icon {
  color: var(--status-success);
  border-color: var(--status-success);
}

/* Sous-barre (yield :subnav) : fil d'Ariane + onglets + ancres.
   Vit DANS le header sticky — elle ne disparaît pas au scroll. */
.chrome-subnav {
  border-top: var(--border-width-hairline) solid var(--border);
  background: var(--surface);
}
.chrome-subnav__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--chrome-measure);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
}
.chrome-subnav__tabs {
  display: flex;
  gap: var(--space-1);
  flex: none;
  margin-left: auto;
}
.chrome-subnav__tab,
.chrome-subnav__anchor {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--space-1);
  color: var(--text-secondary);
  text-decoration: none;
  font: var(--type-ui-compact-weight) var(--type-ui-compact-size)/var(--type-ui-compact-leading) var(--font-sans);
  white-space: nowrap;
}
.chrome-subnav__tab.is-active {
  background: var(--text-primary);
  color: var(--surface);
}
.chrome-subnav__tab:hover:not(.is-active),
.chrome-subnav__anchor:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
}
.chrome-subnav__anchors {
  display: flex;
  gap: var(--space-1);
  max-width: var(--chrome-measure);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-2);
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.chrome-subnav__anchors::-webkit-scrollbar { display: none; }

.chrome-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
  font: var(--type-ui-compact-weight) var(--type-ui-compact-size)/var(--type-ui-compact-leading) var(--font-sans);
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.chrome-breadcrumb::-webkit-scrollbar { display: none; }
.chrome-breadcrumb__link {
  color: var(--text-secondary);
  text-decoration: none;
  flex: none;
}
.chrome-breadcrumb__link:hover { color: var(--text-primary); }
.chrome-breadcrumb__here {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 600;
  flex: none;
}
.chrome-breadcrumb__sep {
  color: var(--border);
  flex: none;
}

@media (max-width: 640px) {
  .chrome-subnav__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .chrome-subnav__tabs { margin-left: 0; }
}

/* — Onglets de fiche (système : exigences / contrats / documents / activité) —
   Barre soulignée, dans la page (pas la sous-barre sticky) : l'onglet actif
   porte la couleur du texte principal et un trait de 2 px. Basculée par le
   contrôleur Stimulus `tabs` (classe `is-active` + `hidden` sur les panneaux). */
.fiche-tabs {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  border-bottom: var(--border-width-hairline) solid var(--border);
  margin-bottom: var(--space-4);
}
.fiche-tab {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  font: var(--type-ui-compact-weight) var(--type-ui-compact-size)/var(--type-ui-compact-leading) var(--font-sans);
  white-space: nowrap;
}
.fiche-tab:hover:not(.is-active) { color: var(--text-primary); }
.fiche-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}
.fiche-tab__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary, var(--text-secondary));
}
.fiche-tab.is-active .fiche-tab__count { color: var(--text-primary); }

/* — Actions de la fiche (en-tête) —
   Un seul geste y vit : « Modifier ». Sous 640 px la barre passe SOUS le
   titre, en pleine largeur : la paire de boutons coupait la lecture sur
   mobile (remarque client #4 du 11/09). Le parent est `flex flex-wrap`, donc
   la largeur pleine suffit à faire passer le bloc à la ligne. */
@media (max-width: 640px) {
  .fiche-actions { width: 100%; }
  .fiche-actions > form { width: 100%; margin: 0; }
  .fiche-actions > a,
  .fiche-actions > button,
  .fiche-actions > form > button {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* — Zone d'actions dangereuses (bas de la page d'édition) —
   Le geste destructeur ne s'offre jamais dans le flux de lecture : il est
   au bas de l'édition, annoncé, à distance du reste (remarque client #4). */
.fiche-danger {
  margin-top: var(--space-12);
  padding: var(--space-4);
  max-width: 42rem;
  border: var(--border-width-hairline) solid var(--status-critical);
  background: color-mix(in srgb, var(--status-critical) 6%, var(--surface));
}
.fiche-danger__title {
  margin: 0;
  font: var(--type-ui-compact-weight) var(--type-ui-compact-size)/var(--type-ui-compact-leading) var(--font-sans);
  color: var(--text-primary);
}
.fiche-danger__hint {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.fiche-danger__form { margin: 0; }
@media (max-width: 640px) {
  .fiche-danger__form > button { display: block; width: 100%; text-align: center; }
}

/* — Footer (N10b : undust. en pied, point final baseline) — */
.chrome-footer {
  flex-shrink: 0;
  margin-top: var(--space-16);
  border-top: var(--border-width-hairline) solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
}
.chrome-footer__row {
  max-width: var(--chrome-measure);
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: baseline;
}
.chrome-footer__mark {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-size: 14px;
}
.chrome-footer__meta { margin-left: auto; }

/* Bandeau « version de travail » (0.x) — dans le flux, AU-DESSUS du chrome
   sticky : lu à chaque arrivée de page, puis il défile avec elle. Tokens
   only (N7) : surface relevée + libellé en statut warning, aucune couleur
   propre. Pas un overlay (contrairement à .version-banner). */
.prerelease-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  color: var(--text-secondary);
  border-bottom: var(--border-width-hairline) solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--densite-type-rang);
  line-height: 1.4;
  text-align: center;
}
.prerelease-banner__label {
  color: var(--status-warning);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Encart de la fenêtre d'accès — dans la ligne de navigation : « il vous
   reste X jours d'accès », puis « Accès expiré » une fois la fenêtre
   refermée. Une information, pas un lien : cadre fin à la couleur du statut
   (info, avertissement à l'approche de la fermeture, critique la veille et
   après). Tokens only (N7). */
.chrome-access {
  display: inline-flex;
  align-items: center;
  /* La nav étire ses liens sur toute la hauteur de la rangée : l'encart,
     lui, garde sa hauteur de pastille. */
  align-self: center;
  gap: var(--space-1);
  flex: none;
  margin-left: var(--space-3);
  padding: 4px 8px;
  border: var(--border-width-hairline) solid currentColor;
  color: var(--status-info);
  font: 700 11px/1.2 var(--font-sans);
  white-space: nowrap;
}
.chrome-access--warning { color: var(--status-warning); }
.chrome-access--critical { color: var(--status-critical); }
.chrome-access__preview {
  color: var(--text-secondary);
  font-weight: 400;
}
.chrome-burger__panel .chrome-access { margin: 8px 12px; }

/* Lecture seule (fenêtre d'accès refermée, `body[data-access-read-only]`) :
   un formulaire qui écrit — method="post", ce que Rails rend pour POST,
   PATCH et DELETE — garde ses champs lisibles mais ses boutons d'envoi sont
   inertes. Les formulaires de lecture (GET), la fermeture d'une fenêtre de
   détail (method="dialog") et les formulaires marqués
   `data-read-only-exempt` (se déconnecter, quitter un aperçu) ne sont pas
   touchés. Un lien qui écrit (data-turbo-method) suit la même règle. */
body[data-access-read-only] form[method="post" i]:not([data-read-only-exempt]) :is(button:not([type="button"]), input[type="submit"]),
body[data-access-read-only] a[data-turbo-method]:not([data-turbo-method="get" i]) {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}

/* Bandeau « nouvelle version » — overlay système, pas du chrome N11.
   Tokens only (N7). z-index notification > bandeau collant. */
.version-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--layer-notification);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--gray-925);
  color: var(--gray-50);
  font-family: var(--font-sans);
  font-size: var(--densite-type-rang);
  font-weight: 500;
}
.version-banner__action {
  background: var(--accent);
  color: var(--white);
  border: 0;
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
}
.version-banner__action:hover { background: var(--accent-hover); }

/* — Menu burger — visible sous 1024 px (la nav complète ne tient plus) — */
.chrome-burger {
  display: none;
  position: relative;
}
.chrome-burger summary {
  list-style: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
}
.chrome-burger summary::-webkit-details-marker { display: none; }
.chrome-burger summary:hover { color: var(--text-primary); }
.chrome-burger__panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: var(--layer-superpose);
  margin-top: var(--space-2);
  min-width: 220px;
  background: var(--surface);
  border: var(--border-width-hairline) solid var(--border);
  padding: 4px;
  box-shadow: 0 8px 24px var(--scrim);
}
.chrome-burger__panel a,
.chrome-burger__panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.chrome-burger__panel a:hover,
.chrome-burger__panel button:hover {
  background: var(--surface-raised);
}

/* — Seuil nav : sous 1024 px, burger ; la rangée ne wrappe JAMAIS (N9). — */
@media (max-width: 1023px) {
  .chrome-nav-inline { display: none !important; }
  .chrome-burger { display: block; }
}

/* Connecté en admin, les deux bascules d'aperçu occupent ~300 px de plus :
 * la nav inline ne rentre plus bien avant 1024 px. Sans ce seuil dédié, la
 * rangée ne wrappait pas (N9) — elle se SUPERPOSAIT, la nav passant sous les
 * outils. Le seuil vaut donc pour ce cas-là seulement : un compte sans
 * bascules garde sa nav inline jusqu'à 1024 px.
 *
 * Le seuil est DÉRIVÉ d'une mesure, pas choisi. Première dérivation : marque
 * 149 + nav 484 + outils 515 + gouttières 32 + marges 32 = 1212 px de
 * viewport minimal (seed d'instance, fr, admin), d'où 1239 px, « ~28 px de jeu
 * pour une locale ou une entrée de nav un peu plus large ».
 *
 * 2026-09-23 : l'entrée « Flux » (3dae26f0) a mangé ce jeu. Mesure du
 * runner CI : à 1240 px, scrollWidth = 1259 px, soit 19 px de débordement
 * (chrome_header_fit_test.rb:93, admin). Le seuil passe donc à 1258 px —
 * dérivé de cette mesure, comme le précédent. Il reste SOUS 1274 px, le
 * point de mesure qui garantit la nav inline sur un portable 1280 : ce que
 * le premier jet à 1319 px cassait, et ce qu'on ne veut toujours pas. */
@media (max-width: 1258px) {
  .chrome-header--previews .chrome-nav-inline { display: none !important; }
  .chrome-header--previews .chrome-burger { display: block; }
}

/* — Cible 375 px (N9) : on retire le contexte, on garde une seule rangée — */
@media (max-width: 640px) {
  .chrome-header__row {
    gap: var(--space-2);
    padding: 0 var(--space-3);
  }
  .chrome-brand__context { display: none; }
}

/* — Compat sombre pour les vues Tailwind encore stone-* —
 *
 * Les vues intérieures (index/show exigence, admin, pages, sessions) utilisent
 * en dur les palettes Tailwind stone/amber/emerald/rose/violet/sky/red/teal/
 * blue/white. En thème sombre, ces classes deviennent illisibles (fond blanc,
 * texte quasi blanc). On les remappe vers les tokens sémantiques équivalents.
 * Périmètre = l'inventaire exhaustif `grep -rhoE '(bg|text|border)-...' app/views`
 * (review fred 3DRlAVVs). Refonte par vue à venir aux lots suivants.
 */
[data-theme="dark"] body { background: var(--surface); color: var(--text-primary); }

[data-theme="dark"] .bg-white       { background-color: var(--surface) !important; }
[data-theme="dark"] .bg-stone-50    { background-color: var(--surface) !important; }
[data-theme="dark"] .bg-stone-100   { background-color: var(--surface-raised) !important; }
[data-theme="dark"] .bg-stone-200   { background-color: var(--surface-raised) !important; }
[data-theme="dark"] .bg-stone-700   { background-color: var(--gray-700) !important; color: var(--gray-50); }
[data-theme="dark"] .bg-stone-900   { background-color: var(--text-primary) !important; color: var(--surface); }

/* Intitulé de groupe dans le panneau burger (groupe « Admin »). */
.chrome-burger__group {
  display: block;
  padding: 8px 12px 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Contrôles de formulaire natifs (select/input/textarea) : non couverts par
 * le remap Tailwind ci-dessus — le popup d'options d'un <select> héritait des
 * couleurs navigateur et devenait illisible en sombre (retour Luc 02/09,
 * screenshot fiche exigence). Couleurs explicites dans les DEUX thèmes. */
select, textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="file"] {
  background-color: var(--surface);
  color: var(--text-primary);
}
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="file"] {
  background-color: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--gray-700);
}
[data-theme="dark"] select option {
  background-color: var(--surface-raised);
  color: var(--text-primary);
}

[data-theme="dark"] .text-stone-300 { color: var(--gray-500) !important; }
[data-theme="dark"] .text-stone-400 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-stone-500 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-stone-600 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-stone-700 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-stone-800 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-stone-900 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-white     { color: var(--surface) !important; }

[data-theme="dark"] .border-stone-200 { border-color: var(--border) !important; }
[data-theme="dark"] .border-stone-300 { border-color: var(--border-control) !important; }

[data-theme="dark"] .divide-stone-200 > * + * { border-color: var(--border) !important; }

/* Pastilles (amber/emerald/rose/sky/violet) : on garde le hue mais on baisse la
 * saturation du fond pour qu'il reste lisible sur surface sombre, et on
 * remonte le texte. Une seule règle par famille (helper `pill` construit ces
 * combinaisons). */
[data-theme="dark"] .bg-amber-50   { background-color: rgba(249, 237, 39, 0.10) !important; }
[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 200, 59, 0.10) !important; }
[data-theme="dark"] .bg-rose-50    { background-color: rgba(225, 118, 124, 0.12) !important; }
[data-theme="dark"] .bg-red-50     { background-color: rgba(225, 118, 124, 0.12) !important; }
[data-theme="dark"] .bg-red-100    { background-color: rgba(225, 118, 124, 0.18) !important; }
[data-theme="dark"] .bg-teal-50    { background-color: rgba(0, 165, 176, 0.10) !important; }
[data-theme="dark"] .bg-blue-100   { background-color: rgba(3, 181, 225, 0.16) !important; }
[data-theme="dark"] .bg-sky-50     { background-color: rgba(3, 181, 225, 0.10) !important; }
[data-theme="dark"] .bg-sky-100    { background-color: rgba(3, 181, 225, 0.16) !important; }
[data-theme="dark"] .bg-violet-50  { background-color: rgba(196, 129, 237, 0.12) !important; }

[data-theme="dark"] .text-amber-700   { color: var(--status-warning) !important; }
[data-theme="dark"] .text-amber-800   { color: var(--status-warning) !important; }
[data-theme="dark"] .text-emerald-600 { color: var(--status-success) !important; }
[data-theme="dark"] .text-emerald-700 { color: var(--status-success) !important; }
[data-theme="dark"] .text-emerald-800 { color: var(--status-success) !important; }
[data-theme="dark"] .text-rose-700    { color: var(--status-critical) !important; }
[data-theme="dark"] .text-rose-800    { color: var(--status-critical) !important; }
[data-theme="dark"] .text-red-800     { color: var(--status-critical) !important; }
[data-theme="dark"] .text-sky-700     { color: var(--status-info) !important; }
[data-theme="dark"] .text-sky-900     { color: var(--status-info) !important; }
[data-theme="dark"] .text-teal-700    { color: var(--status-info) !important; }
[data-theme="dark"] .text-blue-700    { color: var(--status-info) !important; }
[data-theme="dark"] .text-violet-700  { color: var(--status-pending) !important; }

/* Variantes d'OPACITÉ Tailwind (`bg-stone-50/95`, `bg-emerald-50/50`…) : les
 * sélecteurs de classe exacts ci-dessus ne les matchent pas — `[class*=]`
 * couvre tous les suffixes /NN. Retour Luc 01/09 : sous-barre d'onglets et
 * stepper restaient clairs en thème sombre (fond non remappé, texte remappé).
 */
[data-theme="dark"] [class^="bg-white/"],
[data-theme="dark"] [class*=" bg-white/"],
[data-theme="dark"] [class^="bg-stone-50/"],
[data-theme="dark"] [class*=" bg-stone-50/"] { background-color: color-mix(in oklab, var(--surface-raised) 60%, var(--surface)) !important; }
[data-theme="dark"] [class^="bg-stone-100/"],
[data-theme="dark"] [class*=" bg-stone-100/"] { background-color: var(--surface-raised) !important; }
[data-theme="dark"] [class^="bg-amber-50/"],
[data-theme="dark"] [class*=" bg-amber-50/"] { background-color: rgba(249, 237, 39, 0.10) !important; }
[data-theme="dark"] [class^="bg-amber-100/"],
[data-theme="dark"] [class*=" bg-amber-100/"] { background-color: rgba(249, 237, 39, 0.16) !important; }
[data-theme="dark"] [class^="bg-emerald-50/"],
[data-theme="dark"] [class*=" bg-emerald-50/"] { background-color: rgba(16, 200, 59, 0.10) !important; }
[data-theme="dark"] [class^="bg-emerald-100/"],
[data-theme="dark"] [class*=" bg-emerald-100/"] { background-color: rgba(16, 200, 59, 0.16) !important; }
[data-theme="dark"] [class^="bg-rose-50/"],
[data-theme="dark"] [class*=" bg-rose-50/"] { background-color: rgba(225, 118, 124, 0.12) !important; }
[data-theme="dark"] [class^="bg-sky-50/"],
[data-theme="dark"] [class*=" bg-sky-50/"] { background-color: rgba(3, 181, 225, 0.10) !important; }
[data-theme="dark"] [class^="bg-teal-50/"],
[data-theme="dark"] [class*=" bg-teal-50/"] { background-color: rgba(0, 165, 176, 0.10) !important; }
[data-theme="dark"] [class^="bg-violet-50/"],
[data-theme="dark"] [class*=" bg-violet-50/"] { background-color: rgba(196, 129, 237, 0.12) !important; }

/* Hovers — mêmes familles (`hover:bg-…` avec ou sans /NN). Sans remap, le
 * survol repeint en clair plein. */
[data-theme="dark"] [class*="hover:bg-stone-50"]:hover,
[data-theme="dark"] [class*="hover:bg-stone-100"]:hover,
[data-theme="dark"] [class*="hover:bg-stone-200"]:hover   { background-color: var(--surface-raised) !important; }
[data-theme="dark"] [class*="hover:bg-stone-700"]:hover   { background-color: var(--gray-700) !important; }
[data-theme="dark"] [class*="hover:bg-amber-100"]:hover   { background-color: rgba(249, 237, 39, 0.16) !important; }
[data-theme="dark"] [class*="hover:bg-amber-200"]:hover   { background-color: rgba(249, 237, 39, 0.22) !important; }
[data-theme="dark"] [class*="hover:bg-emerald-100"]:hover { background-color: rgba(16, 200, 59, 0.16) !important; }
[data-theme="dark"] [class*="hover:bg-rose-50"]:hover,
[data-theme="dark"] [class*="hover:bg-rose-200"]:hover    { background-color: rgba(225, 118, 124, 0.18) !important; }

[data-theme="dark"] .border-amber-300   { border-color: var(--status-warning) !important; }
[data-theme="dark"] .border-emerald-200 { border-color: var(--status-success) !important; }
[data-theme="dark"] .border-emerald-300 { border-color: var(--status-success) !important; }
[data-theme="dark"] .border-rose-200    { border-color: var(--status-critical) !important; }
[data-theme="dark"] .border-rose-300    { border-color: var(--status-critical) !important; }
[data-theme="dark"] .border-red-200     { border-color: var(--status-critical) !important; }
[data-theme="dark"] .border-red-300     { border-color: var(--status-critical) !important; }
[data-theme="dark"] .border-teal-200    { border-color: var(--status-info) !important; }
[data-theme="dark"] .border-teal-400    { border-color: var(--status-info) !important; }
[data-theme="dark"] .border-sky-300     { border-color: var(--status-info) !important; }
[data-theme="dark"] .border-violet-200  { border-color: var(--status-pending) !important; }
[data-theme="dark"] .border-violet-300  { border-color: var(--status-pending) !important; }

/* Focus-ring — homogène deux thèmes */
:root, [data-theme="dark"] {
  --tw-ring-color: var(--focus-ring);
}

/* ==========================================================================
 * ZONES FUTURES — R6 (spec sH2R8Jl4)
 * Bord pointillé, fond légèrement grisé, badge « en préparation ».
 * Deux variantes : `--bloc` (carte) et `--inline` (bouton). Aucun hex — tous
 * les tokens sémantiques, deux thèmes.
 * ========================================================================== */
.future-zone {
  --future-fg:     var(--text-secondary);
  --future-bg:     color-mix(in oklab, var(--surface-raised) 60%, transparent);
  --future-border: var(--border-control);
  color: var(--future-fg);
  background: var(--future-bg);
  border: var(--border-width-hairline) dashed var(--future-border);
  cursor: not-allowed;
  font: inherit;
  transition: background var(--motion-duree-1) var(--motion-courbe-entree),
              border-color var(--motion-duree-1) var(--motion-courbe-entree);
}
.future-zone:hover,
.future-zone:focus-visible {
  background: var(--surface-raised);
  border-color: var(--text-secondary);
  outline: none;
}
.future-zone:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.future-zone__icon {
  display: inline-block;
  color: var(--text-secondary);
  font-weight: 700;
}
.future-zone__badge {
  display: inline-flex;
  align-items: center;
  border: var(--border-width-hairline) solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--type-ref-size);
  font-weight: 500;
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
}
.future-zone__badge--noted {
  color: var(--status-success);
  border-color: var(--status-success);
}

/* --- variante INLINE (bouton grisé, remplace les CTA « à venir ») --- */
.future-zone--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
}
.future-zone--inline .future-zone__label {
  font-weight: 500;
}

/* --- variante BLOC (carte à insérer dans le flux) --- */
.future-zone--bloc {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
}
.future-zone--bloc .future-zone__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.future-zone--bloc .future-zone__title {
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}
.future-zone--bloc .future-zone__badge {
  margin-left: auto;
}
.future-zone--bloc .future-zone__desc {
  margin-top: var(--space-2);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  color: var(--text-secondary);
}

/* ==========================================================================
 * PANNEAU D'AIDE — R6 (le bouton « ? » = .chrome-icon-btn du bandeau)
 * ========================================================================== */

.help-panel {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  pointer-events: none;
}
.help-panel[aria-hidden="false"] {
  pointer-events: auto;
}
.help-panel__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--motion-duree-2) var(--motion-courbe-entree);
}
.help-panel[aria-hidden="false"] .help-panel__scrim {
  opacity: 1;
}
.help-panel__sheet {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 420px;
  max-width: 100%;
  background: var(--surface);
  border-left: var(--border-width-hairline) solid var(--border);
  box-shadow: -8px 0 24px var(--scrim);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--motion-duree-2) var(--motion-courbe-entree);
}
.help-panel[aria-hidden="false"] .help-panel__sheet {
  transform: translateX(0);
}
.help-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: var(--border-width-hairline) solid var(--border);
}
.help-panel__title {
  font-family: var(--font-sans);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.help-panel__close {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.help-panel__close:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
}
.help-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.help-panel__intro {
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  margin: 0;
}
.help-panel__section,
.help-panel__process,
.help-panel__gesture {
  padding-top: var(--space-3);
  border-top: var(--border-width-hairline) solid var(--border);
}
.help-panel__heading {
  font-family: var(--font-sans);
  font-size: var(--type-small-size);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-1) 0;
}
.help-panel__process-label,
.help-panel__gesture-label {
  font-size: var(--type-ref-size);
  font-weight: 700;
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.help-panel__text {
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  margin: 0;
}
.help-panel__ask {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border-width-hairline) solid var(--border);
}

/* Cible 375 px — le panneau prend l'écran entier (spec R6 : plein écran mobile). */
@media (max-width: 640px) {
  .help-panel__sheet {
    width: 100%;
    border-left: none;
  }
}

/* ==========================================================================
 * Bascule « voir en tant que » (utilisateur / admin)
 * ========================================================================== */

.chrome-preview {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
}
.chrome-preview__label {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.chrome-preview__opt {
  padding: 4px 8px;
  border: var(--border-width-hairline) solid var(--border-control);
  background: var(--surface);
  color: var(--text-secondary);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.chrome-preview__opt.is-current {
  color: var(--text-accent);
  border-color: var(--accent);
}
.chrome-preview__opt:hover { color: var(--text-primary); }

.chrome-preview--burger {
  display: none;
  flex-wrap: wrap;
  padding: 8px 12px;
  gap: var(--space-2);
}
.chrome-preview--burger .chrome-preview__label {
  width: 100%;
}

/* — Axe fonction dans le bandeau : DÉROULANT (retour Luc 07/09) —
 *
 * Cinq positions à plat + le libellé, c'était ~330 px d'outils en trop : la
 * rangée dépassait les 80 rem, `.chrome-tools` ne rétrécit pas (flex: none),
 * donc c'est la nav produit qui se faisait écraser et ses libellés
 * `nowrap` se superposaient à ceux des bascules. Mêmes mécaniques que
 * `.chrome-nav__dropdown` : <details> natif, panneau ancré à droite.
 */
.chrome-preview--menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.chrome-preview--menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  cursor: pointer;
}
.chrome-preview--menu > summary::-webkit-details-marker { display: none; }
.chrome-preview__current {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: var(--border-width-hairline) solid var(--border-control);
  background: var(--surface);
  color: var(--text-secondary);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chrome-preview__current::after {
  content: "▾";
  font-size: 9px;
}
.chrome-preview--menu > summary:hover .chrome-preview__current {
  color: var(--text-primary);
}
/* Une fonction POSÉE se voit dans le bandeau sans ouvrir le menu. */
.chrome-preview--menu.is-set > summary .chrome-preview__current {
  color: var(--text-accent);
  border-color: var(--accent);
}
.chrome-preview__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--layer-superpose);
  min-width: 180px;
  background: var(--surface);
  border: var(--border-width-hairline) solid var(--border);
  padding: 4px;
  box-shadow: 0 8px 24px var(--scrim);
  display: flex;
  flex-direction: column;
}
.chrome-preview__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font: 400 13px/1.2 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.chrome-preview__item:hover { background: var(--surface-raised); }
.chrome-preview__item.is-current {
  color: var(--text-accent);
  font-weight: 700;
}

@media (max-width: 1023px) {
  /* `!important` : depuis que l'axe fonction est un <details>, le même
   * élément porte AUSSI `.chrome-preview--menu { display: inline-flex }` —
   * même spécificité, déclarée plus haut, donc elle gagnerait ici. */
  .chrome-preview--tools { display: none !important; }
  .chrome-preview--burger { display: flex; }
}

@media (max-width: 640px) {
  .chrome-preview__label { display: none; }
}

/* ==========================================================================
 * Accueil chooser — destinations
 * ========================================================================== */

.home-hero { margin-bottom: var(--space-8); }
.home-hero__title {
  font: var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  letter-spacing: var(--type-h3-tracking);
  margin: 0;
}
.home-hero__sub {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  max-width: 36rem;
}

.home-section { margin-bottom: var(--space-8); }
.home-section__label {
  font: 700 var(--type-ref-size)/1 var(--font-mono);
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

.home-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .home-grid { grid-template-columns: 1fr 1fr; }
}

.home-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 8rem;
  padding: var(--space-6) var(--space-4);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
  color: var(--text-primary);
  text-decoration: none;
}
.home-card:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.home-card__title {
  font: 700 var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  letter-spacing: var(--type-h3-tracking);
}
/* La description tient toute la largeur de la carte. Le gabarit 26ch d'avant
   était une mesure de lecture de paragraphe : sur une carte de 2 à 3 lignes
   il ne servait qu'à replier le texte en colonne étroite au milieu d'un bloc
   large, et à couper des nombres (« corpus (1 808) »). Une carte n'est pas
   un paragraphe : la largeur de lecture, c'est la carte. Conséquence voulue —
   la même règle tient en une colonne (mobile) comme en deux ou trois. */
.home-card__desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}

.home-grid > .future-zone--bloc {
  min-height: 8rem;
  padding: var(--space-6) var(--space-4);
  border-width: var(--border-width-strong);
  border-radius: 0;
}
.home-grid > .future-zone--bloc .future-zone__title {
  font: 700 var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  letter-spacing: var(--type-h3-tracking);
}

/* Bouton « + » de l'accueil vide + zone de dépôt (mode blank uniquement).
   Le bouton est un carré au trait fort (mêmes tokens que les cartes) : il
   dit « geste unique de chargement ». On lui donne le même chrome que
   .home-card pour rester dans la charte, en variante compacte. */
.home-upload {
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  position: relative;
}
.home-upload__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 3rem;
  min-width: 3rem;
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
  color: var(--text-primary);
  font: 700 var(--type-small-size)/1 var(--font-sans);
  cursor: pointer;
  transition: border-color 120ms, background-color 120ms;
}
.home-upload__button:hover,
.home-upload__button:focus-visible,
.home-upload__button--hover {
  border-color: var(--accent);
  outline: none;
}
.home-upload__button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.home-upload__plus {
  font: 700 1.75rem/1 var(--font-sans);
  color: var(--accent);
  line-height: 1;
}
.home-upload__label {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.home-upload__hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.home-upload__error {
  margin: 0;
  color: #B91C1C;
  font-size: var(--type-small-size);
}
/* Remise à vide : geste secondaire, discret — un lien-bouton, pas un
   second appel à l'action à côté du « + ». */
.home-upload__reset {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.home-upload__reset:hover,
.home-upload__reset:focus-visible {
  color: var(--text-primary);
}

/* Feedback global : quand des fichiers survolent la fenêtre, on souligne
   le bouton et on marque discrètement le corps (contour de la zone
   pilotante). Aucun overlay opaque : la démo ne doit pas clignoter. */
.home-upload-body-dragging .home-upload {
  outline: 2px dashed var(--accent);
  outline-offset: var(--space-3);
}
.home-upload--dragging .home-upload__button {
  border-color: var(--accent);
  background: var(--surface-raised);
}

/* Page de dépôt DÉDIÉE `/chargements/new` (ordre Luc 25/09 — « effet waouh »
   en séance). Même chrome que `.home-upload` (trait fort, mêmes tokens),
   variante plein écran : grande zone de dépôt, lien de repli discret. */
.ingestion-drop {
  max-width: 46rem;
  margin: var(--space-8) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ingestion-drop__head { text-align: center; }
.ingestion-drop__title {
  font: var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-leading) var(--font-sans);
  letter-spacing: var(--type-h2-tracking);
  color: var(--text-primary);
  margin: 0;
}
.ingestion-drop__help {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}
.ingestion-drop__alert {
  border: 1px solid var(--status-critical-light);
  color: var(--status-critical-light);
  padding: var(--space-3) var(--space-4);
  font-size: var(--type-small-size);
}
.ingestion-drop__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-16) var(--space-6);
  border: var(--border-width-strong) dashed var(--border-color-strong);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms, background-color 120ms;
}
.ingestion-drop__zone.home-upload__button--hover,
.ingestion-drop.home-upload--dragging .ingestion-drop__zone {
  border-color: var(--accent);
  border-style: solid;
  background: var(--surface-raised);
}
.ingestion-drop__icon {
  font: 700 2.5rem/1 var(--font-sans);
  color: var(--accent);
}
.ingestion-drop__label {
  margin: 0;
  font: var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  color: var(--text-primary);
}
.ingestion-drop__hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.ingestion-drop__picker {
  margin-top: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: var(--type-small-size);
}
.ingestion-drop__error {
  margin: 0;
  color: var(--status-critical-light);
  font-size: var(--type-small-size);
}
.ingestion-drop__form,
.ingestion-drop__fallback-form { display: none; }
noscript .ingestion-drop__fallback-form { display: block; }

/* Page « Chargement en direct » (`/chargements/:id`, ordre Luc 25/09) —
   pensée pour la PROJECTION : lisible en demi-écran (~1 050 px CSS) et en
   plein écran, grande barre, grands compteurs qui montent. Mêmes tokens
   que le reste de la charte (trait fort, pas de nouveau langage visuel). */
.ingestion-live {
  max-width: 64rem;
  margin: var(--space-6) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ingestion-live__head { text-align: center; }
.ingestion-live__title {
  font: var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-leading) var(--font-sans);
  letter-spacing: var(--type-h2-tracking);
  color: var(--text-primary);
  margin: 0;
}
.ingestion-live__subtitle {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
}
.ingestion-live__bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.ingestion-live__bar {
  flex: 1 1 auto;
  height: 1.5rem;
  appearance: none;
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
}
.ingestion-live__bar::-webkit-progress-bar { background: var(--surface); }
.ingestion-live__bar::-webkit-progress-value { background: var(--accent); transition: width 400ms ease; }
.ingestion-live__bar::-moz-progress-bar { background: var(--accent); transition: width 400ms ease; }
.ingestion-live__percent {
  font: 700 var(--type-h3-size)/1 var(--font-mono);
  color: var(--text-primary);
  min-width: 4ch;
  text-align: right;
}
.ingestion-live__phase {
  margin: 0;
  text-align: center;
  font: var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  color: var(--text-primary);
}
.ingestion-live__times {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--type-small-size);
}
.ingestion-live__current {
  margin: 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  font-style: italic;
}
/* NOTE : les classes `.ingestion-live__grid` et `.ingestion-live__tile*`
   ont été retirées avec la refonte « déroulé par phases » du 29/09 —
   plus aucune vue ni test ne les référence (blast radius mesuré :
   `grep -rn "ingestion-live__tile\|ingestion-live__grid" app/ test/` sur
   le worktree = 0 hit en dehors de la CSS). Les tuiles sont remplacées
   par les blocs `.ingestion-live__phase-block` + `.ingestion-live__step*`
   au-dessus. */

.ingestion-live__error {
  margin: 0;
  text-align: center;
  color: var(--status-warning-light);
  font-size: var(--type-small-size);
}
.ingestion-live__final {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface-raised);
  text-align: center;
}
.ingestion-live__final-title {
  margin: 0 0 var(--space-2);
  font: var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  color: var(--text-primary);
}
.ingestion-live__final-summary {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
}
.ingestion-live__final-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ingestion-live__final-button {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.ingestion-live__final-button--ghost {
  background: var(--surface);
  color: var(--text-primary);
}
.ingestion-live__details {
  margin-top: var(--space-6);
}
.ingestion-live__details > summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------
   Refonte « déroulé par phases » du 29/09 (note config/notes/2026-09-29-
   demo-chargement-anime.md). L'ancienne grille de tuiles (`__grid`,
   `__tile*`) est REMPLACÉE par deux BLOCS PHASE — chaque phase encadre
   ses lignes-étapes. Les tokens (trait fort, accent, tailles) restent
   ceux de la charte. Sur ~1 050 px de projection : deux colonnes fluides,
   compteurs bien lisibles depuis 3 m.
   --------------------------------------------------------------------- */

.ingestion-live__phase-block {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
  transition: border-color 200ms;
}
.ingestion-live__phase-block--running { border-color: var(--accent); }
.ingestion-live__phase-block--pending,
.ingestion-live__phase-block--skipped { opacity: 0.7; }
.ingestion-live__phase-block--skipped { border-style: dashed; }

.ingestion-live__phase-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font: var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ingestion-live__phase-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--border-color-strong);
  flex: 0 0 auto;
}
.ingestion-live__phase-block--running .ingestion-live__phase-dot {
  background: var(--accent);
  animation: ingestion-live-pulse 1.4s ease-in-out infinite;
}
.ingestion-live__phase-block--done .ingestion-live__phase-dot {
  background: var(--status-ok, #16a34a);
}

/* Les 5 lignes-compteurs de la phase 1 — état visuel dérivé du
   séquenceur (pending gris, running qui pulse, done coche verte). */
.ingestion-live__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.ingestion-live__step {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  column-gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--border-color-strong);
  transition: border-color 200ms, opacity 200ms;
}
.ingestion-live__step--pending { opacity: 0.55; }
.ingestion-live__step--running { border-left-color: var(--accent); }
.ingestion-live__step--done    { border-left-color: var(--status-ok, #16a34a); }

.ingestion-live__step-mark {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid var(--border-color-strong);
  background: var(--surface);
  position: relative;
  flex: 0 0 auto;
}
.ingestion-live__step--running .ingestion-live__step-mark {
  background: var(--accent);
  border-color: var(--accent);
  animation: ingestion-live-pulse 1.4s ease-in-out infinite;
}
.ingestion-live__step--done .ingestion-live__step-mark {
  background: var(--status-ok, #16a34a);
  border-color: var(--status-ok, #16a34a);
}
.ingestion-live__step--done .ingestion-live__step-mark::after {
  content: "✓";
  color: var(--white, #fff);
  font-size: 0.75rem;
  line-height: 1;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ingestion-live__step-label {
  font-size: var(--type-body-size);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ingestion-live__step-count {
  font: 800 var(--type-h2-size)/1 var(--font-mono);
  color: var(--text-primary);
  min-width: 4ch;
  text-align: right;
}
.ingestion-live__step-total {
  font: 500 var(--type-h3-size)/1 var(--font-mono);
  color: var(--text-secondary);
}
.ingestion-live__step-current {
  grid-column: 2 / -1;
  margin-top: var(--space-1);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* « dont N déjà chargés » — repose sous « Documents lus » quand le lot
   revoit des fichiers déjà en base (matrice IUX6gwIi). Discret comme
   `--current` (même colonne, même palette). */
.ingestion-live__step-already-loaded {
  grid-column: 2 / -1;
  margin-top: var(--space-1);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
/* Bannière plein largeur — n'apparaît que si 100 % du lot était déjà
   chargé, une fois le lot terminé. Ton neutre, pas d'alerte : c'est
   une INFO qui dit pourquoi les 4 autres compteurs sont à 0. */
.ingestion-live__already-loaded-banner {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-4);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: var(--type-small-size);
}

/* Sous-étapes déterministes de la queue de phase 1 (flow_scan,
   effort_profile) — plus discrètes, une ligne chacune. */
.ingestion-live__substeps {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px dashed var(--border-color-strong);
  display: grid;
  gap: var(--space-2);
}
.ingestion-live__substep {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
  opacity: 0.6;
  transition: opacity 200ms;
}
.ingestion-live__substep--running,
.ingestion-live__substep--done { opacity: 1; }
.ingestion-live__substep-mark {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--border-color-strong);
  flex: 0 0 auto;
}
.ingestion-live__substep--running .ingestion-live__substep-mark {
  background: var(--accent);
  animation: ingestion-live-pulse 1.4s ease-in-out infinite;
}
.ingestion-live__substep--done .ingestion-live__substep-mark {
  background: var(--status-ok, #16a34a);
}
.ingestion-live__substep-count {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
}

/* Phase 2 — Analyse IA */
.ingestion-live__phase-block--ai { background: var(--surface-raised); }
.ingestion-live__ai {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
  transition: opacity 200ms;
}
.ingestion-live__ai--dim {
  opacity: 0.6;
  border-style: dashed;
}
.ingestion-live__ai-label {
  font-size: var(--type-small-size);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ingestion-live__ai-value {
  font: 800 var(--type-h1-size)/1 var(--font-mono);
  color: var(--text-primary);
  grid-row: 1 / 3;
  grid-column: 2;
}
.ingestion-live__ai-hint {
  grid-column: 1;
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.ingestion-live__ai-model,
.ingestion-live__ai-local {
  grid-column: 1 / -1;
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.ingestion-live__ai-local {
  color: var(--status-ok, #16a34a);
  font-weight: 600;
}

/* Fil des documents — apparition sobre, jamais un flash. */
.ingestion-live__thread {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
}
.ingestion-live__thread-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
}
.ingestion-live__thread-title {
  margin: 0;
  font: var(--type-h3-weight) var(--type-h3-size)/1 var(--font-sans);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ingestion-live__thread-count {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: var(--type-small-size);
}
.ingestion-live__thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  max-height: 28rem;
  overflow-y: auto;
}
.ingestion-live__thread-empty {
  padding: var(--space-4);
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
}
.ingestion-live__thread-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--border-color-strong);
  background: var(--surface);
  font-size: var(--type-small-size);
}
.ingestion-live__thread-item--running { border-left-color: var(--accent); }
.ingestion-live__thread-item--done    { border-left-color: var(--status-ok, #16a34a); }
.ingestion-live__thread-item--skipped { border-left-color: var(--status-warning-light, #b45309); }
.ingestion-live__thread-item--failed  { border-left-color: var(--status-critical-light, #b91c1c); }

.ingestion-live__thread-item-kind {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
  min-width: 4.5rem;
}
.ingestion-live__thread-item-name {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}
.ingestion-live__thread-item-tag {
  padding: 0 var(--space-2);
  border: 1px solid var(--border-color-strong);
  color: var(--text-secondary);
  font-size: 0.6875rem;
}
.ingestion-live__thread-item-status {
  padding: 0 var(--space-2);
  color: var(--text-secondary);
  font-weight: 600;
}
.ingestion-live__thread-item-status--done    { color: var(--status-ok, #16a34a); }
.ingestion-live__thread-item-status--running { color: var(--accent); }
.ingestion-live__thread-item-status--skipped { color: var(--status-warning-light, #b45309); }
.ingestion-live__thread-item-status--failed  { color: var(--status-critical-light, #b91c1c); }

.ingestion-live__thread-item-counters {
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.ingestion-live__thread-item-message {
  flex-basis: 100%;
  color: var(--text-secondary);
  font-style: italic;
  padding-left: 4.5rem;
}

/* Animation d'apparition d'une nouvelle ligne du fil (posée par le JS
   `live-loading` uniquement quand la position est nouvelle). Sobre :
   opacity + translate, ~500 ms. */
.ingestion-live__thread-item--new {
  animation: ingestion-live-appear 500ms ease-out both;
}

@keyframes ingestion-live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.7; }
}
@keyframes ingestion-live-appear {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Accessibilité : `prefers-reduced-motion` — on éteint TOUTES les
   animations (pulse, apparition). L'écran reste lisible sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  .ingestion-live__phase-dot,
  .ingestion-live__step-mark,
  .ingestion-live__substep-mark { animation: none !important; }
  .ingestion-live__thread-item--new { animation: none !important; }
  .ingestion-live__bar::-webkit-progress-value { transition: none !important; }
  .ingestion-live__bar::-moz-progress-bar      { transition: none !important; }
}

/* Barre d'envoi visible sur la page de dépôt (retour Luc 29/09 :
   « je veux voir que ça monte, un status sr-only ne suffit pas »). */
.ingestion-drop__upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color-strong);
  background: var(--surface-raised);
}
.ingestion-drop__upload-bar {
  width: 100%;
  height: 1.25rem;
  appearance: none;
  border: 1px solid var(--border-color-strong);
  background: var(--surface);
}
.ingestion-drop__upload-bar::-webkit-progress-bar { background: var(--surface); }
.ingestion-drop__upload-bar::-webkit-progress-value { background: var(--accent); transition: width 250ms ease; }
.ingestion-drop__upload-bar::-moz-progress-bar      { background: var(--accent); transition: width 250ms ease; }
.ingestion-drop__upload-message {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  font-family: var(--font-mono);
}
.ingestion-drop__pickers {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* État « vide » d'une carte de destination — badge sobre en coin, la carte
   reste cliquable et mène à la page vide honnête. Aucun changement de
   couleur agressif : on annonce, on ne juge pas. */
.home-card { position: relative; }
.home-card--empty {
  border-style: dashed;
}
.home-card__empty-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 0 var(--space-2);
  font: 700 0.6875rem/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 1px solid var(--border-color-strong);
}

/* Onglets du parcours de dépôt : une maille = une taille (largeur ET hauteur).
   flex-1 laissait le contenu dicter la largeur ; les étapes « faites »
   (sans ligne d'état) étaient plus basses. Grille à pistes égales +
   deux lignes de titre et une d'état toujours réservées. */
.parcours-onglets__liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  align-items: stretch;
}
@media (min-width: 640px) {
  .parcours-onglets__liste {
    grid-template-columns: repeat(var(--parcours-n, 7), minmax(0, 1fr));
  }
}
.parcours-onglets__etape {
  min-width: 0;
  display: flex;
}
.parcours-onglets__lien {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-2);
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border-width: var(--border-width-hairline);
  border-radius: var(--space-3);
  text-decoration: none;
  overflow: hidden;
  transition: background-color var(--motion-duree-1), border-color var(--motion-duree-1), color var(--motion-duree-1);
}
.parcours-onglets__dot {
  display: grid;
  flex: 0 0 auto;
  width: var(--space-6);
  height: var(--space-6);
  margin-top: var(--space-1);
  place-items: center;
  border-radius: 50%;
}
.parcours-onglets__texte {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(
    2 * var(--type-small-size) * var(--type-small-leading)
    + var(--space-1)
    + var(--type-ref-size) * var(--type-ref-leading)
  );
}
.parcours-onglets__titre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  max-height: calc(2 * var(--type-small-size) * var(--type-small-leading));
  font: 500 var(--type-small-size)/var(--type-small-leading) var(--font-sans);
  overflow-wrap: anywhere;
}
.parcours-onglets__etat {
  margin-top: var(--space-1);
  min-width: 0;
  height: calc(var(--type-ref-size) * var(--type-ref-leading));
  font: 400 var(--type-ref-size)/var(--type-ref-leading) var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
 * Roadmap — la trajectoire, palier par palier (handoff tJmaDmXS, Lot B).
 * Deux niveaux de lecture : tout le monde voit les paliers, seul l'éditeur
 * reçoit la charge (le fragment n'est PAS construit pour les autres rôles —
 * rien n'est masqué ici, il n'y a rien à masquer).
 * ========================================================================== */

.roadmap-hero { margin-bottom: var(--space-8); }
.roadmap-hero__title {
  font: var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-leading) var(--font-sans);
  letter-spacing: var(--type-h2-tracking);
  margin: 0;
}
.roadmap-hero__sub {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  max-width: 44rem;
}
.roadmap-hero__rule {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: var(--border-width-strong) solid var(--accent);
  font: 700 var(--type-small-size)/var(--type-small-leading) var(--font-sans);
  max-width: 44rem;
}

/* Charge — bandeau éditeur. Volontairement sobre : c'est un instrument de
   travail, pas une offre. Aucune unité monétaire n'existe dans la chaîne. */
.roadmap-charge {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: var(--border-width-strong) dashed var(--border-color-strong);
  background: var(--surface);
}
.roadmap-charge__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.roadmap-charge__label {
  font: 700 var(--type-ref-size)/1 var(--font-mono);
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.roadmap-charge__variantes { display: flex; gap: var(--space-2); }
.roadmap-charge__variante {
  padding: 2px var(--space-2);
  border: 1px solid var(--border-color-strong);
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--type-ref-size);
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
}
.roadmap-charge__variante.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.roadmap-charge__total {
  margin: var(--space-3) 0 0;
  font: 700 var(--type-body-strong-size)/var(--type-body-strong-leading) var(--font-sans);
}
.roadmap-charge__note {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-legende-size);
  line-height: var(--type-legende-leading);
}

.roadmap-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.roadmap-palier {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
}
@media (min-width: 768px) {
  .roadmap-palier { grid-template-columns: 8rem 1fr; gap: var(--space-6); }
}
/* Le palier en cours est le seul mis en avant : la trajectoire se lit, elle
   ne se vend pas. */
.roadmap-palier--en-cours { border-color: var(--accent); }
.roadmap-palier--fait { opacity: 0.85; }

.roadmap-palier__rang { display: flex; flex-direction: column; gap: var(--space-1); }
.roadmap-palier__cle {
  font: 900 var(--type-h3-size)/1 var(--font-mono);
  letter-spacing: var(--type-h3-tracking);
}
.roadmap-palier__etat {
  font: var(--type-etat-weight) var(--type-etat-size)/var(--type-etat-leading) var(--font-mono);
  letter-spacing: var(--type-etat-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.roadmap-palier--en-cours .roadmap-palier__etat { color: var(--accent); }

.roadmap-palier__titre {
  margin: 0;
  font: 700 var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  letter-spacing: var(--type-h3-tracking);
}
.roadmap-palier__echeance {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
}
.roadmap-palier__champs {
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 1024px) {
  .roadmap-palier__champs { grid-template-columns: repeat(3, 1fr); }
}
.roadmap-champ dt {
  font: 700 var(--type-ref-size)/1 var(--font-mono);
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.roadmap-champ dd {
  margin: 0;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
/* « Ce qu'il faut de votre côté » : la colonne qui fait le travail — c'est
   elle qui rend la trajectoire conditionnée, sans rien réclamer. */
.roadmap-champ--requis dd { font-weight: 700; }

.roadmap-palier__note {
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  border-left: var(--border-width-strong) solid var(--border-color-strong);
  color: var(--text-secondary);
  font-size: var(--type-legende-size);
  line-height: var(--type-legende-leading);
}
.roadmap-palier__charge {
  margin: var(--space-4) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  border-top: 1px dashed var(--border-color-strong);
  padding-top: var(--space-2);
}
.roadmap-palier__charge-label {
  font: 700 var(--type-ref-size)/1 var(--font-mono);
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.roadmap-palier__charge-valeur {
  font: 700 var(--type-body-strong-size)/1 var(--font-mono);
}

.roadmap-pied {
  margin: var(--space-6) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
}

/* ==========================================================================
 * BOUTON DE REMARQUE PERMANENT — Lot E (handoff tJmaDmXS)
 *
 * Placement N11 : la bande basse est normée (système à gauche, geste principal
 * à droite). Ce bouton n'est PAS le geste principal de l'app — il vit sur le
 * BORD DROIT, à mi-hauteur, sous forme d'onglet vertical discret. Il ne touche
 * jamais `.chrome-bas-droite`.
 * ========================================================================== */

.remark__tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--layer-collant);
  padding: var(--space-3) var(--space-2);
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: var(--border-width-hairline) solid var(--border);
  border-right: none;
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  letter-spacing: 0.04em;
  cursor: pointer;
  writing-mode: vertical-rl;
  transition: color var(--motion-duree-1) var(--motion-courbe-entree),
              border-color var(--motion-duree-1) var(--motion-courbe-entree);
}
.remark__tab:hover,
.remark__tab:focus-visible {
  color: var(--text-accent);
  border-color: var(--accent);
}

/* Sous 768 px l'onglet vertical mangerait la lecture : il redescend en pastille
   au-dessus du coin bas-droit, sans jamais entrer dans la bande. */
@media (max-width: 767px) {
  .remark__tab {
    top: auto;
    bottom: calc(var(--space-16) + var(--space-4));
    transform: none;
    writing-mode: horizontal-tb;
    padding: var(--space-2) var(--space-3);
  }
}

.remark__panel {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  pointer-events: none;
}
.remark__panel[aria-hidden="false"] {
  pointer-events: auto;
}
.remark__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--motion-duree-2) var(--motion-courbe-entree);
}
.remark__panel[aria-hidden="false"] .remark__scrim {
  opacity: 1;
}
.remark__sheet {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 420px;
  max-width: 100%;
  background: var(--surface);
  border-left: var(--border-width-hairline) solid var(--border);
  box-shadow: -8px 0 24px var(--scrim);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  transform: translateX(100%);
  transition: transform var(--motion-duree-2) var(--motion-courbe-entree);
}
.remark__panel[aria-hidden="false"] .remark__sheet {
  transform: translateX(0);
}
.remark__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.remark__title {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
  color: var(--text-primary);
  margin: 0;
}
.remark__close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.remark__close:hover {
  color: var(--text-primary);
}
.remark__hint,
.remark__context {
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  color: var(--text-secondary);
  margin: 0;
}
.remark__field {
  width: 100%;
  resize: vertical;
  padding: var(--space-3);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
  font-family: inherit;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}
.remark__field:focus-visible {
  outline: var(--border-width-strong) solid var(--accent);
  outline-offset: 1px;
}
.remark__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.remark__send {
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  cursor: pointer;
}
.remark__send:hover:not(:disabled) {
  background: var(--accent-hover);
}
.remark__send:disabled {
  opacity: 0.5;
  cursor: default;
}
.remark__status {
  font-size: var(--type-small-size);
  color: var(--text-accent);
}

/* Sur une exigence : les remarques déjà émises, sous le champ (retour Luc
   25/09). La liste prend la hauteur qui reste (base 0 : sa longueur ne
   pousse pas le panneau) et défile DANS le panneau —
   `overscroll-behavior` empêche la molette, arrivée en bout de liste, de
   faire défiler la page derrière. Sur un écran très bas, le panneau entier
   défile plutôt que d'écraser la liste à zéro. */
.remark__sheet { overflow-y: auto; }
.remark__history {
  flex: 1 1 0;
  min-height: 10rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-width-hairline) solid var(--border);
}
.remark__history-title {
  margin: 0;
  font-size: var(--type-small-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.remark__history-list {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.remark-history__list { list-style: none; margin: 0; padding: 0; }
.remark-history__item { border-bottom: var(--border-width-hairline) solid var(--border); }
/* Le triangle de dépliage sur la ligne du numéro, pas seul au-dessus : les
   lignes du résumé sont des blocs, le marqueur natif restait en l'air (recette
   0.377). Déplié, l'extrait se retire — le texte entier le suit déjà. */
.remark-history__summary { cursor: pointer; padding-block: var(--space-2); list-style: none; }
.remark-history__summary::-webkit-details-marker { display: none; }
.remark-history__meta::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--text-secondary); }
details[open] > .remark-history__summary .remark-history__meta::before { content: "▾"; }
details[open] > .remark-history__summary .remark-history__extract { display: none; }
.remark-history__meta,
.remark-history__extract { display: block; overflow-wrap: anywhere; }
/* Le lien d'objet (25/09/2026) est dans le <summary> : en bloc, il couvrait
 * toute la ligne et un clic pour DÉPLIER filtrait le panneau. Il ne couvre
 * plus que son libellé. */
.remark-history__reference { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.remark-history__meta { font-size: var(--type-small-size); color: var(--text-secondary); }
.remark-history__reference { font-family: var(--font-mono); font-size: var(--type-small-size); color: var(--text-secondary); }
.remark-history__extract { font-size: var(--type-small-size); color: var(--text-primary); }
.remark-history__body,
.remark-history__response { font-size: var(--type-small-size); line-height: var(--type-small-leading); overflow-wrap: anywhere; padding-bottom: var(--space-2); }
.remark-history__response { border-left: var(--border-width-strong) solid var(--accent); padding-left: var(--space-2); }
.remark-history__open,
.remark-history__all { display: inline-block; padding-block: var(--space-2); font-size: var(--type-small-size); }
.remark-history__empty { margin: 0; font-size: var(--type-small-size); color: var(--text-secondary); }

/* --- Panneau latéral replié (shared/_side_panel) -------------------------
   Outils qu'on sort de temps en temps (propositions d'un modèle de langage,
   demande de Luc du 30/09 au soir). Onglet vertical au bord droit, AU-DESSUS
   de « Une remarque ? » (mi-hauteur) ; ouvert, le panneau part sous le
   bandeau collant (étapes toujours visibles), recouvre la droite, défile pour
   lui-même. Non modal : ni voile ni verrou de défilement. Accent « ia » =
   violet, la couleur de tout ce qui vient d'un modèle de langage
   (`provenance_badge :llm`). */
.side-panel {
  --side-panel-ink: var(--status-pending);
  --side-panel-tint: color-mix(in srgb, var(--status-pending) 9%, var(--surface));
  --side-panel-width: min(48rem, 94vw);
}
.side-panel__tab {
  position: fixed;
  right: 0;
  /* Juste AU-DESSUS de « Une remarque ? » (centré à mi-hauteur, ~8,5rem de
     haut) : jamais de chevauchement, quelle que soit la hauteur d'écran. */
  top: calc(50% - 4.75rem);
  transform: translateY(-100%);
  z-index: var(--layer-collant);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background: var(--side-panel-tint);
  color: var(--side-panel-ink);
  border: var(--border-width-1, 1px) solid var(--side-panel-ink);
  border-right: none;
  border-radius: 0.5rem 0 0 0.5rem;
  font-size: var(--type-small-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  writing-mode: vertical-rl;
  cursor: pointer;
  box-shadow: -2px 2px 10px rgba(28, 30, 42, 0.12);
}
.side-panel__tab .side-panel__badge { writing-mode: horizontal-tb; }
.side-panel__tab:hover,
.side-panel__tab:focus-visible {
  background: var(--side-panel-ink);
  color: var(--surface);
}
.side-panel__tab:hover .side-panel__badge,
.side-panel__tab:focus-visible .side-panel__badge {
  background: var(--surface);
  color: var(--side-panel-ink);
}
.side-panel.is-open .side-panel__tab { visibility: hidden; }
.side-panel__sheet {
  position: fixed;
  top: var(--chrome-sticky-offset, 0px);
  right: 0;
  bottom: 0;
  width: var(--side-panel-width);
  z-index: var(--layer-superpose);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 3px solid var(--side-panel-ink);
  box-shadow: -14px 0 32px rgba(28, 30, 42, 0.18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--motion-duree-2) var(--motion-courbe-entree),
              visibility 0s linear var(--motion-duree-2);
}
.side-panel.is-open .side-panel__sheet {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--motion-duree-2) var(--motion-courbe-entree);
}
.side-panel__sheet:focus { outline: none; }
.side-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-hairline) solid var(--border);
  background: var(--side-panel-tint);
}
.side-panel__badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--side-panel-ink);
  color: var(--surface);
  font-size: 0.8rem;
  font-weight: 700;
}
.side-panel__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--type-h3-size);
  font-weight: 600;
  color: var(--text-primary);
}
.side-panel__close {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.side-panel__close:hover,
.side-panel__close:focus-visible {
  background: var(--surface-raised);
  color: var(--text-primary);
}
.side-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
}
@media (max-width: 767px) {
  .side-panel { --side-panel-width: 100vw; }
  .side-panel__tab {
    top: auto;
    bottom: calc(var(--space-16) + var(--space-16));
    transform: none;
    writing-mode: horizontal-tb;
    padding: var(--space-2) var(--space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .side-panel__sheet,
  .side-panel.is-open .side-panel__sheet { transition: none; }
}

/* Journal des appels dans le panneau : la liste à gauche, la proposition
   lue à droite ; empilés sur un écran étroit. */
.ia-journal { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .ia-journal { grid-template-columns: 13rem minmax(0, 1fr); }
}
.ia-journal__list { display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); margin: 0; padding: 0; list-style: none; }
.ia-journal__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2);
  border: var(--border-width-hairline) solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--type-small-size);
  cursor: pointer;
}
.ia-journal__item:hover { border-color: var(--status-pending); }
.ia-journal__item.is-current {
  border-color: var(--status-pending);
  background: color-mix(in srgb, var(--status-pending) 10%, var(--surface));
  box-shadow: inset 3px 0 0 var(--status-pending);
}
.ia-journal__model { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ia-journal__meta { display: block; margin-top: 2px; color: var(--text-secondary); }

/* Filtres des questions en pastilles (étape Interprétations) : un clic
   filtre, sans bouton « Filtrer ». */
.filter-chips { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1 1 100%; }
.filter-chips__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.filter-chips__label { min-width: 6.5rem; font-size: var(--type-small-size); font-weight: 600; color: var(--text-secondary); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: var(--border-width-hairline) solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--type-small-size);
  text-decoration: none;
  white-space: nowrap;
}
.filter-chip:hover { background: var(--surface-raised); }
.filter-chip[aria-current="true"] {
  border-color: var(--border-color-strong);
  background: var(--text-primary);
  color: var(--surface);
}
.filter-chip__n {
  display: inline-block;
  min-width: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-align: center;
}
.filter-chip[aria-current="true"] .filter-chip__n { background: var(--surface); color: var(--text-primary); }
.filter-chip--empty { opacity: 0.55; }

/* --- Admin : la liste et la fiche ---------------------------------------- */

.remark-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
/* Groupe libellé + contrôle — reste solidaire au retour à la ligne à
   1366 px (recette 29/09, 0.546). */
.remark-filtres__champ {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.remark-filtres__label {
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.remark-filtres__input {
  /* Un motif à texte long (« La condition n'est pas la bonne… ») étirait
     le select sur toute la largeur d'option. On plafonne pour que la
     barre tienne, le texte tronqué reste lisible en survol / à l'ouverture. */
  max-width: 18rem;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
}
/* Chevron discret pour signaler qu'un `.remark-filtres__input` de type
   `select` est une liste déroulante. Un data-URI ne lit pas les propriétés
   CSS : le trait est un gris neutre fixe (#747474), lisible sur les deux
   thèmes, sans couleur d'accent. */
select.remark-filtres__input,
select.remark__banc-motif {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--space-3) + 1.25rem);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23747474' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 0.75rem;
}
.remark-filtres__submit {
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
  cursor: pointer;
}

/* --- Fieldset motif ouvert depuis une ligne du banc (A3) ------------------
 * Le contrôleur Stimulus (`remark_controller.js`) construit ces éléments à
 * l'ouverture. On y met le même vocabulaire visuel que les autres formulaires
 * du produit (jetons de `tokens.css`), pour que le select ressemble à une
 * liste déroulante et que le textarea de correction ait de l'air. */
.remark__banc {
  margin: 0;
  padding: var(--space-3);
  border: var(--border-width-hairline) solid var(--border);
  border-radius: var(--radius-none);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.remark__banc-legend {
  padding-inline: var(--space-2);
  font-size: var(--type-small-size);
  font-weight: 600;
  color: var(--text-primary);
}
.remark__banc-label {
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.remark__banc-motif,
.remark__banc-correction {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
  font-family: inherit;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}
.remark__banc-correction { resize: vertical; }
.remark__banc-hint {
  margin: 0;
  font-size: var(--type-small-size);
  color: var(--text-accent);
}
.remark__banc-warn {
  margin: 0;
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.remark-total,
.remark-vide {
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.remark-table-wrap {
  overflow-x: auto;
}
.remark-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-small-size);
}
.remark-table th,
.remark-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width-hairline) solid var(--border);
  vertical-align: top;
}
.remark-table th {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: 400;
}
.remark-pages {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--type-small-size);
}
.remark-fiche {
  border: var(--border-width-hairline) solid var(--border);
  border-radius: var(--radius-none);
  padding: var(--space-4);
}
.remark-fiche__corps {
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.remark-fiche__contexte {
  display: grid;
  gap: var(--space-2);
  border-top: var(--border-width-hairline) solid var(--border);
  padding-top: var(--space-4);
  font-size: var(--type-small-size);
}
.remark-fiche__contexte div {
  display: flex;
  gap: var(--space-3);
}
.remark-fiche__contexte dt {
  min-width: 8rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.remark-fiche__contexte dd {
  margin: 0;
  color: var(--text-primary);
}
.remark-retour {
  margin-top: var(--space-4);
  font-size: var(--type-small-size);
}

/* --- Traitement (mandat suivi 22/09/2026) ---------------------------------
 * Badge de statut : sobre, monochrome, tokens uniquement. La distinction
 * entre statuts se lit au libellé, jamais à la couleur (charte undust).
 */
.remark-status {
  display: inline-block;
  padding: 0 var(--space-2);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.remark-status--a-traiter {
  color: var(--text-primary);
  background: var(--surface-raised);
}
.remark-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--type-small-size);
}
.remark-nav__position {
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.remark-nav__prev--disabled,
.remark-nav__next--disabled {
  color: var(--text-secondary);
  opacity: 0.5;
}
.remark-traitement {
  margin-top: var(--space-4);
  border: var(--border-width-hairline) solid var(--border);
  padding: var(--space-4);
}
.remark-traitement__titre {
  margin: 0 0 var(--space-3);
  font-size: var(--type-h3-size);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.remark-traitement__historique {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.remark-traitement__geste {
  border-top: var(--border-width-hairline) solid var(--border);
  padding-top: var(--space-3);
}
.remark-traitement__meta {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
}
.remark-traitement__note {
  margin-top: var(--space-2);
}
.remark-traitement__vide {
  color: var(--text-secondary);
  font-size: var(--type-small-size);
}
.remark-traitement__form {
  display: grid;
  gap: var(--space-3);
  border-top: var(--border-width-hairline) solid var(--border);
  padding-top: var(--space-3);
}
.remark-traitement__champ {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.remark-traitement__champ--large textarea {
  min-height: 6rem;
}
.remark-traitement__champ input,
.remark-traitement__champ select,
.remark-traitement__champ textarea {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
}
.remark-traitement__submit {
  align-self: start;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
  cursor: pointer;
}
.remark-total__defiler {
  color: var(--text-primary);
}

/* --- Remarque lue comme un ticket (Luc 25/09/2026) -----------------------
 * À gauche le fil (son texte, nos réponses, les siennes), à droite un encart
 * léger de propriétés. Sous 960 px l'encart passe AU-DESSUS du fil : c'est
 * lui qui porte le statut à changer avant d'écrire. Distinction des statuts
 * au libellé, jamais à la couleur (charte undust). */
.remark-nav__back {
  margin-right: auto;
}
.remark-ticket__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.remark-ticket__titre {
  margin: 0;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
}
.remark-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.remark-props {
  order: -1;
}
/* Encart = 2/5 de la largeur (Luc 25/09/2026) : plus large, les pastilles
   tiennent sur moins de lignes et l'encart raccourcit en hauteur. */
@media (min-width: 960px) {
  .remark-ticket {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .remark-props {
    order: 0;
    position: sticky;
    top: var(--space-4);
  }
}
.remark-fil {
  min-width: 0;
}
.remark-fil__messages {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.remark-message {
  border: var(--border-width-hairline) solid var(--border);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  min-width: 0;
}
.remark-message--equipe {
  border-left: var(--border-width-strong) solid var(--accent);
}
.remark-message--auteur {
  border-left: var(--border-width-strong) solid var(--border-color-strong);
}
.remark-message--evenement {
  border-style: dashed;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.remark-message__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.remark-message__meta strong {
  color: var(--text-primary);
  font-weight: 600;
}
.remark-message__corps {
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.remark-message__corps > :first-child {
  margin-top: 0;
}
.remark-message__corps > :last-child {
  margin-bottom: 0;
}
.remark-message__changes {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--type-small-size);
}
.remark-change__cle {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  margin-right: var(--space-1);
}
.remark-change__avant {
  color: var(--text-secondary);
  text-decoration: line-through;
}
.remark-change__apres {
  color: var(--text-primary);
  font-weight: 600;
}
.remark-change--interne .remark-change__apres {
  font-weight: 400;
}
.remark-message__interne {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-hairline) dashed var(--border-control);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.remark-message__avant summary,
.remark-edit summary,
.remark-proposition summary,
.remark-compositeur__interne summary,
.remark-props__details summary {
  cursor: pointer;
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.remark-tag {
  display: inline-block;
  padding: 0 var(--space-1);
  border: var(--border-width-hairline) solid var(--border-control);
  font-family: var(--font-mono);
  font-size: var(--type-legende-size);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.remark-badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border: var(--border-width-hairline) solid var(--accent);
  color: var(--text-accent);
  font-size: var(--type-small-size);
}
.remark-edit {
  margin-top: var(--space-3);
}
.remark-edit__form,
.remark-compositeur {
  display: grid;
  gap: var(--space-2);
}
.remark-edit__hint,
.remark-props__hint {
  margin: 0;
  font-size: var(--type-legende-size);
  color: var(--text-secondary);
}
.remark-compositeur {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width-hairline) solid var(--border);
}
.remark-compositeur__label {
  font-weight: 600;
  color: var(--text-primary);
}
.remark-compositeur__motif {
  margin: 0;
  font-size: var(--type-small-size);
  color: var(--text-accent);
}
.remark-compositeur textarea,
.remark-edit textarea,
.remark-props__champ {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
  font: inherit;
}
.remark-compositeur textarea {
  min-height: 7rem;
}
.remark-proposition {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-hairline) dashed var(--border-control);
}
.remark-proposition__texte {
  margin: var(--space-2) 0;
  white-space: pre-wrap;
  color: var(--text-primary);
}
.remark-bouton {
  justify-self: start;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
  cursor: pointer;
  font: inherit;
}
.remark-bouton--principal {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.remark-bouton--discret {
  padding: var(--space-1) var(--space-3);
  font-size: var(--type-small-size);
}
.remark-bouton:focus-visible,
.remark-chip input:focus-visible + span,
.remark-pastille:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Encart de propriétés : léger, lisible d'un coup d'œil. */
.remark-props {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width-hairline) solid var(--border);
  font-size: var(--type-small-size);
  min-width: 0;
}
.remark-props__groupe {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.remark-props__groupe legend,
.remark-props__legende {
  padding: 0;
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--type-legende-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.remark-props__titre {
  margin: var(--space-1) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-width-hairline) solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--type-legende-size);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.remark-props__liste {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}
.remark-props__liste div {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-2);
}
.remark-props__liste dt {
  color: var(--text-secondary);
}
.remark-props__liste dd {
  margin: 0;
  color: var(--text-primary);
  min-width: 0;
}
.remark-props__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.remark-action {
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
}
.remark-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.remark-chip {
  position: relative;
  cursor: pointer;
}
.remark-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.remark-chip span {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: var(--border-width-hairline) solid var(--border-control);
  color: var(--text-secondary);
  background: var(--surface);
  line-height: 1.2;
  user-select: none;
}
.remark-chip:hover span {
  color: var(--text-primary);
  border-color: var(--border-color-strong);
}
.remark-chip input:checked + span {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

/* Liste : pastilles de statut (un clic filtre) et dépouillement. */
.remark-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.remark-pastille {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width-hairline) solid var(--border-control);
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  text-decoration: none;
}
.remark-pastille:hover {
  color: var(--text-primary);
  border-color: var(--border-color-strong);
}
.remark-pastille--active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.remark-pastille--signal:not(.remark-pastille--active) {
  color: var(--text-accent);
  border-color: var(--accent);
}
.remark-pastille__n {
  font-family: var(--font-mono);
}
.remark-depouillement {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-hairline) solid var(--border);
}
.remark-depouillement__titre {
  margin: 0;
  font-size: var(--type-body-size);
}
.remark-depouillement__sub {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--type-legende-size);
  color: var(--text-secondary);
}
.remark-depouillement__barres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.remark-depouillement__gauche {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) 3.5rem 2.5rem;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-small-size);
}
.remark-depouillement__nom--active {
  font-weight: 600;
}
.remark-depouillement--courbes .remark-depouillement__gauche {
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 3rem 2.5rem 2.5rem 7.5rem;
}
.remark-depouillement__reste {
  font-family: var(--font-mono);
  text-align: right;
}
.remark-depouillement__entetes {
  font-size: var(--type-legende-size);
  color: var(--text-secondary);
}
.remark-depouillement__entetes span {
  text-align: right;
  cursor: help;
}
.remark-depouillement__entetes span:empty {
  cursor: auto;
}
.remark-depouillement__ligne--entete .remark-depouillement__droite {
  border-bottom: 0;
}
/* Sens de la tendance : texte seulement (une hausse de remarques n'est ni
 * bonne ni mauvaise en soi — pas de couleur d'état). */
.remark-tendance__badge {
  font-family: var(--font-mono);
  font-size: var(--type-legende-size);
  white-space: nowrap;
  text-align: right;
  cursor: help;
}
.remark-tendance__badge--stable,
.remark-tendance__badge--peu {
  color: var(--text-secondary);
}
.remark-tendance__badge--hausse,
.remark-tendance__badge--baisse {
  font-weight: 600;
}
.remark-tendance__onglets {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  height: auto;
}
.remark-tendance__onglet {
  font-size: var(--type-legende-size);
  padding: 0 var(--space-2);
  border: var(--border-width-hairline) solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.remark-tendance__onglet[aria-selected="true"] {
  color: var(--text-primary);
  border-color: var(--text-primary);
  font-weight: 600;
}
/* Une vue à la fois : la section porte la vue active. */
.remark-tendance__courbe,
.remark-tendance__legende-vue {
  display: none;
}
.remark-depouillement[data-vue-active="cumul"] .remark-tendance__vue--cumul,
.remark-depouillement[data-vue-active="jour"] .remark-tendance__vue--jour,
.remark-depouillement[data-vue-active="part"] .remark-tendance__vue--part {
  display: block;
}
.remark-depouillement[data-vue-active="cumul"] .remark-tendance__legende-vue[data-vue="cumul"],
.remark-depouillement[data-vue-active="jour"] .remark-tendance__legende-vue[data-vue="jour"],
.remark-depouillement[data-vue-active="part"] .remark-tendance__legende-vue[data-vue="part"] {
  display: inline;
}
.remark-tendance__cumul,
.remark-tendance__traitees {
  fill: none;
  stroke: var(--remark-cat);
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.remark-tendance__traitees {
  stroke-dasharray: 4 3;
  stroke-width: 1.5px;
}
.remark-tendance__cumul-cellule {
  color: var(--text-secondary);
}
.remark-depouillement__barre {
  height: 0.5rem;
  background: var(--surface-raised);
  border: var(--border-width-hairline) solid var(--border);
}
.remark-depouillement__barre span {
  display: block;
  height: 100%;
  background: var(--remark-cat, var(--accent));
}
/* Une couleur par catégorie (Luc 29/09/2026), la même pour la barre et la
 * courbe — palette graphique de la charte, dans l'ordre des catégories. */
.remark-cat--interface  { --remark-cat: var(--chart-1); }
.remark-cat--llm        { --remark-cat: var(--chart-2); }
.remark-cat--script     { --remark-cat: var(--chart-3); }
.remark-cat--methode    { --remark-cat: var(--chart-4); }
.remark-cat--evolution  { --remark-cat: var(--chart-5); }
.remark-cat--arbitrage  { --remark-cat: var(--chart-6); }
.remark-cat--source     { --remark-cat: var(--chart-7); }
.remark-cat--non_classee { --remark-cat: var(--text-secondary); }
.remark-cat--total      { --remark-cat: var(--text-primary); }
/* Moitié gauche les barres, moitié droite les courbes, sur la même ligne. */
.remark-depouillement__corps {
  position: relative;
}
.remark-depouillement--courbes .remark-depouillement__barres {
  gap: 0;
}
.remark-depouillement--courbes .remark-depouillement__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}
.remark-depouillement--filtre .remark-depouillement__ligne:not(.remark-depouillement__ligne--active):not(.remark-depouillement__ligne--total):not(.remark-depouillement__ligne--axe) {
  opacity: 0.55;
}
.remark-depouillement__ligne--total .remark-depouillement__nom {
  font-weight: 600;
}
.remark-depouillement__droite {
  height: 1.75rem;
  border-bottom: var(--border-width-hairline) solid var(--border);
}
.remark-tendance__courbe {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.remark-tendance__brut {
  fill: var(--remark-cat);
  opacity: 0.22;
}
.remark-tendance__brut--en-cours {
  opacity: 0.1;
}
.remark-tendance__lisse {
  fill: none;
  stroke: var(--remark-cat);
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.remark-depouillement__ligne--axe .remark-depouillement__droite {
  border-bottom: 0;
  height: 1.25rem;
}
.remark-tendance__axe {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--type-legende-size);
  color: var(--text-secondary);
}
.remark-tendance__axe span {
  position: absolute;
  top: 0.125rem;
  transform: translateX(-50%);
  white-space: nowrap;
}
.remark-tendance__repere {
  position: absolute;
  top: 0;
  bottom: 1.25rem;
  width: 0;
  border-left: var(--border-width-hairline) solid var(--text-secondary);
  pointer-events: none;
}
.remark-tendance__bulle {
  position: absolute;
  z-index: 2;
  min-width: 11rem;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: var(--border-width-hairline) solid var(--border);
  font-size: var(--type-small-size);
  pointer-events: none;
}
.remark-tendance__bulle table {
  margin-top: var(--space-1);
  border-collapse: collapse;
  font-family: var(--font-mono);
}
.remark-tendance__bulle th {
  font-weight: normal;
  color: var(--text-secondary);
  text-align: right;
  padding-left: var(--space-2);
}
.remark-tendance__bulle td {
  text-align: right;
  padding-left: var(--space-2);
}
.remark-tendance__bulle td.remark-tendance__bulle-nom {
  text-align: left;
  padding-left: 0;
  font-family: var(--font-sans, inherit);
}
.remark-tendance__bulle td.remark-tendance__bulle-nom::before {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: var(--space-1);
  background: var(--remark-cat);
}
.remark-tendance__legende {
  margin-top: var(--space-2);
}
.remark-tendance__donnees summary {
  cursor: pointer;
  font-size: var(--type-legende-size);
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .remark-depouillement--courbes .remark-depouillement__ligne {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  /* Au téléphone la barre cède la place : le pourcentage la dit déjà. */
  .remark-depouillement__gauche,
  .remark-depouillement--courbes .remark-depouillement__gauche {
    grid-template-columns: minmax(0, 1fr) 2.5rem 2rem 2rem 5.5rem;
  }
  .remark-depouillement__barre,
  .remark-depouillement__vide,
  .remark-depouillement__entetes {
    display: none;
  }
  .remark-depouillement--courbes .remark-depouillement__gauche {
    grid-template-columns: minmax(0, 1fr) 2.5rem 2rem 2rem;
  }
  .remark-tendance__badge {
    grid-column: 1 / -1;
    text-align: left;
  }
}
.remark-depouillement__pct,
.remark-depouillement__n {
  font-family: var(--font-mono);
  text-align: right;
  color: var(--text-secondary);
}
/* « Une remarque a déjà été faite ici » (25/09/2026) : discret, à côté de
 * l'objet, un clic ouvre les remarques filtrées sur cet objet. */
.remark-objet-badge {
  display: inline-block;
  padding: 0 var(--space-1);
  border: var(--border-width-hairline) solid var(--border-control);
  color: var(--text-secondary);
  font-size: var(--type-legende-size);
  font-family: var(--font-mono);
  text-decoration: none;
  white-space: nowrap;
}
.remark-objet-badge:hover,
.remark-objet-badge:focus-visible {
  color: var(--text-accent);
  border-color: var(--accent);
}
.remark-history__filtre,
.remark-objet-filtre {
  margin: 0 0 var(--space-2);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.remark-tag--signal {
  color: var(--text-accent);
  border-color: var(--accent);
}
.remark-point-form {
  display: grid;
  gap: var(--space-3);
}
.remark-table__reponse {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-legende-size);
}

/* Réponse à un rattachement (handoff fm2xbJTx) — le bloc qui ferme la boucle
 * entre une remarque de l'émetteur et une décision de rattachement. Même
 * grammaire que le bloc traitement juste en dessous : c'est le même geste
 * vu d'un cran plus haut. */
/* Désigner la question d'une remarque (25/09/2026) : une liste lisible, une
 * question par ligne, le code en tête. */
.remark-designer__form {
  display: grid;
  gap: var(--space-2);
}
.remark-designer__question {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-1) 0;
  border-bottom: var(--border-width-hairline) solid var(--border);
  font-size: var(--type-small-size);
  cursor: pointer;
}
.remark-designer summary {
  cursor: pointer;
}
.remark-decision {
  margin-top: var(--space-4);
  border: var(--border-width-hairline) solid var(--border);
  padding: var(--space-4);
}
.remark-decision__titre {
  margin: 0 0 var(--space-3);
  font-size: var(--type-h3-size);
}
.remark-decision__cible,
.remark-decision__candidat,
.remark-decision__deja {
  margin: 0 0 var(--space-2);
}
.remark-decision__lien {
  margin-left: var(--space-2);
}
.remark-decision__blocage {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
}
.remark-decision__gestes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.remark-decision__forme {
  margin: 0;
}
.remark-decision__submit {
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
  cursor: pointer;
}
.remark-decision__submit--quiet {
  color: var(--text-secondary);
}
.remark-decision__aide {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
}

/* Choix d'une réponse d'interprétation (mandat K9) : une liste de réponses,
 * pas deux boutons. Mêmes tokens que le reste du bloc — aucune couleur ne
 * porte de sens, la distinction se lit au libellé (charte undust).
 */
.remark-decision__forme--choix {
  display: grid;
  gap: var(--space-3);
  border-top: var(--border-width-hairline) solid var(--border);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}
.remark-decision__forme--choix fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.remark-decision__champ {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.remark-decision__champ input[type="text"] {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
}
/* Cible tactile : la ligne entière est cliquable, pas le seul rond. */
.remark-decision__option {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 2.75rem;
  cursor: pointer;
}
.remark-decision__options {
  margin: 0;
  padding-left: var(--space-4);
}

/* ==========================================================================
 * NC — l'aller-retour développeur ↔ testeur (Lot D, handoff tJmaDmXS)
 *
 * Une NC est un objet de travail, pas un message : la liste se lit en une
 * ligne par ticket (code, sévérité, zone, état, extrait), la fiche met le
 * CONTEXTE DE JUGEMENT avant les boutons. Rien ici ne ressemble à un fil de
 * discussion — c'est délibéré (D7).
 * ========================================================================== */

.nc-panneau__titre {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}
.nc-panneau__intro,
.nc-vide,
.nc-compteurs {
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  color: var(--text-secondary);
}
.nc-compteurs {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}
.nc-compteur--total { color: var(--text-secondary); }

.nc-liste {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.nc-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-hairline) solid var(--border);
}
.nc-ligne__code {
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
}
.nc-ligne__extrait {
  flex: 1 1 20rem;
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
/* Une NC close ne crie plus : elle reste lisible, elle ne réclame plus rien. */
.nc-ligne--corrigee,
.nc-ligne--close-avec-argument { opacity: 0.62; }
.nc-ligne--promue-en-wi { border-left: var(--border-width-strong) solid var(--accent); padding-left: var(--space-3); }

.nc-badge {
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  padding: 0 var(--space-2);
  border: var(--border-width-hairline) solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}
.nc-badge--severite-bloquant {
  border-color: var(--accent);
  color: var(--text-accent);
}
.nc-badge--severite-majeur { border-color: var(--border-control); color: var(--text-primary); }

/* --- Le gabarit d'anomalie ----------------------------------------------- */

.nc-form { margin-top: var(--space-4); }
.nc-form__summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  color: var(--text-accent);
}
.nc-form__corps {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width-hairline) solid var(--border);
}
.nc-form__champ { display: grid; gap: var(--space-2); }
.nc-form__label,
.nc-geste__label {
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.nc-form__aide,
.nc-geste__aide,
.nc-form__impose {
  margin: 0;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  color: var(--text-secondary);
}
/* La formulation imposée n'est pas une suggestion : elle se voit. */
.nc-form__impose {
  border-left: var(--border-width-strong) solid var(--accent);
  padding-left: var(--space-3);
  color: var(--text-primary);
}
.nc-form__select,
.nc-form__zone,
.nc-geste__zone {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-hairline) solid var(--border-control);
  border-radius: var(--radius-none);
  font-family: inherit;
  font-size: var(--type-body-size);
}
.nc-form__zone,
.nc-geste__zone { resize: vertical; }
.nc-form__envoyer,
.nc-geste__bouton {
  justify-self: start;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  cursor: pointer;
}
.nc-form__envoyer:hover,
.nc-geste__bouton:hover { background: var(--accent-hover); }
/* Promouvoir en WI rend la NC visible de tous : le bouton ne se déguise pas
   en geste ordinaire, mais il ne hurle pas non plus. */
.nc-geste__bouton--wi {
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--border-width-strong) solid var(--accent);
}

/* --- La fiche ------------------------------------------------------------ */

.nc-fiche__fil,
.nc-fiche__adresse {
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.nc-fiche__titre {
  font-family: var(--font-mono);
  font-size: var(--type-h2-size);
  color: var(--text-primary);
  margin: var(--space-2) 0;
}
.nc-fiche__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.nc-contexte,
.nc-cycle {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-width-hairline) solid var(--border);
}
.nc-contexte__titre,
.nc-cycle__titre {
  font-size: var(--type-h3-size);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}
.nc-contexte__intro {
  margin: 0 0 var(--space-4);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.nc-contexte__grille { display: grid; gap: var(--space-4); margin: 0; }
@media (min-width: 768px) {
  .nc-contexte__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nc-contexte__bloc dt {
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.nc-contexte__bloc dd { margin: 0; color: var(--text-primary); }
.nc-contexte__precision {
  display: block;
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.nc-contexte__constat { font-family: var(--font-mono); }

.nc-etape {
  margin-bottom: var(--space-6);
  padding-left: var(--space-3);
  border-left: var(--border-width-hairline) solid var(--border);
}
.nc-etape--reponse { border-left-color: var(--border-control); }
.nc-etape--cloture { border-left-color: var(--accent); }
.nc-etape__label {
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
  margin: 0 0 var(--space-2);
}
.nc-etape__texte { margin: 0 0 var(--space-2); color: var(--text-primary); }
.nc-etape__signature,
.nc-etape__note {
  margin: 0;
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}
.nc-gestes { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.nc-geste { display: grid; gap: var(--space-2); }
.nc-geste--inline { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--space-3); }

/* Le code d'exigence, une fois LU (Lot C1) — composant, Absolute Number DOORS,
   indice de révision. Discret : c'est de la provenance, pas un titre. */
.requirement-code-lu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}

/* ==========================================================================
   Découvrir la méthode (/methode) — le corpus en amont, les étapes de
   DepositParcours::KEYS, trois natures de geste.
   Même registre que la Roadmap : la méthode se lit, elle ne se vend pas.
   Tokens seulement (N7/S6), parité clair/sombre par les tokens (N8), une
   colonne à 375 px et deux à partir de 768 px (N9).
   ========================================================================== */
.methode-hero { margin-bottom: var(--space-8); }
.methode-hero__title {
  font: var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-leading) var(--font-sans);
  letter-spacing: var(--type-h2-tracking);
  margin: 0;
}
.methode-hero__sub {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  max-width: 44rem;
}
/* La thèse : ce que l'outil EST, avant la règle qui dit comment il tient.
   Elle OUVRE la page, donc en chapeau (rang h3, 22 px) avec l'interlignage
   du corps — un paragraphe long en interlignage de titre se tasse. Sans
   filet ni gras : le filet accent et le gras restent à la règle, juste en
   dessous, pour que les deux ne se disputent pas le regard. */
.methode-hero__these {
  margin: var(--space-3) 0 0;
  font-size: var(--type-h3-size);
  line-height: var(--type-body-leading);
  max-width: 44rem;
}
/* La règle qui organise tout : un filet accent, en gras — c'est la phrase
   que le lecteur doit retenir s'il n'en retient qu'une. */
.methode-hero__rule {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: var(--border-width-strong) solid var(--accent);
  font: 700 var(--type-body-strong-size)/var(--type-body-strong-leading) var(--font-sans);
  max-width: 44rem;
}
/* Le principe qui commande la lecture du reste : l'objet analysé est une
   RELATION, pas un texte. Encadré plein — il ne se lit pas en diagonale. */
.methode-hero__principe {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
  max-width: 44rem;
}
.methode-hero__principe-titre {
  margin: 0;
  font: 700 var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  letter-spacing: var(--type-h3-tracking);
}
.methode-hero__principe-corps {
  margin: var(--space-2) 0 0;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
/* Le partage code / IA : deux lignes, la formule puis sa portée. */
.methode-hero__partage {
  margin: var(--space-4) 0 0;
  font: 700 var(--type-body-strong-size)/var(--type-body-strong-leading) var(--font-sans);
  max-width: 44rem;
}
.methode-hero__partage-corps {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  max-width: 44rem;
}
/* L'argument du scribe : en retrait, c'est une garantie sur la page
   elle-même, pas une phrase du produit. */
.methode-hero__scribe {
  margin: var(--space-4) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  max-width: 44rem;
}

/* LES TROIS FRONTS — niveau architecture, avant le parcours. Trois colonnes
   dès qu'il y a la place : ce sont trois questions de même rang, pas une
   séquence. */
.methode-fronts { margin-bottom: var(--space-8); }
.methode-fronts__title {
  margin: 0 0 var(--space-3);
  font: 700 var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  letter-spacing: var(--type-h3-tracking);
}
.methode-fronts__grid { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) {
  .methode-fronts__grid { grid-template-columns: repeat(3, 1fr); }
}
.methode-front {
  padding: var(--space-4);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
}
.methode-front__title {
  margin: 0 0 var(--space-2);
  font: 700 var(--type-body-strong-size)/var(--type-body-strong-leading) var(--font-sans);
}
.methode-front__body {
  margin: 0;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}

/* Le process : le titre de niveau, et le sous-titre qui descend avec ce
   qu'il décrit. */
.methode-process { margin-bottom: var(--space-4); }
.methode-process__title {
  margin: 0;
  font: 700 var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  letter-spacing: var(--type-h3-tracking);
}
.methode-process__sub {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  max-width: 44rem;
}

/* Légende « qui fait quoi » : les trois natures, avant les étapes. */
.methode-legende {
  margin-bottom: var(--space-8);
  padding: var(--space-4);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
}
.methode-legende__title {
  margin: 0 0 var(--space-3);
  font: 700 var(--type-ref-size)/1 var(--font-mono);
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.methode-legende__grid {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}
@media (min-width: 768px) {
  .methode-legende__grid { grid-template-columns: repeat(3, 1fr); }
}
.methode-legende__item { display: flex; flex-direction: column; gap: var(--space-2); }
.methode-legende__item dt { margin: 0; }
.methode-legende__desc {
  margin: 0;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.methode-legende__count {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-width-hairline) solid var(--border-color-strong);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}

/* Badge de nature — mono, capitales, un cadre. Code = encre ; IA = cyan (la
   raison mesurée) ; Humain = orange (le geste). Jamais un aplat, jamais du
   rouge : une nature n'est pas un écart. */
.methode-nature {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px solid var(--border-color-strong);
  font: 700 var(--type-ref-size)/1.4 var(--font-mono);
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}
.methode-nature--ia { border-color: var(--tension); color: var(--text-tension); }
.methode-nature--humain { border-color: var(--accent); color: var(--text-accent); }
.methode-natures { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* Les sept étapes — même maille que les paliers de la Roadmap. */
.methode-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.methode-etape {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
}
@media (min-width: 768px) {
  .methode-etape { grid-template-columns: 8rem 1fr; gap: var(--space-6); }
}
.methode-etape__rang { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.methode-etape__numero {
  font: 900 var(--type-h3-size)/1 var(--font-mono);
  letter-spacing: var(--type-h3-tracking);
}
.methode-etape__corps { min-width: 0; }
.methode-etape__titre {
  margin: 0;
  font: 700 var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  letter-spacing: var(--type-h3-tracking);
}
.methode-etape__quoi {
  margin: var(--space-2) 0 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  max-width: 44rem;
}
.methode-etape__champs {
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-3);
}
/* Quatre champs depuis le Livrable : 2 × 2, jamais 3 + 1 orphelin. */
@media (min-width: 1024px) {
  .methode-etape__champs { grid-template-columns: repeat(2, 1fr); }
}
.methode-champ dt {
  font: 700 var(--type-ref-size)/1 var(--font-mono);
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.methode-champ dd {
  margin: 0;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
/* L'exemple concret : un filet accent, comme la règle du haut — c'est ce
   qui rend chaque étape lisible sans vocabulaire préalable. */
.methode-etape__exemple {
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  border-left: var(--border-width-strong) solid var(--accent);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  max-width: 44rem;
}
/* « Par la structure, jamais par le nom » : une précision de lecture, en
   retrait du paragraphe qu'elle précise. */
.methode-etape__structure {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  max-width: 44rem;
}
/* Les liens contextuels vers les écrans d'indicateurs : la page ne porte
   aucun chiffre, elle renvoie là où ils vivent. */
.methode-etape__ecrans {
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.methode-etape__ecrans-label {
  font: 700 var(--type-ref-size)/1 var(--font-mono);
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.methode-etape__exemple-label {
  display: block;
  font: 700 var(--type-ref-size)/1 var(--font-mono);
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
/* Les formes de la Note (étape 3), citées par titre, sur deux colonnes dès
   qu'il y a la place. */
.methode-formes {
  margin: var(--space-3) 0 0;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.methode-formes__title { margin: 0 0 var(--space-1); color: var(--text-secondary); }
.methode-formes__liste { margin: 0; padding-left: 1.2em; }
@media (min-width: 768px) {
  .methode-formes__liste { columns: 2; column-gap: var(--space-6); }
}

.methode-section {
  margin-top: var(--space-8);
  padding: var(--space-4);
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
}
.methode-section__title {
  margin: 0 0 var(--space-2);
  font: 700 var(--type-h3-size)/var(--type-h3-leading) var(--font-sans);
  letter-spacing: var(--type-h3-tracking);
}
.methode-section__body {
  margin: 0;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  max-width: 60rem;
}
.methode-section__body + .methode-section__body { margin-top: var(--space-3); }
.methode-pied {
  margin: var(--space-8) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.methode-pied__lien { color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; }
/* Le corpus, en amont des étapes : même gabarit, filet pointillé — il précède
   le parcours sans être un onglet de la fiche. */
.methode-etape--amont { margin-bottom: var(--space-4); border-style: dashed; }
/* Liens « autour du parcours » : une ligne, à la suite du texte. */
.methode-section__liens {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}

/* Conventions de méthode du client : sa phrase, sa source, ce que l'outil en
   applique. La citation garde le filet d'accent, la source reste secondaire. */
.methode-conventions { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.methode-convention { font-size: var(--type-small-size); line-height: var(--type-small-leading); max-width: 60rem; }
.methode-convention__enonce {
  margin: 0;
  padding-left: var(--space-3);
  border-left: var(--border-width-strong) solid var(--text-accent);
  overflow-wrap: anywhere;
}
.methode-convention__source { margin: var(--space-1) 0 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.methode-convention__application { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }

/* Structure du document source : la table défile dans son propre cadre. */
.statement-content { min-width: 0; overflow-wrap: anywhere; }
.statement-content__plain { white-space: pre-wrap; }
.statement-content p { margin: 0 0 .85em; white-space: pre-wrap; }
.statement-content > :last-child { margin-bottom: 0; }
.statement-content ul { list-style: disc; padding-left: 1.5em; margin: .6em 0; }
.statement-content li { white-space: pre-wrap; }
.statement-content h1, .statement-content h2, .statement-content h3, .statement-content h4,
.statement-content h5, .statement-content h6 { font-weight: 600; margin: 1em 0 .5em; white-space: pre-wrap; }
#reference-choices { overflow-wrap: anywhere; }
.statement-content__table-scroll {
  max-width: 100%; overflow-x: auto; margin: 1em 0;
  border: 1px solid var(--border); border-radius: .5rem;
}
.statement-content__table-scroll:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }
.statement-content table { border-collapse: collapse; width: 100%; font-size: .9em; }
.statement-content td, .statement-content th {
  border: 1px solid var(--border); padding: .5em .7em;
  min-width: 4.5em; max-width: 28em; vertical-align: top;
  white-space: pre-wrap; overflow-wrap: normal;
}
.statement-content tr:first-child { background: var(--surface-raised); }
.statement-edit > summary { cursor: pointer; font-size: .875rem; margin-bottom: .75rem; }
.statement-context {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.interpretation-card,
.interpretation-navigation { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  #parcours-forme .enonce-analyse__text {
    position: sticky;
    top: calc(var(--chrome-sticky-offset, 9rem) + var(--space-4));
    max-height: calc(100dvh - var(--chrome-sticky-offset, 9rem) - var(--space-8));
    overflow-y: auto;
  }
}

.interpretation-card { display: block; min-width: 0; }
.interpretation-options { min-width: 0; }
.interpretation-options__list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.interpretation-option {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  max-width: 100%; min-height: 44px; padding: .6rem .8rem;
  border: 1px solid var(--border); border-radius: .75rem;
  background: var(--surface); color: var(--text-primary);
  font-size: .85rem; overflow-wrap: anywhere; cursor: pointer;
}
.interpretation-option:has(input:checked) {
  border-color: var(--orange-500); outline: 2px solid var(--orange-500); outline-offset: 1px;
}
.interpretation-option:has(input:focus-visible) { outline: 3px solid var(--text-primary); outline-offset: 3px; }
.interpretation-option input { flex-shrink: 0; accent-color: var(--orange-500); }
.interpretation-option--recommended { border-style: dashed; border-color: var(--text-secondary); }
.interpretation-option__recommendation { font-size: .75rem; font-weight: 600; }
.interpretation-field { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
.interpretation-input {
  width: 100%; min-width: 0; padding: .65rem; border: 1px solid var(--border);
  border-radius: .5rem; background: var(--surface); color: var(--text-primary);
}
.interpretation-submit, .interpretation-secondary {
  min-height: 44px; padding: .6rem .9rem; border-radius: .5rem;
  font-size: .85rem; font-weight: 600;
}
.interpretation-submit { background: var(--orange-500); color: var(--white); }
.interpretation-submit--recommended { background: var(--status-success); }
.interpretation-secondary { border: 1px solid var(--border); color: var(--text-primary); background: var(--surface); }
.interpretation-card[busy] button { opacity: .6; pointer-events: none; }
/* Question répondue (règle du 30/09, parcours Luc) : la réponse retenue se
   lit d'un coup d'œil — encart vert pour une réponse humaine, neutre pour une
   hypothèse de l'outil —, l'option retenue est marquée, les autres grisées.
   Aucune de ces options n'est cliquable : réviser passe par « Réviser la
   réponse ». */
.interpretation-answer {
  padding: .75rem .9rem; border: 1px solid var(--border); border-radius: .75rem;
  background: var(--surface); color: var(--text-primary); font-size: .9rem;
}
.interpretation-answer--human { border-color: var(--status-success); border-left-width: 4px; }
.interpretation-answer__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
.interpretation-answer__chosen { margin-top: .25rem; font-weight: 600; overflow-wrap: anywhere; }
.interpretation-answer__motif { margin-top: .35rem; font-size: .85rem; }
/* « Motif : yes » se lit sur une ligne : le rendu Markdown d'un motif court
   ne doit pas renvoyer le texte sous son libellé. */
.interpretation-answer__motif > .markdown-content,
.interpretation-answer__motif > .markdown-content > p:only-child { display: inline; margin: 0; }
.interpretation-answer__by { margin-top: .35rem; font-size: .75rem; color: var(--text-secondary); }
.interpretation-options--settled { list-style: none; padding: 0; }
.interpretation-options--settled .interpretation-option { cursor: default; }
.interpretation-option--retained { border-color: var(--status-success); outline: 2px solid var(--status-success); outline-offset: 1px; font-weight: 600; }
.interpretation-option--not-retained { opacity: .55; }
.interpretation-option__mark { color: var(--status-success); font-weight: 700; }
.interpretation-option__state { font-size: .75rem; font-weight: 600; }
.interpretation-free-answers-pending__item {
  padding: .6rem .8rem; border: 1px dashed var(--border); border-radius: .75rem; background: var(--surface);
}
/* Onglet Interprétations, deux panneaux (réunion client du 25/09, correctif
   du 28/09) : l'énoncé à gauche, les questions à droite ; aucun ascenseur
   INTERNE dans les colonnes (c'est la page qui défile), et la colonne de
   lecture reste lisible pendant qu'on fait défiler les questions. Sous
   1024 px, les deux panneaux s'empilent. */
.interpretations-layout { display: grid; gap: var(--space-4); margin-top: var(--space-4); min-width: 0; }
.interpretations-reading,
.interpretations-questions { min-width: 0; }
.interpretations-reading #structured-statement { margin-bottom: 0; }
.interpretations-reading:focus { outline: none; }
@media (min-width: 1024px) {
  .interpretations-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }
  .interpretations-reading {
    position: sticky;
    /* Défaut sans JS : la colonne colle SOUS le bandeau. Le contrôleur
       Stimulus `deposit-sidebar` ajuste `top` (négatif) quand la colonne
       est plus haute que la fenêtre : elle défile avec la page jusqu'à ce
       que son bas soit visible, puis elle colle — motif sticky sidebar
       (correctif Luc 28/09, l'ascenseur interne du 25/09 est retiré). */
    top: calc(var(--chrome-sticky-offset, 9rem) + var(--space-4));
  }
}
/* Formalisation, « Conditions et classes d'équivalence » : même patron
   que les Interprétations — la carte gauche « énoncé » colle sous le
   bandeau, aucun ascenseur interne (correctif Luc 28/09). Le contrôleur
   `deposit-sidebar` ajuste `top` pour le cas « énoncé plus haut que la
   fenêtre » (motif sticky sidebar). */
.equivalence-classes-reading { min-width: 0; }
@media (min-width: 1024px) {
  .equivalence-classes-reading {
    position: sticky;
    top: calc(var(--chrome-sticky-offset, 9rem) + var(--space-4));
    align-self: start;
  }
}
mark.interpretation-anchor {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  box-shadow: inset 0 -2px 0 var(--accent);
  color: inherit;
  border-radius: 2px;
  padding: 0 .1em;
}
/* Passages de l'énoncé structuré allumés depuis une condition C1..Cn
   (formalisation, rail d'élucidation). Même palette que le surlignage
   d'une interprétation (jetons `--accent`) mais posé au niveau du bloc,
   pour que la ligne entière se lise. */
#structured-statement li[data-ref^="passage:"].is-focus,
#structured-statement li[data-ref^="passage:"].is-hover {
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
  border-radius: 2px;
}
#structured-statement li[data-ref^="passage:"].is-hover {
  background: color-mix(in oklab, var(--accent) 32%, transparent);
}
/* Regroupement d'affichage des conditions consécutives « <nom> = <valeur> »
   (§3.4 séance 25/09) : le résumé se lit d'un coup, les atomes restent
   accessibles dans le `<details>`. */
.ceq-condition-group__summary { cursor: pointer; list-style: none; }
.ceq-condition-group__summary::-webkit-details-marker { display: none; }
.ceq-condition-group__summary::marker { content: ""; }
.ceq-condition-group__summary:hover { background: color-mix(in srgb, var(--tension) 10%, transparent); }
.ceq-condition-group__value { padding: 0 .15rem; border-radius: 2px; cursor: pointer; }
.ceq-condition-group__value:hover,
.ceq-condition-group__value:focus-visible {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  outline: none;
}
.ceq-condition-row[data-condition-hover-mode="passage"]:hover,
.ceq-condition-row[data-condition-hover-mode="passage"]:focus-visible {
  background: color-mix(in srgb, var(--tension) 8%, transparent);
  outline: none;
}
mark.interpretation-anchor:target { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* La question qui a la main (survol, focus, carte affichée) : son passage. */
mark.interpretation-anchor.is-active {
  background: color-mix(in oklab, var(--accent) 45%, transparent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
/* Sauts internes (carte ↔ passage) : rester sous le bandeau collant. */
mark.interpretation-anchor,
.interpretation-card { scroll-margin-top: calc(var(--chrome-sticky-offset, 9rem) + var(--space-4)); }
.interpretation-anchor__code {
  margin-left: .25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem;
  vertical-align: super;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.interpretation-card__subject .markdown-content > p { margin: 0; }
.interpretation-card__passage { overflow-wrap: anywhere; }
.interpretation-provenance__changes { list-style: disc; padding-left: 1.25rem; }
.interpretation-navigation,
.interpretation-navigation__filters,
.interpretation-navigation__arrows {
  display: flex;
  align-items: end;
  gap: var(--space-2);
}
.interpretation-navigation { flex-wrap: wrap; justify-content: space-between; }
.interpretation-navigation__filters { flex-wrap: wrap; min-width: 0; }
.interpretation-navigation__arrows { align-items: center; white-space: nowrap; }
.interpretation-navigation__jump { display: flex; align-items: end; gap: var(--space-2); min-width: 0; flex: 1 1 14rem; }
.interpretation-navigation__jump select { width: 100%; }

/* Shared Markdown prose; table overflow stays within the text panel. */
.markdown-content { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
/* Word blocks retain source spacing; Markdown already encodes line breaks. */
.statement-content .markdown-content :is(p, li, h1, h2, h3, h4, h5, h6, td, th) { white-space: normal; }
.markdown-content > :first-child { margin-top: 0; }
.markdown-content > :last-child { margin-bottom: 0; }
.markdown-content p { margin: .65em 0; }
.markdown-content h1, .markdown-content h2, .markdown-content h3,
.markdown-content h4, .markdown-content h5, .markdown-content h6 { font-weight: 600; margin: 1em 0 .5em; }
.markdown-content h1 { font-size: 1.4em; }
.markdown-content h2 { font-size: 1.25em; }
.markdown-content h3 { font-size: 1.1em; }
.markdown-content ul { list-style: disc; padding-left: 1.5em; margin: .6em 0; }
.markdown-content ol { list-style: decimal; padding-left: 1.5em; margin: .6em 0; }
.markdown-content li + li { margin-top: .2em; }
.markdown-content blockquote { border-left: 3px solid var(--border); padding-left: 1em; margin: .8em 0; }
.markdown-content a { color: var(--text-accent); text-decoration: underline; }
.markdown-content pre { max-width: 100%; overflow-x: auto; white-space: pre; padding: .8em; background: var(--surface-raised); border-radius: .4rem; margin: .8em 0; }
.markdown-content code { font-family: monospace; font-size: .9em; }
.markdown-content hr { border-color: var(--border); margin: 1em 0; }
.markdown-content__table-scroll { max-width: 100%; overflow-x: auto; margin: 1em 0; border: 1px solid var(--border); border-radius: .5rem; }
.markdown-content__table-scroll:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }
.markdown-content table { border-collapse: collapse; width: 100%; font-size: .95em; }
.markdown-content th, .markdown-content td { border: 1px solid var(--border); padding: .5em .7em; min-width: 5em; max-width: 28em; vertical-align: top; overflow-wrap: anywhere; }
.markdown-content th { background: var(--surface-raised); font-weight: 600; text-align: left; }
.markdown-content [align="center"] { text-align: center; }
.markdown-content [align="right"] { text-align: right; }
@media print {
  .markdown-content__table-scroll, .markdown-content pre { overflow: visible; }
  .markdown-content pre { white-space: pre-wrap; }
}
/* Deuxième rangée du fil d’Ariane : défilement local sur écran étroit. */
.requirement-tabs {
  flex-direction: row;
  align-items: center;
  padding-block: var(--space-1);
  border-top: var(--border-width-hairline) solid var(--border);
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.requirement-tabs::-webkit-scrollbar { display: none; }
.requirement-tabs .chrome-subnav__tab { flex: none; }
.requirement-tabs__number { margin-right: var(--space-1); font-variant-numeric: tabular-nums; }
.requirement-tabs__step--done:not(.is-active) { color: var(--text-primary); }
#requirement-content { display: block; }
#requirement-content[busy] { opacity: .65; }

.elucidation__columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); gap: 1.5rem; align-items: start; }

/* Trois colonnes — texte original, lecture de l'outil, rail. Le texte original
   est le MÊME élément qu'en deux colonnes : `<details>` replié sous l'exigence
   quand l'écran ne porte pas trois colonnes, colonne à part quand il les porte.
   Un seul nœud dans le DOM, donc un seul survol lié et aucune duplication.
   Les placements sont EXPLICITES dès 801px : l'auto-placement enverrait le
   texte original à la place du rail. Sous 801px, aucun placement — une
   colonne, l'ordre du DOM, exactement l'écran d'aujourd'hui. */
/* Replié sous l'exigence, le résumé est un bouton : il a sa marge et sa zone
   de touche. Promu en colonne (≥1600px), il est le TITRE de la colonne — ni
   marge ni retrait, sinon il descend d'un cran sous les deux autres titres
   (retour Luc 23/09). */
.elucidation__original { min-width: 0; margin-top: var(--space-4); }
.elucidation__original > summary { padding-block: var(--space-2); }
@media (min-width: 801px) {
  .elucidation__reading { grid-column: 1; grid-row: 1; }
  .elucidation__original { grid-column: 1; grid-row: 2; }
  .elucidation__original-source { grid-column: 1; grid-row: 3; }
  .elucidation__references { grid-column: 2; grid-row: 1 / span 3; }
}
/* Seuil 1600px : en dessous, le centre passerait sous 50 car./ligne et le
   survol lié casserait avant la lecture (mesure eT6fsNwn). */
@media (min-width: 1600px) {
  .elucidation__columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(22rem, 26rem); }
  .elucidation__original { grid-column: 1; grid-row: 1; }
  .elucidation__original-source { grid-column: 1; grid-row: 2; }
  .elucidation__reading { grid-column: 2; grid-row: 1 / span 2; }
  .elucidation__references { grid-column: 3; grid-row: 1 / span 2; }
  /* Promu en colonne : le résumé devient le titre de la colonne et cesse
     d'être un bouton de repli — le contenu est là en permanence. Il perd
     aussi la marge et le retrait du repli : les trois titres partent du
     même bord haut. */
  .elucidation__original { margin-top: 0; }
  .elucidation__original > summary { cursor: default; list-style: none; padding-block: 0; }
  .elucidation__original > summary::-webkit-details-marker { display: none; }
  .elucidation__original > summary::marker { content: ""; }
}
/* Libellé de colonne : ce que l'outil a lu n'est pas ce que le client a écrit.
   Contrepartie EN 50128 — la distinction ne peut pas tenir au seul survol,
   qui meurt en PDF et en capture d'écran. */
.elucidation__column-label { display: block; color: var(--text-secondary); font-size: var(--type-legende-size); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
/* Trois colonnes, trois titres de même rang (retour Luc 22/09) : texte
   original · exigence élucidée · catégories. Le rail porte le même rang par
   `.shape-rail__title`, mêmes jetons h3. */
.elucidation__column-title, .shape-rail__title { font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); letter-spacing: var(--type-h3-tracking); }
.elucidation__column-label small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; }
.elucidation__references { min-width: 0; overflow-wrap: anywhere; }
/* Un seul défilement : celui de la page. Jamais d'ascenseur interne (retour
   Luc 17/09 matin : ouvrir Entrées avec 10 noms faisait apparaître un second
   scroll) et les huit cases toujours visibles (retour Luc 17/09 midi :
   « on voit tout tout le temps »). La colonne ne colle à l'écran que
   si elle y tient (sticky-fit) ; plus haute que l'écran, elle défile avec
   la page — sinon son bas resterait hors de portée. */
@media (min-width: 1100px) { .elucidation__references { position: sticky; top: var(--space-4); } }
.elucidation__references.is-taller-than-viewport { position: static; }
/* Interrupteur `ui.panneau_categories_repliable` — retour Luc 30/09, revient sur le « jamais d'ascenseur interne » du 17/09 :
   le panneau Catégories colle à l'écran et défile POUR LUI-MÊME, pour qu'ouvrir
   Entrées ou Valeurs ne bouge jamais la lecture à gauche. Deux garde-fous
   contre l'« ascenseur moche » : barre fine, visible au survol seulement ;
   `overscroll-behavior` pour qu'arrivé au bout du panneau la page ne parte
   pas avec. Sous 801 px (une colonne), c'est un tiroir (plus bas). */
@media (min-width: 801px) {
  [data-panel] > .elucidation__references {
    position: sticky; top: calc(var(--chrome-sticky-offset, 9rem) + var(--space-4));
    max-height: calc(100dvh - var(--chrome-sticky-offset, 9rem) - 2 * var(--space-4));
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: transparent transparent;
    padding-right: var(--space-1);
  }
  [data-panel] > .elucidation__references:hover, [data-panel] > .elucidation__references:focus-within { scrollbar-color: var(--border) transparent; }
  [data-panel] > .elucidation__references::-webkit-scrollbar { width: 6px; }
  [data-panel] > .elucidation__references::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
  [data-panel] > .elucidation__references:hover::-webkit-scrollbar-thumb { background: var(--border); }
  /* Replié : le panneau sort de la grille, les deux textes ont chacun sa
     moitié — même sous 1600 px, où le texte original redevient une colonne
     (`viewport-open` forcé par `folding-panel`). Il ne reste que l'onglet
     vertical partagé avec le panneau des outils d'IA (shared/_side_panel). */
  .elucidation__columns[data-panel="folded"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .elucidation__columns[data-panel="folded"] .elucidation__original { grid-column: 1; grid-row: 1; margin-top: 0; }
  .elucidation__columns[data-panel="folded"] .elucidation__original > summary { cursor: default; list-style: none; padding-block: 0; pointer-events: none; }
  .elucidation__columns[data-panel="folded"] .elucidation__original > summary::-webkit-details-marker { display: none; }
  .elucidation__columns[data-panel="folded"] .elucidation__original-source { grid-column: 1; grid-row: 2; }
  .elucidation__columns[data-panel="folded"] .elucidation__reading { grid-column: 2; grid-row: 1 / span 2; }
}
/* La ligne de titre (Catégories · registre · Replier) reste en haut du
   panneau quand on y défile : le repli est toujours à portée — tiroir du
   téléphone compris, où c'est la seule sortie. */
[data-panel] .shape-rail__heading { position: sticky; top: 0; z-index: 2; padding-bottom: var(--space-1); background: var(--surface); }
.elucidation__panel-toggle { min-height: 1.75rem; padding: var(--space-1) var(--space-2); color: var(--text-secondary); font-size: var(--type-legende-size); cursor: pointer; white-space: nowrap; }
.elucidation__panel-toggle:hover .elucidation__panel-hide { text-decoration: underline; }
.elucidation__columns[data-panel="folded"] .elucidation__references { display: none; }
/* L'onglet vertical : accent neutre (l'accent violet est réservé à ce qui
   vient d'un modèle de langage) ; visible seulement replié, à toutes les
   largeurs. Sous 768 px il redescend en pastille au-dessus de « Une
   remarque ? », comme celui des outils d'IA (`.side-panel__tab`). */
.elucidation__panel-tab { --side-panel-ink: var(--text-primary); --side-panel-tint: var(--surface); display: none; }
.elucidation__columns[data-panel="folded"] .elucidation__panel-tab { display: inline-flex; }
/* Téléphone (une colonne) : le panneau est un tiroir posé PAR-DESSUS la
   lecture (retour Luc 01/10 : « catégories n'est pas dispo en panneau
   latéral sur mobile, je veux qu'il y soit »). Même allure que le panneau
   des outils d'IA (shared/_side_panel) : sous le bandeau collant, au bord
   droit, défile pour lui-même, non modal. Fermé par défaut — ouvert, il
   couvrirait la lecture à chaque arrivée. Le rail n'est plus en bas de page :
   il n'a qu'une place à la fois. Le padding haut passe dans la ligne de
   titre collante, sinon le texte défilerait dans la bande au-dessus d'elle. */
@media (max-width: 800px) {
  [data-panel] > .elucidation__references {
    position: fixed; top: var(--chrome-sticky-offset, 0px); right: 0; bottom: 0;
    width: min(26rem, 100%); z-index: var(--layer-superpose);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 var(--space-4) var(--space-4);
    background: var(--surface);
    border-left: 3px solid var(--text-primary);
    box-shadow: -14px 0 32px rgba(28, 30, 42, 0.18);
    animation: elucidation-tiroir var(--motion-duree-2) var(--motion-courbe-entree);
  }
  /* Seul « open » montre le tiroir : avant que `folding-panel` ait tranché
     (`data-panel` rendu vide), il ne couvre pas la lecture. */
  [data-panel]:not([data-panel="open"]) > .elucidation__references { display: none; }
  [data-panel] .shape-rail__heading { padding-top: var(--space-3); }
  .elucidation__panel-toggle { min-height: 2.75rem; }
}
@keyframes elucidation-tiroir { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { [data-panel] > .elucidation__references { animation: none; } }
.elucidation__reference { display: block; border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; overflow-wrap: anywhere; }
.elucidation__dialog { margin: auto; width: min(92rem, calc(100vw - 3rem)); max-height: calc(100dvh - 2rem); padding: 1.25rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); color: var(--text-primary); overflow: auto; overflow-wrap: anywhere; }
.elucidation__dialog::backdrop { background: rgb(0 0 0 / .35); backdrop-filter: blur(3px); }
.elucidation__dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.elucidation__reading > .elucidation__dialog-heading { align-items: flex-start; }
.elucidation__dialog [data-elucidation-target="body"] { min-width: 0; }
/* La modale se lit au doigt : sous 800 px son contenu dépasse la hauteur d'un
   téléphone (mesuré à 390 x 844 : 2491 px de contenu pour 810 px utiles), et
   un « Fermer » parti en haut du défilement laissait la modale sans sortie
   atteignable — ni Échap ni clic à côté sur un téléphone. Le titre et ses
   actions collent donc au haut de la modale, sur cet écran-là seulement : sur
   un écran de bureau la modale tient, et un en-tête collant y recouvrirait ce
   qu'on vient cliquer. Le `top` négatif vaut le padding de la modale : sans
   lui, l'en-tête se colle au bord du padding-box et laisse filer une bande de
   texte au-dessus de lui ; la marge négative rend au repos l'espacement que
   ce padding ajoute. */
@media (max-width: 800px) { .elucidation__columns { grid-template-columns: minmax(0, 1fr); } .elucidation__dialog { padding: .75rem; } .elucidation__dialog > .elucidation__dialog-heading { position: sticky; top: -.75rem; z-index: 1; margin-block-start: -.75rem; padding-block: .75rem; background: var(--surface); } }

/* Déclarations locales, en pleine largeur SOUS les trois colonnes (retour Luc
   28/09). Une carte par nom : en-tête (nom + étiquettes), la ligne écrite,
   puis ses blocs côte à côte dès que la largeur le permet — ce qu'elle
   regroupe, jusqu'aux feuilles, ailleurs. Plus aucune bascule à déplier :
   chaque ligne d'un bloc est séparée de la suivante par un filet, comme les
   lignes du rail. */
.local-definitions { margin-top: var(--space-8); padding-top: var(--space-4); border-top: var(--border-width-1) solid var(--border); }
.local-definitions__intro { margin: var(--space-1) 0 0; font-size: var(--type-legende-size); color: var(--text-secondary); }
.local-definitions__list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.local-definition { min-width: 0; border: var(--border-width-1) solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow-wrap: anywhere; }
.local-definition[data-coherence="divergent"] { box-shadow: inset 3px 0 0 var(--status-warning); }
.local-definition__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--border-width-1) solid var(--border); }
.local-definition__name { margin: 0; font-size: var(--type-body-size); font-weight: 700; }
.local-definition__tag { border: var(--border-width-1) solid var(--border); border-radius: 999px; padding: 0 var(--space-2); font-size: var(--type-legende-size); color: var(--text-secondary); }
.local-definition[data-coherence="divergent"] .local-definition__tag--coherence { border-color: var(--status-warning); color: var(--status-warning); font-weight: 700; }
.local-definition__line { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--type-ui-compact-size); border-bottom: var(--border-width-1) solid var(--border); }
.local-definition__parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.local-definition__part { min-width: 0; padding: var(--space-2) var(--space-3) var(--space-3); }
.local-definition__part + .local-definition__part { border-left: var(--border-width-1) solid var(--border); }
@media (max-width: 800px) { .local-definition__part + .local-definition__part { border-left: 0; border-top: var(--border-width-1) solid var(--border); } }
.local-definition__part-title { margin: 0 0 var(--space-1); color: var(--text-secondary); font-size: var(--type-legende-size); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.local-definition__rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.local-definition__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-1); min-width: 0; padding: var(--space-1) 0; font-size: var(--type-ui-compact-size); }
.local-definition__row + .local-definition__row { border-top: var(--border-width-1) solid var(--border); }
.local-definition__connector { font-weight: 700; }
.local-definition__note, .local-definition__via { color: var(--text-secondary); font-size: var(--type-legende-size); }
.local-definition__via { flex-basis: 100%; }
.local-definition__row[data-same="false"] .local-definition__same { color: var(--status-warning); }
.local-definition__expansion { flex-basis: 100%; font-size: var(--type-legende-size); }

/* Les pièces d'un constat de contrat, dans la modale (retour Luc 28/09) : où
   l'énoncé cite le nom, les déclarations membre par membre, la ligne du
   document de chacune. Un membre absent d'une déclaration est la ligne que
   le constat signale : elle porte la couleur d'attention, et le mot
   « absent » reste lisible sans la couleur. */
.finding-evidence { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-width-1) solid var(--border); }
.finding-evidence__title { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--type-legende-size); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.finding-evidence__statement { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--type-ui-compact-size); }
.finding-evidence__quote { font-style: italic; }
.finding-evidence__reference-link { text-decoration: underline; }
.finding-evidence__scroll { max-width: 100%; overflow-x: auto; }
.finding-evidence__compare { width: 100%; border-collapse: collapse; font-size: var(--type-ui-compact-size); }
.finding-evidence__compare th, .finding-evidence__compare td { padding: var(--space-1) var(--space-2); border: var(--border-width-1) solid var(--border); text-align: left; vertical-align: top; }
.finding-evidence__compare thead th { background: var(--surface-raised); font-weight: 600; }
.finding-evidence__compare tbody th { font-weight: 400; }
.finding-evidence__compare td.is-present { color: var(--status-success); }
.finding-evidence__compare td.is-missing { color: var(--status-warning); font-weight: 700; }
.finding-evidence__compare tr[data-member-missing="true"] > * { background: color-mix(in srgb, var(--status-warning) 8%, transparent); }
.finding-evidence__where { display: block; font-weight: 700; }
.finding-evidence__role, .finding-evidence__description { display: block; color: var(--text-secondary); font-size: var(--type-legende-size); font-weight: 400; }
.finding-evidence__sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: var(--space-3); }
.finding-evidence__source { min-width: 0; border: var(--border-width-1) solid var(--border); border-radius: var(--radius-card); padding: var(--space-2) var(--space-3); }
.finding-evidence__source-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); cursor: pointer; padding-block: var(--space-1); }
.finding-evidence__source-summary .finding-evidence__where, .finding-evidence__source-summary .finding-evidence__role { display: inline; }

/* Aide : un « i » dans un carré, style icons/ de la charte, pas plus haut que
   le titre. La zone de touche (44 px) déborde en pseudo-élément. */
.elucidation__help-button { position: relative; display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; height: 1.75rem; padding: 0 .5rem 0 .25rem; border: 0; border-radius: var(--radius-interactive); background: transparent; color: var(--text-secondary); cursor: pointer; font-size: var(--type-legende-size); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.elucidation__help-button::before { content: ""; position: absolute; inset: -.5rem; }
.elucidation__help-button:hover, .elucidation__help-button:focus-visible { color: var(--text-primary); background: var(--surface-raised); }
.elucidation__help-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.elucidation__help { margin: 0 0 0 auto; width: min(28rem, 100vw); height: 100dvh; max-height: 100dvh; border-radius: 0; }
/* Les étiquettes passent sous le nom plutôt que de le couper au milieu. */
.elucidation__term-link { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; min-height: 2.25rem; padding: .4rem .5rem; }
.elucidation__term-name { flex: 1 1 10rem; min-width: 0; }
.elucidation__term-type { min-width: 0; overflow-wrap: anywhere; text-align: right; font-size: .75rem; color: var(--text-secondary); }
.elucidation__term-state { border: 1px solid var(--status-warning); border-radius: 999px; padding: 0 .4rem; font-size: .75rem; white-space: nowrap; }
.elucidation__term-count { display: block; margin-top: .2rem; font-size: .7rem; color: var(--text-secondary); }
/* Un nom qualifié se lit par sa feuille : le propriétaire commun à plusieurs
   lignes (« Flux. ») reste écrit, en retrait, pour que deux données du même
   flux ne se ressemblent plus au premier coup d'œil. */
.shape-rail__owner { color: var(--text-secondary); }

/* Rail de la forme : huit cases, une seule ouverte. Une case se lit d'un coup
   d'œil — point d'état (même maille que les étapes du parcours), nom,
   « réglées/lues » — et rien d'autre fermée. Le mot d'état voyage en
   sr-only : un état reste lisible sans la couleur. */
.shape-rail { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.shape-rail__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.shape-rail__progress { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; margin: var(--space-1) 0; }
.shape-rail__progress-bar { height: .5rem; overflow: hidden; border-radius: 999px; background: var(--surface-raised); border: var(--border-width-1) solid var(--border); }
.shape-rail__progress-fill { display: block; height: 100%; background: var(--status-success, #16803d); }
.shape-rail__progress-readout { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--type-legende-size); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.shape-rail__progress-readout strong { color: var(--text-primary); }
/* Légende filtrante : chaque mot est un interrupteur. Éteint, il se barre et
   pâlit — l'état se lit sans la couleur. La cible fait 26px de haut (au-delà
   des 24px du minimum WCAG 2.5.8) par le retrait du bouton lui-même, sans
   pseudo-élément : deux rangées de légende qui se chevauchent feraient
   cliquer le mauvais mot. */
.shape-rail__filter { display: flex; flex-direction: column; gap: var(--space-1); }
.shape-rail__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--type-legende-size); color: var(--text-secondary); }
.shape-rail__legend-note { margin: 0; font-size: var(--type-legende-size); color: var(--text-secondary); }
/* Chaque mot de la légende est un interrupteur de filtre : un cadre au
   repos le dit, le libellé « Afficher les lignes : » nomme le geste. */
.shape-rail__legend-label { font-weight: 600; color: var(--text-primary); }
.shape-rail__legend-item { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; padding: .3rem .4rem; border: var(--border-width-1) solid var(--border); border-radius: var(--radius-interactive); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.shape-rail__legend-item:hover, .shape-rail__legend-item:focus-visible { border-color: var(--border-color-strong); background: var(--surface-raised); color: var(--text-primary); }
.shape-rail__legend-item[aria-pressed="false"] { text-decoration: line-through; opacity: .6; }
.shape-rail__legend-swatch { width: .9rem; height: .5rem; border-radius: 2px; background: var(--tension); }
.shape-rail__legend-item[data-shape-legend-key="to_confirm"] .shape-rail__legend-swatch { background: var(--status-warning); }
.shape-rail__legend-item[data-shape-legend-key="absent"] .shape-rail__legend-swatch { background: var(--status-critical); }
.shape-rail__legend-item[data-shape-legend-key="acted"] .shape-rail__legend-swatch { background: var(--status-success); }
.shape-rail__legend-item[data-shape-legend-key="hypothese_outil"] .shape-rail__legend-swatch { background: var(--status-pending); }
/* Ce qui est caché reste dit : combien de lignes, et de quoi les rendre.
   Le bouton est seul sur sa ligne : sa zone de touche peut déborder en
   pseudo-élément sans rien chevaucher. */
.shape-rail__filter-state:not([hidden]) { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--type-legende-size); color: var(--text-secondary); }
.shape-rail__filter-reset { position: relative; padding: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; text-decoration: underline; cursor: pointer; }
.shape-rail__filter-reset::before { content: ""; position: absolute; inset: -.6rem -.25rem; }
/* Le filtre : la CSS cache les lignes par le mot que le rail porte. Le JS ne
   s'occupe que des cases vidées — le score, lui, ne bouge jamais. */
.shape-rail[data-shape-hidden~="resolved"] .shape-rail__row[data-shape-legend="resolved"],
.shape-rail[data-shape-hidden~="acted"] .shape-rail__row[data-shape-legend="acted"],
.shape-rail[data-shape-hidden~="hypothese_outil"] .shape-rail__row[data-shape-legend="hypothese_outil"],
.shape-rail[data-shape-hidden~="to_confirm"] .shape-rail__row[data-shape-legend="to_confirm"],
.shape-rail[data-shape-hidden~="absent"] .shape-rail__row[data-shape-legend="absent"] { display: none; }
.shape-rail__slot { border: var(--border-width-1) solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.shape-rail__slot[open] { border-color: var(--border-color-strong); box-shadow: inset 3px 0 0 var(--tension); }
.shape-rail__summary { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; min-height: 2.75rem; padding: var(--space-2); cursor: pointer; }
.shape-rail__summary { list-style: none; }
.shape-rail__summary::-webkit-details-marker { display: none; }
.shape-rail__dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--step-dot-waiting); flex-shrink: 0; }
.shape-rail__slot[data-shape-report="clear"] .shape-rail__dot { background: var(--step-dot-done); }
.shape-rail__slot[data-shape-report="attention"] .shape-rail__dot { background: var(--step-dot-attention); }
.shape-rail__slot[data-shape-report="finding"] .shape-rail__dot { background: var(--step-dot-todo); }
.shape-rail__slot[data-shape-report="question"] .shape-rail__dot { background: var(--status-pending); }
.shape-rail__slot[data-shape-report="not_applicable"] .shape-rail__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--step-dot-waiting); }
.shape-rail__label { font-weight: 700; }
.shape-rail__report { display: inline-flex; align-items: baseline; gap: var(--space-1); font-size: var(--type-small-size); color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.shape-rail__count { font-weight: 700; }
.shape-rail__slot[data-shape-report="attention"] .shape-rail__report { color: var(--status-warning); }
.shape-rail__slot[data-shape-report="finding"] .shape-rail__report { color: var(--status-critical); }
.shape-rail__slot[data-shape-report="question"] .shape-rail__report { color: var(--status-pending); }
.shape-rail__slot[data-shape-report="not_applicable"] .shape-rail__report { font-style: italic; }
.shape-rail__extra { font-size: var(--type-legende-size); }
.shape-rail__body { padding: 0 var(--space-2) var(--space-2); }
.shape-rail__items, .shape-rail__findings { display: flex; flex-direction: column; }
.shape-rail__findings { gap: var(--space-2); margin-top: var(--space-2); }
.shape-rail__row { min-width: 0; font-size: var(--type-ui-compact-size); }
.shape-rail__row + .shape-rail__row { border-top: var(--border-width-1) solid var(--border); }
.shape-rail__row.is-first-visible { border-top: 0; }
.shape-rail__row.is-citing { box-shadow: inset 3px 0 0 var(--tension); }
/* Trois lectures d'une ligne : réglée = silence ; à confirmer = orange ;
   absente = critique. La légende du rail nomme les trois. */
.shape-rail__row[data-shape-todo="true"] { box-shadow: inset 3px 0 0 var(--status-warning); background: color-mix(in srgb, var(--status-warning) 8%, transparent); }
.shape-rail__row[data-shape-todo="true"][data-shape-verdict="absent"] { box-shadow: inset 3px 0 0 var(--status-critical); background: color-mix(in srgb, var(--status-critical) 8%, transparent); }
.shape-rail__row[data-shape-todo="true"].is-citing { box-shadow: inset 3px 0 0 var(--tension); }
.shape-rail__row[data-shape-todo="true"] .shape-rail__state { border-color: var(--status-warning); color: var(--status-warning); font-weight: 700; }
.shape-rail__row[data-shape-todo="true"][data-shape-verdict="absent"] .shape-rail__state { border-color: var(--status-critical); color: var(--status-critical); }
/* Une ligne dont un utilisateur a validé le rattachement, ou dont le texte a
   été corrigé par une révision de l'énoncé : verte, silence sur la ligne
   (settled), même règle que « rattachée » pour l'état textuel. */
.shape-rail__row[data-shape-verdict="corrige"] { box-shadow: inset 3px 0 0 var(--status-success); background: color-mix(in srgb, var(--status-success) 6%, transparent); }
.shape-rail__row[data-shape-verdict="corrige"].is-citing { box-shadow: inset 3px 0 0 var(--tension); }
/* « Hypothèse outil » (POC, ordre Luc 29/09) : distincte de « corrigée »
   (aucune personne n'a validé), distincte d'« à confirmer » (le geste EST
   fait). Fond et rail violet (--status-pending) ; la puce d'état porte la
   même couleur pour dire la même chose au lecteur sans dépendre du soulignement. */
.shape-rail__row[data-shape-verdict="hypothese_outil"] { box-shadow: inset 3px 0 0 var(--status-pending); background: color-mix(in srgb, var(--status-pending) 6%, transparent); }
.shape-rail__row[data-shape-verdict="hypothese_outil"].is-citing { box-shadow: inset 3px 0 0 var(--tension); }
.shape-rail__state--hypothese-outil { border-color: var(--status-pending); color: var(--status-pending); font-weight: 700; }
.shape-rail__tags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: var(--space-1); min-width: 0; }
.shape-rail__tag { font-size: var(--type-legende-size); color: var(--text-secondary); white-space: nowrap; }
.shape-rail__state { border: var(--border-width-1) solid var(--border); border-radius: 999px; padding: 0 var(--space-1); font-size: var(--type-legende-size); white-space: nowrap; }
.shape-rail__row--value .shape-rail__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); padding: var(--space-1) var(--space-2); min-height: 2.25rem; }
.shape-rail__operator { color: var(--text-secondary); }
.shape-rail__row--value[data-shape-verdict="out_of_domain"] .shape-rail__state { border-color: var(--status-critical); color: var(--status-critical); }
.shape-rail__row--value[data-shape-verdict="in_domain"] .shape-rail__state { border-color: var(--status-success); color: var(--status-success); }
/* Valeur citée et entrée citée : ce qui suit le lien — la phrase, les gestes
   du glossaire, l'hypothèse du juge, les liens tacites — s'aligne sur lui au
   lieu de coller au filet de la ligne, et un geste se lit comme un bouton
   (réunion client du 30/09 : « ils me demandent de confirmer, mais je ne peux
   pas confirmer » — les deux gestes se lisaient comme une phrase). */
.shape-rail__row[data-shape-item^="cited-"] > :is(.shape-rail__note, .shape-rail__glossary, .shape-rail__juge, .shape-rail__tacit) { margin: 0; padding: 0 var(--space-2) var(--space-1); overflow-wrap: anywhere; }
.shape-rail__glossary-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.shape-rail__glossary-form { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.shape-rail__glossary-confirm, .shape-rail__glossary-refuse { display: inline-flex; align-items: center; min-height: 2rem; padding: var(--space-1) var(--space-2); border: var(--border-width-1) solid var(--border-color-strong); border-radius: var(--radius-interactive); background: var(--surface); color: var(--text-primary); font-size: var(--type-legende-size); font-weight: 600; cursor: pointer; }
.shape-rail__glossary-confirm { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface); }
.shape-rail__glossary-refuse:hover, .shape-rail__glossary-refuse:focus-visible { background: var(--surface-raised); box-shadow: inset 0 -2px 0 var(--tension); }
.shape-rail__glossary-confirm:hover, .shape-rail__glossary-confirm:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.shape-rail__tacit > summary { cursor: pointer; }
.shape-rail__passage { display: block; padding: var(--space-1) var(--space-2); }
/* Les valeurs d'une sortie ou d'une entrée (retour Luc 25/09) : le nom et
   son sens, puis trois faits — type, valeurs, résolution — en liste de
   définitions compacte. Une résolution à confirmer ou un domaine inconnu est
   une ALERTE : la ligne prend la marque « à traiter » du rail, le message en
   clair suit, puis le champ prérempli et le geste. */
.shape-rail__row--domain { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) var(--space-2); }
.shape-rail__domain-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); min-width: 0; }
.shape-rail__domain-name { overflow-wrap: anywhere; }
.shape-rail__domain-name--link { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.shape-rail__domain-name--link:hover, .shape-rail__domain-name--link:focus-visible { text-decoration-style: solid; }
.shape-rail__domain-facts { margin: 0; font-size: var(--type-legende-size); overflow-wrap: anywhere; }
.shape-rail__domain-open { margin: 0; font-size: var(--type-legende-size); }
.shape-rail__domain-message { margin: 0; color: var(--text-secondary); font-size: var(--type-legende-size); overflow-wrap: anywhere; }
.shape-rail__domain-message--alert { color: var(--text-primary); font-weight: 600; }
.shape-rail__row--domain[data-shape-domain-status="domain_missing"] { box-shadow: inset var(--border-width-3) 0 0 var(--status-critical); background: color-mix(in srgb, var(--status-critical) 8%, transparent); }
.shape-rail__row--domain[data-shape-domain-status="domain_missing"] .shape-rail__state { border-color: var(--status-critical); color: var(--status-critical); }
.shape-rail__row--domain[data-shape-domain-status="step_decided"] .shape-rail__state { border-color: var(--status-success); color: var(--status-success); }
/* La résolution dite sur la ligne Entrées/Sorties (V, 25/09). */
.shape-rail__domain-note { margin: 0; font-size: var(--type-legende-size); color: var(--text-primary); overflow-wrap: anywhere; }
.shape-rail__domain-link { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
/* La définition retenue, et qui l'a retenue (741, 30/09). */
.shape-rail__choice { margin: 0; font-size: var(--type-legende-size); color: var(--text-secondary); overflow-wrap: anywhere; }
.shape-rail__choice[data-rail-choice="none"], .shape-rail__choice[data-rail-choice="stale"] { color: var(--text-primary); font-weight: 600; }
/* La résolution confirmée ou corrigée dans la modale de la donnée. */
.reference-resolution { border-top: var(--border-width-1) solid var(--border); padding-top: var(--space-2); }
.reference-resolution__message { margin-top: var(--space-1); color: var(--text-secondary); }
.reference-resolution__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.reference-resolution__label { flex-basis: 100%; font-size: var(--type-legende-size); color: var(--text-secondary); }
.reference-resolution__format { flex-basis: 100%; margin: 0; font-size: var(--type-legende-size); color: var(--text-secondary); }
.reference-resolution__input { width: 9rem; min-height: 2.25rem; padding: 0 var(--space-1); border: var(--border-width-1) solid var(--border-control); border-radius: var(--radius-interactive); background: var(--surface); color: var(--text-primary); }
.reference-resolution__scope { display: flex; flex-direction: column; gap: var(--space-1); flex-basis: 100%; margin: 0; padding: 0; border: 0; font-size: var(--type-legende-size); }
.reference-resolution__scope label { display: inline-flex; align-items: center; gap: var(--space-1); }
/* Les incohérences de l'exigence, en tête du rail et traitées d'abord
   (vocal Luc 25/09, liste unifiée 25/09 23:08) : encadré critique dès
   qu'une incohérence l'est, jamais une couleur seule — le mot de gravité
   ouvre chaque ligne et le compte le dit en toutes lettres. */
.shape-rail__incoherences { margin-bottom: var(--space-3); padding: var(--space-2); border: var(--border-width-1) solid var(--border); border-radius: var(--radius-interactive); }
.shape-rail__incoherences:not([data-incoherences-critique="0"]) { border-color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 6%, transparent); }
.shape-rail__incoherences-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); margin: 0; font-size: var(--type-ui-compact-size); font-weight: 700; }
.shape-rail__incoherences-count { font-weight: 400; color: var(--text-secondary); }
/* Une incohérence = un bloc, séparé du suivant par un filet comme les lignes
   des cases (retour Luc 28/09 : « quand est-ce qu'une ligne commence ou
   s'arrête ? »). Le liseré gauche porte la gravité ; trois étages dans le même
   ordre — numéro · gravité · source, ce qui ne va pas, où le voir + geste. */
.shape-rail__incoherences-list { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; border: var(--border-width-1) solid var(--border); border-radius: var(--radius-interactive); background: var(--surface); }
.shape-rail__incoherence { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-2); font-size: var(--type-ui-compact-size); box-shadow: inset 3px 0 0 var(--border); }
.shape-rail__incoherence + .shape-rail__incoherence { border-top: var(--border-width-1) solid var(--border); }
.shape-rail__incoherence[data-incoherence-severity="critique"] { box-shadow: inset 3px 0 0 var(--status-critical); }
.shape-rail__incoherence[data-incoherence-severity="majeure"] { box-shadow: inset 3px 0 0 var(--status-warning); }
.shape-rail__incoherence-head, .shape-rail__incoherence-what, .shape-rail__incoherence-foot { margin: 0; min-width: 0; }
.shape-rail__incoherence-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); }
.shape-rail__incoherence-number { font-weight: 700; font-variant-numeric: tabular-nums; }
.shape-rail__incoherence-severity { padding: 0 var(--space-1); border: var(--border-width-1) solid currentColor; border-radius: var(--radius-interactive); font-weight: 700; }
.shape-rail__incoherence-severity--critique { color: var(--status-critical); }
.shape-rail__incoherence-severity--majeure { color: var(--status-warning); }
.shape-rail__incoherence-severity--mineure { color: var(--text-secondary); }
.shape-rail__incoherence-proof { font-size: var(--type-legende-size); color: var(--text-secondary); }
.shape-rail__incoherence-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); }
.shape-rail__incoherence-where { font-size: var(--type-legende-size); color: var(--text-secondary); }
.shape-rail__incoherence-foot .shape-rail__finding-chip { margin-left: auto; }
.shape-rail__finding-chip-cta { color: var(--text-secondary); text-decoration: underline; }
.shape-rail__incoherences-note { margin: var(--space-2) 0 0; font-size: var(--type-legende-size); color: var(--text-secondary); }
/* La ligne du pont prose : le terme proposé d'abord, puis le chemin qui le
   qualifie, la citation qui l'a fait proposer et la description du flux. Le
   terme garde sa mono italique et son « ≈ » — la même marque qu'au centre du
   texte, parce que c'est la même lecture de l'outil. Le chemin se lit ICI,
   jamais au milieu de la phrase. */
.shape-rail__prose { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) var(--space-2); min-height: 2.25rem; }
.shape-rail__prose .prose-term { color: var(--text-primary); }
.shape-rail__prose-path { display: block; color: var(--text-secondary); font-size: var(--type-legende-size); overflow-wrap: anywhere; }
/* Rien ne rattache cette prose : la ligne rejoint la case « absente » du
   filtre, et elle en prend la couleur — la légende dit « absente » en
   critique, une ligne de cette case ne peut pas se peindre autrement. */
.shape-rail__row--prose[data-shape-legend="absent"] { box-shadow: inset 3px 0 0 var(--status-critical); background: color-mix(in srgb, var(--status-critical) 8%, transparent); }
.shape-rail__row--prose[data-shape-legend="absent"] .shape-rail__state { border-color: var(--status-critical); color: var(--status-critical); }
.shape-rail__prose-description { display: block; color: var(--text-secondary); font-size: var(--type-legende-size); overflow-wrap: anywhere; }
/* La ligne qui ouvre la fiche : elle se comporte comme les autres lignes du
   rail qui ouvrent la modale (nom souligné au survol). */
a.shape-rail__prose[data-prose-id]:hover .prose-term__name, a.shape-rail__prose[data-prose-id]:focus-visible .prose-term__name,
a.shape-rail__prose[data-prose-id]:hover .shape-rail__excerpt, a.shape-rail__prose[data-prose-id]:focus-visible .shape-rail__excerpt { text-decoration: underline; }
/* La fiche d'une proposition lue dans la prose, dans la modale : des blocs
   titrés, dans l'ordre des questions de la personne qui arbitre — quels
   mots, ce que l'outil y lit, qui a fait quoi, les candidats, les gestes. */
.prose-proposal__section { margin-top: var(--space-3); min-width: 0; }
.prose-proposal__section:first-child { margin-top: 0; }
.prose-proposal__title { margin: 0 0 var(--space-1); font-size: var(--type-legende-size); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.prose-proposal__snippet { border-left-color: var(--tension); }
.prose-proposal__quote { background: color-mix(in srgb, var(--tension) 14%, transparent); color: inherit; font-weight: 600; }
.prose-proposal__role { margin: var(--space-1) 0 0; color: var(--text-secondary); }
.prose-proposal__reading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--type-ui-size, 1rem); }
.prose-proposal__reading .prose-term { color: var(--text-primary); font-size: 1.05em; }
.prose-proposal__steps { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; color: var(--text-secondary); }
.prose-proposal__steps li { min-width: 0; overflow-wrap: anywhere; }
.prose-proposal__siblings { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.prose-proposal__siblings .prose-term { margin-left: var(--space-1); color: var(--text-primary); }
.prose-proposal__gestures { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width-1) solid var(--border); }
.prose-candidate .reference-definition__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); overflow-wrap: anywhere; }
.shape-rail__row--prose .shape-rail__excerpt { color: var(--text-secondary); }
/* La chaîne de preuve du rapprochement, sous la ligne où on l'arbitre : le
   pourquoi est LU (un relecteur EN 50128 doit pouvoir dire d'où vient le
   terme sans ouvrir quoi que ce soit), les rangs suivants sont repliés — leur
   nombre suffit à dire qu'il y avait d'autres candidats. Même langue que le
   reste du rail : un titre en clair, un corps en légende. */
.shape-rail__prose-why { margin: 0 var(--space-2) var(--space-1); color: var(--text-secondary); font-size: var(--type-legende-size); overflow-wrap: anywhere; }
.shape-rail__prose-why-title { display: block; color: var(--text-primary); font-weight: 600; }
.shape-rail__prose-others { margin: 0 var(--space-2) var(--space-1); font-size: var(--type-legende-size); }
/* Le triangle natif reste : sans lui, rien ne dit que la ligne s'ouvre — les
   cases du rail, elles, ont leur point d'état pour le dire. */
.shape-rail__prose-others > summary { min-height: 2rem; padding: var(--space-1) 0; color: var(--text-secondary); cursor: pointer; }
.shape-rail__prose-candidates { display: flex; flex-direction: column; gap: var(--space-1); }
.shape-rail__prose-candidate { display: block; color: var(--text-secondary); overflow-wrap: anywhere; }
.shape-rail__prose-candidate-name { font-family: var(--font-mono); color: var(--text-primary); }
.shape-rail__prose-rank { white-space: nowrap; }
.shape-rail__role { display: block; font-size: var(--type-legende-size); font-weight: 700; color: var(--text-secondary); }
.shape-rail__excerpt { display: block; overflow-wrap: anywhere; }
.shape-rail__finding { padding: var(--space-2); border: var(--border-width-1) solid var(--border); border-radius: var(--radius-interactive); background: var(--surface-raised); font-size: var(--type-ui-compact-size); }
/* Le renvoi vers la case qui porte la ligne. Le contrat ne recopie pas le
   nom : il dit où le lire. */
.shape-rail__see-in { display: inline-block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--type-legende-size); text-decoration: underline; }
.shape-rail__see-in:hover, .shape-rail__see-in:focus-visible { color: var(--text-primary); }
/* Ce que la lecture n'a pas pu atteindre : une fois, en tête, pour toute
   l'exigence — jamais répété sous chaque nom absent. */
.shape-rail__reading { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); padding: var(--space-2); border: var(--border-width-1) solid var(--border); border-radius: var(--radius-interactive); color: var(--text-secondary); font-size: var(--type-legende-size); }
.shape-rail__reading-title { color: var(--text-primary); font-weight: 600; }
.shape-rail__kind { margin-right: var(--space-1); font-weight: 700; }
.shape-rail__severity { margin-left: var(--space-1); font-weight: 700; }
.shape-rail__finding[data-shape-kind="NC"] .shape-rail__kind,
.shape-rail__finding[data-shape-severity="critique"] .shape-rail__severity { color: var(--status-critical); }
.shape-rail__finding[data-shape-severity="majeure"] .shape-rail__severity { color: var(--status-warning); }
.shape-rail__finding[data-shape-severity="mineure"] .shape-rail__severity { color: var(--text-secondary); }
.shape-rail__finding[data-shape-kind="WI"] .shape-rail__kind { color: var(--status-warning); }
.shape-rail__finding[data-shape-kind="Q"] .shape-rail__kind { color: var(--status-pending); }
.shape-rail__finding[data-shape-kind="INFO"] .shape-rail__kind { color: var(--status-info); }
/* Quatre niveaux, un mot par niveau. La pastille reste lisible sans couleur
   (charte undust) : la teinte souligne le mot, elle ne le remplace pas. */
.shape-rail__level { border: var(--border-width-1) solid var(--border); border-radius: 999px; padding: 0 var(--space-1); font-size: var(--type-legende-size); white-space: nowrap; color: var(--text-secondary); }
.shape-rail__level[data-shape-level="1"] { border-color: var(--status-critical); color: var(--status-critical); }
.shape-rail__level[data-shape-level="2"] { color: var(--text-primary); }
.shape-rail__level[data-shape-level="3"] { border-color: var(--status-warning); color: var(--status-warning); }
.shape-rail__level[data-shape-level="4"] { border-color: var(--status-success); color: var(--status-success); }
/* Certitude du rattachement (rapport PG 8BVXQfKv) : un mot, lisible sans
   couleur ; le point coloré souligne le niveau, le survol dit la justesse
   mesurée. Bordure pointillée : ce n'est pas le niveau de travail à côté. */
.certainty-pill { display: inline-flex; align-items: center; gap: 0.25em; border: var(--border-width-1) dashed var(--border); border-radius: 999px; padding: 0 var(--space-1); font-size: var(--type-legende-size); white-space: nowrap; color: var(--text-secondary); cursor: help; }
.certainty-pill::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 999px; background: var(--text-secondary); flex: none; }
.certainty-pill[data-certainty="etabli_enonce"]::before, .certainty-pill[data-certainty="etabli_unique"]::before { background: var(--status-success); }
.certainty-pill[data-certainty="probable_fonction"]::before, .certainty-pill[data-certainty="meme_donnee"]::before { background: var(--status-info); }
.certainty-pill[data-certainty="ouvert"]::before { background: var(--status-warning); }
.certainty-pill[data-certainty-pending="true"]::before { background: var(--status-warning); }
.certainty-pill[data-certainty="absent"]::before { background: var(--status-critical); }
.certainty-table { width: 100%; border-collapse: collapse; font-size: var(--type-ui-compact-size); }
.certainty-table th, .certainty-table td { padding: var(--space-1) var(--space-2); border-bottom: var(--border-width-1) solid var(--border); text-align: right; vertical-align: top; }
.certainty-table th:first-child, .certainty-table td:first-child { text-align: left; }
.certainty-table tr[data-certainty-row="established"] td { font-weight: 600; }
.certainty-gauge { height: 0.75rem; border-radius: 999px; background: var(--surface-raised, #eee); overflow: hidden; border: var(--border-width-1) solid var(--border); }
.certainty-gauge__fill { display: block; height: 100%; background: var(--status-success); }
/* Le geste suivant : un bouton discret sous la ligne, jamais dans la ligne
   elle-même (elle reste cliquable). Une notation se corrige un par un. */
.shape-rail__fix { display: inline-flex; align-items: center; min-height: 2rem; margin-top: var(--space-1); margin-right: var(--space-1); padding: var(--space-1) var(--space-2); border: var(--border-width-1) solid var(--border); border-radius: var(--radius-interactive); background: var(--surface); cursor: pointer; font-size: var(--type-ui-compact-size); }
.shape-rail__fix:hover, .shape-rail__fix:focus-visible { background: var(--surface-raised); }
.shape-rail__finding-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2rem; padding: 0 var(--space-2); border: var(--border-width-1) solid var(--border); border-radius: 999px; background: var(--surface); color: inherit; text-decoration: none; font-size: var(--type-legende-size); }
.shape-rail__finding-chip:hover, .shape-rail__finding-chip:focus-visible { background: var(--surface-raised); }
.shape-rail__finding-chip[data-shape-kind="NC"] { border-color: var(--status-critical); }
.shape-rail__finding-chip[data-shape-severity="critique"] { border-color: var(--status-critical); }
.shape-rail__finding-chip[data-shape-severity="majeure"] { border-color: var(--status-warning); }
.shape-rail__finding-chip[data-shape-severity="mineure"] { border-color: var(--border); }
.shape-rail__finding-chip[data-shape-kind="WI"] { border-color: var(--status-warning); }
.shape-rail__finding-chip[data-shape-finding-state="confirmed"] { border-color: var(--status-ok, #16803d); }
.shape-rail__finding-chip[data-shape-finding-state="ecarte"] { opacity: .75; }
.shape-rail__finding-chip-state { color: var(--text-secondary); }
.shape-rail__slot-next { font-size: var(--type-legende-size); }
.shape-rail__finding--attached { margin-top: var(--space-1); }
.shape-rail__questions { margin-top: var(--space-2); font-size: var(--type-legende-size); }
.shape-rail__questions a { color: var(--status-pending); text-decoration: underline; text-underline-offset: .15em; }
.shape-rail__questions a:hover, .shape-rail__questions a:focus-visible { color: var(--text-primary); }
/* Une question tranchée : sa fiche, sans la teinte « à faire ». */
.shape-rail__settled { margin-top: var(--space-2); font-size: var(--type-legende-size); }
.shape-rail__settled a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: .15em; }
.shape-rail__settled a:hover, .shape-rail__settled a:focus-visible { color: var(--text-primary); }
.shape-rail__verdict { margin-top: var(--space-2); font-size: var(--type-legende-size); }
.shape-rail__verdict a { text-decoration: underline; text-underline-offset: .15em; }
.shape-rail__verdict-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.shape-rail__verdict-btn { border: var(--border-width-1) solid var(--border); border-radius: var(--radius-interactive); padding: .35rem .7rem; font-size: var(--type-legende-size); background: var(--surface); }
.shape-rail__verdict-btn:hover, .shape-rail__verdict-btn:focus-visible { background: var(--surface-raised); }
/* Le motif d'un refus, écrit avant de refuser (30/09). */
.shape-rail__verdict-motive { min-width: 16rem; max-width: 100%; border: var(--border-width-1) solid var(--border); border-radius: var(--radius-interactive); padding: .35rem .5rem; font-size: var(--type-legende-size); background: var(--surface); margin-right: var(--space-2); }
.shape-rail__finding[data-shape-finding-state="confirmed"] { border-color: var(--status-ok, #16803d); }
.shape-rail__finding[data-shape-finding-state="ecarte"] { opacity: .75; }
.elucidation__occurrences { display: flex; flex-wrap: wrap; gap: .5rem; }
.elucidation__occurrence { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--border); border-radius: .5rem; }
.elucidation__occurrence[aria-current] { outline: 2px solid currentColor; }
/* Les points d'état des étapes du parcours ET des cases du rail : une seule
   définition, deux consommateurs (retour Luc 2026-09-16 : « le petit rond avec
   l'état, comme dans les étapes »). */
:root { --step-dot-waiting: var(--text-secondary, #737373); --step-dot-done: #16803d; --step-dot-attention: #ca8a04; --step-dot-todo: #dc2626; }
.requirement-tabs__indicator { width: .65rem; height: .65rem; border-radius: 50%; background: var(--step-dot-waiting); display: inline-block; margin-right: .4rem; flex-shrink: 0; }
.requirement-tabs__step--done .requirement-tabs__indicator { background: var(--step-dot-done); }
.requirement-tabs__step--attention .requirement-tabs__indicator { background: var(--step-dot-attention); }
.requirement-tabs__step--todo .requirement-tabs__indicator,
.requirement-tabs__step--current .requirement-tabs__indicator { background: var(--step-dot-todo); }

.requirement-tabs__step { position: relative; }

.elucidation__dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; flex-shrink: 0; }
.elucidation__dialog #elucidation-dialog-title { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.elucidation__dialog .remark__tab { position: static; transform: none; writing-mode: horizontal-tb; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .4rem; }
.elucidation__dialog .remark__sheet { transform: translateX(100%); }
.elucidation__dialog .remark__panel[aria-hidden="false"] .remark__sheet { transform: translateX(0); }
.elucidation__occurrences { display: block; margin: 1rem 0; }
.reference-snippets { display: grid; gap: .5rem; }
.reference-snippet { display: flex; align-items: baseline; gap: .6rem; padding: .6rem .75rem; border-left: 3px solid var(--border); font-size: .875rem; overflow-wrap: anywhere; }
.reference-snippet[aria-current="true"] { border-left-color: var(--text-primary); background: var(--surface-raised); }
.reference-snippet__number { flex-shrink: 0; font-size: .75rem; font-weight: 600; }
.reference-snippet__reading { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--text-secondary); }
.reference-place { padding: .5rem .75rem; border-left: 3px solid var(--status-warning); }
.cite.reference-snippet__term { font-weight: 600; color: inherit; background: color-mix(in srgb, var(--tension) 20%, transparent); }
.reference-snippet__term.cite--approche { background: color-mix(in srgb, var(--status-warning) 20%, transparent); }
.reference-snippet__term.cite--absent { background: color-mix(in srgb, var(--status-critical) 20%, transparent); }
.reference-snippet__term.cite--corrige { background: color-mix(in srgb, var(--status-success) 20%, transparent); }
.reference-snippet__term.cite--hypothese_outil { background: color-mix(in srgb, var(--status-pending) 20%, transparent); }
.reference-definition__candidate { border-top: 1px solid var(--border); padding-top: 1rem; }
.reference-definition__source { overflow-wrap: anywhere; }
.reference-definition__explore { margin-top: 1rem; }
.reference-definition__explore-button { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--border-color-strong); border-radius: var(--radius-interactive); background: var(--surface-raised); color: var(--text-primary); font-weight: 600; text-decoration: none; transition: background var(--motion-duree-1) var(--motion-courbe-sortie), border-color var(--motion-duree-1) var(--motion-courbe-sortie); }
.reference-definition__explore-button:hover { background: var(--surface); border-color: var(--text-primary); }
.reference-definition__explore-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.reference-definition__explore-glyph { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--text-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.reference-definition__explore-hint { margin: .4rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--text-secondary); }
/* « Voir dans les schémas » annonce sa destination (recette client, 25/09). */
.schema-destination { margin: .5rem 0 0; font-size: .8125rem; line-height: 1.55; color: var(--text-secondary); }
.schema-destination p { margin: .25rem 0 0; }
.schema-destination strong { color: var(--text-primary); }
.schema-destination__relation--absent, .schema-destination__relation--input_and_output { color: var(--text-accent); }
.schema-destination__goto { display: inline; padding: 0; border: 0; background: none; color: var(--text-accent); font: inherit; text-decoration: underline; cursor: pointer; }
.schema-destination__goto:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Onglet Origine, deux colonnes (retours Luc du 28/09) : le document tel
   qu'on l'a sur deux tiers, les propriétés de l'exigence (statut, analyse,
   version du texte, « Suivie par », « Dans les schémas ») sur le tiers
   droit. Sous 1024 px, les propriétés passent sous le document — jamais de
   défilement horizontal (N9). Les autres onglets n'ont plus d'en-tête. */
.requirement-origin-layout { display: grid; gap: var(--space-4); min-width: 0; }
.requirement-origin-layout__document { min-width: 0; }
.requirement-properties { min-width: 0; overflow-wrap: anywhere; }
.requirement-properties__title { margin: 0 0 var(--space-3); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.requirement-properties__badges { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); font-size: .75rem; }
.requirement-properties > * + * { padding-top: var(--space-3); border-top: var(--border-width-1) solid var(--border); }
.requirement-properties > .requirement-properties__title + * { padding-top: 0; border-top: 0; }
.requirement-properties .schema-trail { flex-direction: column; align-items: flex-start; }
.requirement-properties__note { margin: 0; font-size: .75rem; color: var(--text-secondary); }
@media (min-width: 1024px) {
  .requirement-origin-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
/* Fil de l'exigence dans les schémas : exigence → P-Spec porteuse → DFD. */
.schema-trail { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; font-size: .8125rem; line-height: 1.5; }
.schema-trail__kicker { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.schema-trail__steps { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
.schema-trail__arrow { margin-right: .35rem; color: var(--text-secondary); }
.schema-trail__link { color: var(--text-accent); text-decoration: underline; }
.schema-trail__note { color: var(--text-secondary); }
/* La donnée demandée, surlignée dans le tableau source. */
.statement-content mark.source-table__mark { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--text-primary); font-weight: 700; border-radius: 2px; padding: 0 .1em; }

/* Chemin de la référence : chaque rôle est un tag écrit (mono, capitales,
   trait — même ADN que `.etat` de la charte) et une couleur charte ; le nom
   qui suit hérite de la couleur du rôle. La table source reprend les mêmes
   couleurs sur le nom de la définition ouverte et sur celui de son parent,
   pour qu'on les repère d'un bloc à l'autre. Une seule règle par rôle.
   La couleur est portée par le TRAIT et le FOND teinté (comme le surlignage
   des occurrences) ; le texte reste en couleur primaire — lisible AA dans
   les deux thèmes, quelle que soit la teinte du rôle. */
.reference-path, .statement-content td[data-source-role], .statement-content mark[data-source-role] { --role-color: var(--border-control); }
.reference-path__segment--flow, .reference-path__segment--packet, .reference-path__segment--structure,
.statement-content td[data-source-role="flow"], .statement-content td[data-source-role="packet"], .statement-content td[data-source-role="structure"],
.statement-content mark[data-source-role="flow"], .statement-content mark[data-source-role="packet"], .statement-content mark[data-source-role="structure"] { --role-color: var(--chart-1); }
.reference-path__segment--data, .statement-content td[data-source-role="data"], .statement-content mark[data-source-role="data"] { --role-color: var(--tension); }
.reference-path__segment--type, .statement-content td[data-source-role="type"], .statement-content mark[data-source-role="type"] { --role-color: var(--chart-2); }
.reference-path__segment--parameter, .reference-path__segment--constant, .reference-path__segment--value,
.statement-content td[data-source-role="parameter"], .statement-content td[data-source-role="constant"], .statement-content td[data-source-role="value"],
.statement-content mark[data-source-role="parameter"], .statement-content mark[data-source-role="constant"], .statement-content mark[data-source-role="value"] { --role-color: var(--chart-3); }
.reference-tag {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 1px 6px; border: var(--border-width-strong) solid var(--role-color); border-radius: var(--radius-interactive);
  font: var(--type-etat-weight) var(--type-etat-size)/var(--type-etat-leading) var(--font-mono); letter-spacing: var(--type-etat-tracking); text-transform: uppercase;
  color: var(--text-primary); background: color-mix(in srgb, var(--role-color) 12%, var(--surface));
}
.reference-path__separator { color: var(--text-secondary); }
.reference-path__name {
  font-family: var(--font-mono); font-weight: 600; padding: 0 .2em; border-radius: var(--square-tick);
  color: var(--text-primary); background: color-mix(in srgb, var(--role-color) 22%, transparent);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.reference-path__segment--direction .reference-path__name, .reference-path__segment--unknown .reference-path__name { background: transparent; }
.reference-path__name--link { text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer; }
.reference-path__name--link:hover, .reference-path__name--link:focus-visible { background: var(--accent); color: var(--on-accent); outline: 2px solid var(--text-primary); outline-offset: 2px; }
.statement-content td[data-source-role] { color: var(--text-primary); background: color-mix(in srgb, var(--role-color) 22%, transparent); font-weight: 600; }
/* Le membre ouvert, dans la structure de son flux parent : même teinte que son nom en tête de ligne. */
.statement-content mark.source-table__member { color: var(--text-primary); background: color-mix(in srgb, var(--role-color) 22%, transparent); font-weight: 600; border-radius: 2px; padding: 0 .1em; }
.statement-content tr[data-source-parent-row] td { color: var(--text-secondary); }
.statement-content tr[data-source-parent-row] td[data-source-role] { color: var(--text-primary); }
/* Candidates côte à côte : autant de colonnes que la modale en loge (24 rem
   chacune au moins), la recommandée signalée par son filet. */
.reference-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.reference-compare__column { min-width: 0; border: var(--border-width-1) solid var(--border); border-radius: var(--radius-card); padding: var(--space-3); }
.reference-compare__column[data-reference-recommended] { border-color: var(--tension); box-shadow: inset 0 3px 0 var(--tension); }
.reference-compare .reference-definition__candidate { border-top: 0; padding-top: 0; }
.reference-definition__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); overflow-wrap: anywhere; }
.reference-badge { display: inline-block; border: var(--border-width-1) solid var(--tension); border-radius: 999px; padding: 0 var(--space-2); font-family: var(--font-sans); font-size: var(--type-legende-size); font-weight: 700; color: var(--tension); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.reference-badge[data-manual-flow] { border-color: var(--status-warning); color: var(--status-warning); }
/* L'état d'une occurrence à trancher, dit une fois : état, pourquoi, que faire (2cKeJw52). */
.reference-status { border-left: var(--border-width-2) solid var(--status-warning); padding-left: var(--space-3); }
.reference-status--to_choose { border-left-color: var(--tension); }
.manual-flow__panel { display: grid; gap: var(--space-2); max-width: 24rem; }
.manual-flow__field { display: grid; gap: var(--space-1); font-size: var(--type-small-size); font-weight: 600; }
.manual-flow__field input, .manual-flow__field select { min-height: 2.75rem; padding: var(--space-1) var(--space-2); border: var(--border-width-1) solid var(--border); border-radius: var(--radius-interactive); background: var(--surface); }
/* Boutons d'action d'une référence : valider (plein), proposer / laisser (quiet). */
.reference-action { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--space-1) var(--space-3); border: var(--border-width-1) solid var(--border-color-strong); border-radius: var(--radius-interactive); background: var(--surface); color: var(--text-primary); font-size: var(--type-small-size); font-weight: 600; cursor: pointer; }
.reference-action:hover, .reference-action:focus-visible { background: var(--surface-raised); box-shadow: inset 0 -2px 0 var(--tension); }
.reference-action--primary { background: var(--text-primary); color: var(--surface); border-color: var(--text-primary); }
.reference-action--primary:hover, .reference-action--primary:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; }
.reference-action--quiet { border-color: var(--border); color: var(--text-secondary); font-weight: 500; }
.missing-member { border-left: 3px solid var(--status-warning); padding-left: var(--space-3); }
/* Une option par ligne, toutes de la même largeur ; la recommandée vient en
   tête et porte sa marque sur le bouton lui-même (badge + liseré). */
.missing-member__values { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; max-width: 34rem; }
.missing-member__values li { display: block; }
.missing-member__option { width: 100%; justify-content: space-between; gap: var(--space-3); text-align: left; }
.missing-member__option-label { min-width: 0; overflow-wrap: anywhere; }
.missing-member__option--recommended { border-color: var(--tension); box-shadow: inset 4px 0 0 var(--tension); }
.missing-member__option--recommended:hover, .missing-member__option--recommended:focus-visible { box-shadow: inset 4px 0 0 var(--tension), inset 0 -2px 0 var(--tension); }
.missing-member__other { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Constats : la gravité se lit au filet, pas à un cadre jaune uniforme. */
.diagnostic-item { border: var(--border-width-1) solid var(--border); border-left-width: 4px; border-radius: var(--radius-interactive); padding: var(--space-2) var(--space-3); font-size: var(--type-small-size); background: var(--surface-raised); overflow-wrap: anywhere; }
.diagnostic-item__head { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.diagnostic-item__category { font-weight: 700; }
.diagnostic-item__location, .diagnostic-item__blocking { color: var(--text-secondary); }
.diagnostic-item--note { border-left-color: var(--status-info); }
.diagnostic-item--warning { border-left-color: var(--status-warning); }
.diagnostic-item--warning .diagnostic-item__category, .diagnostic-item--warning .diagnostic-item__blocking { color: var(--status-warning); }
.diagnostic-item--critical { border-left-color: var(--status-critical); border-color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 8%, var(--surface)); }
.diagnostic-item--critical .diagnostic-item__category, .diagnostic-item--critical .diagnostic-item__blocking { color: var(--status-critical); }
/* En colonne, les actions se replient : sans borne, l'en-tête collant mange
   l'écran d'un téléphone et il ne reste plus rien à lire sous lui. */
@media (max-width: 600px) { .elucidation__dialog > .elucidation__dialog-heading { align-items: flex-start; flex-direction: column; max-block-size: 30dvh; overflow-y: auto; } }

.elucidation__dialog .remark__panel { overflow: clip; }

/* L'extrait source se lit en entier : la modale porte déjà son ascenseur,
   la table n'en ajoute pas (seul le défilement horizontal reste possible). */
.reference-definition__source .statement-content__table-scroll { max-height: none; overflow-y: visible; }
.reference-definition__source [data-source-table-target="content"] > p { display: none; }

/* Fil de consultation dans la modale : « Retour » puis le chemin parcouru
   (chaque étape précédente est un bouton), la définition courante en clair. */
.elucidation__trail { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .5rem 0; font-size: .875rem; }
.elucidation__trail-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .3rem .7rem; border: 1px solid var(--text-secondary); border-radius: .5rem; background: var(--surface); color: var(--text-primary); cursor: pointer; }
.elucidation__trail-back:hover, .elucidation__trail-back:focus-visible { background: var(--text-primary); color: var(--surface); }
.elucidation__trail-list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); }
.elucidation__trail-list li + li::before { content: "›"; margin-right: .5rem; color: var(--text-secondary); }
.elucidation__trail-link { padding: 0 .2em; border: 0; background: transparent; color: var(--text-primary); text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer; font: inherit; }
.elucidation__trail-link:hover, .elucidation__trail-link:focus-visible { background: var(--accent); color: var(--on-accent); outline: 2px solid var(--text-primary); outline-offset: 2px; }
.elucidation__trail-list [aria-current] { font-weight: 600; }
#elucidation-dialog-title:focus { outline: none; }
#elucidation-dialog-title:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }

.elucidation__dialog .remark__panel[aria-hidden="true"] { visibility: hidden; }

#decision-reading { min-width: 0; overflow-wrap: anywhere; }
#decision-reading .statement-content__table-scroll { max-width: 100%; }
.decision-reading__actor { border-bottom: 1px dashed currentColor; }
.decision-reading__obligation, .decision-reading__actions { font-weight: 700; }
.decision-reading__exception, #decision-reading td[id] { scroll-margin-top: 12rem; }
.decision-reading__exception:target, #decision-reading td[id]:target { outline: 2px solid var(--text-primary); outline-offset: 2px; background: var(--surface-raised); }

/* Fusion Analyse -> Élucidation (spec Sm75ccNd). Bloc « Structure de
   l'énoncé » et bandeau conseil de forme : tokens undust uniquement,
   parité clair/sombre par --surface/--status-*. */
.elucidation__structure {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface);
  color: var(--text-primary);
}
.elucidation__structure > summary { cursor: pointer; font-weight: 500; }
.elucidation__structure-badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .5rem;
  border-radius: .25rem;
  font-size: .75rem;
  border: 1px solid transparent;
}
.elucidation__structure-badge--attention {
  border-color: var(--status-warning);
  color: var(--status-warning);
  background: color-mix(in srgb, var(--status-warning) 12%, var(--surface));
}
.elucidation__structure-badge--todo {
  border-color: var(--status-pending);
  color: var(--status-pending);
  background: color-mix(in srgb, var(--status-pending) 12%, var(--surface));
}
.elucidation__structure-intro { margin-top: .5rem; font-size: .875rem; color: var(--text-secondary); }
.elucidation__structure-block { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); }
.elucidation__structure-warning { color: var(--status-warning); }
.elucidation__structure-advice {
  padding: 1rem;
  border: 1px solid var(--status-warning);
  border-radius: .75rem;
  background: color-mix(in srgb, var(--status-warning) 10%, var(--surface));
  color: var(--text-primary);
}
.elucidation__structure-advice-kicker {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--status-warning);
}
.elucidation__structure-advice-limit { color: var(--text-secondary); }
.elucidation__structure-advice-chip {
  display: inline-block;
  padding: 0 .5rem;
  border: 1px solid var(--status-warning);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: .6875rem;
}
.elucidation__structure-adopt { padding-top: .5rem; }
.elucidation__structure-input {
  width: 100%;
  min-width: 0;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--surface);
  color: var(--text-primary);
  font-size: .875rem;
}
.elucidation__structure-submit {
  min-height: 2.5rem;
  padding: .5rem 1rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: .875rem;
  cursor: pointer;
}
.elucidation__structure-submit:hover, .elucidation__structure-submit:focus-visible {
  background: var(--text-primary); color: var(--surface);
}

/* Corrections reportées dans le brouillon — feedback sous le bouton pressé.
   La diff aperçue reste limitée au voisinage modifié (±60 caractères, cf.
   text_diff.js) : le rouge disparaît, le vert entre. */
.reference-diff-preview {
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--status-success);
  background: color-mix(in srgb, var(--status-success) 8%, transparent);
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.reference-diff-preview:empty { display: none; }
.reference-diff-preview ins {
  background: color-mix(in srgb, var(--status-success) 22%, transparent);
  color: var(--text-primary);
  text-decoration: none;
  padding: 0 .1em;
  border-radius: 2px;
}
.reference-diff-preview del {
  background: color-mix(in srgb, var(--status-critical) 18%, transparent);
  color: var(--text-primary);
  text-decoration: line-through;
  padding: 0 .1em;
  border-radius: 2px;
}

/* Article de référence dont la correction est reportée dans le brouillon. */
.reference-definition[data-reference-draft="corrected"] {
  border-left: 3px solid var(--status-success);
  padding-left: var(--space-2);
}
.reference-definition__draft-note {
  margin: 0 0 var(--space-2) 0;
  color: var(--status-success);
  font-weight: 700;
  font-size: var(--type-small-size);
}
.reference-compare__column .reference-definition[data-reference-draft="corrected"] { border-left: 0; }

/* Ligne du rail (ou ligne des occurrences) portant une correction en brouillon. */
a.is-draft-corrected {
  box-shadow: inset 3px 0 0 var(--status-success);
}

/* Bandeau des corrections en brouillon dans la modale. */
.elucidation__corrections {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-1) solid var(--status-success);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--status-success) 10%, transparent);
  color: var(--text-primary);
}
.elucidation__corrections[hidden] { display: none; }
.elucidation__corrections-label {
  margin: 0;
  font-weight: 600;
}
.elucidation__corrections-hint {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
}

/* Une ligne « Pourquoi » (candidate_explanations) sous le titre de la
   candidate — courte, tokenisée, alignée sur le paragraphe suivant. */
.reference-definition__why {
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.reference-definition__why-label {
  font-weight: 700;
  color: var(--text-primary);
}
.reference-definition__why p { display: inline; }

/* Rapport de recherche pour une référence introuvable. Cadre discret,
   filet de statut information, liste des déclarations proches. */
.missing-reference-search {
  border: var(--border-width-1) solid var(--border);
  border-left: 3px solid var(--status-info);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  background: var(--surface-raised);
}
.missing-reference-search__near { border-top: var(--border-width-1) solid var(--border); padding-top: var(--space-2); }
.missing-reference-search__near:first-child { border-top: 0; padding-top: 0; }
.missing-reference-search__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.missing-reference-search__partial { color: var(--text-secondary); }
.missing-reference-search__version {
  border: var(--border-width-1) solid var(--status-warning);
  border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--status-warning) 8%, transparent);
}

/* Écart énoncé ↔ document reçu — pastille et badge. La couleur suit
   `--status-warning` (charte : « couleur mot + point »), le reste
   reprend le rythme visuel des pastilles Tailwind. */
.statement-provenance-badge__dot,
.statement-provenance-pill__dot {
  display: inline-block; width: .5rem; height: .5rem;
  border-radius: 9999px; background: var(--status-warning);
}
.statement-provenance-badge__link:focus-visible,
.statement-provenance-pill:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px;
}

/* Retour Luc 2026-09-17 : un brouillon non enregistré ne se rate pas. Le
   bandeau reste collé au bas de la modale, en orange (un geste attend), le
   bouton d'enregistrement aussi, et le cadre de la modale suit. Vert = fait ;
   orange = à faire. */
.elucidation__corrections {
  position: sticky; bottom: 0; z-index: 2;
  border: 2px solid var(--status-warning);
  background: color-mix(in srgb, var(--status-warning) 14%, var(--surface));
  box-shadow: 0 -6px 16px rgb(0 0 0 / .10);
}
.elucidation__corrections .reference-action--primary {
  /* Near-black on the warning colour in both themes (dark warning is a bright yellow). */
  background: var(--status-warning); border-color: var(--status-warning); color: #141413;
}
.elucidation__corrections .reference-action--primary:hover,
.elucidation__corrections .reference-action--primary:focus-visible {
  background: color-mix(in srgb, var(--status-warning) 75%, var(--text-primary)); border-color: transparent; color: var(--surface);
}
.elucidation__dialog[data-corrections-pending="true"] {
  border: 2px solid var(--status-warning);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-warning) 30%, transparent);
}
.reference-definition[data-reference-draft="corrected"] { border-left-color: var(--status-warning); }
.reference-definition__draft-note { color: var(--status-warning); }
a.is-draft-corrected { box-shadow: inset 3px 0 0 var(--status-warning); }

/* Un constat réglé par une correction en brouillon se lit barré et marqué. */
.diagnostic-item--draft-corrected .diagnostic-item__message { text-decoration: line-through; color: var(--text-secondary); }
.diagnostic-item__draft { margin-left: .5rem; color: var(--status-warning); font-weight: 600; }

/* Après une décision : la ligne d'état dit que c'est fait, et quoi ensuite. */
[data-elucidation-target="dialogNotice"][data-done="true"] {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--status-success);
  background: color-mix(in srgb, var(--status-success) 8%, transparent);
  font-weight: 600;
}
.elucidation__next-todo { margin-left: var(--space-2); min-height: 2.25rem; padding: 0 var(--space-2); }

/* Divergence de résolution (TUsGf9t1) : une même donnée, des résolutions
   différentes d'une exigence à l'autre. Encadré « attention », jamais une
   couleur seule — le titre le dit en toutes lettres ; valeurs côte à côte
   dans un tableau qui défile seul sur mobile. */
.home-card--alert { border-color: var(--status-warning); box-shadow: inset var(--border-width-3) 0 0 var(--status-warning); }
.resolution-divergence { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); padding: var(--space-2); border: var(--border-width-1) solid var(--status-warning); border-radius: var(--radius-interactive); background: color-mix(in srgb, var(--status-warning) 6%, transparent); font-size: var(--type-legende-size); }
.resolution-divergence__title { margin: 0 0 var(--space-1); text-align: left; caption-side: top; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.resolution-divergence__shared, .resolution-divergence__how { margin: 0; color: var(--text-secondary); }
.resolution-divergence__scroll { overflow-x: auto; }
.resolution-divergence__table { width: 100%; border-collapse: collapse; }
.resolution-divergence__table th, .resolution-divergence__table td { padding: var(--space-1); border-bottom: var(--border-width-1) solid var(--border); text-align: left; vertical-align: top; }
.resolution-divergence__table thead th { color: var(--text-secondary); font-weight: 600; }
.resolution-divergence__table tr[data-resolution-divergence-here] { background: color-mix(in srgb, var(--status-warning) 10%, transparent); }
.resolution-divergence__meta, .resolution-divergence__here { display: block; color: var(--text-secondary); }
.resolution-divergence-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-2) var(--space-4); border: var(--border-width-1) solid var(--status-warning); border-radius: var(--radius-interactive); background: color-mix(in srgb, var(--status-warning) 6%, transparent); color: var(--text-primary); }
.resolution-divergences { display: flex; flex-direction: column; gap: var(--space-4); }
.resolution-divergences__title { margin: 0; font: 700 var(--type-h2-size)/var(--type-h2-leading) var(--font-sans); }
.resolution-divergences__lede, .resolution-divergences__empty { margin: 0; color: var(--text-secondary); }

/* Étape Bancs lisible (retours Luc du 29/09). La page prend toute la largeur
   de l'écran à cette étape : la table des cas et la matrice de couverture ne
   tenaient pas dans la mesure de lecture (97rem) et défilaient de côté. */
.chrome-main--wide { max-width: none; }

/* Un code du banc qui ouvre sa fiche : il se lit comme un lien, tient dans
   une cellule, et reste un bouton (clavier, lecteur d'écran). */
.bench-ref { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; overflow-wrap: anywhere; }
.bench-ref:hover { text-decoration-style: solid; color: var(--text-primary); }
.bench-ref:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }
.bench-chip { display: inline-block; margin: 0 .25rem .25rem 0; padding: 0 .35rem; border: var(--border-width-1) solid var(--border); border-radius: .3rem; background: var(--surface); text-decoration: none; }
.bench-chip:hover { background: var(--surface-raised); }

/* Table des cas : en-têtes sur deux ou trois lignes (coupure après « . » et
   « _ ») plutôt qu'une colonne large par nom long ; ID et remarque collés à
   gauche quand la table défile encore (petit écran). */
.bench-cases th { vertical-align: bottom; }
/* Dans la table, un nom ne se coupe qu'aux « . » et « _ » (<wbr>), jamais au milieu d'un mot. */
.bench-cases .bench-ref { overflow-wrap: normal; }
/* Nom de donnée à la verticale (bas → haut), tronqué au-delà de 14rem : la
   colonne n'est plus large que ses valeurs ; le nom entier est dans la bulle
   et dans la fiche. Au-dessus, le préfixe commun des colonnes d'un flux. */
.bench-cases__vcell { vertical-align: bottom; text-align: left; }
.bench-cases__vhead { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 14rem; overflow: hidden; text-overflow: ellipsis; }
.bench-cases__group { border-bottom: var(--border-width-1) solid var(--border); white-space: normal; line-height: 1.25; }
.bench-cases__sticky { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--border); }
.bench-cases tbody tr:hover .bench-cases__sticky { background: var(--surface-raised); }
.bench-cases__remark { margin-left: .35rem; padding: 0 .3rem; border: var(--border-width-1) solid var(--border); border-radius: .3rem; font-size: 11px; line-height: 1.4; color: var(--text-secondary); background: var(--surface); }
.bench-cases__remark:hover { background: var(--surface-raised); color: var(--text-primary); }
.bench-cases__classes { min-width: 10rem; }

/* Matrice : le libellé d'une obligation passe sur deux lignes au plus (le
   reste dans sa fiche) pour que la matrice entière tienne à l'écran — la
   colonne « Obligation » était trop large (remarque client #145). */
.bench-matrix__label { display: -webkit-box; max-width: 22rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.3; }
.bench-matrix__row--missing .bench-matrix__label { color: var(--status-critical); font-weight: 600; }
.bench-matrix__code { display: block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
/* Écran moyen (recette du 29/09 à 1 440 px : la matrice d'un banc de 35 cas
   et la table d'un banc de 30 colonnes défilaient encore) : libellés
   d'obligation plus étroits, cellules et valeurs de la table des cas
   resserrées, colonne des classes plus étroite. */
@media (max-width: 1700px) {
  .bench-matrix__label, .bench-matrix__code { max-width: 15rem; }
  .bench-matrix th:not(:first-child), .bench-matrix td:not(:first-child) { padding-left: 1px; padding-right: 1px; line-height: 1.1; }
  .bench-cases td:not(.bench-cases__sticky), .bench-cases th:not(.bench-cases__sticky) { padding-left: 1px; padding-right: 1px; }
  .bench-cases tbody td:not(.bench-cases__sticky) + td { border-left: var(--border-width-1) solid var(--border); }
  .bench-cases td.font-mono { font-size: 10px; hyphens: auto; }
  .bench-cases__classes { min-width: 0; }
  .bench-cases__classes-list { display: none; }
  .bench-cases__classes-count { display: inline; }
}
.bench-cases__classes-count { display: none; }

/* Sous-ligne d'un cas (remarques client #182 : Justification et Expression
   MC/DC) : pleine largeur sous la ligne du cas, collée à elle — deux
   colonnes de plus referaient défiler la table. Le texte se coupe partout :
   il ne donne aucune largeur minimale aux colonnes. */
.bench-cases tbody tr[data-case-row]:has(+ tr.bench-cases__why) { border-bottom-width: 0; }
.bench-cases tbody tr.bench-cases__why { border-top-width: 0; }
.bench-cases tbody tr.bench-cases__why td { border-left: 0; }
.bench-cases__why-grid { display: grid; gap: .25rem 1.5rem; grid-template-columns: minmax(0, 1fr); font-size: 11px; line-height: 1.4; color: var(--text-secondary); }
@media (min-width: 768px) { .bench-cases__why-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bench-cases__why-title { display: block; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.bench-cases__why-list { margin: 0; padding-left: 1rem; list-style: disc; overflow-wrap: anywhere; }
.bench-cases__why-expr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; white-space: pre-line; overflow-wrap: anywhere; }
.bench-cases__not-computed { display: block; font-family: inherit; font-size: 10px; line-height: 1.2; text-align: left; overflow-wrap: anywhere; hyphens: auto; color: var(--text-secondary); }
/* Remarque client #184 : une ligne de matrice sans pastille le dit. */
.bench-matrix__todo { display: block; max-width: 22rem; font-size: 10px; line-height: 1.3; color: var(--status-critical); white-space: normal; }
@media (max-width: 1700px) { .bench-matrix__todo { max-width: 15rem; } }

/* Cas de test (format Excel) — habillage déporté vers bench_classeur.css
   depuis la refonte O5T87kYs (cas en lignes, groupes repliables). */

/* La fiche en modale. */
.bench-explain__dialog { margin: auto; width: min(64rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.25rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); color: var(--text-primary); overflow: auto; overflow-wrap: anywhere; }
.bench-explain__dialog::backdrop { background: rgb(0 0 0 / .35); backdrop-filter: blur(3px); }
.bench-explain__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.bench-explain__bar button { min-height: 2.25rem; padding: 0 .75rem; border: var(--border-width-1) solid var(--border); border-radius: .4rem; background: var(--surface); font-size: .8125rem; }
.bench-explain__bar button:hover { background: var(--surface-raised); }
.bench-card { font-size: .8125rem; line-height: 1.5; }
.bench-card h2 { margin: 0; font-size: 1.05rem; font-weight: 600; outline: none; }
.bench-card h3 { margin: 1rem 0 .35rem; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.bench-card p, .bench-card li { font-size: .8125rem; line-height: 1.5; }
.bench-card__lede { margin-top: .35rem; color: var(--text-secondary); }
.bench-card__why { margin-top: .5rem; padding: .5rem .75rem; border-left: 3px solid var(--status-warning); background: color-mix(in srgb, var(--status-warning) 7%, transparent); }
.bench-card__ok { border-left-color: var(--status-success); background: color-mix(in srgb, var(--status-success) 7%, transparent); }
.bench-card table { width: auto; max-width: 100%; border-collapse: collapse; font-size: .75rem; }
.bench-card th, .bench-card td { padding: .3rem .5rem; border-bottom: var(--border-width-1) solid var(--border); text-align: left; vertical-align: top; }
.bench-card thead th { font-weight: 600; color: var(--text-secondary); }
.bench-card table .bench-ref { overflow-wrap: normal; white-space: nowrap; }
.bench-card__mono { font-family: var(--font-mono, ui-monospace, monospace); }
@media (max-width: 800px) { .bench-explain__dialog { padding: .75rem; } .bench-explain__bar { position: sticky; top: -.75rem; z-index: 1; margin-block-start: -.75rem; padding-block: .75rem; background: var(--surface); } }

/* --- Onglet « Propositions & observations » (Luc 29/09/2026, éditeur seul).
   Réutilise `.remark-pastille[s]` et `.remark-status--*` ; ajoute juste le
   nécessaire : la barre d'onglets, la matrice portée × état, les cartes. */

/* Barre d'onglets Remarques / Propositions & observations. */
.remark-tabs { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 1rem; padding: 0 0 0.5rem; border-bottom: var(--border-width-1) solid var(--border); }
.remark-tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.9rem; border-radius: 0.4rem 0.4rem 0 0; font-size: 0.9375rem; color: var(--text-secondary); text-decoration: none; }
.remark-tab:hover { background: var(--surface-raised); color: var(--text-primary); }
.remark-tab--active { background: var(--surface); color: var(--text-primary); font-weight: 600; border-bottom: 2px solid var(--status-info, currentColor); margin-bottom: -0.5rem; padding-bottom: 0.5rem; }
.remark-tab__n { display: inline-block; min-width: 1.25rem; padding: 0 0.4rem; border-radius: 1rem; background: var(--surface-raised); font-size: 0.75rem; color: var(--text-secondary); }

/* Matrice portée × état — sobre, cellules cliquables. */
.remark-obs-synthese { margin: 1rem 0; padding: 0.75rem 1rem; border: var(--border-width-1) solid var(--border); border-radius: 0.5rem; background: var(--surface); }
.remark-obs-synthese__titre { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.remark-obs-synthese__phrase { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--text-secondary); }
.remark-obs-matrix { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.remark-obs-matrix th, .remark-obs-matrix td { padding: 0.35rem 0.5rem; border-bottom: var(--border-width-1) solid var(--border); text-align: right; vertical-align: middle; }
.remark-obs-matrix thead th { font-weight: 600; color: var(--text-secondary); text-align: center; }
.remark-obs-matrix tbody th { text-align: left; font-weight: 500; }
.remark-obs-matrix td a { display: inline-block; min-width: 1.5rem; padding: 0.15rem 0.4rem; border-radius: 0.3rem; text-decoration: none; color: var(--text-primary); }
.remark-obs-matrix td a:hover { background: var(--surface-raised); }
.remark-obs-matrix td.remark-obs-matrix__zero a { color: var(--text-secondary); opacity: 0.4; }
.remark-obs-matrix td.remark-obs-matrix__actif a { background: color-mix(in srgb, var(--status-info, currentColor) 15%, transparent); font-weight: 600; }

/* Cartes d'observations. */
.remark-obs-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.75rem; }
.remark-obs-card { padding: 0.85rem 1rem; border: var(--border-width-1) solid var(--border); border-radius: 0.5rem; background: var(--surface); }
.remark-obs-card__titre { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; }
.remark-obs-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.remark-obs-tag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; background: var(--surface-raised); color: var(--text-secondary); }
.remark-obs-tag--portee { background: color-mix(in srgb, var(--text-secondary) 12%, transparent); color: var(--text-primary); }
.remark-obs-tag--niveau { background: color-mix(in srgb, var(--text-secondary) 8%, transparent); }
/* États — mêmes couleurs sobres que la charte des statuts de traitement. */
.remark-obs-etat--a_faire { background: color-mix(in srgb, var(--text-primary) 8%, transparent); color: var(--text-primary); }
.remark-obs-etat--a_arbitrer { background: color-mix(in srgb, var(--status-info, #7c6ee6) 15%, transparent); color: var(--status-info, #4c3fb0); }
.remark-obs-etat--en_partie, .remark-obs-etat--en_cours { background: color-mix(in srgb, var(--status-warning) 15%, transparent); color: var(--status-warning); }
.remark-obs-etat--deja_traite { background: color-mix(in srgb, var(--status-success) 15%, transparent); color: var(--status-success); }
.remark-obs-etat--ecarte { background: color-mix(in srgb, var(--text-secondary) 12%, transparent); color: var(--text-secondary); }
.remark-obs-card__section { margin: 0.5rem 0; }
.remark-obs-card__label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.15rem; }
.remark-obs-card__preuve { white-space: pre-wrap; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8125rem; }
.remark-obs-card__remarques { margin-top: 0.75rem; padding-top: 0.5rem; border-top: var(--border-width-1) dashed var(--border); }
.remark-obs-card__remarques summary { cursor: pointer; font-size: 0.875rem; color: var(--text-secondary); }
.remark-obs-card__remarques[open] summary { color: var(--text-primary); }
.remark-obs-card__remarques ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.remark-obs-card__remarques li { padding: 0.35rem 0.5rem; border-left: 2px solid var(--border); font-size: 0.8125rem; }
.remark-obs-card__remarques li a { text-decoration: none; color: var(--text-primary); font-weight: 500; }
.remark-obs-card__remarques li a:hover { text-decoration: underline; }
.remark-obs-card__remarques__meta { color: var(--text-secondary); font-size: 0.75rem; }

/* Modale d'un constat LISIBLE (interrupteur `ui.modale_constat_lisible`,
   retour Luc 30/09 19:02 : « les paragraphes sont illisibles, il n'y a pas
   les bons écarts, je ne comprends pas les catégories […] une origine, une
   source et accept this finding, c'est même pas très clair lequel »).
   Des intertitres qui SE VOIENT (petites capitales, filet, marge au-dessus),
   un texte au corps de lecture, les pièces en tableau, et la décision dans
   une bande teintée, distincte de la documentation. */
.finding-sheet__head { margin-bottom: var(--space-2); }
.finding-sheet__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.finding-sheet__kind, .finding-sheet__severity { border: var(--border-width-1) solid currentColor; border-radius: 999px; padding: 0 var(--space-2); font-size: var(--type-legende-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.finding-sheet__kind[data-kind="NC"], .finding-sheet__severity[data-severity="critique"] { color: var(--status-critical); }
.finding-sheet__kind[data-kind="WI"], .finding-sheet__severity[data-severity="majeure"] { color: var(--status-warning); }
.finding-sheet__kind[data-kind="Q"] { color: var(--status-pending); }
.finding-sheet__kind[data-kind="INFO"] { color: var(--status-info); }
.finding-sheet__severity[data-severity="mineure"] { color: var(--text-secondary); }
.finding-sheet__consequence { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--type-ui-compact-size); }
[data-modale-lisible="true"] .shape-finding__section { margin-top: var(--space-6); }
[data-modale-lisible="true"] .shape-finding__section-title { margin: 0 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: var(--border-width-1) solid var(--border); color: var(--text-secondary); font-size: var(--type-legende-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
[data-modale-lisible="true"] [data-shape-finding-message],
[data-modale-lisible="true"] [data-shape-finding-action-concrete] { max-width: 72ch; font-size: var(--type-body-size); line-height: 1.6; }
.finding-sheet__facts th[scope="row"] { width: 16rem; color: var(--text-secondary); font-weight: 600; }
/* Un fait lu AILLEURS que là où on l'attend (la donnée entre sur une autre
   fonction) : il est là, mais pas où il faudrait. */
.finding-sheet__facts td.is-elsewhere { color: var(--status-warning); font-weight: 700; }
.finding-sheet__cited { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.finding-sheet__times { margin-left: var(--space-1); color: var(--text-secondary); font-size: var(--type-legende-size); }
.finding-sheet__declaration { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: var(--border-width-1) solid var(--border); border-radius: var(--radius-card); }
.finding-sheet__declaration > summary { cursor: pointer; font-size: var(--type-ui-compact-size); font-weight: 600; }
[data-modale-lisible="true"] .shape-finding__details { margin-top: var(--space-6); }
[data-modale-lisible="true"] .shape-finding__details-summary { cursor: pointer; color: var(--text-secondary); font-size: var(--type-ui-compact-size); font-weight: 600; }
.finding-sheet__verdict { position: sticky; bottom: 0; z-index: 1; margin-top: var(--space-8); padding: var(--space-3) var(--space-4); border-top: var(--border-width-strong, 2px) solid var(--accent); border-radius: var(--radius-card); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.finding-sheet__verdict-title { margin: 0 0 var(--space-2); font-size: var(--type-body-size); font-weight: 700; }
.finding-sheet__verdict-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); margin: 0; }
.finding-sheet__confirm { min-height: 2.75rem; padding: var(--space-2) var(--space-4); border: 0; border-radius: .375rem; background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer; }
.finding-sheet__confirm:hover, .finding-sheet__confirm:focus-visible { background: var(--accent-hover); color: var(--on-accent-hover); }
.finding-sheet__reject > summary { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: var(--border-width-1) solid var(--border); border-radius: .375rem; background: var(--surface); cursor: pointer; list-style: none; }
.finding-sheet__reject > summary::-webkit-details-marker { display: none; }
.finding-sheet__reject-form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.finding-sheet__reject-form .shape-rail__verdict-motive { min-width: min(100%, 24rem); }
/* Un constat n'est pas une consultation de document : le lien « figures
   originales » de la fenêtre ne s'y ajoute pas. Le titre de la fenêtre est
   un titre, pas un identifiant cité. */
.elucidation__dialog:has(article[data-modale-lisible="true"]) > [data-documentary-figures-link] { display: none; }
.elucidation__dialog h2.is-plain, [data-registre-constat-dialog] h2.is-plain { font-family: inherit; }
/* La bande collée ne masque pas ce qui prend le focus (WCAG 2.4.11). */
dialog:has(.finding-sheet__verdict) { scroll-padding-bottom: 15rem; }
/* Téléphone : l'intitulé ne mange plus la colonne des valeurs, et la bande
   du verdict suit le texte au lieu de coller (elle prenait un tiers de
   l'écran, la moitié motif ouvert). */
@media (max-width: 600px) {
  .finding-sheet__facts th[scope="row"] { width: 40%; }
  .finding-sheet__verdict { position: static; }
  dialog:has(.finding-sheet__verdict) { scroll-padding-bottom: 0; }
}