/* ConformAI — feuille de style unique.
   Un seul thème, « Registre » (palette dans :root ci-dessous) ; seule variante : le
   contraste élevé, [data-theme="hc"] sur <html> — une mesure d'accessibilité, pas un goût. */

:root {
  /* Colonne du milieu des lignes de référentiel du tableau de bord : jauge OU statut. */
  --db-dir-milieu: 150px;
  /* Largeur du panneau de traitement (bas droite) : les pages dont le geste final est
     en bas à droite lui laissent la place (inscription, bug #31). */
  --proc-panel-l: 400px;
  /* Dossier clos (fil d'activité) : cadenas doré sur disque noir. */
  --clos-or: #E0B83A;
  --clos-fond: #16181D;
  /* Type */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Light theme */
  --bg: #F4F5F7;
  --bg-elev: #FFFFFF;
  --bg-sunken: #EEF0F3;
  --bg-hover: #E8EAEE;
  --line: #E1E3E8;
  --line-strong: #C6CAD2;
  --text: #1A1C20;
  --text-muted: #5C616B;
  --text-subtle: #646A74;   /* 4,5:1 sur le fond de survol (était #6E737D, 4,0) */

  /* Role accents (oklch, same chroma + L) */
  --accent-redacteur: #2D3038;
  --accent-redacteur-soft: #EEF0F3;
  --accent-redacteur-line: #C6CAD2;
  --accent-verificateur: #4D7C0F;
  --accent-verificateur-soft: #F2F8E6;
  --accent-verificateur-line: #A3E635;

  /* Category accents — file classification (picker, files panel) */
  /* Couleurs de catégorie — VIVES (20/09/2026). Elles portent la pastille du picto :
     une teinte assourdie y devenait boueuse. Clarté tenue entre 0,50 et 0,66 pour que
     le glyphe blanc (--cat-glyphe) reste lisible sur l'aplat. Le fond doux (-soft) est
     celui de l'étiquette, à peine teinté. */
  --cat-glyphe: oklch(1 0 0);
  --cat-blue:    oklch(0.55 0.19 255);  --cat-blue-soft:    oklch(0.95 0.05 255);
  --cat-teal:    oklch(0.56 0.13 190);  --cat-teal-soft:    oklch(0.95 0.05 190);
  --cat-indigo:  oklch(0.52 0.20 275);  --cat-indigo-soft:  oklch(0.95 0.05 275);
  --cat-violet:  oklch(0.54 0.21 305);  --cat-violet-soft:  oklch(0.95 0.05 305);
  --cat-green:   oklch(0.56 0.17 150);  --cat-green-soft:   oklch(0.95 0.05 150);
  --cat-orange:  oklch(0.63 0.19 55);   --cat-orange-soft:  oklch(0.95 0.06 55);
  --cat-cyan:    oklch(0.58 0.14 220);  --cat-cyan-soft:    oklch(0.95 0.05 220);
  --cat-rose:    oklch(0.58 0.20 15);   --cat-rose-soft:    oklch(0.95 0.05 15);
  --cat-amber:   oklch(0.66 0.17 80);   --cat-amber-soft:   oklch(0.95 0.06 80);
  --cat-gray:    oklch(0.50 0.02 260);  --cat-gray-soft:    oklch(0.93 0.008 260);
  --cat-sky:     oklch(0.57 0.16 235);  --cat-sky-soft:     oklch(0.95 0.05 235);
  --cat-purple:  oklch(0.52 0.22 290);  --cat-purple-soft:  oklch(0.95 0.05 290);
  --cat-red:     oklch(0.55 0.22 25);   --cat-red-soft:     oklch(0.95 0.05 25);

  /* Status */
  --ok: #4D7C0F;
  --ok-soft: #F2F8E6;
  --warn: #FFD400;
  --warn-soft: #FFF8CC;
  --err: #E11D48;
  --err-soft: #FDECF0;
  /* Texte d'état (lot 7) : une couleur d'état a deux usages — l'aplat ou le marqueur
     (--ok, --warn, --err, --info) et le texte, qui prend ces jetons-ci. Le texte ne
     prend jamais l'aplat : le jaune vif en texte tombait à 1,3:1. */
  --ok-texte: #4D7C0F;
  --warn-texte: #8F7700;   /* ocre : 4,0:1 sur le fond, 4,4 sur blanc (arbitrage du 21/09) */
  --err-texte: #BE123C;
  --info-texte: #0E6B64;
  --info: #0F766E;
  --info-soft: #E6F6F4;

  /* Default active accent — switches with role */
  --accent: var(--accent-redacteur);
  --accent-soft: var(--accent-redacteur-soft);
  --accent-line: var(--accent-redacteur-line);

  /* Surface & border (alias pratiques pour les composants p4-*) */
  --surface: #FFFFFF;
  --border: #E1E3E8;
  --bg-subtle: #F4F5F7;

  /* Sizing */
  --sidebar-w: 290px;
  --left-panel-w: 320px;
  /* Échelle typographique (lot 7) : huit crans nommés par leur rôle — aucune taille
     n'est écrite en dur ailleurs. */
  --t-mention: 11px;   /* étiquettes, en-têtes de colonnes, capitales */
  --t-meta: 12px;      /* dates, auteurs, aides */
  --t-liste: 13px;     /* lignes denses — corps par défaut */
  --t-texte: 14px;     /* paragraphes, champs de saisie */
  --t-section: 16px;   /* titres de section, titres de grille */
  --t-panneau: 18px;   /* titres de panneau, de modale */
  --t-page: 22px;      /* titre de page */
  --t-affiche: 28px;   /* chiffres clés, grands titres */
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 4px;
  --radius-bulle: 12px;  /* bulle de message : la correspondance se distingue du registre */
  /* Assistant (panneau ancré à droite, ContextChat) : la question en vert franc, texte blanc
     à 5,0:1 ; la largeur du panneau, posée par le composant quand il est ouvert. */
  --bulle-question: #4D7C0F;
  --assistant-l: 420px;
  --shadow-sm: none;
  --shadow: 0 1px 2px rgba(20, 22, 26, .06);
  --shadow-lg: 0 10px 30px rgba(20, 22, 26, .16);

  /* ── Échelle des modales (20/09/2026) ──────────────────────────────────────
     Une modale se pose SUR la page ; elle ne la remplace pas. On doit continuer
     de voir où l'on était — sans quoi ce n'est plus une modale, c'est une page
     qui a oublié de le dire. Cinq largeurs selon ce qu'il y a à lire, et une
     hauteur qui laisse toujours la page respirer au-dessus et en dessous.
     Les largeurs se prennent dans cette échelle plutôt que de s'inventer, et AUCUNE
     ne s'écrit en ligne dans le JSX. Les hauteurs, elles, ne se négocient pas :
     pas de `height` en vh, pas de plafond au-delà de --modale-haut-ample — sauf les
     écrans de travail posés en modale (--modale-haut-page, 25/09/2026). */
  --modale-etroite: 440px;   /* une question, une phrase, un champ */
  --modale:         560px;   /* un formulaire court : verdict, invitation, signalement */
  --modale-large:   760px;   /* une liste à parcourir : documents, composants */
  --modale-ample:  1040px;   /* deux colonnes : référence de cohérence, liste des ESP */
  --modale-travail: min(1280px, 94vw);   /* une exigence à traiter : sa fiche complète (parcours.jsx) */
  /* Hauteurs : un plafond en vh pour les petits écrans, un plafond en pixels pour
     les grands — sur un écran haut, 70 % de la fenêtre serait inutilement massif. */
  --modale-haut:       min(70vh, 620px);
  --modale-haut-ample: min(78vh, 760px);
  /* Écrans de travail posés en modale (Expertise, Exigences du référentiel, Droits
     d'accès — window.ModalePage) : ce sont des pages de côté, ancrées en haut ; elles
     prennent la hauteur disponible (bug #63), les autres modales gardent leurs crans. */
  --modale-haut-page:  min(92vh, 1000px);
  --rg-lime: #84CC16;
  --rg-lime-ink: #3F6212;
  --rg-warn-edge: #EBC100;
  --rg-topbar: #1C1E22;
  --scelle-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
}

[data-role="verificateur"] {
  --accent: var(--accent-verificateur);
  --accent-soft: var(--accent-verificateur-soft);
  --accent-line: var(--accent-verificateur-line);
}

[data-theme="hc"] {
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-sunken: #f4f4f4;
  --bg-hover: #e8e8e8;
  --line: #000000;
  --line-strong: #000000;
  --text: #000000;
  --text-muted: #1a1a1a;
  --text-subtle: #333333;
  --accent-redacteur: #003ea8;
  --accent-redacteur-soft: #e6efff;
  --accent-redacteur-line: #003ea8;
  --accent-verificateur: #5b1b8a;
  --accent-verificateur-soft: #f1e6ff;
  --accent-verificateur-line: #5b1b8a;

  /* High-contrast: flatten category accents to neutral — rely on icon+label, not hue */
  --cat-glyphe: #ffffff;
  --cat-blue: #000000;    --cat-blue-soft: #e8e8e8;
  --cat-teal: #000000;    --cat-teal-soft: #e8e8e8;
  --cat-indigo: #000000;  --cat-indigo-soft: #e8e8e8;
  --cat-violet: #000000;  --cat-violet-soft: #e8e8e8;
  --cat-green: #000000;   --cat-green-soft: #e8e8e8;
  --cat-orange: #000000;  --cat-orange-soft: #e8e8e8;
  --cat-cyan: #000000;    --cat-cyan-soft: #e8e8e8;
  --cat-rose: #000000;    --cat-rose-soft: #e8e8e8;
  --cat-amber: #000000;   --cat-amber-soft: #e8e8e8;
  --cat-gray: #000000;    --cat-gray-soft: #e8e8e8;

  --surface: #ffffff;
  --border: #000000;
  --bg-subtle: #f4f4f4;
  --ok: oklch(0.58 0.13 150);
  --ok-soft: oklch(0.95 0.04 150);
  --warn: oklch(0.82 0.16 90);
  --warn-soft: oklch(0.96 0.07 92);
  --err: oklch(0.58 0.18 25);
  --err-soft: oklch(0.96 0.04 25);
  --info: oklch(0.58 0.13 230);
  --info-soft: oklch(0.95 0.04 230);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 260 / 0.04), 0 1px 1px oklch(0.2 0.01 260 / 0.03);
  --shadow: 0 2px 6px oklch(0.2 0.01 260 / 0.06), 0 1px 2px oklch(0.2 0.01 260 / 0.04);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 260 / 0.10), 0 2px 6px oklch(0.2 0.01 260 / 0.05);
  --ok-texte: var(--ok); --warn-texte: var(--warn); --err-texte: var(--err); --info-texte: var(--info);
}

* { box-sizing: border-box; }
html { margin: 0; padding: 0; }

/* ============ NEW LAYOUT ============ */
.app2 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--bg);
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 52px;
  flex-shrink: 0;
  position: relative;
  z-index: 600;   /* au-dessus de la page Fichiers (.synth-page z-index 500) */ background: var(--rg-topbar, #1C1E22); color: #E6E7EA;
}
.topbar .brand-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}
.topbar .brand-mini .brand-mark {
  width: 26px;
  height: 26px;
  font-size: var(--t-liste);
  display: grid;
  place-items: center;
  background: var(--rg-lime, #84CC16); color: #1A1C20; border-radius: var(--radius-sm); font-weight: 700;
}
.topbar .brand-mini .brand-name { font-size: var(--t-section); font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.topbar-spacer { flex: 1; }

/* DossierPicker trigger dans la topbar (quand aucun dossier sélectionné) */
.topbar .dossier-picker-trigger {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: #E2E8F0;
}
.topbar .dossier-picker-trigger:hover { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.12); }

/* Dossier picker (top, replaces sidebar) */
.dossier-picker {
  position: relative;
}
.dossier-picker-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--radius);
  font-size: var(--t-liste);
  color: var(--text);
  min-width: 280px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.dossier-picker-trigger:hover { border-color: var(--line-strong); }
.dossier-picker-trigger.open {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dossier-picker-trigger .icon { font-size: var(--t-texte); opacity: 0.85; }
.dossier-picker-trigger .label {
  flex: 1;
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.dossier-picker-trigger .chev {
  color: var(--text-subtle);
  font-size: var(--t-meta);
  transition: transform 0.15s;
}
.dossier-picker-trigger.open .chev { transform: rotate(180deg); }
.dossier-picker-trigger .meta {
  font-size: var(--t-mention);
  color: var(--text-subtle);
  font-weight: 400;
  margin-left: 4px;
}

.dossier-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 380px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  overflow: hidden;
  animation: menu-in 0.14s ease-out;
  color: var(--text);
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.dossier-menu-header {
  padding: 12px 16px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.dossier-menu-header .h {
  font-size: var(--t-mention);
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: none;
  letter-spacing: 0;
}
.dossier-menu-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.dossier-menu-list {
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}
.dossier-menu-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--t-liste);
}
.dossier-menu-item:hover { background: var(--bg-hover); }
.dossier-menu-item.active { background: var(--accent-soft); }
.dossier-menu-item.active .name { color: var(--accent); font-weight: 600; }
.dossier-menu-item .name { font-weight: 500; }
.dossier-menu-item .meta-line {
  font-size: var(--t-mention);
  color: var(--text-subtle);
  margin-top: 1px;
}
/* Dossier archivé, montré par « Voir archivés » : en retrait, comme dans la page Fichiers. */
.dossier-menu-item--archive .name { color: var(--text-muted); }
.dossier-menu-footer {
  padding: 8px;
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  display: flex;
  gap: 4px;
}
.dossier-menu-footer .btn { flex: 1; }

/* Topbar dossier title (replaces crumb pill) */
.topbar .td-switch {
  font-size: var(--t-mention);
  color: #94A3B8;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  margin-left: 2px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.topbar .td-switch:hover { background: rgba(255,255,255,.10); color: #E2E8F0; border-color: rgba(255,255,255,.38); }
.topbar .td-switch:disabled { opacity: 0.4; cursor: not-allowed; }

/* Settings gear button + dropdown */
.settings-menu-wrap { position: relative; }
.td-gear {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #CBD5E1;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0; border-radius: var(--radius);
}
.td-gear:hover { background: rgba(255,255,255,.12); color: #fff; }
.td-gear.settings-active { background: rgba(14,165,233,.18); color: #7DD3FC; }
.settings-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 210px;
  z-index: 600;
  overflow: hidden;
}
.settings-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: var(--t-liste);
  color: var(--text);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.1s;
}
.settings-dropdown-item:hover { background: var(--bg-hover); }
.settings-dropdown-item.active { color: var(--accent); font-weight: 600; }
.settings-dropdown-sep { height: 1px; margin: 4px 0; background: var(--border, #e2e8f0); }
.settings-dropdown-item.danger { color: var(--err, #dc2626); }
.settings-dropdown-item.danger:hover { background: rgba(220,38,38,.10); }
.chev-tiny { font-size: var(--t-mention); color: var(--text-subtle); margin-left: 2px; }

/* Collapsed history toggle + GitHub-style graph */

.history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-radius: 0;
  font-size: var(--t-liste);
  color: var(--text);
  width: 100%;
  text-align: left;
  transition: background 0.12s;
}
.history-toggle:hover { background: var(--bg-sunken); }

/* ── Bouton onglet « Accueil » dans le header ─────────────────────────────── */
.nav-tab {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
  padding: 6px 16px; border: 0; background: transparent;
  color: #E2E8F0; font-size: var(--t-liste); font-weight: 500; cursor: pointer;
  border-radius: var(--radius); transition: color .12s, background .12s;
}
.nav-tab:hover { color: var(--bg); background: rgba(255,255,255,.06); }
.nav-tab.active {color: #000;background: var(--bg);border-radius: 0;}
.nav-tab-ico { font-size: var(--t-section); }
.nav-tab-ico--flex { display: inline-flex; }

/* ── Sous le header : ligne dossier + intercalaires référentiels ──────────── */
.ref-shell { flex-shrink: 0; background: var(--bg-elev); border-bottom: 1px solid var(--line); padding: 8px 24px 0; }
.dossier-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dossier-header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Indexation du dossier, en haut à droite de la ligne « Dossier » */
.dossier-row-index { margin-left: auto; font-size: var(--t-meta); color: var(--text-muted); white-space: nowrap; }
.dossier-picker-trigger.big { min-width: 280px; padding: 4px 10px; font-size: var(--t-section); font-weight: 600; }
.dossier-picker-trigger.big .label { font-size: var(--t-section); font-weight: 600; }

/* Intercalaires (onglets dossier façon classeur) : un par référentiel */
.ref-tabs { display: flex; align-items: stretch; gap: 4px; margin-bottom: -1px; }  /* onglets de même hauteur */
.ref-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; border: 1px solid var(--line); border-top-width: 2px; background: var(--bg-sunken); color: var(--text-muted);
  font-size: var(--t-liste); font-weight: 600; cursor: pointer; position: relative;
  transition: background .12s, color .12s; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.ref-tab:hover { background: var(--bg-hover); color: var(--text); }
.ref-tab.active { background: transparent; color: var(--text); font-weight: 700; border: 0; z-index: 1; }
.ref-tab-l { line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; }
.ref-tab-s { font-size: var(--t-mention); color: var(--text-subtle); line-height: 1; }
/* statut de vérification du référentiel : liseré coloré en haut de l'intercalaire */
.ref-tab.d-pill--none           { border-top-color: var(--line); }
/* onglet-invite : aucune référence engagée, rien à vérifier encore → intercalaire en pointillés */
.ref-tab--invite {
  border-style: dashed; border-top-width: 1px; background: transparent;
  color: var(--text-subtle); font-weight: 500;
}
.ref-tab--invite:hover { background: var(--bg-hover); color: var(--text-muted); }
/* Produit sans périmètre (#251) : tous les référentiels outillés se proposent — la rangée
   passe à la ligne plutôt que de déborder, et l'invite garde sa largeur. */
.ref-tabs.ref-tabs--choix { flex-wrap: wrap; row-gap: 4px; }
.ref-tabs--choix .ref-tab--invite { flex-shrink: 0; }

/* ── Jauge globale (modèle db-jauge) dans l'en-tête vérification ───────────── */
.global-jauge { flex: 1; min-width: 0; }
.global-jauge .db-jauge { width: 100%; }

/* Pseudo et déconnexion dans le bandeau : même clarté que la roue crantée */
.topbar .btn.subtle.td-user { color: #CBD5E1; }
.topbar .btn.subtle.td-user:hover,
.topbar .btn.subtle.td-logout:hover,
.topbar .btn.subtle.td-user.active { color: #FFFFFF; background: rgba(255,255,255,.12); }
.topbar .btn.subtle.td-logout { color: #CBD5E1; font-size: var(--t-section); }

/* Ligne d'identité, sous le bandeau, sur toutes les pages : initiales à l'accent du côté
   (fabricant / organisme), nom, rôle en étiquette, structure. Même fond que la page, pour
   que l'onglet actif du bandeau s'y prolonge. Une ligne, jamais deux : la structure
   s'abrège la première. */
.ligne-identite {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0;
  padding: 4px 20px; background: var(--bg); border-bottom: 1px solid var(--line);
  font-size: var(--t-meta); line-height: 1.2; color: var(--text-muted); white-space: nowrap;
}
.ligne-identite-initiales {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--accent-line); border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--t-mention); font-weight: 700; line-height: 1;
}
.ligne-identite-nom { color: var(--text); font-weight: 600; }
.ligne-identite-role {
  padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--text-muted); font-weight: 500;
}
.ligne-identite-structure { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 500; }
.ligne-identite-structure::before { content: "·"; margin-right: 6px; color: var(--text-subtle); }
.ligne-identite-structure svg { vertical-align: -2px; margin-right: 2px; }

/* Page (single column) */
.page {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
}

/* Page header (under tabs) */
.page-header {
  padding: 24px 32px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  max-width: 1400px;
  width: 100%;   /* dans un parent en flex colonne (modale Référence), un sous-titre court ne le rétrécit pas */
  margin: 0 auto;
}
.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
/* Barre de filtre produits (vérificateur) : puces de sélection multiple à côté du titre. */
.page-title-block { min-width: 0; flex: 1; }
.page-title {
  font-size: var(--t-page);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
.page-subtitle {
  font-size: var(--t-liste);
  color: var(--text-subtle);
  margin-top: 4px;
}
/* Ligne d'explication sous le sous-titre : dit à quoi sert la page, pas ce qu'elle contient.
   Mesure bornée pour rester lisible sur un large écran. */
.page-note {
  margin-top: 6px;
  max-width: 68ch;
  font-size: var(--t-meta);
  line-height: 1.45;
  color: var(--text-subtle);
}
.page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Page body container */
.page-body {
  padding: 20px 32px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Empty page (no dossier) */
.page-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
}

/* Settings sub-tabs (for Exigences/Réglages context) */

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  background: var(--bg);
  color: var(--text);
  font-size: var(--t-texte);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
button:disabled { cursor: not-allowed; opacity: 0.5; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ---------- Sidebar ---------- */
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--accent);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 600;
  font-size: var(--t-liste);
  letter-spacing: -0.02em;
  transition: background 0.2s;
}
.brand-name {
  font-weight: 600;
  font-size: var(--t-section);
  letter-spacing: -0.02em;
  color: var(--text);
}

.dossier {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}
.dossier:hover { background: var(--bg-hover); }
.dossier.active {
  background: var(--accent-soft);
}

.badge {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid currentColor;
}
.badge.indexed { color: var(--ok-texte); }
.badge.unindexed { color: var(--text-subtle); }

/* ---------- Main ---------- */
.tab {
  padding: 16px 16px 12px;
  font-size: var(--t-liste);
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- Buttons & inputs ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: var(--t-liste);
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text);
  transition: all 0.12s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn.primary:hover {
  filter: brightness(1.08);
}
.btn.subtle {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn.subtle:hover { background: var(--bg-hover); color: var(--text); }
.btn.danger:hover { background: var(--err-soft); border-color: var(--err); color: var(--err-texte); }
.btn.ok { color: var(--ok-texte); }
.btn.ok:hover { background: var(--ok-soft); border-color: var(--ok); }
.btn.sm { padding: 6px 10px; font-size: var(--t-meta); }

.input, .select {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text);
  font-size: var(--t-liste);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------- Pills / badges ---------- */
.pill {
  white-space: nowrap;
}
.pill.ok { color: var(--ok-texte); }
.pill.ok.cond { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }   /* F6 : validé sous conditions */
.pill.err { color: var(--err-texte); }
.pill.info { color: var(--info-texte); }
.pill.neutral { color: var(--text-muted); }
.pill.outline { color: var(--text-muted); }
.pill.na { color: var(--text-muted); font-style: italic; }

/* Scrollbar utility */
.scroll { overflow-y: auto; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius); }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- Verification tab ---------- */
.field-label {
  font-size: var(--t-meta);
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}
@keyframes progress-indeterminate {
  0%   { transform: translateX(-100%) scaleX(0.4); }
  50%  { transform: translateX(25%)   scaleX(0.6); }
  100% { transform: translateX(200%)  scaleX(0.4); }
}

/* ---------- Right panel: results ---------- */

.amber-strip {
  margin: 12px 32px 0;
  border: 1px solid oklch(0.85 0.10 75);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 8px;
  padding: 0 12px 10px;
  border-radius: var(--radius-sm);
  border-width: 1px;
  border-style: solid;
  background: var(--bg-elev);
  color: var(--text);
  font-size: var(--t-liste);
  border-color: var(--rg-warn-edge);
}
.amber-strip .ico { font-size: var(--t-texte); flex-shrink: 0; line-height: 1.2; color: var(--text); }

/* Bandeau « dépendance modifiée » (issue #50) — marqueur non destructif au re-run.
   Teinte d'alerte (rouge doux) distincte de la contradiction, sans action automatique. */
.dep-alert-strip {
  margin: 0;
  border: 1px solid var(--err);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 8px;
  padding: 0 12px 10px;
  border-radius: var(--radius-sm);
  border-width: 1px;
  border-style: solid;
  background: var(--bg-elev);
  color: var(--text);
  font-size: var(--t-liste);
  border-color: var(--err);
}
.dep-alert-strip .ico { flex-shrink: 0; line-height: 1.2; color: var(--text); }
.dep-alert-link {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
  padding: 0 6px;
  border: 1px solid var(--err);
  border-radius: var(--radius);
  background: transparent;
  color: var(--err-texte);
  font-size: var(--t-mention);
  font-weight: 700;
  font-family: var(--font-mono);
  cursor: pointer;
}
.dep-alert-link:hover { background: var(--err-soft); }
.dep-alert-note { margin-top: 6px; color: var(--text-subtle); font-size: var(--t-meta); line-height: 1.45; }

/* Requirement card */
.req {
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s, opacity 0.12s;
}
/* F6 (#160) : validé sous conditions — carte verte à liseré ambre */
.req.status-valide.sous-conditions { box-shadow: inset 0 0 0 2px var(--warn); }

/* Exigence dépliée (tous statuts) : pas de fond, pleine largeur, sans arrondis.
   Seule la couleur de la bordure gauche distingue le statut (ok / warn / err / valide). */
.req.open.status-ok,
.req.open.status-warn,
.req.open.status-valide,
.req.open.status-err {
  width: 100%;
}
.req.open.status-ok .req-body,
.req.open.status-warn .req-body,
.req.open.status-valide .req-body,
.req.open.status-err .req-body { background: transparent; }

.req-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none; font-family: var(--font-sans);
}
.req-status-dot {
  flex-shrink: 0;
}
.req-id-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.req-article {
  font-size: var(--t-meta);
  color: var(--text-subtle);
}
.req-title {
  font-size: var(--t-texte);
  font-weight: 500;
  color: var(--text);
  margin-top: 2px;
  letter-spacing: -0.005em;
}
.req-doc {
  font-size: var(--t-meta);
  color: var(--text-subtle);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Lien vers le fichier source (bug #56) : une étiquette discrète — cadre fin, picto document,
   œil de la visionneuse à droite —, qui s'éclaire au survol ; même taille que le texte méta. */
.req-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.req-doc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* « Changer » à côté du document retenu (bug #76) : même ligne, même hauteur que l'étiquette. */
.req-doc-changer { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 2px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent;
  color: var(--text-muted); font-size: var(--t-meta); cursor: pointer; }
.req-doc-changer:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.req-doc-voir { color: var(--text-subtle); opacity: 0; transition: opacity 0.12s; }
.req-doc-link:hover .req-doc-voir, .req-doc-link:focus-visible .req-doc-voir { opacity: 1; }
/* Icônes SVG (icons.jsx) : ne se déforment jamais dans un conteneur flex */
.icon-svg { flex: 0 0 auto; }
.req-doc-link .icon-svg { color: var(--text-subtle); flex-shrink: 0; }
.req-doc-link:hover { border-color: var(--accent-line); background: var(--accent-soft); text-decoration: none; }
.req-doc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Section « Actions requises » — titre + aperçu */
.actions-title { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.actions-warn-ico { color: var(--err-texte); flex-shrink: 0; }
.actions-detail-link { font-size: var(--t-mention); font-weight: 400; color: var(--accent); margin-left: 4px; }
.actions-preview {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--t-meta);
  color: var(--text);                /* texte noir, plus le jaune */
  border: 1px solid var(--border);   /* bordure neutre */
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-top: 6px;
}

.banque-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent, #1a73e8);
  font-size: var(--t-mention);
  font-weight: 600;
  white-space: nowrap;
}
.banque-badge.expired {
  background: var(--warn-soft);
  color: var(--warn, #e0a000);
}

/* ── Catégories de documents : badge icône + couleur (source: categories.js) ── */
.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 4px;
  border: 0;
  font-size: var(--t-mention);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.45;
  background: var(--cat-douce);
  color: var(--cat-vive);
}
/* Le picto d'une catégorie est porté par une PASTILLE pleine de sa couleur vive, ronde.
   C'est elle qui donne la couleur ; l'étiquette reste sobre et SANS contour — deux
   traits colorés (aplat + bordure) autour d'un même mot font du bruit, pas du sens. */
.cat-badge > .icon-svg {
  width: 12px; height: 12px; padding: 4px; border-radius: 50%; flex-shrink: 0;
  background: var(--cat-vive); color: var(--cat-glyphe); stroke-width: 2;
}
/* Sans étiquette, la pastille est le badge : rien autour d'elle. */
.cat-badge.icon-only { padding: 0; background: none; }
.cat-badge.icon-only > .icon-svg { width: 13px; height: 13px; padding: 4px; }
/* Une classe par couleur : elle publie sa teinte vive et son fond doux, les règles
   ci-dessus s'écrivent alors une seule fois. */
.cat-blue   { --cat-vive: var(--cat-blue);   --cat-douce: var(--cat-blue-soft); }
.cat-teal   { --cat-vive: var(--cat-teal);   --cat-douce: var(--cat-teal-soft); }
.cat-indigo { --cat-vive: var(--cat-indigo); --cat-douce: var(--cat-indigo-soft); }
.cat-violet { --cat-vive: var(--cat-violet); --cat-douce: var(--cat-violet-soft); }
.cat-green  { --cat-vive: var(--cat-green);  --cat-douce: var(--cat-green-soft); }
.cat-orange { --cat-vive: var(--cat-orange); --cat-douce: var(--cat-orange-soft); }
.cat-cyan   { --cat-vive: var(--cat-cyan);   --cat-douce: var(--cat-cyan-soft); }
.cat-rose   { --cat-vive: var(--cat-rose);   --cat-douce: var(--cat-rose-soft); }
.cat-amber  { --cat-vive: var(--cat-amber);  --cat-douce: var(--cat-amber-soft); }
.cat-gray   { --cat-vive: var(--cat-gray);   --cat-douce: var(--cat-gray-soft); }
.cat-sky    { --cat-vive: var(--cat-sky);    --cat-douce: var(--cat-sky-soft); }
.cat-purple { --cat-vive: var(--cat-purple); --cat-douce: var(--cat-purple-soft); }
.cat-red    { --cat-vive: var(--cat-red);    --cat-douce: var(--cat-red-soft); }

/* ── En-tête de section de catégorie (groupe dans liste/overlay) ── */
.cat-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 6px;
  margin-top: 6px;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
}
.cat-section-header:first-child { margin-top: 0; border-top: none; }
.cat-section-header .count { font-weight: 400; color: var(--text-subtle); }

/* Section épinglée "Retenu par l'IA" — toujours en tête du picker */
.ai-pick-section-header {
  color: var(--accent);
  border-top: none;
}
.ai-pick-section-header .icon-svg { color: var(--accent); }

/* ── Ligne de fichier unique (window.FileRow) ── */
.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
}
.file-row--cliquable { cursor: pointer; }
.file-row[draggable="true"] { cursor: grab; user-select: none; }
.file-row input[type="checkbox"] { flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }
.file-row.previewed { background: var(--bg-hover); }
.file-row.dragging { opacity: 0.35; }
.file-row .file-expire { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-mention); color: var(--warn-texte); }
/* Densité de la bibliothèque (page Vérification) : lignes serrées, gestes révélés au survol. */
.file-row--dense { gap: 8px; padding: 6px 10px; font-size: var(--t-meta); flex-wrap: wrap; }
/* Le nom garde toujours de quoi se lire : les pastilles d'exigence passent à la ligne. */
.file-row.file-row--dense .file-main { flex-basis: 8em; }
.file-row--dense > .file-actions { order: 1; }
.file-row--dense > .classif-assign-badge,
.file-row--dense > .classif-anomaly-badge,
.file-row--dense > .ai-pick-badge { order: 2; }
.file-row--dense .file-name { font-size: var(--t-meta); }
.file-row--dense .file-action-btn { width: 22px; height: 22px; }
.file-row--dense .file-actions { opacity: 0; }
.file-row--dense:hover .file-actions,
.file-row--dense:focus-within .file-actions { opacity: 1; }
/* Éditeur de métadonnées posé à la place de la ligne (window.FileMetaEditRow). */
.file-row.file-meta-edit { flex-direction: column; align-items: stretch; gap: 6px; cursor: default; }
.file-meta-edit .file-name { font-style: italic; }
.file-meta-edit .input { font-size: var(--t-meta); }
.file-meta-edit-gestes { display: flex; gap: 6px; }
.file-row:hover { background: var(--bg-hover); }
.file-row.selected {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.file-row .file-icon { flex: 0 0 auto; }
.file-row .file-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 1px; }
.file-row .file-name {
  font-size: var(--t-liste);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-row .file-name.dim { color: var(--text-subtle); }
.file-row .file-sub {
  font-size: var(--t-mention);
  color: var(--text-subtle);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-row.dimmed { opacity: 0.5; }
.file-row.dimmed:hover { opacity: 0.75; }
.file-row .file-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.file-row .file-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: transparent; border: none; color: var(--text-subtle); cursor: pointer;
}
.file-row .file-action-btn:hover { background: var(--bg-elev); color: var(--accent); }
.file-row .file-action-btn.danger:hover { background: var(--err-soft); color: var(--err-texte); }

/* Badge "retenu par l'IA" — plein, distinct du flux texte */
.ai-pick-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--accent);
  color: var(--bg-elev);
  font-size: var(--t-mention);
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}
.ai-pick-badge .icon-svg { width: 12px; height: 12px; }

/* ── Barre de filtres : recherche + chips de catégorie ── */
.file-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px 10px;
}
.file-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1.5px solid var(--accent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.file-search .icon-svg { color: var(--accent); }
.file-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--t-liste);
  color: var(--text);
  font-family: var(--font-sans);
}
.file-search input::placeholder { color: var(--text-muted, var(--text-subtle)); }
.sort-select {
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-subtle);
  font-size: var(--t-mention);
  font-family: var(--font-sans);
  padding: 2px 4px;
  cursor: pointer;
  outline: none;
}
.sort-select:focus { border-color: var(--accent); color: var(--text); }
.file-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* À gauche, la pastille du picto touche presque le bord : c'est elle qui porte la
     couleur de la catégorie, le contour de la puce reste gris. */
  padding: 4px 12px 4px 6px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text-muted);
  font-size: var(--t-meta);
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  border-radius: var(--radius-sm);
}
.file-chip:hover { border-color: var(--accent-line); color: var(--text); }
.file-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-elev);
}
.file-chip.active > .cat-badge > .icon-svg { box-shadow: 0 0 0 1.5px var(--bg-elev); }
.file-chip .count { opacity: 0.75; font-weight: 400; }
/* Puces rangées par groupe documentaire (CategoriesDocumentaires.ranger) : une ligne par
   groupe, son libellé numéroté dans une colonne commune pour que les puces s'alignent d'un
   groupe à l'autre. Rangement pas encore chargé : une seule ligne sur toute la largeur.
   La bascule se règle sur la largeur de la barre (conteneur), pas sur celle de l'écran :
   la page Fichiers est étroite à côté de son panneau, le sélecteur de documents large. */
.file-chip-rangement { container-type: inline-size; }
.file-chip-groupes {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 12px;
  align-items: start;
}
.file-chip-groupe-titre {
  /* centré sur la première ligne de puces (hauteur d'une puce ≈ 26 px) */
  padding-top: 6px;
  font-size: var(--t-meta);
  font-weight: 700;
  color: var(--text-muted);
}
.file-chip-row--plat { grid-column: 1 / -1; }
@container (max-width: 640px) {
  /* Étroit : le libellé passe au-dessus de ses puces, qui reprennent toute la largeur. */
  .file-chip-groupes { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ── Overlay / popover du sélecteur de documents ── */
.doc-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 16px;
}
.doc-overlay-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Avis de l'IA en un seul indicateur : le marqueur de forme (.req-status-dot) puis le score. */
.req-score {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--t-liste);
  text-align: right;
  min-width: 40px;
}
.req-score.ok { color: var(--ok-texte); }
.req-score.err { color: var(--err-texte); }
.req-score.na { color: var(--text-muted); font-style: italic; }
/* Non-applicable — hors de l'étude */
.req.na {
  opacity: 0.65;
}
.req.na:hover { opacity: 0.85; }
.req.na .req-title { color: var(--text-muted); font-style: italic; }
.req.na .req-doc   { opacity: 0.6; }
.req-status-dot.na { background: var(--line-strong); }
.req-chevron {
  color: var(--text-subtle);
  transition: transform 0.18s;
}
.req.open .req-chevron { transform: rotate(90deg); }

.req-body {
  border-top: 1px solid var(--line);
  padding: 20px 24px 20px;
  background: var(--bg-sunken);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.req-section h4 {
  margin: 0 0 8px; font-size: var(--t-texte); font-weight: 600; color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.req-section p { margin: 0 0 6px; font-size: var(--t-liste); color: var(--text); }

.checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--t-liste);
}
.checklist .item-status {
  margin-top: 1px;
  white-space: nowrap;
}
.checklist .item-status.present { color: var(--ok-texte); }
.checklist .item-status.absent { color: var(--err-texte); }
/* F3 (#160) : élément hors champ — gris, hors score, sans action */
.checklist .item-status.horschamp { color: var(--text-muted); font-style: italic; }
.checklist li.hors-champ-element { opacity: .75; }
.checklist li.hors-champ-element .item-label { color: var(--text-muted); }
.hors-champ-motif { font-size: var(--t-meta); color: var(--text-subtle); font-style: italic; margin-top: 2px; }
/* F3 (#160) : périmètre déclaré, résolu par directive (page Référence) */
.ref-perimetre-resolu { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ref-perim-ligne { display: inline-flex; align-items: center; gap: 6px; }
.ref-perim-chip { font-size: var(--t-mention); padding: 1px 8px; border-radius: var(--radius-sm); border: 1px solid currentColor; }
.ref-perim-chip.ok { color: var(--ok-texte); }
.ref-perim-chip.warn { color: var(--warn-texte); }
.checklist .item-label { color: var(--text); font-weight: 500; }

/* Ligne héritée d'une dépendance "→ Voir EXIG-ID" (issue #49) — lecture seule.
   Liseré gauche + fond léger pour la distinguer d'un élément vérifié en propre. */
.checklist .inherited-element {
  display: flex;
  gap: 10px;
  align-items: start;
  padding: 8px 12px;
  font-size: var(--t-liste);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
}
.inherited-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  font-size: var(--t-mention);
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 0.1s, background 0.1s;
}
.inherited-link:hover { border-color: var(--accent); background: var(--accent-soft, var(--bg-elev)); }
.inherited-attente {
  font-size: var(--t-meta);
  margin-top: 4px;
  font-style: italic;
  color: var(--warn-texte);
}

/* Lien "Demander une clarification" par élément */
/* F2 (#148) — pool d'un élément (catégorie documentaire surchargée) et sélecteur par élément */
.elem-pool {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-subtle);
  font-size: var(--t-mention);
  font-weight: 500;
  vertical-align: middle;
}
/* Les gestes offerts sur un élément : choisir son document, retirer le forçage. */
.elem-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* Gestes d'un élément (passages surlignés, choisir le document…) : une ligne, une hauteur
   commune (bug #73). */
.item-gestes { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-top: 6px; }
.item-gestes:empty { display: none; }
.item-gestes .elem-actions { align-items: stretch; }
.item-gestes .clarif-ask-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 0; }
.checklist .item-gestes .item-source--cta { margin-top: 0; }
/* Exigence « liste » : pas de document par élément — la phrase dit où l'associer (vue par
   composant), le bouton l'ouvre. */
.liste-renvoi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--bg-sunken); }
.liste-renvoi-texte { flex: 1 1 240px; font-size: var(--t-meta); color: var(--text-muted); }

.clarif-ask-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-subtle);
  font-size: var(--t-mention);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.clarif-ask-btn:hover { border-color: var(--warn); background: var(--warn-soft); color: var(--warn-texte); }
.clarif-ask-btn.has-q { border-color: var(--warn); background: var(--warn-soft); color: var(--warn-texte); }

/* Bloc Q&A clarification */
.clarif-block {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: var(--t-meta);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border-color: var(--rg-warn-edge);
  border-top: 3px solid var(--warn);
}
.clarif-label { font-size: var(--t-mention); font-weight: 700; margin-bottom: 4px; text-transform: none; letter-spacing: 0; color: var(--warn-texte); }
.clarif-q { color: var(--text); font-weight: 500; line-height: 1.45; }
.clarif-r { color: var(--ok-texte); margin-top: 6px; line-height: 1.45; }
.clarif-reply { margin-top: 6px; }
.checklist .item-cite {
  font-size: var(--t-liste);
  color: var(--text);
  margin-top: 2px;
  font-family: var(--font-sans);
  font-style: italic;
  line-height: 1.45;
  white-space: pre-wrap;
}
.checklist .item-cite-more {
  margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-meta); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;     
	display: block;
    text-align: center;
    width: 100%; color: var(--text);
}
.checklist .item-cite-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.checklist .item-remarque {
  font-size: var(--t-meta);
  margin-top: 4px;
  line-height: 1.45;
  color: var(--warn-texte);
}
/* La remarque d'un élément absent se lit en rouge : cette règle suit la couleur de base. */
.checklist .item-remarque--absent { color: var(--err-texte); }
/* Passage indiqué devenu caduc (#312) : la pièce désignée a changé, à indiquer de nouveau. */
.checklist .item-remarque--caduc { color: var(--warn-texte); font-weight: 600; }
.checklist .item-source {
  font-size: var(--t-mention);
  color: var(--accent);
  font-family: var(--font-mono);
  margin-top: 4px;
  word-break: break-all;
}

/* Source PDF : « voir les passages surlignés » — un lien d'appoint sous l'élément, pas plus
   présent que le nom du document (retour de Fred, 24/09/2026 : il le dominait). */
.checklist .item-source--cta {
  /* flex (bloc) + largeur au contenu : toujours sur sa propre ligne, jamais à côté du loc-badge */
  display: flex; width: fit-content; align-items: center; gap: 6px; max-width: 100%;
  margin-top: 6px; padding: 2px 8px 2px 2px;
  border: 1px solid var(--accent); background: var(--bg-elev);
  font: inherit; text-align: left; word-break: normal; cursor: pointer;
  transition: background .12s, box-shadow .12s; border-color: var(--rg-lime); border-radius: var(--radius-sm);
}
.checklist .item-source--cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.checklist .item-source--cta .isc-ico {
  width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--rg-lime); color: #1A1C20;
}
.checklist .item-source--cta .isc-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.checklist .item-source--cta .isc-lbl { font-family: var(--font-sans); font-size: var(--t-meta); font-weight: 500; color: var(--rg-lime-ink); }
.checklist .item-source--cta .isc-file {
  font-family: var(--font-mono); font-size: var(--t-mention); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.checklist .item-source--cta .isc-go { flex-shrink: 0; transition: transform .12s; color: var(--rg-lime-ink); }
.checklist .item-source--cta:hover .isc-go { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .checklist .item-source--cta .isc-go { transition: none; } }

.req-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
/* Exigence validée : mention « Validé par … le … » à la place des boutons */
.req-valide-info { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-liste); font-weight: 600; color: var(--ok-texte); flex-wrap: wrap; }
/* F6 (#160) : conditions et restrictions d'un verdict sous conditions, sous le sceau */
.req-conditions { margin: 4px 0 0; padding-left: 20px; font-size: var(--t-meta); font-weight: 400; color: var(--text); flex-basis: 100%; }
.req-conditions li { margin: 2px 0; }
.req-conditions b { color: var(--warn-texte); }
.btn.btn-cond { border-color: var(--warn); }
/* Élément reporté de l'acte précédent (condition-<n> / restriction-<n>) */
.elem-reporte { display: inline-block; margin-left: 6px; font-size: var(--t-mention); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 0 6px; border-radius: var(--radius); border: 1px solid var(--warn); color: var(--warn-texte); }
/* Note « instruction réservée à l'instructeur » affichée au décideur (séparation des rôles). */
.req-note-decideur { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-meta); font-weight: 500; color: var(--text-muted); font-style: italic; }
/* Note « Non applicable » (décision vérificateur) affichée au rédacteur — lecture seule. */
.req-na-info { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-meta); font-weight: 500; color: var(--text-muted); font-style: italic; }
/* « Soumettre à validation » : action d'avancement → fond vert. */
.btn.btn-submit-green { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.btn-submit-green:hover { background: var(--ok); border-color: var(--ok); color: #fff; filter: brightness(1.07); }

/* ---------- Chat tab ---------- */
.chat-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 880px;
  margin: 0 auto;
}
.chat-header {
  padding: 20px 32px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-header .h {
  font-size: var(--t-liste);
  color: var(--text-subtle);
}
.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.chat-msg { display: flex; gap: 12px; max-width: none; }
.chat-msg.user {
  margin-left: auto;
  flex-direction: row-reverse;
}
.chat-msg.user .body {
  border: 1px solid var(--accent-line);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent-verificateur-soft);
  border-color: var(--line-strong);
}
.chat-msg.user .role-label { text-align: right; color: var(--accent); }
.chat-msg.assistant .body {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
}

.chat-msg .avatar {
  width: 26px;
  height: 26px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: var(--t-mention);
  color: var(--text-muted);
  flex-shrink: 0;
  font-weight: 600;
  align-self: flex-end;
  margin-bottom: 2px; border-radius: var(--radius-sm);
}
.chat-msg.user .avatar {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.chat-msg.assistant .avatar {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
.chat-msg .body { flex: 1; min-width: 0; }
.chat-time { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; }

/* Topic separator */
.chat-topic-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px auto 6px;
  padding: 0 4px;
  width: 100%;
  max-width: 460px;
}
.chat-topic-sep::before,
.chat-topic-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.chat-topic-date {
  font-size: var(--t-mention);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.chat-topic-label {
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.chat-msg .role-label {
  font-size: var(--t-mention);
  color: var(--text-subtle);
  margin-bottom: 4px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.chat-msg .text { font-size: var(--t-texte); line-height: 1.45; color: var(--text); }
.chat-msg .text p { margin: 0 0 8px; }
.chat-msg .text p:last-child { margin-bottom: 0; }

.chat-sources {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-source {
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: var(--t-meta);
}
.chat-source-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-mention);
  color: var(--text-subtle);
  margin-bottom: 6px;
}
.chat-source-head .file { color: var(--accent); text-decoration: none; cursor: pointer; }
.chat-source-head .file:hover { text-decoration: underline; }
.chat-source-text { color: var(--text-muted); line-height: 1.45; }
.chat-source-text mark {
  background: oklch(0.93 0.07 90);
  padding: 0 2px;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.chat-input-wrap {
  padding: 12px 32px 20px;
  flex-shrink: 0;
}
.chat-input-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  padding: 8px 8px 8px 16px;
  display: flex;
  align-items: end;
  gap: 8px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.chat-input-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.chat-textarea {
  flex: 1;
  border: none;
  resize: none;
  background: transparent;
  outline: none;
  font-size: var(--t-texte);
  line-height: 1.45;
  padding: 8px 0;
  color: var(--text);
  max-height: 160px;
  min-height: 22px;
}
.chat-textarea::placeholder { color: var(--text-subtle); }
.chat-send {
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: var(--accent);
  color: white;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.chat-send:disabled { background: var(--bg-sunken); color: var(--text-subtle); }
.chat-hint {
  font-size: var(--t-mention);
  color: var(--text-subtle);
  margin-top: 6px;
  text-align: right;
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px;
  text-align: center;
}
.empty-state .ico {
  width: 48px;
  height: 48px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: var(--t-page);
  color: var(--text-subtle);
  margin-bottom: 4px; border-radius: var(--radius);
}
.empty-state h3 { margin: 0; font-size: var(--t-section); font-weight: 600; color: var(--text); }
.empty-state p { margin: 0; font-size: var(--t-liste); color: var(--text-muted); max-width: 320px; }

/* ---------- Registre : dossiers repliables + grille d'exigences ---------- */
/* En-tête du registre : le bloc de titre porte une phrase d'explication, pas seulement un
   libellé. Sans base de flex, il se laissait comprimer par les actions (sélecteur + boutons,
   non rétractables) jusqu'à une colonne de 270 px où la phrase se hachait sur six lignes.
   Avec une base de 360 px, la rangée passe les actions à la ligne au lieu d'écraser le texte. */
.reg-header .page-title-block { flex: 1 1 360px; }

.reg-dossier {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
}
.reg-dossier-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  flex-wrap: wrap;
}
.reg-dossier-head:hover { background: var(--bg-sunken); }
.reg-chevron { flex: none; color: var(--text-subtle); transition: transform .15s ease; }
.reg-dossier.open .reg-chevron { transform: rotate(90deg); }
.reg-dossier-nom { flex: none; font-size: var(--t-texte); font-weight: 700; color: var(--text); }
.reg-dossier-meta { flex: none; font-size: var(--t-meta); color: var(--text-subtle); }
/* Synthèse d'un dossier : une ligne par référentiel sous son nom — étiquette du référentiel
   (nom officiel en infobulle) · jauge · ratio, colonnes de largeur fixe pour que les jauges
   s'alignent d'une ligne à l'autre ; la colonne d'étiquette tient le plus long sigle. */
.reg-synthese {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 24px;
}
.reg-jauge { display: grid; grid-template-columns: 7em 104px 4.5em; align-items: center; column-gap: 10px; }
.reg-jauge .rc { justify-self: start; }
.reg-barre {
  display: flex;
  width: 104px;
  height: 8px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}
.reg-barre span { display: block; height: 100%; width: var(--part, 0); }   /* --part : part du verdict, posée par la vue */
.reg-barre .s-ok   { background: var(--ok); }
.reg-barre .s-cond { background: var(--ok); opacity: .55; }   /* F6 : validé sous conditions */
.reg-barre .s-err  { background: var(--err); }
.reg-barre .s-warn { background: var(--warn); }
.reg-barre .s-na   { background: var(--text-subtle); }
.reg-ratio { font-size: var(--t-meta); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.reg-corps { padding: 2px 16px 20px; border-top: 1px solid var(--line); }
/* Titre de directive : c'est le référentiel sous lequel les cases sont lues, il doit
   dominer les identifiants d'exigence (12,5 px) et non leur être inférieur. */
.reg-dir-titre {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 20px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-section);
  font-weight: 700;
  color: var(--text);
}
.reg-corps > div:first-child > .reg-dir-titre { margin-top: 12px; }
.reg-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .reg-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .reg-grille { grid-template-columns: 1fr; } }
/* En-tête de groupe de l'ordre documentaire (« 1. Documentation technique »…) : sur toute la
   largeur de la grille, pour que les cases gardent leurs colonnes d'un groupe à l'autre.
   Sous le titre de directive (15 px) et au-dessus des identifiants de case (12,5 px). */
.reg-groupe-titre {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: var(--t-meta);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.reg-grille > .reg-groupe-titre:first-child { margin-top: 0; }
.reg-case {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  cursor: pointer;
}
.reg-case:hover { border-color: var(--line-strong); }
.reg-case.v-ok    { background: var(--ok-soft);   border-color: var(--ok-soft); }
.reg-case.v-cond  { background: var(--ok-soft);   border-color: var(--warn); }   /* F6 : liseré ambre */
.reg-case.v-err   { background: var(--err-soft);  border-color: var(--err-soft); }
.reg-case.v-warn  { background: var(--warn-soft); border-color: var(--warn-soft); }
.reg-case.v-rompu { background: var(--warn-soft); border-color: var(--warn-soft); border-style: dashed; }
.reg-case.v-info  { background: var(--info-soft); border-color: var(--info-soft); }
.reg-case.v-na    { background: var(--bg-sunken); }
.reg-case.v-none  { background: transparent; border-style: dashed; cursor: default; }
.reg-case.v-none:hover { border-color: var(--line); }
.reg-case.v-hc, .reg-case.v-hcp { background: var(--bg-sunken); border-style: dashed; cursor: default; }
.reg-case.v-hc:hover, .reg-case.v-hcp:hover { border-color: var(--line); }
.reg-case-head { display: flex; align-items: center; gap: 8px; }
.reg-case-id {
  font-size: var(--t-liste);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-case-head .pill { margin-left: auto; flex: none; }
.reg-case-lib {
  font-size: var(--t-mention);
  line-height: 1.45;
  color: var(--text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.reg-case-sub { font-size: var(--t-mention); color: var(--text-subtle); }
.reg-hist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.reg-sceau { font-size: var(--t-mention); line-height: 1.45; color: var(--text-muted); cursor: pointer; }
.reg-sceau .n { font-family: var(--font-mono); color: var(--text-subtle); }
.reg-sceau-detail {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--t-mention);
  line-height: 1.45;
  color: var(--text-subtle);
  word-break: break-all;
}
/* ---------- Exigences ---------- */
/* Une exigence par carte, repliée par défaut (03/10/2026) : la ligne de tête (bouton) dit
   identifiant, article et libellé ; le corps n’apparaît qu’au dépli, aligné sous l’identifiant. */
.req-edit-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  margin-bottom: 8px;
}
.req-edit-head {                     /* bouton de dépli à gauche ; nombre d’éléments ou « Groupe » à droite */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-right: 16px;
}
.req-edit-bascule {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.req-edit-chevron { flex-shrink: 0; width: 14px; font-size: var(--t-mention); color: var(--text-subtle); }
.req-edit-id {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.req-edit-article {
  font-size: var(--t-meta);
  color: var(--text-subtle);
}
/* Repliée : une seule ligne — l’article et le libellé se tronquent plutôt que de passer à la ligne. */
.req-edit-card--repliee .req-edit-article {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.req-edit-resume {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-liste);
  color: var(--text);
}
.req-edit-nb { flex-shrink: 0; font-size: var(--t-meta); color: var(--text-subtle); white-space: nowrap; }
.req-edit-corps { padding: 4px 20px 20px 40px; }
.req-edit-groupe {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: var(--t-mention);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.req-edit-groupe .select {
  width: auto;
  padding: 4px 8px;
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.req-edit-label {
  font-size: var(--t-texte);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.req-edit-mandatory {
  font-size: var(--t-mention);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-top: 8px;
  margin-bottom: 8px;
}
/* Thème Registre : une surface par liste — un cadre, des lignes séparées d'un filet (plus de
   case grisée par élément, 30/09/2026). */
.mandatory-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mandatory-list:empty { display: none; }
.mandatory-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-liste);
  color: var(--text);
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}
.mandatory-list li:first-child { border-top: 0; }
/* Un élément : son texte, ses réglages posés dits en mots, puis ceux que « Modifier » déplie. */
.mandatory-list li.elem-edit { flex-direction: column; align-items: stretch; gap: 4px; }
.elem-edit-ligne { display: flex; align-items: center; gap: 8px; }

/* ── Modal enrichissement ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%; max-width: var(--modale); max-height: var(--modale-haut);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal-box--etroite { max-width: var(--modale-etroite); }
.modal-box--large   { max-width: var(--modale-large); }
.modal-box--ample   { max-width: var(--modale-ample); max-height: var(--modale-haut-ample); }
/* Modale dont le contenu peut être très long : on l'ancre en haut plutôt que de la
   centrer, sinon elle saute verticalement à chaque changement de contenu. */
.modal-overlay--haut { align-items: flex-start; }
/* Un écran de travail posé en modale : son en-tête tient, son corps défile. Les deux
   écrans concernés ont des racines différentes (`page-body`, `insc-wrap`) — on nomme
   les deux plutôt que d'imposer une racine commune à des pages qui vivaient sans. */
.modal-box.modale-page { max-height: var(--modale-haut-page); }
.modale-page > .page-header { flex-shrink: 0; }
.modale-page > .page-body { flex: 1; min-height: 0; overflow-y: auto; }
.modale-page > .insc-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; }
/* En-tête de « Gestion des droits » : le titre à gauche, la sortie à droite. */
.acc-head { display: flex; align-items: flex-start; gap: 16px; }
.acc-head > div { flex: 1; min-width: 0; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: var(--t-texte);
}
.modal-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-sous-titre { font-size: var(--t-meta); font-weight: 500; color: var(--text-subtle); }
.modal-chargement { color: var(--text-subtle); font-size: var(--t-liste); text-align: center; padding: 24px 0; }
.modal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.modal-body {
  padding: 16px 20px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
}
/* Étiquette de référentiel (window.ReferentielChip) : drapeau + sigle en chasse fixe,
   cadre fin à angles vifs ; en version complète, le nom officiel à la suite. */
.rc { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
      font: 600 var(--t-meta)/1.3 var(--font-mono); color: var(--text); background: var(--bg-elev);
      border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 1px 6px 1px 4px;
      vertical-align: middle;
}
.rc-plein { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; vertical-align: middle; }
.dec-panneau-titre { font-size: var(--t-texte); font-weight: 600; margin-bottom: 4px; }
.rc-nom { font-weight: 600; color: var(--text); min-width: 0; }
/* Pictos SVG posés dans une ligne de texte (LockBadge glyph, DocBadge — icons.jsx). */
.picto-inline { display: inline-block; vertical-align: middle; flex-shrink: 0; }
/* Drapeau plat (window.FlatFlag) : un aplat cerné, jamais un emoji. */
.drapeau-plat { display: block; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,.15); }
/* Modale « Actions requises » d'une exigence : une action par ligne, en jaune d'alerte. */
.actions-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.actions-ligne { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-liste); color: var(--warn-texte); line-height: 1.45; }
.actions-fleche { flex-shrink: 0; font-weight: 700; font-size: var(--t-section); line-height: 1.2; }
.textarea {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: inherit; font-size: var(--t-liste);
  resize: vertical;
}
.textarea:focus { outline: none; border-color: var(--accent); }

/* ── Voile serveur arrêté ──────────────────────────────────────────────────── */
.server-down-veil {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.server-down-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #fff;
}
/* Le picto d'alimentation EST le bouton de redémarrage : il appelle le
   superviseur (splash.py) sur le port courant + 1, le serveur principal étant
   par définition injoignable quand ce voile s'affiche. */
.server-down-icon {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 78px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}
.server-down-icon:hover:not(:disabled) {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.04);
}
.server-down-icon:active:not(:disabled) { transform: scale(0.98); }
.server-down-icon:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
}
.server-down-icon:disabled { cursor: default; opacity: 0.85; }
.server-down-icon.busy::after {
  content: "";
  position: absolute; inset: -4px;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: server-down-spin .85s linear infinite;
}
@keyframes server-down-spin { to { transform: rotate(360deg); } }
.server-down-title { font-size: var(--t-page); font-weight: 700; letter-spacing: -0.3px; }
.server-down-sub {
  font-size: var(--t-liste); opacity: 0.55;
  max-width: 420px; text-align: center; line-height: 1.45;
}

/* ── Mode classification ──────────────────────────────────────────────────── */
/* ── Panneaux latéraux intégrés dans VerificationPage ─────────────────────── */

/* Layout 3 colonnes quand au moins un panneau est ouvert */
/* Quand colMode est actif, .page ne doit plus défiler — colonnes indépendantes */
.page.no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Bouton toggle panneau actif */
.btn.secondary.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line, var(--accent));
}

/* Supprimé (modal plein écran) — CSS classif-col-* réutilisés comme composants */
.classif-col-title {
  font-size: var(--t-mention); font-weight: 700; color: var(--text-subtle);
  padding: 10px 16px 8px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; background: var(--bg-elev);
  text-transform: none;
  letter-spacing: 0;
}
.classif-file-list { flex: 1; overflow-y: auto; padding: 6px; background: var(--bg-elev); }

.classif-group-label {
  font-size: var(--t-mention); font-weight: 700; color: var(--text-subtle);
  padding: 8px 10px 4px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.classif-group-label:first-child { border-top: none; margin-top: 0; }

.classif-assign-badge {
  all: unset; cursor: pointer; flex-shrink: 0;
  font-size: var(--t-mention); font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line, var(--accent)); padding: 1px 6px;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}
.classif-assign-badge:hover { background: var(--err-soft); color: var(--err-texte); border-color: var(--err); }

/* Badge d'anomalie non bloquant remonté à l'ingestion (issue #30) — purement indicatif. */
.classif-anomaly-badge {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: var(--t-mention); font-weight: 600;
  background: var(--warn-soft, var(--err-soft)); color: var(--warn, var(--err));
  border: 1px solid var(--warn, var(--err)); padding: 1px 6px;
  white-space: nowrap; cursor: default;
}
.classif-anomaly-badge.anomaly-hors_scope { background: var(--err-soft); color: var(--err-texte); border-color: var(--err); }

.classif-sel-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; font-size: var(--t-mention); font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line, var(--accent)); padding: 1px 6px;
  text-transform: none; letter-spacing: 0;
  border-radius: var(--radius-sm);
}
.classif-sel-clear {
  all: unset; cursor: pointer; font-size: var(--t-meta); line-height: 1;
  color: var(--accent); opacity: 0.7;
}
.classif-sel-clear:hover { opacity: 1; }
/* Barre de progression indéterminée pendant la re-vérification */
@keyframes classif-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.classif-progress-wrap {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.classif-progress-track {
  position: relative;
  height: 3px;
  background: var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.classif-progress-bar {
  position: absolute; inset: 0;
  width: 40%;
  background: var(--accent);
  border-radius: var(--radius-sm);
  animation: classif-sweep 1.4s ease-in-out infinite;
}
.classif-progress-label {
  font-size: var(--t-mention); color: var(--text-subtle);
}

/* ── Nom de fichier cliquable unifié (window.FileLink) ── */
.file-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  word-break: break-word;
}
.file-link:hover { text-decoration: underline; }

/* ── Card flottante d'aperçu au survol d'un nom de fichier ── */
.file-hover-card {
  position: fixed; left: var(--x); top: var(--y);   /* --x / --y : posés par la vue, près du curseur */
  /* Même raison que .modal-overlay--visionneuse : monté sur <body>, il passait sous la
     barre du haut (600) quand le nom de fichier était près du sommet. */
  z-index: 7900;
  width: 450px;
  max-height: 570px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}
.file-hover-card .fhc-title {
  padding: 8px 12px;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-hover-card .fhc-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
}
.file-hover-card .fhc-body img {
  width: 100%;
  height: auto;
  display: block;
}
.file-hover-card .fhc-text {
  padding: 10px 12px;
  font-size: var(--t-mention);
  line-height: 1.45;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow: hidden;
  font-family: var(--font-mono, monospace);
}
.file-hover-card .fhc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--text-subtle);
  font-size: var(--t-meta);
  text-align: center;
}

/* ── Modale "viewer stable" (clic sur un nom de fichier) ── */
/* Au-dessus de la barre du haut (600), des autres modales (1000) et des vues empilées
   — comparaison (8500), vue surlignée (9000) —, dont on l'ouvre (window.ouvrirFichier) :
   montée sur <body>, elle leur dispute directement l'empilement. Sous window.Dialog. */
.modal-overlay--visionneuse { z-index: 9500; padding: 32px; }
.modal-box.file-viewer-panel {
  max-width: min(1100px, 100%); max-height: none;
  height: min(92vh, 980px); overflow: hidden;
}
.file-viewer-body {
  flex: 1;
  min-height: 0;
}
.file-viewer-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Badge "source corrigée manuellement" sur un élément obligatoire ── */
.source-corrected-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-mention);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  margin-left: 6px;
}

/* ── Badge « Passage indiqué par le rédacteur » (#311) : couvert sur sa parole, sans
   relecture IA — teinte d'avertissement, comme l'alerte qu'il garde au moins orange. ── */
.passage-indique-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-mention);
  font-weight: 600;
  color: var(--warn-texte);
  background: var(--warn-soft);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  margin-left: 6px;
}

/* ── Passages indiqués d'un élément (#315), sur la carte et dans la fenêtre de scellement :
   qui, quand, le commentaire, puis un passage par ligne — filet de la teinte d'avertissement,
   comme le badge. Sur la carte, la ligne ouvre le document surligné sur le passage. ── */
.pi-bloc { margin-top: 4px; font-size: var(--t-meta); line-height: 1.45; }
.pi-qui { color: var(--text-subtle); }
.pi-commentaire { color: var(--text); font-style: italic; margin-top: 2px; }
.pi-passages { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/* Un passage n'est pas une ligne d'élément : la carte de `.checklist li` ne descend pas ici. */
.pi-passages > li { display: block; padding: 0; margin: 0; background: none; border: 0; border-radius: 0;
  font-size: inherit; }
.pi-passage {
  display: flex; align-items: flex-start; gap: 6px; width: 100%;
  border: 0; border-left: 2px solid var(--warn-texte); background: none;
  padding: 1px 0 1px 8px; text-align: left; font: inherit; color: var(--text);
}
.pi-passage--lien { cursor: pointer; }
.pi-passage--lien:hover .pi-extrait { text-decoration: underline; text-underline-offset: 3px; }
.pi-passage--lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pi-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pi-extrait { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pi-lieu { font-size: var(--t-mention); color: var(--text-subtle); }
.pi-go { color: var(--text-subtle); padding-top: 2px; }

/* ── Zone de drop sur un élément obligatoire (drag & drop ciblé) ── */
.element-drop-zone.drop-active {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* ════ P4 — vue maître/détail à zones dynamiques ════════════════════════════ */

.p4-stchip { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: var(--t-meta); font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); background: var(--surface); cursor: pointer; position: relative; }
.p4-stchip:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.p4-stchip:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.p4-stchip + .p4-stchip { border-left: none; }
.p4-stchip--esp-perimee { background: var(--warn); color: #1A1C20; font-weight: 600; }
.p4-stchip .n { font-weight: 700; font-size: var(--t-liste); }
.p4-stchip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); z-index: 1; }

/* Détail (p4-detail) en modale par-dessus la moitié droite — apparition par grossissement
   + fondu. Réutilisé tel quel par le détail « document à valider » du dashboard vérificateur. */
.p4-detail-modal { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; transform-origin: center; animation: modal-pop-in 0.22s cubic-bezier(0.2, 0, 0.2, 1); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) { .p4-detail-modal { animation: none !important; } }

/* Zone 1 · Bibliothèque : rail ↔ étendue */
.p4-lib { background: var(--surface); border-right: 1px solid var(--border); min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.p4-rail { display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 4px; }
.p4-rail-btn { width: 38px; height: 38px; border: none; background: none; display: grid; place-items: center; color: var(--text-muted); cursor: pointer; position: relative; border-radius: var(--radius); }
.p4-rail-btn:hover { background: var(--bg-hover); color: var(--text); }
.p4-rail-badge { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; background: var(--warn); font-size: var(--t-mention); font-weight: 700; display: grid; place-items: center; padding: 0 4px; border-radius: var(--radius-sm); color: #1A1C20; font-family: var(--font-mono); }
.p4-lib-full { display: flex; flex-direction: column; min-height: 0; flex: 1; padding-top: 8px; }
.p4-lib-close { margin-left: auto; border: none; background: none; color: var(--text-subtle); font-size: var(--t-section); cursor: pointer; padding: 0 4px; line-height: 1; }
.p4-lib-close:hover { color: var(--text); }
.p4-tray { margin: 8px; padding: 8px 12px; cursor: grab; flex-shrink: 0;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-elev); }
.p4-tray:active { cursor: grabbing; }
.p4-tray .t1 { font-size: var(--t-meta); font-weight: 700; color: var(--text); }
.p4-tray .t2 { font-size: var(--t-mention); color: var(--text-muted); margin-top: 2px; }

/* Picto « scellé » (exigence validée, procédure certifiée ou attestée) : un cadenas
   vert, sans pastille — un état, pas une action. UNE définition pour toute l'interface :
   le picto en ligne (window.LockBadge → .scelle) et l'étiquette d'état
   (.db-etat-scelle::before, dont l'état d'une exigence validée sur sa ligne).
   La taille passe par --scelle-taille (LockBadge la pose selon son `size`). */
.scelle { width: var(--scelle-taille, 20px); height: var(--scelle-taille, 20px); flex-shrink: 0; border: 0; border-radius: 0; clip-path: none; transform: none; background: var(--ok); -webkit-mask: var(--scelle-svg) center / contain no-repeat; mask: var(--scelle-svg) center / contain no-repeat; display: inline-block; vertical-align: middle; }
.db-etat-scelle { display: inline-flex; align-items: center; gap: 6px; }

.p4-none { padding: 24px; color: var(--text-subtle); font-size: var(--t-liste); }
/* Phase de l'ordre documentaire (« 1. Documentation technique » … « 4. Marquage ») dans
   chacune des trois listes (en cours / prêtes / validées) : un pli, replié à l'ouverture,
   dont l'en-tête porte la synthèse (nombre d'exigences, avis de l'IA, à reprendre). */
.p4-phase + .p4-phase { border-top: 1px solid var(--line); }
.p4-phase.ouverte { padding-bottom: 12px; }
.p4-phase-tete { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; width: 100%; padding: 10px 4px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.p4-phase-tete:hover { background: var(--bg-hover); }
.p4-phase-chevron { color: var(--text-subtle); transition: transform .15s ease; }
.p4-phase.ouverte .p4-phase-chevron { transform: rotate(90deg); }
.p4-phase-titre { font-size: var(--t-texte); font-weight: 600; color: var(--text); }
.p4-phase-synthese { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; font-size: var(--t-meta); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.p4-phase-synthese > * + *::before { content: "·"; margin: 0 6px; color: var(--text-subtle); }
.p4-phase-avis { display: inline-flex; align-items: center; gap: 6px; }

/* Zone 3 · Détail */
.p4-d-top { display: flex; align-items: flex-start; gap: 10px; padding: 12px 20px 8px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.p4-d-close { margin-left: auto; border: none; background: none; font-size: var(--t-panneau); color: var(--text-subtle); cursor: pointer; line-height: 1; }
.p4-d-close:hover { color: var(--text); }
.p4-d-body { flex: 1; overflow-y: auto; min-height: 0; padding: 16px 20px; }

/* Synoptique workflow complet (zone détail) */
/* Nœuds, liens et « par … » centrés sur une même ligne (bug #64). */
.p4-flow { display: flex; align-items: center; min-width: 0; flex-wrap: wrap; row-gap: 8px; }
.p4-flow .fnode { display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 84px;
    justify-content: center; }
.p4-flow .fnode .b { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong, #cbd5e1); background: var(--surface); display: grid; place-items: center; font-size: var(--t-mention); color: var(--text-subtle); }
.p4-flow .fnode .l { font-size: var(--t-mention); font-weight: 600; color: var(--text-subtle); text-align: center; line-height: 1.2; }
.p4-flow .fnode.done .b { background: var(--ok); border-color: var(--ok); color: #fff; }
.p4-flow .fnode.done .l { color: var(--ok-texte); }
.p4-flow .fnode.cur .b { border-color: var(--ok); color: var(--ok-texte); box-shadow: 0 0 0 4px var(--ok-soft); }
.p4-flow .fnode.cur .l { color: var(--ok-texte); font-weight: 700; }
.p4-flow .flink { width: 30px; height: 2px; background: var(--line-strong, #cbd5e1); }
.p4-flow .flink.done { background: var(--ok); }
.p4-fbranch { display: flex; flex-direction: column; gap: 4px; margin-left: 16px; margin-top: 2px; }
.p4-fbranch .fbr { display: flex; align-items: center; gap: 6px; font-size: var(--t-mention); font-weight: 600; color: var(--text-subtle); }
.p4-fbranch .fbr .b2 { width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--line-strong, #cbd5e1); display: grid; place-items: center; font-size: var(--t-mention); }
.p4-fbranch .fbr .ret { font-size: var(--t-mention); opacity: 0.7; }
/* Interlocuteur attendu d'une exigence prête pour validation (ex-pastille de la carte). */
.p4-fbranch .fbr.fbr-attente { color: var(--info-texte); }
.p4-fbranch .fbr.warn-b.active .b2 { border-color: var(--warn); border-style: solid; }
.p4-fbranch .fbr.err-b.active { color: var(--err-texte); }
.p4-fbranch .fbr.err-b.active .b2 { border-color: var(--err); color: var(--err-texte); border-style: solid; }
/* Document validé : remplace la branche clarification/rejeté par l'identité du validateur */
.p4-valide-info { display: flex; flex-direction: column; gap: 2px; margin-left: 16px; color: var(--ok-texte); }
.p4-valide-info .pvi-line { display: flex; align-items: center; gap: 8px; font-size: var(--t-liste); font-weight: 400; }
.p4-valide-info .pvi-date { font-size: var(--t-meta); font-weight: 400; opacity: 0.9; }
/* Mention de certification (procédure certifiée) — typo réduite, sous « Validé par … le … ». */
.p4-valide-info .pvi-certif { font-size: var(--t-mention); font-weight: 400; opacity: 0.85; margin-top: 1px; }

/* ── Assistant : panneau ancré à droite (ContextChat, app.jsx — variante 2, 10/10/2026) ──
   La question à gauche, bulle verte franche ; la réponse à droite, bulle grise ; les pièces
   citées en pastilles sous la réponse (visionneuse à la page). Ouvert, le panneau resserre la
   page au lieu de la masquer. Il passe sous le bandeau (600 : ses menus déroulants restent
   devant) et au-dessus des pages (Fichiers 500) ; le panneau de traitement (590) et le 🐞
   (bug-reporter.css) se décalent à sa gauche. */
.assistant-fab { position: fixed; right: 22px; bottom: 22px; z-index: 1200; width: 52px; height: 52px;
  border-radius: 50%; border: none; cursor: pointer; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
  transition: transform 0.15s; }
.assistant-fab:hover { transform: translateY(-2px); }
.assistant-panneau { position: fixed; top: 52px; right: 0; bottom: 0; z-index: 580;
  width: min(var(--assistant-l), 100vw); display: flex; flex-direction: column;
  background: var(--bg-elev); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-lg);
  animation: assistant-entree 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes assistant-entree { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
.assistant-panneau--tire { user-select: none; }
/* Ouvert depuis la fenêtre d'une exigence (parcours.jsx) : au-dessus d'elle (1000), sous les dialogues. */
.assistant--fenetre .assistant-panneau { z-index: 1100; }
.assistant-panneau button:focus-visible,
.assistant-panneau .file-link:focus-visible { outline: 2px solid var(--bulle-question); outline-offset: 2px; }
/* Bord gauche : on le tire pour élargir (flèches au clavier, double-clic : le plus large). */
.assistant-poignee { position: absolute; left: -6px; top: 0; bottom: 0; width: 12px; z-index: 1;
  cursor: ew-resize; touch-action: none; display: flex; align-items: center; justify-content: center; }
.assistant-poignee::after { content: ""; width: 4px; height: 40px; border-radius: 999px;
  background: var(--line-strong); transition: background 0.15s, height 0.15s; }
.assistant-poignee:hover::after,
.assistant-poignee:focus-visible::after,
.assistant-panneau--tire .assistant-poignee::after { background: var(--bulle-question); height: 64px; }
.assistant-poignee:focus-visible { outline: none; }
.assistant-tete { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 8px 16px;
  border-bottom: 1px solid var(--line); }
.assistant-tete-ligne { display: flex; align-items: center; gap: 8px; }
.assistant-titre { display: inline-flex; align-items: center; gap: 8px; margin-right: auto;
  font-size: var(--t-texte); font-weight: 600; }
.assistant-largeurs { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.assistant-largeurs button { border: 0; background: var(--bg-elev); color: var(--text-muted); padding: 4px 8px;
  font: inherit; font-size: var(--t-mention); font-weight: 600; cursor: pointer; }
.assistant-largeurs button + button { border-left: 1px solid var(--line-strong); }
.assistant-largeurs button:hover { background: var(--bg-hover); color: var(--text); }
.assistant-largeurs button[aria-pressed="true"] { background: var(--rg-topbar); color: #fff; }
.assistant-ico { width: 32px; height: 32px; border: 0; border-radius: var(--radius); background: transparent;
  color: var(--text-subtle); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s; }
.assistant-ico:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.assistant-ico:disabled { opacity: 0.4; cursor: default; }
.assistant-contexte { font-size: var(--t-meta); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-contexte-id { font-family: var(--font-mono); font-size: var(--t-mention); color: var(--rg-lime-ink);
  background: var(--accent-verificateur-soft); border: 1px solid var(--accent-verificateur-line);
  border-radius: var(--radius-sm); padding: 1px 6px; margin-right: 6px; }
.assistant-fil { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.assistant-vide { margin: auto 0; padding: 0 16px; text-align: center; font-size: var(--t-liste); color: var(--text-muted); }
.assistant-tour { display: flex; align-items: flex-start; gap: 8px; max-width: min(88%, 720px); }
.assistant-tour--q { align-self: flex-start; }
.assistant-tour--r { align-self: flex-end; flex-direction: row-reverse; }
.assistant-avatar { flex: none; width: 28px; height: 28px; margin-top: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-mention); font-weight: 700; }
.assistant-avatar--q { background: var(--bulle-question); color: #fff; }
.assistant-avatar--r { background: var(--rg-topbar); color: var(--rg-lime); }
.assistant-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.assistant-tour--q .assistant-col { align-items: flex-start; }
.assistant-tour--r .assistant-col { align-items: flex-end; }
.assistant-qui { display: flex; gap: 6px; align-items: baseline; padding: 0 4px; font-size: var(--t-mention); color: var(--text-subtle); }
.assistant-qui b { font-weight: 600; color: var(--text-muted); }
.assistant-qui-ex { font-family: var(--font-mono); }
.assistant-bulle { padding: 8px 12px; border: 1px solid transparent; font-size: var(--t-texte); line-height: 1.45;
  overflow-wrap: anywhere; }
.assistant-bulle strong { font-weight: 600; }
/* Le Markdown de la réponse (texteAssistant) : titres, listes, citations, filets, code. */
.assistant-bulle p,
.assistant-bulle ul { margin: 0; }
.assistant-bulle > * + * { margin-top: 8px; }
.assistant-bulle ul { padding-left: 20px; }
.assistant-bulle li + li { margin-top: 4px; }
.assistant-bulle code { font-family: var(--font-mono); font-size: 0.9em; padding: 0 4px; border-radius: var(--radius-sm);
  background: var(--bg-elev); border: 1px solid var(--line); }
.assistant-md-titre { font-weight: 600; }
.assistant-md-filet { border: 0; border-top: 1px solid var(--line-strong); margin: 8px 0; }
.assistant-md-citation { margin: 0; padding-left: 10px; border-left: 3px solid var(--line-strong); color: var(--text-muted); }
/* Le coin côté émetteur resserré (la « queue »), comme les bulles de la messagerie. */
.assistant-tour--q .assistant-bulle { background: var(--bulle-question); color: #fff; white-space: pre-wrap;
  border-radius: var(--radius-bulle) var(--radius-bulle) var(--radius-bulle) var(--radius-sm); }
.assistant-tour--r .assistant-bulle { background: var(--bg-sunken); border-color: var(--line); color: var(--text);
  border-radius: var(--radius-bulle) var(--radius-bulle) var(--radius-sm) var(--radius-bulle); }
.assistant-ecrit { display: inline-flex; gap: 4px; padding: 4px 0; }
.assistant-ecrit i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-subtle);
  animation: assistant-points 1.2s infinite ease-in-out; }
.assistant-ecrit i:nth-child(2) { animation-delay: 0.15s; }
.assistant-ecrit i:nth-child(3) { animation-delay: 0.3s; }
@keyframes assistant-points { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.assistant-sources { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.file-link.assistant-source { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 10px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-elev); color: var(--text-muted);
  font-size: var(--t-meta); transition: border-color 0.15s, color 0.15s; }
.file-link.assistant-source:hover { border-color: var(--text-muted); color: var(--text); text-decoration: none; }
.assistant-source-type { font-size: var(--t-mention); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); }
.assistant-source-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-source-page { font-family: var(--font-mono); font-size: var(--t-mention); color: var(--text-subtle); white-space: nowrap; }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 0; border-top: 1px solid var(--line); }
.assistant-suggestions button { border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-elev);
  color: var(--text-muted); padding: 4px 10px; font: inherit; font-size: var(--t-meta); cursor: pointer;
  transition: border-color 0.15s, color 0.15s; }
.assistant-suggestions button:hover:not(:disabled) { border-color: var(--bulle-question); color: var(--rg-lime-ink); }
.assistant-suggestions button:disabled { opacity: 0.5; cursor: default; }
.assistant-saisie { display: flex; align-items: flex-end; gap: 8px; padding: 8px 16px 4px; }
/* Hauteur suivie par le composant (--assistant-saisie-h), plafonnée ici. */
.assistant-saisie textarea { flex: 1; resize: none; height: var(--assistant-saisie-h, auto); min-height: 40px; max-height: 160px;
  padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-bulle); background: var(--bg);
  color: var(--text); font: inherit; font-size: var(--t-texte); line-height: 1.45; }
.assistant-saisie textarea:focus { outline: none; border-color: var(--bulle-question); background: var(--bg-elev);
  box-shadow: 0 0 0 3px var(--accent-verificateur-soft); }
.assistant-envoyer { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--bulle-question);
  color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s, opacity 0.15s; }
.assistant-envoyer:hover:not(:disabled) { transform: translateY(-1px); }
.assistant-envoyer:disabled { opacity: 0.4; cursor: default; }
.assistant-aide { padding: 0 16px 8px; font-size: var(--t-mention); color: var(--text-subtle); }
/* Écran large : la page se resserre à côté du panneau. Plus étroit, le panneau la recouvre
   (largeur fixe : ni poignée ni crans). Le panneau de traitement passe toujours à sa gauche. */
body:has(.assistant-panneau) .proc-stack { right: calc(min(var(--assistant-l), 100vw) + 18px); }
@media (min-width: 1024px) {
  body:has(.assistant-panneau) .app2 > .ligne-identite,
  body:has(.assistant-panneau) .app2 > .ref-shell,
  body:has(.assistant-panneau) .app2 > .page { margin-right: var(--assistant-l); }
}
@media (max-width: 1023px) {
  .assistant-poignee,
  .assistant-largeurs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-panneau,
  .assistant-ecrit i { animation: none; }
}

/* Actions de vérification remontées dans le bandeau de tête (slot portal) */
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-actions:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════
   FileSynthesisPage — page plein écran de gestion des fichiers
   ═══════════════════════════════════════════════════════════════ */

/* Page container */
.synth-page {
  position: fixed; top: 52px; left: 0; right: 0; bottom: 0; z-index: 500;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Header */
.synth-header {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.synth-title { font-size: var(--t-section); font-weight: 600; color: var(--text); margin: 0; }

/* Layout 3 colonnes */
.synth-layout {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}

/* Drag handle entre colonnes */
.synth-resize-handle {
  width: 5px; flex-shrink: 0; cursor: col-resize; position: relative;
  background: var(--border);
  transition: background 150ms;
}
.synth-resize-handle:hover, .synth-resize-handle:active {
  background: var(--accent, #2563eb);
}

/* Colonne gauche */
.synth-col-left {
  width: 230px; min-width: 150px;
  overflow: auto;
  display: flex; flex-direction: column;
  background: var(--bg-subtle, #fafafa);
  flex-shrink: 0;
}
.synth-col-header {
  font-size: var(--t-mention); font-weight: 600; color: var(--text-subtle);
  padding: 10px 16px 6px; flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
}
.synth-dossier-list { flex: 1; overflow-y: auto; padding: 4px 0 16px; }
.synth-dossier-scores { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.synth-score { display: inline-flex; align-items: center; gap: 4px; }
.synth-score-val { font: 600 var(--t-mention)/1.3 var(--font-mono); }
.synth-score-val--ok   { color: var(--ok-texte); }
.synth-score-val--warn { color: var(--warn-texte); }
.synth-score-val--err  { color: var(--err-texte); }
.synth-dossier-menu-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-subtle);
  font-size: var(--t-section); padding: 2px 4px; border-radius: var(--radius); opacity: 0; transition: opacity 100ms;
}
.synth-context-menu {
  position: absolute; right: 8px; top: calc(100% - 4px); z-index: 200;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; min-width: 130px;
}
.synth-context-menu button {
  display: block; width: 100%; background: none; border: none; cursor: pointer;
  padding: 8px 16px; text-align: left; font: inherit; font-size: var(--t-liste); color: var(--text);
}
.synth-context-menu button:hover { background: var(--bg-subtle); }
.synth-archived-group { padding: 8px 0 0; }
.synth-archived-toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; width: 100%;
  padding: 6px 16px; font: inherit; font-size: var(--t-meta); color: var(--text-subtle);
  font-weight: 500;
}
.synth-archived-toggle:hover { color: var(--text); }

/* Colonne centrale */
.synth-col-center {
  flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
}
.synth-empty-center { justify-content: center; align-items: center; }
.synth-empty-msg { color: var(--text-subtle); font-size: var(--t-liste); text-align: center; }

/* Zone upload */
.synth-upload-zone {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  margin: 8px 12px; padding: 10px 16px;
  border: 1.5px dashed var(--border); color: var(--text-subtle); font-size: var(--t-liste);
  transition: border-color 120ms, background 120ms;
  border-radius: var(--radius-sm);
  border-width: 1px;
  background: var(--bg-elev);
}
.synth-upload-zone.drag-over { border-color: var(--accent); }

/* Filtres de la table (window.FileFilterBar) */
.synth-filtres { flex-shrink: 0; padding: 4px 12px 0; }

/* Actions groupées sur les cases cochées */
.synth-selection-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex-shrink: 0;
  margin: 0 12px 8px; padding: 6px 10px;
  border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft);
}
.synth-selection-n { font-size: var(--t-liste); color: var(--text); margin-right: 4px; }
.synth-detail-select.synth-selection-dest { width: auto; max-width: 240px; }
.synth-selection-etat { font-size: var(--t-meta); color: var(--text-subtle); }

/* Skeleton */
.synth-skeleton-list { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.synth-skeleton-row {
  width: var(--largeur, 100%); height: 14px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-subtle) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: synth-shimmer 1.4s infinite;
}
@keyframes synth-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Panneau droit */
.synth-col-right {
  width: var(--largeur, 280px); min-width: 200px;
  overflow: auto;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0;
  background: var(--bg); flex-shrink: 0;
  padding-bottom: 24px;
}
.synth-empty-detail { justify-content: center; align-items: center; }
.synth-detail-preview {
  cursor: pointer; flex-shrink: 0;
  margin: 12px 12px 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  min-height: 100px; background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center;
}
.synth-detail-no-preview {
  font-size: var(--t-page); font-weight: 700; color: var(--text-subtle);
  letter-spacing: .05em;
}
.synth-detail-section { padding: 8px 12px 0; }
.synth-detail-label {
  font-size: var(--t-mention); font-weight: 600; color: var(--text-subtle);
  display: flex; align-items: center; gap: 4px; margin-bottom: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.synth-detail-textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
  font: inherit; font-size: var(--t-meta); padding: 6px 8px; resize: vertical;
  outline: none;
}
.synth-detail-textarea:focus { border-color: var(--accent); }
.synth-detail-select {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
  font: inherit; font-size: var(--t-meta); padding: 6px 8px;
  outline: none; cursor: pointer;
}
.synth-detail-select:focus { border-color: var(--accent); }
/* Catégorie + type de document d'un fichier (#106, window.CategorieTypeSelect) : deux
   sélecteurs empilés ; en mode compact (picker, liste de la page Vérification) sans libellés. */
.cat-type-select { display: flex; flex-direction: column; gap: 4px; }
.cat-type-select .synth-detail-label { margin-top: 4px; }
.cat-type-select .synth-detail-label:first-child { margin-top: 0; }
.cat-type-select.compact { gap: 6px; }
.cat-type-select select:disabled { opacity: .6; cursor: default; }
.synth-detail-actions-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.synth-detail-note { font-size: var(--t-meta); color: var(--text-subtle); font-style: italic; }
.synth-detail-error {
  margin-top: 6px; padding: 6px 8px; border-radius: var(--radius);
  background: var(--err-soft); color: var(--err-texte); font-size: var(--t-meta); line-height: 1.45;
}
.synth-detail-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
  font: inherit; font-size: var(--t-meta); padding: 6px 8px;
  outline: none; margin-bottom: 4px;
}
.synth-detail-input:focus { border-color: var(--accent); }

/* Infos banque */
.synth-banque-info {
  background: var(--bg-subtle); border-radius: var(--radius);
  margin: 8px 12px 0; padding: 8px 10px !important;
  border: 1px solid var(--border);
}
.synth-banque-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--t-meta); padding: 2px 0; color: var(--text-subtle);
}
.synth-banque-row strong { color: var(--text); }

/* Actions */
.synth-detail-actions { padding: 12px 12px 0; display: flex; flex-direction: column; gap: 12px; }
.synth-action-group { display: flex; flex-direction: column; gap: 6px; }
.synth-delete-group { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.synth-banque-form { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }

/* Bouton danger */
.btn.danger {
  background: none; border: 1px solid var(--err); color: var(--err-texte);
}
.btn.danger:disabled { opacity: 0.5; }

/* Toasts */
.synth-toast {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 16px; font-size: var(--t-liste); color: var(--text);
  box-shadow: var(--shadow-lg);
  pointer-events: auto; max-width: 320px;
  white-space: pre-line; /* les refus (#125) se lisent ligne à ligne */
  animation: synth-toast-in 200ms ease-out;
}
.synth-toast.success { border-color: var(--ok, #16a34a); color: var(--ok, #16a34a); }
.synth-toast.error   { border-color: var(--err); color: var(--err-texte); }
@keyframes synth-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════
   FileSynthesisPage v2 — prototype de refonte (bascule via switch)
   ═══════════════════════════════════════════════════════════════ */

/* Inline edit (renommage dossier / fichier) */
.v2-inline-edit-trigger {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: none; border: none; cursor: text; text-align: left;
  font: inherit; color: inherit; padding: 0; border-radius: var(--radius);
}
.v2-inline-edit-trigger:hover { color: var(--accent); }
.v2-inline-edit-trigger svg { opacity: 0; transition: opacity 100ms; flex-shrink: 0; }
.v2-inline-edit-trigger:hover svg { opacity: 0.6; }
.v2-inline-edit-input {
  font: inherit; border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 2px 6px; background: var(--bg); color: var(--text); outline: none; width: 100%;
  box-sizing: border-box;
}
.v2-detail-filename-edit { font-size: var(--t-liste); font-weight: 600; padding: 8px 12px 0 !important; color: var(--text); }
.v2-detail-filename-edit.v2-inline-edit-input { margin: 8px 12px 0; width: calc(100% - 24px); }
/* Nom du fichier dans son panneau : lien vers la visionneuse, puis le crayon « Renommer ». */
.synth-detail-nom { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; min-width: 0; }
.synth-detail-nom-lien {
  flex: 1; min-width: 0; font-size: var(--t-liste); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.synth-detail-nom-saisie { font-size: var(--t-liste); font-weight: 600; }

/* Variables primaires (coherence vars) */
.v2-vars-editor { display: flex; flex-direction: column; gap: 6px; }
.v2-vars-row { display: flex; gap: 6px; align-items: center; }
.v2-vars-val {
  flex: 1; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font: inherit; font-size: var(--t-meta); padding: 6px 8px; outline: none;
}
.v2-vars-key { min-width: 0; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; font-size: var(--t-meta); padding: 6px 8px; outline: none; flex: 0 0 38%; font-weight: 500; }
.v2-vars-key:focus, .v2-vars-val:focus { border-color: var(--accent); }
.v2-vars-remove {
  background: none; border: none; cursor: pointer; color: var(--text-subtle);
  flex-shrink: 0; padding: 4px; border-radius: var(--radius);
}
.v2-vars-remove:hover { color: var(--err-texte); background: var(--err-soft); }
.v2-vars-empty { font-size: var(--t-meta); color: var(--text-subtle); padding: 4px 0; }
.v2-vars-add-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.v2-vars-suggestion {
  background: var(--bg-subtle); border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 4px 8px; font-size: var(--t-meta); color: var(--text-subtle); cursor: pointer;
}
.v2-vars-suggestion:hover { color: var(--accent); border-color: var(--accent); }
.v2-saving-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-subtle); margin-left: 4px; }

/* Modale création dossier */

/* Sidebar v2 */
.v2-col-left { width: var(--largeur, 250px); }   /* --largeur : colonne redimensionnée */
.v2-col-header-row { display: flex; align-items: center; justify-content: space-between; padding-right: 10px; }
.v2-new-dossier-btn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 8px; font-size: var(--t-mention); font-weight: 600; color: var(--accent); cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.v2-new-dossier-btn:hover { background: var(--accent-soft); }
.v2-search-row {
  display: flex; align-items: center; gap: 6px;
  margin: 0 12px 8px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); flex-shrink: 0; color: var(--text-subtle);
}
.v2-search-input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: var(--t-liste); color: var(--text); }

.v2-dossier-item {
  position: relative; display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 32px 8px 16px; cursor: pointer;
  border-left: 3px solid transparent; transition: background 100ms;
  color: var(--text-subtle);
  border-left-color: transparent;
}
.v2-dossier-item:hover { background: var(--bg-hover, rgba(0,0,0,.04)); }
.v2-dossier-item.active { background: var(--accent-soft); color: var(--accent); }
.v2-dossier-item.archived { opacity: 0.55; }
.v2-dossier-item > svg { margin-top: 2px; flex-shrink: 0; }
.v2-dossier-main { flex: 1; min-width: 0; }
.v2-dossier-name-static {
  font-size: var(--t-liste); font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.v2-dossier-meta-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.v2-dossier-filecount { font-size: var(--t-mention); color: var(--text-subtle); }
.v2-dossier-hasvars { color: var(--accent); display: inline-flex; }
.v2-dossier-unindexed {
  font-size: var(--t-mention); font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--warn, #d97706); background: var(--warn-soft, rgba(217,119,6,.1)); border-radius: var(--radius-sm); padding: 1px 4px;
}

/* Toolbar onglets Fichiers / Dossier */
.v2-col-center { padding-top: 4px; }
.v2-toolbar { display: flex; gap: 4px; padding: 0 12px; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.v2-toolbar-tab {
  background: none; border: none; cursor: pointer; padding: 8px 10px 8px;
  font: inherit; font-size: var(--t-liste); font-weight: 500; color: var(--text-subtle);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.v2-toolbar-tab:hover { color: var(--text); }
.v2-toolbar-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.v2-upload-zone { margin-top: 10px; }
.v2-upload-texte { flex: 1 1 auto; min-width: 0; }
.v2-upload-texte b { color: var(--text); }

/* Table de fichiers */
.v2-file-table { flex: 1; overflow: auto; padding: 0 12px 16px; }
.v2-table { width: 100%; border-collapse: collapse; font-size: var(--t-liste); }
.v2-table thead th {
  text-align: left; font-size: var(--t-mention); font-weight: 600; color: var(--text-subtle); padding: 6px 8px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 1;
  text-transform: none;
  letter-spacing: 0;
}
.v2-table-row { cursor: pointer; transition: background 80ms; }
.v2-table-row:hover { background: var(--bg-subtle); }
.v2-table-row.selected { background: var(--accent-soft); }
.v2-table-row td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.v2-table-name { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.v2-table-name span { overflow: hidden; text-overflow: ellipsis; }
.v2-drag-handle { color: var(--text-subtle); cursor: grab; flex-shrink: 0; }
.v2-table-desc { color: var(--text-subtle); max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Panneau droit — détail dossier */
.v2-dossier-detail-header { display: flex; align-items: center; gap: 10px; padding: 16px 12px 4px; color: var(--accent); }
.v2-dossier-stat-row { display: flex; justify-content: space-between; font-size: var(--t-meta); color: var(--text-subtle); padding: 4px 0; }
/* #216 — état du catalogue : libellé long, aligné à droite ; périmé en ocre (alerte, pas erreur). */
.v2-dossier-stat-row--catalogue { gap: 12px; }
.v2-dossier-stat-row--catalogue strong { text-align: right; }
.v2-dossier-stat-row--alerte strong { color: var(--warn-texte); }
.v2-dossier-stat-row strong { color: var(--text); }

/* Copier / déplacer */
.v2-move-mode { display: flex; gap: 12px; font-size: var(--t-meta); color: var(--text-subtle); margin: 2px 0 6px; }
.v2-move-mode label { display: flex; align-items: center; gap: 4px; cursor: pointer; }

/* ====================================================================== */
/* Inscription — assistant périmètre réglementaire (inscription.jsx)      */
/* Réutilise les tokens de l'app ; couleurs marché EU=accent, US=warn.    */
/* ====================================================================== */
.insc-wrap { max-width: 980px; margin: 0 auto; padding: 24px 24px 80px; }
.insc-head-top h1 { font-size: var(--t-panneau); margin: 0 0 4px; font-weight: 600; letter-spacing: -.01em; }
.insc-sub { color: var(--text-muted); font-size: var(--t-liste); margin: 0 0 24px; }

.insc-empty { display: grid; place-content: center; text-align: center; min-height: 50vh; color: var(--text-muted); gap: 4px; }
.insc-empty-ico { font-size: var(--t-affiche); }
.insc-empty h3 { margin: 6px 0 0; color: var(--text); }

/* Stepper */
.insc-stepper { display: flex; align-items: center; margin: 0 0 24px; flex-wrap: wrap; gap: 4px 0; }
.insc-step { display: flex; align-items: center; gap: 8px; color: var(--text-subtle); font-size: var(--t-liste); font-weight: 500; }
.insc-step .insc-dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; background: var(--bg-elev); font-size: var(--t-meta); transition: .2s; }
.insc-step.done .insc-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.insc-step.active { color: var(--text); }
.insc-step.active .insc-dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.insc-bar { width: 46px; height: 1.5px; background: var(--line); margin: 0 10px; }

.insc-panel { margin-bottom: 8px; }
.insc-section { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,.06)); padding: 24px 24px; }
.insc-section.bare { background: transparent; border: 0; box-shadow: none; padding: 0; }
.insc-section h2 { font-size: var(--t-section); margin: 0 0 4px; font-weight: 600; letter-spacing: -.01em; }
.insc-hint { color: var(--text-muted); font-size: var(--t-liste); margin: 0 0 16px; }

.insc-banner { padding: 8px 12px; border-radius: var(--radius); font-size: var(--t-liste); margin: 0 0 16px; }
.insc-banner.err { background: var(--warn-soft); color: var(--warn-texte); }
.insc-banner.ok { background: var(--ok-soft); color: var(--ok-texte); margin-top: 16px; }

/* Segmented (nomenclature) */
.insc-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.insc-seg-btn { font: inherit; font-size: var(--t-liste); padding: 8px 16px; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--bg-elev); color: var(--text); cursor: pointer;
  transition: .15s; display: flex; flex-direction: column; gap: 1px; align-items: flex-start; min-width: 120px; }
.insc-seg-btn small { color: var(--text-subtle); font-size: var(--t-mention); font-weight: 500; }
.insc-seg-btn:hover { border-color: var(--line-strong); background: var(--bg-hover); }
.insc-seg-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.insc-seg-btn.on small { color: var(--accent); }
.insc-badge-def { font-size: var(--t-mention); background: var(--accent); color: #fff; padding: 1px 6px; margin-left: 6px; font-weight: 600; vertical-align: middle; border-radius: var(--radius-sm); }

/* Famille (chips, choix unique) */
.insc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.insc-chip { font-size: var(--t-liste); padding: 8px 12px; border: 1.5px solid var(--line);
  background: var(--bg-elev); cursor: pointer; transition: .15s; display: flex; align-items: center; gap: 8px;
  border-radius: var(--radius-sm);
}
.insc-chip:hover { border-color: var(--line-strong); }
.insc-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.insc-chip .insc-ck { width: 15px; height: 15px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: var(--t-mention); }
.insc-chip.on .insc-ck { background: var(--accent); border-color: var(--accent); color: #fff; }
.insc-chip-sub { color: var(--text-subtle); font-size: var(--t-mention); margin-left: 2px; }

/* Juridictions */
.insc-juris { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.insc-jcard { flex: 1; min-width: 180px; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 16px;
  cursor: pointer; transition: .15s; display: flex; align-items: center; gap: 12px; }
.insc-jcard:hover { border-color: var(--line-strong); }
.insc-jcard.on { border-color: var(--accent); background: var(--accent-soft); }
.insc-jcard.na { cursor: not-allowed; opacity: .5; }
.insc-jcard.na:hover { border-color: var(--line); }
.insc-flag { font-size: var(--t-page); }
.insc-jcard b { font-size: var(--t-texte); }
.insc-jcard div small { color: var(--text-muted); font-size: var(--t-meta); }
.insc-ck-lg { margin-left: auto; width: 18px; height: 18px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: var(--t-mention); }
.insc-jcard.on .insc-ck-lg { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Questions conditionnelles */
.insc-q { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.insc-q:last-child { border-bottom: 0; }
.insc-q span { font-size: var(--t-liste); }
.insc-toggle { display: inline-flex; border: 1.5px solid var(--line); overflow: hidden; border-radius: var(--radius); }
.insc-toggle button { font: inherit; font-size: var(--t-meta); padding: 6px 12px; border: 0; background: var(--bg-elev); color: var(--text-muted); cursor: pointer; }
.insc-toggle button.on { background: var(--accent); color: #fff; font-weight: 600; }

/* Résultat (colonnes par juridiction) */
.insc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Un seul marché : pleine largeur, référentiels à cocher sur deux colonnes. */
.insc-cols--seule { grid-template-columns: 1fr; }
.insc-cols--seule .insc-ilist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: start; }
@media (max-width: 760px) { .insc-cols { grid-template-columns: 1fr; } .insc-cols--seule .insc-ilist { grid-template-columns: 1fr; } }
.insc-jcol { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-elev); }
.insc-jcol-head { padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.insc-jcol-head b { font-size: var(--t-texte); }
.insc-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: var(--t-meta); font-weight: 600; line-height: 1.2; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid currentColor; }
.insc-ilist { padding: 8px 10px; }
.insc-inst { display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px; border-radius: var(--radius); font-size: var(--t-liste); }
.insc-inst:hover { background: var(--bg-hover); }
.insc-inst-body { flex: 1; }
.insc-inst-body b { font-weight: 600; display: block; }
.insc-inst-body small { color: var(--text-muted); font-size: var(--t-mention); }
.insc-tag { flex-shrink: 0; margin-top: 2px; }
.insc-tag.req { color: var(--ok-texte); }
.insc-tag.na { color: var(--text-subtle); }
.insc-inst-check { cursor: pointer; align-items: center; }
.insc-inst-check input { margin: 0; flex-shrink: 0; }
.insc-inst-check:not(.on) .insc-inst-body b { color: var(--text-muted); font-weight: 500; }
.insc-inst-check.na { cursor: default; opacity: .6; }
.insc-inst-motif { display: block; color: var(--warn-texte) !important; margin-top: 2px; }
/* Régime d'évaluation d'un référentiel du périmètre : à certifier (organisme notifié),
   à attester (auto-déclaration) ou « selon le module ». Même vocabulaire visuel que les
   étiquettes du bloc « Procédure d'évaluation » (.insc-modtag.tiers/.auto/.none). */
.insc-inst-regime { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; }
.insc-norms { padding: 10px 16px; border-top: 1px solid var(--line); font-size: var(--t-meta); color: var(--text-muted); }

/* Caractéristiques du produit (inscription) — le bloc des modules est passé sur la page
   « Préparer l'instruction » (.prep-*). */
.insc-modules { margin: 20px 0 6px; padding-top: 16px; border-top: 1px dashed var(--line); }
.insc-modules-h { font-size: var(--t-texte); font-weight: 600; margin: 0 0 4px; }
.insc-modtag.tiers { color: var(--accent); }
.insc-modtag.auto  { color: var(--text-muted); }
.insc-n { display: inline-block; font-family: var(--font-mono); font-size: var(--t-mention); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 8px; margin: 2px 4px 0 0; color: var(--text); }

/* Récap */
.insc-sumbar { display: flex; align-items: center; gap: 16px; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,.06)); padding: 16px 20px; margin-top: 20px; }
.insc-big { font-size: var(--t-affiche); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.insc-lbl { font-size: var(--t-meta); color: var(--text-muted); }
.insc-sep { width: 1px; height: 34px; background: var(--line); }
.insc-sumbar-note { margin-left: auto; text-align: right; max-width: 230px; font-size: var(--t-meta); color: var(--text-muted); }
.insc-loading { padding: 40px; text-align: center; color: var(--text-muted); }
.insc-disclaimer { font-size: var(--t-mention); color: var(--text-subtle); text-align: center; margin-top: 16px; }

/* Navigation */
.insc-nav { display: flex; justify-content: space-between; margin-top: 24px; }
/* Un traitement en cours : « Enregistrer » ne passe pas sous son panneau (bug #31). */
.app2:has(.proc-panel) .insc-nav { padding-right: calc(var(--proc-panel-l) + 24px); }

/* ====================================================================== */
/* Authentification — écran login / première installation (login.jsx)     */
/* ====================================================================== */
/* ── Écran d'amorçage (index.html, hors de #root) ────────────────────────────
   Visible du premier instant au premier écran réel : compilation Babel des 35
   scripts, puis vérification de session. Il porte la marque pour qu'on sache OÙ
   l'on est, une barre qui avance pour qu'on sache QUE ça avance, et une ligne
   d'état qui finit par dire si c'est trop long. Retiré par AuthGate. */
.amorce { position: fixed; inset: 0; z-index: 9999; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: var(--bg); color: var(--text); }
.amorce--sortie { opacity: 0; pointer-events: none; transition: opacity 0.18s ease; }
.amorce-marque { display: flex; align-items: center; gap: 8px;
  font-size: var(--t-panneau); font-weight: 700; letter-spacing: -0.01em; }
.amorce-sigle { display: inline-grid; place-content: center; width: 26px; height: 26px; font-size: var(--t-texte); border-radius: var(--radius-sm); background: var(--rg-lime);
  color: #1A1C20; }
.amorce-barre { position: relative; width: 168px; height: 3px; overflow: hidden; background: var(--line); border-radius: 0; }
.amorce-barre-part { position: absolute; inset: 0 auto 0 0; width: 42%;
  animation: amorce-va-et-vient 1.15s ease-in-out infinite; border-radius: 0; background: var(--rg-lime); }
@keyframes amorce-va-et-vient {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(268%); }
}
.amorce-etat { font-size: var(--t-liste); color: var(--text-muted); text-align: center;
  max-width: 320px; padding: 0 16px; }
/* Mouvement réduit : la barre cesse d'aller et venir, l'attente se lit au texte. */
@media (prefers-reduced-motion: reduce) {
  .amorce-barre-part { animation: none; width: 100%; opacity: 0.45; }
  .amorce--sortie { transition: none; }
}

.auth-loading { display: grid; place-content: center; min-height: 100vh; color: var(--text-muted); }
.auth-screen { display: grid; place-items: center; min-height: 100vh; padding: 24px;
  background: var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow, 0 8px 28px rgba(0,0,0,.10)); padding: 32px 32px; }
.auth-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: var(--t-section); }
.auth-logo { width: 30px; height: 30px; border-radius: var(--radius); background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; }
.auth-title { font-size: var(--t-panneau); margin: 0 0 4px; font-weight: 600; letter-spacing: -.01em; }
.auth-sub { color: var(--text-muted); font-size: var(--t-liste); margin: 0 0 20px; }
.auth-err { background: var(--warn-soft); color: var(--warn-texte); padding: 8px 12px; border-radius: var(--radius);
  font-size: var(--t-liste); margin-bottom: 16px; }
.auth-label { display: block; font-size: var(--t-meta); color: var(--text-muted); margin: 10px 0 4px; }
.auth-input { width: 100%; font: inherit; font-size: var(--t-texte); padding: 10px 12px; border: 1.5px solid var(--line);
  border-radius: var(--radius); background: var(--bg-sunken); color: var(--text); }
.auth-input:focus { outline: none; border-color: var(--accent); background: var(--bg-elev); }
.auth-btn { width: 100%; margin-top: 20px; justify-content: center; }
.auth-back { background: none; border: 0; color: var(--text-muted); font: inherit; font-size: var(--t-liste);
  cursor: pointer; padding: 0; margin-bottom: 10px; }
.auth-back:hover { color: var(--text); }

/* Grille de pseudos */
.auth-pseudos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 4px; }
.auth-pseudo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px;
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); cursor: pointer;
  transition: .15s; color: var(--text); }
.auth-pseudo:hover { border-color: var(--accent); background: var(--accent-soft); }
.auth-pseudo-code { font-family: var(--font-mono); font-size: var(--t-page); font-weight: 700; letter-spacing: .04em; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.auth-pseudo-nom { font-size: var(--t-meta); color: var(--text-muted); text-align: center; }
.auth-pseudo-picto { display: inline-flex; color: var(--text-muted); }
.auth-pseudo--decideur .auth-pseudo-picto { color: var(--accent); }
.auth-pseudo-profil { font-size: var(--t-mention); color: var(--text-subtle); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
/* Connexion par structure : trois accès (entreprises, organismes, administration) */
.auth-card--large { max-width: 640px; }
.auth-acces { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); }
.auth-ligne { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.auth-ligne + .auth-ligne { border-top: 1px solid var(--line); }
.auth-ligne-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.auth-ligne-titre { font-size: var(--t-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.auth-ligne-sous { font-size: var(--t-meta); color: var(--text-subtle); }
.auth-structs { display: flex; flex-wrap: wrap; gap: 6px; }
.auth-struct { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; font: inherit; font-size: var(--t-liste);
  color: var(--text); background: var(--bg-elev); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-sm); cursor: pointer; }
.auth-struct:hover:not(:disabled) { border-color: var(--accent); }
.auth-struct.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.auth-struct:disabled { color: var(--text-subtle); cursor: default; opacity: .7; }
.auth-struct:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-struct-n { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.auth-card--large .dpub-lien { margin-top: 16px; }
/* ════════════════════ Tableau de bord (accueil) ════════════════════ */

.db-section { margin-bottom: 32px; }
.db-section-title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-size: var(--t-page); font-weight: 600; color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
/* Onglets d'accueil du rédacteur : à droite du titre « Tableau de bord », pour que
   la file des demandes de mission ne pousse pas produits et messages vers le bas. */
.db-sol--decider { cursor: pointer; }
.db-add-projet {
  margin-left: auto; flex: 0 0 auto;
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-panneau); line-height: 1; font-weight: 600;
  color: var(--text-subtle); background: var(--bg-sunken);
  border: 1px solid var(--border);
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; border-radius: var(--radius);
}
.db-badge {
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
  background: var(--accent);
  border-radius: var(--radius);
  letter-spacing: 0;
}
/* Compteurs de validation : jaune « en attente / à valider », vert « validés » */
.db-badge--attente { background: var(--warn); }
.db-badge--green   { background: var(--ok); min-width: 0; height: auto; font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--bg); }
.db-badge--certifie { background: transparent; border: 1px solid var(--ok); color: var(--bg); background-color: var(--ok); border-color: var(--ok); }

/* Liste des sollicitations / validations en attente */
.db-soles { display: flex; flex-direction: column;
  gap: 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); }
.db-sol { gap: 12px; cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.db-sol-icon { flex-shrink: 0; align-self: start; margin-top: 2px; width: 14px; height: 14px; display: grid; place-items: center; font-size: 0; grid-column: 1; grid-row: 1; }
.db-sol-body { flex: 1; min-width: 0; display: contents; }
.db-sol-q { font-weight: 400; font-size: var(--t-meta); color: var(--text-muted); line-height: 1.45; grid-column: 2 / 4; }

/* ── Disposition deux colonnes : gauche projets, droite messages ── */
.db-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
/* Apparition modale : léger grossissement + fondu (page de vérification — p4-detail-modal) */
@keyframes modal-pop-in {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Détail d'un document à valider, affiché dans la colonne de droite (la gauche reste
   inchangée). Panneau propre (bordure, pas d'ombre), collant et défilant en interne. */
.db-val-panel {
  position: sticky; top: 12px; display: flex; flex-direction: column;
  max-height: calc(100vh - 96px); background: var(--bg);
  border: 1px solid var(--border); overflow: hidden;
  border-radius: var(--radius);
}
.db-val-panel .p4-d-body { flex: 1; overflow-y: auto; min-height: 0; padding: 8px; }
/* Instructeur : exigences d'une procédure, ouvertes depuis « Mes procédures ». */
.db-procvue-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-procvue-retour { flex-shrink: 0; }
.db-procvue-titre { min-width: 0; }
.db-procvue-compte { margin-left: auto; font-size: var(--t-meta); font-weight: 500; color: var(--text-subtle); text-transform: none; letter-spacing: 0; }
.db-procvue-req { cursor: pointer; align-items: center; }
.db-procvue-req--nonsoumise { cursor: default; opacity: 0.55; }
.db-procvue-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.db-procvue-meta .db-proc-etat { flex-shrink: 0; font-family: var(--font-sans); }
.db-procvue-req--nonsoumise:hover { background: inherit; }
/* Sélection d'une sollicitation « en attente » : garde le jaune (fond + bordure) plutôt que l'accent. */
.db-col-left { min-width: 0; }
/* Colonne droite : pleine hauteur, fixe au scroll (la gauche défile) */
.db-col-right { min-width: 0; position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 24px); overflow-y: auto; }
@media (max-width: 1100px) { .db-grid { grid-template-columns: 1fr; } }
/* En colonne (moitié de page), les cartes projet s'empilent */
.db-projets--col { grid-template-columns: 1fr; }

/* ── Fil des messages / clarifications ── */
.db-msgs { display: flex; flex-direction: column; gap: 10px; }
.db-msg { cursor: pointer; transition: background 0.12s, box-shadow 0.12s;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  background: var(--surface);
  padding: 12px 16px;
}
.db-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.db-msg-line { align-items: flex-start; gap: 8px;
  display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px;
  margin-top: 0; padding: 8px 0; border-top: 1px dotted var(--line-strong); }
.db-msg-icon { flex-shrink: 0; font-size: var(--t-liste); line-height: 1.45; display: none; }
.db-msg-txt { flex: 1; min-width: 0; grid-column: 2; grid-row: 1; font-size: var(--t-liste); color: var(--text); }

/* Groupement par entreprise */
.db-ent-group { margin-bottom: 24px; }
.db-ent-group-title {
  font-size: var(--t-liste); font-weight: 700; color: var(--text);
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

/* Grille de cartes projet */
.db-projets {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px;
}
.db-projet {
  background: var(--bg-elev); border: 1px solid var(--border);
  display: flex; flex-direction: column;
  container-type: inline-size;
  border-radius: var(--radius);
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.db-projet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: var(--bg-sunken); border-bottom: 1px solid var(--line); }
.db-projet-name { color: var(--text); flex: 1 1 auto; min-width: 0; font-size: var(--t-panneau); font-weight: 600; }
.db-projet-head-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.db-projet-del { flex: 0 0 auto; padding: 2px 8px; line-height: 1; opacity: 0; transition: opacity 0.12s; }
.db-projet:hover .db-projet-del, .db-projet-del:focus-visible { opacity: .7; }
.db-projet-del:hover { opacity: 1; background: rgba(220,38,38,.18); color: #FCA5A5; border-color: rgba(220,38,38,.5); }
.db-projet-empty { font-size: var(--t-liste); color: var(--text-muted); font-style: italic; }
.db-projet--processing .db-projet-name { color: var(--text-muted); }
.db-projet-processing { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-liste); color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.db-proc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 4px; animation: proc-blink 1s ease infinite; }

.db-ent-tag {
  font-size: var(--t-mention); color: var(--text-muted); background: var(--bg-sunken);
  border: 1px solid var(--border); padding: 4px 8px;
  cursor: pointer; white-space: nowrap; transition: background 0.12s;
  border-radius: var(--radius-sm);
}
.db-ent-tag:hover { background: var(--bg-hover); color: var(--text); }
/* Vue vérificateur : l'entreprise se lit, elle ne s'édite pas — ni main, ni survol. */
.db-ent-tag--lecture { display: inline-block; cursor: default; }
.db-ent-tag--lecture:hover { background: var(--bg-sunken); color: var(--text-muted); }
.db-ent-input {
  font-size: var(--t-meta); padding: 4px 8px; border: 1px solid var(--accent);
  border-radius: var(--radius); background: var(--bg-elev); color: var(--text);
  outline: none; max-width: 180px;
}

/* Ligne directive cliquable */
/* Vue « Mes procédures » (vérificateur) : ligne instrument · module · état */
/* Passe à la ligne : dans une carte étroite, les gestes (« Prendre en instruction »,
   « Rouvrir pour le fabricant ») débordaient du cadre et se faisaient couper. */
.db-proc-row { cursor: pointer;
  transition: background 0.12s; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* Procédure visible mais hors de portée du lecteur (décideur devant une instruction
   en cours) : dépareillée, et INERTE — pas de survol, pas de curseur de main. Un
   rollover promet une action ; ici il n'y en a pas, la ligne n'est qu'une nouvelle. */
.db-proc-row--avenir { opacity: 0.45; cursor: default; }
.db-proc-row--avenir:hover { background: transparent !important; }
/* Procédure déjà choisie par l'administrateur d'organisme : plus rien à cliquer (bug #80). */
.db-proc-row--inerte { cursor: default; }
.db-proc-row--inerte:hover { background: transparent !important; }
/* L'état se cale à droite : l'étiquette du référentiel et son module restent groupés. */
.db-proc-etat { flex-shrink: 0; margin-left: auto; }
.db-proc-etat--def   { color: var(--accent-verificateur); }
/* Actions procédure de l'instructeur, posées sur la ligne « Mes procédures » de l'accueil. */
.db-proc-act { flex-shrink: 0; }
.db-proc-act--fin { color: var(--ok-texte); border-color: var(--ok); }
.db-proc-act--fin:hover { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-texte); }

.db-dir-row {
  cursor: pointer; transition: background 0.12s;
  /* Grille à colonnes fixes : jauge et méta de largeur constante → les jauges sont
     de même taille et alignées d'une ligne à l'autre (indépendamment du nom/badge). */
  display: grid; grid-template-columns: minmax(0, 1fr) var(--db-dir-milieu) 168px; align-items: center; gap: 12px;
  border-radius: 0;
  background: transparent;
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 8px 2px;
}
/* Une seule grille pour toutes les lignes (bug #82) : jauge ou statut (certifié, en
   validation…) occupent la MÊME colonne du milieu, à la même largeur, centrés. */
@container (max-width: 440px) {
  .db-dir-row { grid-template-columns: minmax(0, 1fr) var(--db-dir-milieu) auto; }
}
/* Drapeau + nom + badge module groupés à gauche → le badge est collé au nom. */
.db-dir-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.db-dir-jauge { min-width: 0; overflow: hidden; display: flex; justify-content: center; }
/* Badge module retenu (axe 2) — contour, sans aplat de couleur */
.db-modbadge { flex-shrink: 0; font-family: var(--font-mono); border: 1px solid currentColor; font-weight: 500; font-size: var(--t-mention); padding: 1px 6px; border-radius: var(--radius-sm); }
.db-modbadge.auto  { color: var(--text-muted); }
.db-dir-jauge .db-jauge { width: 100%; height: 20px; }
.db-dir-meta { flex: 1 1 0; min-width: 0; font-size: var(--t-mention); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.db-dir-prets { font-weight: 600; color: var(--warn-texte); }
.db-dir-date { color: var(--text-subtle); }
/* Pastille d'état terminal (rédacteur) : certifié / attesté (auto-déclaration) / refusé */
.db-dir-etat { flex-shrink: 0; white-space: nowrap; }
/* Statut à la place de la jauge : borné à la colonne, texte tronqué (entier au survol). */
.db-dir-jauge .db-dir-etat { width: 100%; min-width: 0; justify-content: center; }
.db-dir-etat-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* F5 (#160) : bandeau « run d'exploration — non scellable » en tête des résultats */
.exploration-banner { border-left: 3px solid var(--warn); }
/* Famille de produit après le nom du produit (plus petit, plus clair) */
.db-projet-famille { margin-left: 8px; font-size: var(--t-mention); font-weight: 500; color: var(--text-subtle); }
/* Groupe de référentiels par périmètre (UE / États-Unis) */
.db-jur-group { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.db-jur-head { display: flex; align-items: center; gap: 6px; font-size: var(--t-meta); font-weight: 600; color: var(--text-muted); margin: 0 0 4px; text-transform: none; letter-spacing: 0; }

/* Jauge empilée présents / partiels / absents : soulignement coloré, texte noir */
.db-jauge {
  display: flex; width: 100%; height: 22px;
}
/* Segment de jauge : poids en variable --n (calculé), couleur par classe */
.db-jauge-seg { flex-grow: var(--n, 1); border-bottom: 3px solid var(--line-strong); display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.db-jauge-seg--ok   { border-bottom-color: var(--ok); }
.db-jauge-seg--warn { border-bottom-color: var(--warn); }
.db-jauge-seg--err  { border-bottom-color: var(--err); }
/* Avis à l'aveugle : éléments « à juger » — trait discontinu, pas de couleur d'état */
.db-jauge-seg--masque { border-bottom-style: dashed; }
.db-jauge-txt {
  font-size: var(--t-mention);
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}
.db-jauge--empty { align-items: center; justify-content: center; }
.db-jauge-emptytxt { font-size: var(--t-mention); color: var(--text-subtle); }

/* ── Cadre d'alerte (bandeau de panne technique, AlerteTechnique) ── */
.coherence-panel { border: 1.5px solid var(--warn); border-radius: var(--radius); margin-bottom: 20px; background: var(--warn-soft); overflow: hidden; }
.coherence-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: var(--t-liste); font-weight: 700; cursor: pointer; user-select: none; color: var(--warn-texte); }
.coherence-body { padding: 0 16px 12px; }
/* Puces (directives d'une référence, reference.jsx) */
.coherence-consensus-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.coherence-chip { background: var(--ok-soft); border-radius: var(--radius); padding: 2px 8px; font-size: var(--t-mention); }

/* ── Cohérence du dossier : une phase (.p4-phase) en tête des exigences en cours, une ligne
   par variable (Fred, 09/10/2026). Le fond d'alerte ne couvre que les lignes en écart. ── */
.p4-phase-synthese .coherence-synthese--crit { color: var(--err-texte); font-weight: 600; }
.p4-phase-synthese .coherence-synthese--warn { color: var(--warn-texte); font-weight: 600; }
.coherence-corps { padding: 0 4px 4px 24px; }
.coherence-grille { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--t-liste); }
.coherence-grille th { text-align: left; padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line-strong); font-size: var(--t-mention); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
.coherence-grille td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.coherence-col-marque { width: 20px; }
.coherence-col-variable { width: 26%; }
.coherence-col-declaree { width: 24%; }
.coherence-ligne--ecart td { background: var(--warn-soft); }
.coherence-ligne--crit td { background: var(--err-soft); }
.coherence-marque { padding-top: 8px; }
.coherence-marque .req-status-dot { display: inline-block; }
.coherence-variable { font-weight: 600; }
.coherence-declaree { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coherence-sources { font-size: var(--t-meta); color: var(--text-muted); }
.coherence-sources b { color: var(--text); }
.coherence-source + .coherence-source { margin-top: 2px; }
.coherence-source .file-link { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.coherence-source .coherence-compare-btn { margin-left: 6px; vertical-align: middle; }
.coherence-source--actions { display: flex; align-items: center; gap: 6px; }
.coherence-source--actions .coherence-compare-btn { margin-left: 0; }
/* Indice R6 : la déclaration est peut-être en cause — jamais un verdict. */
.coherence-indice { display: flex; align-items: flex-start; gap: 6px; }
.coherence-indice svg { flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.coherence-muet { font-style: italic; font-weight: 400; color: var(--text-subtle); }
.coherence-hors { margin-top: 8px; font-size: var(--t-meta); color: var(--text-muted); }
.coherence-hors b { color: var(--text); }
.coherence-ancre { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 8px; font-size: var(--t-meta); color: var(--text-subtle); }
.coherence-ancre .file-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.coherence-repair-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--t-mention); font-weight: 600; color: var(--ok-texte); background: var(--bg-elev); border: 1px solid var(--ok); border-radius: var(--radius); padding: 4px 8px; cursor: pointer; white-space: nowrap; }
.coherence-compare-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--t-mention); font-weight: 600; color: var(--accent); background: var(--bg-elev); border: 1px solid var(--accent-line, var(--border)); border-radius: var(--radius); padding: 4px 8px; cursor: pointer; white-space: nowrap; }
.coherence-compare-btn:hover:not(:disabled) { background: var(--accent-soft); }
.coherence-compare-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Modale de comparaison PDF ── */
.pdfc-overlay { position: fixed; inset: 0; z-index: 8500; /* > barre du haut (600), < vue surlignée (9000) */ background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.pdfc-modal { background: var(--bg); width: min(1400px, 96vw); height: min(900px, 92vh); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); border-radius: var(--radius); }
.pdfc-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.pdfc-title { font-size: var(--t-texte); color: var(--text); }
.pdfc-grav { margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: var(--t-meta); font-weight: 600; line-height: 1.2; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid currentColor; }
.pdfc-grav.crit { color: var(--err-texte); }
.pdfc-close { border: none; background: none; font-size: var(--t-page); line-height: 1; color: var(--text-subtle); cursor: pointer; }
.pdfc-close:hover { color: var(--text); }
.pdfc-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.pdfc-pane { background: var(--bg); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pdfc-pane-head { padding: 10px 16px 8px; border-bottom: 1px solid var(--border); }
.pdfc-doc { font-size: var(--t-meta); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdfc-val { font-size: var(--t-meta); color: var(--accent); font-weight: 600; margin-top: 2px; }
/* Gestes de la comparaison (bug #72) : garder ce document, remplacer. */
.pdfc-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.pdfc-ref { font-size: var(--t-meta); color: var(--text-muted); }
.pdfc-nav { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--bg-sunken, var(--surface)); }
.pdfc-navbtn { width: 26px; height: 26px; border: 1px solid var(--border); background: var(--bg-elev); border-radius: var(--radius); cursor: pointer; font-size: var(--t-section); line-height: 1; color: var(--text); }
.pdfc-navbtn:disabled { opacity: 0.35; cursor: default; }
.pdfc-pageinfo { font-size: var(--t-meta); color: var(--text-muted); white-space: nowrap; }
.pdfc-nomatch { font-weight: 600; color: var(--warn-texte); }
.pdfc-found { color: var(--ok-texte); font-weight: 600; }
.pdfc-search { flex: 1; min-width: 0; font-size: var(--t-meta); padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); color: var(--text); }
/* Hôte du lecteur zoomable : le défilement est désormais dans .pdfz-scroll. */
.pdfc-page {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-sunken, #f3f3f3);
}
.pdfc-hl { position: absolute; left: var(--x); top: var(--y); width: var(--l); height: var(--h); background: rgba(57, 255, 20, 0.5); outline: 1.5px solid rgba(40, 200, 0, 0.95); border-radius: var(--radius-sm); pointer-events: none; mix-blend-mode: multiply; }
.pdfc-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-subtle); font-size: var(--t-liste); z-index: 1; }
.pdfc-foot { padding: 6px 20px; font-size: var(--t-mention); color: var(--text-subtle); border-top: 1px solid var(--border); background: var(--surface); }

/* Bouton Réparer (la ligne réparée : .p4-row--repaired, après .p4-row) */
.coherence-repair-btn:hover:not(:disabled) { background: var(--ok-soft); }
.coherence-repair-btn:disabled { opacity: 0.4; cursor: default; }

/* Modale de réparation */
.rep-overlay { position: fixed; inset: 0; z-index: 210; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 24px; }
.rep-modal { background: var(--bg); width: min(620px, 96vw); max-height: var(--modale-haut); overflow: auto; box-shadow: var(--shadow-lg); border-radius: var(--radius); }
.rep-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.rep-title { font-size: var(--t-texte); color: var(--text); }
.rep-tools { display: flex; align-items: center; gap: 4px; }
.rep-close { border: none; background: none; font-size: var(--t-page); line-height: 1; color: var(--text-subtle); cursor: pointer; }
.rep-close:disabled { opacity: 0.4; cursor: default; }
.rep-body { padding: 16px 20px; }
.rep-intro { font-size: var(--t-liste); color: var(--text-muted); margin: 0 0 16px; line-height: 1.45; }
.rep-doc { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; background: var(--bg-elev); }
.rep-doc-head { margin-bottom: 8px; }
.rep-doc-name { font-size: var(--t-liste); font-weight: 700; color: var(--text); }
.rep-doc-val { font-size: var(--t-meta); color: var(--accent); font-weight: 600; margin-top: 2px; }
.rep-doc-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* `subtle` supprime la bordure : côte à côte, le bouton n'aurait plus l'air d'un
   bouton à côté de son jumeau. On la rétablit ici, sans fond coloré. */
.rep-doc-actions > .btn.subtle { border-color: var(--line); }
.rep-busy { display: flex; align-items: center; gap: 8px; font-size: var(--t-liste); color: var(--text-muted); margin: 12px 0 4px; }
.rep-spin { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: rep-spin 0.8s linear infinite; }
@keyframes rep-spin { to { transform: rotate(360deg); } }
.rep-error { font-size: var(--t-liste); color: var(--err-texte); margin: 10px 0 0; }
.rep-result { font-size: var(--t-liste); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; line-height: 1.45; }
.rep-result.ok { background: var(--ok-soft); color: var(--ok-texte); border: 1px solid var(--ok); }
.rep-result.warn { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn-texte); }
.rep-actions-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; }

/* L'element-drop-zone visé : flash temporaire pour qu'on le repère immédiatement */
.element-drop-zone.element-solicited {
  outline: 2px solid var(--warn);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  animation: solicited-pulse 1s ease-in-out 0s 2;
}
@keyframes solicited-pulse {
  0%, 100% { box-shadow: var(--shadow); }
  50%      { box-shadow: 0 0 0 4px var(--warn-soft); }
}

/* ====================================================================== */
/* Modale d'orchestration automatique (process.jsx)                       */
/* ====================================================================== */
/* Pile des traitements (un panneau par dossier en file ; un seul indexe à la fois). */
/* z-index 590 : au-dessus du contenu de page (synth-page 500) mais SOUS la barre
   (.topbar 600), donc sous le menu d'import « Nouveau dossier » et les modales. */
.proc-stack { position: fixed; bottom: 18px; right: 18px; z-index: 590; display: flex; flex-direction: column-reverse;
  align-items: flex-end; gap: 10px; max-height: calc(100vh - 36px); overflow-y: auto; pointer-events: none; }
.proc-stack > * { pointer-events: auto; flex-shrink: 0; }
.proc-panel { width: var(--proc-panel-l); max-width: calc(100vw - 36px);
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px 20px; }
.proc-panel--wait { opacity: .82; border-style: dashed; }
.proc-panel-head { display: flex; align-items: center; justify-content: space-between; }
.proc-panel-title { font-size: var(--t-section); font-weight: 600; }
.proc-panel-tools { display: flex; gap: 4px; }
.proc-icon-btn { background: none; border: 0; color: var(--text-muted); font-size: var(--t-section); line-height: 1; cursor: pointer; width: 24px; height: 24px; border-radius: var(--radius); }
.proc-icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.proc-pill { max-width: 320px; box-shadow: var(--shadow-lg); cursor: pointer; color: var(--text); }
.proc-pill.wait { opacity: .82; }
.proc-pill.wait .proc-pill-dot { background: var(--text-muted); }
.proc-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.proc-pill-dot.spin { animation: proc-blink 1s ease infinite; }
.proc-pill-name { font-weight: 500; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-pill-state { color: var(--text-muted); }
@keyframes proc-blink { 50% { opacity: .3; } }
.proc-sub { font-size: var(--t-meta); color: var(--text-muted); margin: 2px 0 16px; }
.proc-step { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; opacity: .55; transition: opacity .2s; }
.proc-step.active { opacity: 1; }
.proc-step.ok { opacity: 1; border-color: var(--ok); }
.proc-step-head { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-liste); font-weight: 500; }
.proc-tick { color: var(--ok-texte); font-weight: 700; }
.proc-bar { height: 8px; border-radius: var(--radius); background: var(--bg-sunken); overflow: hidden; margin-top: 8px; }
.proc-fill { height: 100%; background: var(--accent); border-radius: var(--radius); transition: width .3s ease; }
/* Barre segmentée : une case par unité (exigence à vérifier, ou document à indexer).
   Grille auto-fit → cases de largeur UNIFORME sur toutes les rangées (la dernière n'est
   pas étirée), et remplissage de la ligne quand il y en a peu. */
.proc-segbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(9px, 1fr)); gap: 4px; margin-top: 8px; }
.proc-seg { height: 8px; border-radius: var(--radius-sm); background: var(--bg-sunken); transition: background-color .6s ease; }
.proc-seg.done { background: var(--ok); }               /* exigence traitée → vert (transition douce) */
.proc-seg.cur  { background: var(--warn); animation: proc-seg-pulse 0.9s ease-in-out infinite; }
@keyframes proc-seg-pulse {                              /* en cours : jaune ↔ jaune plus vif */
  0%, 100% { background: var(--warn); }
  50%      { background: oklch(0.90 0.20 95); }
}
.proc-meta { display: flex; justify-content: space-between; align-items: flex-start; font-size: var(--t-meta); color: var(--text-muted); margin-top: 6px; word-break: break-word; gap: 10px; }
/* Valeur (pourcentage / compteur) : toujours sur une seule ligne, largeur fixe, encadrée. */
.proc-meta > span:last-child { flex: 0 0 auto; min-width: 54px; text-align: right; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1px 6px; font-variant-numeric: tabular-nums; }
.proc-meta > span:last-child:empty { border: none; padding: 0; min-width: 0; }  /* pas de case vide quand aucune valeur */
.proc-meta > span:first-child { min-width: 0; }
/* Un texte seul n'est pas une valeur : ni case, ni ligne unique (le nom d'un fichier y déborderait). */
.proc-meta > span:only-child { flex: 1 1 auto; min-width: 0; text-align: left; white-space: normal; border: none; padding: 0; }
/* Référentiels du traitement, une ligne par état avec son intitulé (bug #25). */
.proc-groupes { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.proc-groupe { display: flex; align-items: center; gap: 10px; }
.proc-groupe-titre { flex: 0 0 auto; min-width: 88px; font-size: var(--t-meta); color: var(--text-muted); }
.proc-groupe-refs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.proc-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-sm); }
/* Le référentiel en cours : surligné (cadre et texte ocre). */
.proc-groupe--encours .proc-groupe-titre { color: var(--warn-texte); font-weight: 600; }
.proc-groupe--encours .rc { border-color: var(--warn); background: var(--warn-soft); color: var(--warn-texte); }
.proc-groupe--echec .proc-groupe-titre { color: var(--err-texte); font-weight: 600; }
.proc-groupe--attente .proc-groupe-titre { color: var(--warn-texte); }
.proc-groupe--module .proc-groupe-titre { color: var(--warn-texte); }
.proc-groupe-lien { flex: 0 0 auto; font-size: var(--t-meta); }
/* Fin de traitement : ce qui attend un préalable, et les gestes qui le lèvent. */
.proc-suspens { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; padding: 8px 12px;
  border-radius: var(--radius); background: var(--warn-soft); color: var(--warn-texte); font-size: var(--t-liste); line-height: 1.45; }
.proc-suspens-gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.proc-ref { align-items: center; gap: 8px; }
.proc-ref .btn { flex-shrink: 0; }
.proc-err { background: var(--warn-soft); color: var(--warn-texte); padding: 8px 12px; border-radius: var(--radius); font-size: var(--t-liste); margin: 4px 0 12px; }
.proc-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.proc-running { font-size: var(--t-meta); color: var(--text-muted); }

.proc-banner-etat { color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: var(--t-meta); font-weight: 600; line-height: 1.2; }

.page-header--col { flex-shrink: 0; }
.page-body--col { padding: 0; width: 90%; flex: 1; min-height: 0; overflow: hidden; }

.history-toggle.history-toggle--action { width: auto; flex: 0 0 auto; white-space: nowrap; }
.history-toggle-lbl { font-weight: 600; }
/* Menu « Exporter » du bandeau de référentiel */
.exports-menu { position: relative; flex: 0 0 auto; }
.exports-menu-liste {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 280px;
  display: flex; flex-direction: column; padding: 4px 0;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.exports-menu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px;
  border: none; background: transparent; text-align: left; cursor: pointer; color: var(--text);
}
.exports-menu-item:hover, .exports-menu-item:focus-visible { background: var(--bg-sunken); }
.exports-menu-lbl { font-size: var(--t-liste); font-weight: 600; }
.exports-menu-detail { font-size: var(--t-meta); color: var(--text-muted); }

.proc-banner-err { flex-basis: 100%; color: var(--err-texte); font-size: var(--t-meta); display: flex; align-items: center; gap: 6px; }
/* Étapes du bandeau (lot E) : 1. exigences, 2. actes de la procédure, 3. acte final du
   produit. Numérotées en CSS — une étape absente pour ce rôle ne laisse pas de trou, et
   une étape seule ne porte pas de numéro. Sans procédure, le bandeau ne garde que ses
   étapes, et disparaît s'il n'en a aucune. */
/* Étapes sur UNE ligne (22/09/2026) : titres et notes en infobulle (title), étape pas encore
   possible grisée (.proc-etape--avenir) — rien de cliquable, ce qu'elle attend en infobulle. */
/* Sur la ligne du titre, à droite, séparées par un filet ; elles passent dessous quand la place manque. */
.proc-etapes { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--line); counter-reset: proc-etape; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.proc-etape { counter-increment: proc-etape; display: flex; align-items: center; gap: 8px; }
.proc-etape::before { content: counter(proc-etape); flex-shrink: 0; width: 20px; height: 20px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--font-mono); font-size: var(--t-mention); font-weight: 700; line-height: 1; color: var(--text-muted); }
.proc-etape:only-child::before { display: none; }
.proc-etape-corps { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proc-etape-label { font-size: var(--t-meta); font-weight: 600; color: var(--text); }
.proc-etape-reste { font-size: var(--t-meta); font-weight: 600; color: var(--warn-texte); }
.proc-etape--avenir::before { border-style: dashed; }
.proc-etape--avenir .proc-etape-label { color: var(--text-muted); font-weight: 500; }
.proc-etapes:empty { display: none; }
/* En dessous de 1280 px, l'en-tête du référentiel ne tient plus sur une ligne : les
   intercalaires repassent sur deux lignes (sigle, puis écart), et les outils (exports,
   historique) passent sous l'identité au lieu de sortir de l'écran. */
@media (max-width: 1280px) {
  .ref-tab { flex-direction: column; gap: 2px; padding: 4px 12px; }

}
/* Écran étroit : les deux moitiés l'une sous l'autre. */
@media (max-width: 900px) {

  .proc-etapes { padding-left: 0; border-left: 0; }
}

/* « Attester » actionnable (toutes les exigences autocertifiées) : fond vert + pulsation
   d'attention pour signaler l'action possible dès l'autocertification, sans recharger. */
.btn.proc-attestable { background: var(--ok); border-color: var(--ok); color: #fff;
  animation: proc-attestable-pulse 1.5s ease-out 3; }
.btn.proc-attestable:hover { background: var(--ok); border-color: var(--ok); color: #fff; filter: brightness(1.07); }
@keyframes proc-attestable-pulse {
  0%   { box-shadow: var(--shadow); }
  70%  { box-shadow: 0 0 0 9px color-mix(in oklab, var(--ok) 0%, transparent); }
  100% { box-shadow: var(--shadow); }
}

/* ── Administration déléguée : Mes instructeurs (décideur) ──────────────────── */
.orga-instr { margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
.orga-instr-ligne { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; padding: 10px 16px; }
.orga-instr-lbl { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.orga-instr-cible { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--text-subtle); }
.orga-instr-noms { font-size: var(--t-texte); color: var(--text); }
.orga-instr-vide { font-size: var(--t-liste); color: var(--text-muted); }
.orga-instr-ligne .orga-instr-toggle { margin-left: auto; }
.orga-instr-choix { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px 10px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.orga-instr-choix legend { font-size: var(--t-meta); font-weight: 600; color: var(--text-muted); padding: 0 4px; }
.orga-instr-choix code { font-size: var(--t-mention); color: var(--text-subtle); margin-left: 4px; }
.orga-instr-part { font-size: var(--t-meta); color: var(--text-muted); }
.orga-instr-inactif { opacity: .5; }
.db-proc-row--choisie { box-shadow: inset 0 0 0 1.5px var(--accent); }
.mandats-page .page-note { margin-bottom: 16px; }
.orga-instr-body { padding: 0 16px 16px; }
.orga-instr-hint { font-size: var(--t-meta); color: var(--text-muted); margin: 0 0 10px; }
.orga-instr-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.orga-instr-form .auth-input { width: 140px; }
.orga-instr-table { width: 100%; border-collapse: collapse; font-size: var(--t-liste); }
.orga-instr-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }

/* ── Revue décideur : synthèse d'instruction + détail exigences (lecture seule) ── */
.dec-certif-banner {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-liste); font-weight: 600; color: var(--ok-texte);
  background: var(--ok-soft, rgba(0,160,80,0.08));
  border: 1px solid var(--ok); border-radius: var(--radius);
  padding: 8px 12px; margin-bottom: 12px;
}
.dec-synth { font-size: var(--t-liste); margin-bottom: 8px; }
/* Instruction incomplète : la même ligne, en alerte (l'ancienne `.dec-warn` la répétait). */
.dec-synth--alerte { padding: 6px 8px; border: 1px solid var(--rg-warn-edge); background: var(--warn-soft);
  color: var(--warn-texte); border-radius: var(--radius-sm); }
.dec-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.dec-item { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background-color: var(--bg-elev); }
.dec-item-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
.dec-item-head:hover { background: var(--bg-hover); }
.dec-item-title { flex: 1 1 0; min-width: 0; font-size: var(--t-meta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dec-item-score { font-size: var(--t-mention); font-family: var(--font-mono); color: var(--text-muted); flex-shrink: 0; }
.dec-item-chev { color: var(--text-muted); flex-shrink: 0; }
.dec-item-body { padding: 8px 12px; border-top: 1px solid var(--line); font-size: var(--t-meta); color: var(--text-muted); display: flex; flex-direction: column; gap: 6px; }
.dec-item-body .k { font-weight: 700; color: var(--text); margin-right: 4px; }
.dec-just { font-style: italic; }
.dec-interp { background: var(--bg-sunken); padding: 6px 8px; border-radius: var(--radius); }
.dec-elts { margin: 2px 0 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.dec-elt { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-meta); }
.dec-elt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; background: var(--text-muted); }
.dec-elt--present .dec-elt-dot { background: var(--ok); }
.dec-elt--absent .dec-elt-dot  { background: var(--err); }
.dec-elt--partial .dec-elt-dot { background: var(--warn); }
.dec-elt-body { flex: 1; min-width: 0; }
.dec-elt-cite { margin-top: 2px; font-style: italic; color: var(--text-muted); line-height: 1.45; white-space: pre-wrap; }
.dec-elt-remarque { margin-top: 2px; line-height: 1.45; color: var(--warn-texte); }
.dec-elt-remarque--absent { color: var(--err-texte); }

/* Acte final PRODUIT posé sur la barre d'intercalaires (à droite) */
.acte-ctl-done { font-size: var(--t-meta); font-weight: 600; color: var(--ok-texte); }
.acte-ctl-err { color: var(--err-texte); display: inline-flex; }

/* Onglet référentiel délégué à un autre intervenant (rédacteur) : grisé, non cliquable */
.ref-tab--delegue { opacity: 0.45; cursor: not-allowed; filter: grayscale(1); }
.ref-tab--delegue:hover { background: inherit; }
/* Écart entre périmètre attendu et référentiels déclarés (déclaration de conformité) */
/* Une pastille ronde par écart (bug #20) : plein = déclaré (vert) / non déclaré (rouge) /
   à vérifier (jaune) ; anneau jaune = hors périmètre. Le mot est dans l'infobulle. */
.ref-tab-ecart { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--line-strong); }
/* ── Modale de dialogue (remplace alert / confirm / prompt du navigateur) ─────
   z-index très élevé : toujours au-dessus de tout (barre, modales, chips, toasts). */
.dlg-scrim {
  position: fixed; inset: 0; z-index: 1000000;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.15 0.01 260 / 0.5); padding: 24px;
  animation: dlg-fade 0.12s ease-out;
}
.dlg-box {
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 420px;
  padding: 20px 24px; animation: dlg-pop 0.14s ease-out;
}
.dlg-title { font-size: var(--t-section); font-weight: 700; margin-bottom: 8px; }
.dlg-msg { font-size: var(--t-texte); line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; }
/* Picto en tête d'une boîte de dialogue (window.Dialog). */
.dlg-icon { display: flex; justify-content: center; margin-bottom: 12px; color: var(--accent); }
.dlg-cert-err { color: var(--err-texte); font-size: var(--t-liste); margin-top: 8px; text-align: center; }
.dlg-input { width: 100%; box-sizing: border-box; margin-top: 12px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
/* Bouton « Fermer » commun (window.BoutonFermer) : toujours calé à droite de sa ligne. */
.btn-fermer { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.btn-fermer-croix { display: inline-flex; }
.btn-fermer-croix svg { stroke-width: 2.6; }
/* Référence de cohérence en modale : grande boîte, la page garde son partage déclaration / valeurs. */
.modal-box.ref-modal-box {
  max-width: var(--modale-ample); max-height: var(--modale-haut-ample); padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.ref-modal-box .ref-page { flex: 1; min-height: 0; }
@media (max-width: 1100px) {
  .modal-box.ref-modal-box { overflow-y: auto; }
  .ref-modal-box .ref-page { flex: none; }   /* page empilée : hauteur naturelle, la boîte défile */
}
@keyframes dlg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlg-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── Demandes de mission (lot O1) ─────────────────────────────────────────── */
/* Le fabricant sollicite un organisme habilité ; l'acceptation crée la mission
   et déverrouille l'accès au seul référentiel demandé. */
.dem-sub { font-size: var(--t-liste); color: var(--text-muted); }
.dem-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.dem-lbl {
  font-size: var(--t-mention);
  color: var(--text-muted); font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.dem-field select {
  width: 100%; padding: 8px 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font: inherit; font-size: var(--t-liste);
}
.dem-field textarea { width: 100%; padding: 8px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; font-size: var(--t-liste); resize: vertical; }
.dem-complement {
  margin-top: 12px; padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border-color: var(--rg-warn-edge);
  border-top: 3px solid var(--warn);
}
.dem-complement p { margin: 4px 0 0; font-size: var(--t-liste); color: var(--text); }
.dem-vide {
  margin-top: 12px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); font-size: var(--t-liste); color: var(--text-muted);
}
.dem-statut {
  font-size: var(--t-meta); padding: 2px 8px; border-radius: var(--radius);
  border: 1px solid var(--line); color: var(--text-muted); white-space: nowrap;
}
.dem-statut--attente { border-color: var(--warn); color: var(--warn-texte); }
.dem-statut--complement { border-color: var(--warn); background: var(--warn-soft); color: var(--text); }
/* Demande en attente (bandeau de procédure) : un statut sans cadre ; la croix qui la
   retire n'apparaît qu'au survol ou au focus — elle reste atteignable au clavier. */
.dem-demande { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-meta); color: var(--warn-texte); white-space: nowrap; }
.dem-demande-texte { cursor: default; }
.dem-demande-annuler {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-subtle);
  cursor: pointer; opacity: 0; transition: opacity 0.12s;
}
.dem-demande:hover .dem-demande-texte, .dem-demande:focus-within .dem-demande-texte { text-decoration: line-through; color: var(--text-muted); }
.dem-demande:hover .dem-demande-annuler, .dem-demande:focus-within .dem-demande-annuler { opacity: 1; }
.dem-demande-annuler:hover, .dem-demande-annuler:focus-visible { border-color: var(--err); color: var(--err-texte); }
.dem-sol { align-items: flex-start; flex-wrap: wrap; }
.dem-sol--demandee { border-left-color: var(--warn); }
.dem-sol--complement { border-left-color: var(--line); }
.dem-actions { display: flex; gap: 6px; flex-shrink: 0; align-self: center; }
/* Demandes de mission (fabricant) : onglets de filtre, action ou état à droite */
.dem-tabs { display: flex; flex-wrap: wrap; margin-left: auto; gap: 20px; }
.dem-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 4px; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.dem-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Filtres de « Mes procédures » (vérificateur) : l'allure des onglets `.db-val-tab`,
   posés sous le titre. Remise à zéro du bouton AVANT `.db-val-tab`, qui redonne taille,
   graisse et soulignement (même montage que `.dem-tab`). */
.db-proc-filtres { display: flex; flex-wrap: wrap; margin-bottom: 12px; }
.db-proc-filtre { background: none; border: 0; font: inherit; letter-spacing: inherit; }
.db-proc-filtre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dem-tab--a_soumettre.active { border-bottom-color: var(--warn); }
.dem-tab--soumises.active { border-bottom-color: var(--accent); }
.dem-tab--acceptees.active { border-bottom-color: var(--ok); }
.dem-tab--en_instruction.active { border-bottom-color: var(--accent); }
.dem-tab--en_validation.active { border-bottom-color: var(--warn); }
.dem-tab--certifiees.active { border-bottom-color: var(--ok); }
/* Le corps de la ligne doit pouvoir rétrécir (min-width:auto par défaut sur un item
   flex l'en empêche) : sans cela le titre se casse mot à mot pour laisser la place
   aux boutons. En dessous de 900 px, les actions passent sous le texte. */
.dem-sol .db-sol-body { min-width: 0; flex: 1 1 320px; }
/* Page « Demandes de mission » (fabricant) : onglets à droite, sur la ligne du titre */
.dem-page-head { align-items: center; }
.dem-page-titre { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; }
/* « À soumettre » : une carte par produit, ses référentiels à cocher */
.dem-prod-rows { display: flex; flex-direction: column; gap: 0; }
.dem-prod-rows--auto { margin-top: 12px; }
.dem-prod-sous-titre {
  padding: 6px 2px; font-size: var(--t-mention); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.dem-prod-sous-note { margin-left: 6px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.dem-prod-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background 0.12s;
  border-radius: 0; background: transparent; border-top: 1px solid var(--line); padding: 8px 2px;
}
.dem-prod-row--complement { cursor: default; }
.dem-prod-row input { margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.dem-prod-row > .btn, .dem-prod-row > .rc, .dem-prod-row > .db-modbadge { flex-shrink: 0; }
.dem-prod-etat { flex: 0 1 auto; min-width: 0; margin-left: auto; text-align: right; font-size: var(--t-meta); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dem-vide--err { border-color: var(--err); color: var(--err-texte); }
.dem-prod-row--complement .dem-prod-etat { flex: 0 1 50%; color: var(--text); white-space: normal; }
/* Onglets de suivi : picto de phase à la place de la case, suivi détaillé à droite. */
.dem-prod-row--suivi { cursor: default; }
.dem-prod-ico { display: inline-flex; flex-shrink: 0; width: 18px; justify-content: center; color: var(--text-subtle); }
.dem-prod-row--suivi .dem-prod-etat { flex: 0 1 auto; white-space: nowrap; }
.dem-prod-row--suivi.dem-prod-row--complement .dem-prod-etat { flex: 0 1 50%; white-space: normal; }
/* Référentiel à une autre étape que l'onglet ouvert : visible, mais en retrait. */
.dem-prod-row--hors { opacity: 0.45; }
.dem-prod-row--demandee .dem-prod-etat { color: var(--warn-texte); }
/* Mes produits (rédacteur) : état de la mission, à la suite du nom du référentiel ;
   c'est lui qui rétrécit (ellipse) avant le nom quand la place manque. */
.db-dir-mission {
  flex: 0 1000 auto; min-width: 0; margin-left: 4px; font-size: var(--t-meta); color: var(--text-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-dir-mission--attente { color: var(--warn-texte); }
.db-dir-mission--instruction,
.db-dir-mission--validation { color: var(--accent-verificateur); }
.db-dir-mission--confie { color: var(--ok-texte); }
@media (max-width: 900px) {
  .dem-actions { align-self: flex-start; width: 100%; }
}
.dem-sol--confie { border-left-color: var(--ok); }

/* ── Page publique « Demande de mission » (lot O1) ────────────────────────── */
.dpub-screen { align-items: flex-start; padding: 40px 16px; overflow-y: auto; }
.dpub-card { max-width: 560px; text-align: left; }
.dpub-sect {
  margin: 20px 0 8px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: var(--t-mention);
  color: var(--text-muted); font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.dpub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .dpub-grid { grid-template-columns: 1fr; } }
.dpub-f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.dpub-f .auth-label { margin: 0; }
.dpub-area { resize: vertical; font-family: inherit; }
.dpub-vide {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--t-liste); color: var(--text-muted); margin-bottom: 10px;
}
.dpub-lien {
  display: block; margin-top: 16px; text-align: center;
  font-size: var(--t-liste); color: var(--text-muted); text-decoration: none;
}
.dpub-lien:hover { color: var(--text); text-decoration: underline; }
.dpub-retour { display: block; text-align: center; text-decoration: none; }
/* Demande publique dans la file de l'organisme : c'est un prospect, pas un client. */
.dem-sol--public .db-sol-meta::after {
  content: "prospect"; margin-left: 8px; padding: 0 6px;
  font-size: var(--t-mention); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-muted);
  font-weight: 600; vertical-align: middle;
}
.dem-ouverture {
  margin-top: 8px; padding: 8px 12px; font-size: var(--t-liste);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border-color: var(--rg-lime);
}
.dem-ouverture code { user-select: all; word-break: break-all; }

/* Formulaire de demande — structure du formulaire de vérification à l'unité. */
.dpub-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.dpub-prefill {
  margin-bottom: 12px; padding: 8px 12px;
  font-size: var(--t-liste); color: var(--text-muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
}
.dpub-raz {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-decoration: underline;
}
.dpub-radios { display: flex; flex-wrap: wrap; gap: 6px; }
.dpub-radio, .dpub-case {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--t-liste); background: var(--bg);
}
.dpub-radio.on, .dpub-case.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.dpub-cases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dpub-copie {
  float: right; border: 0; background: none; padding: 0; cursor: pointer;
  font-size: var(--t-mention); letter-spacing: 0; text-transform: none;
  color: var(--accent); text-decoration: underline; font-weight: 400;
}
.dpub-engagement {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); font-size: var(--t-meta); line-height: 1.45; color: var(--text-muted);
}
.dpub-engagement p { margin: 0 0 8px; }
.dpub-engagement p:last-child { margin-bottom: 0; }
.dpub-check {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 4px;
  font-size: var(--t-liste); cursor: pointer;
}
.dpub-manque {
  margin: 12px 0 4px; padding: 8px 12px;
  font-size: var(--t-meta); color: var(--text-muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border-color: var(--rg-warn-edge);
  border-top: 3px solid var(--warn);
}
.dpub-elargir {
  margin: -4px 0 10px; font-size: var(--t-meta); color: var(--text-muted);
}
.dpub-elargir button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-decoration: underline;
}

/* ── Mandat (lot O3) ──────────────────────────────────────────────────────── */
.mandat-caps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mandat-cap {
  font-size: var(--t-mention); padding: 1px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); color: var(--text-muted);
  text-decoration: line-through; text-decoration-color: var(--line);
}
.mandat-cap.on {
  border-color: var(--ok); color: var(--ok-texte); text-decoration: none; font-weight: 600;
}
button.mandat-cap { font: inherit; cursor: pointer; }
button.mandat-cap:disabled { cursor: progress; opacity: .6; }
button.mandat-cap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Entreprises clientes (roue crantée de l'organisme) */
.clients { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; }
.client { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.client--off { opacity: .55; }
.client-tete { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.client-tete::-webkit-details-marker { display: none; }
.client-tete::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(-45deg); transition: transform .15s; flex-shrink: 0; }
.client[open] > .client-tete::before { transform: rotate(45deg); }
.client-tete:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.client:not([open]) { gap: 0; }
.client-alerte { font-size: var(--t-meta); padding: 0 6px; border: 1px solid var(--warn); border-radius: var(--radius-sm); color: var(--text); white-space: nowrap; }
.client-alerte--urgent { border-color: var(--err); color: var(--err-texte); font-weight: 600; }
.client-nom { font-size: var(--t-section); font-weight: 600; margin: 0; }
.client-compte { margin-left: auto; font-size: var(--t-meta); color: var(--text-subtle); }
.client-personnes { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: var(--t-texte); }
.client-personnes dt { color: var(--text-subtle); font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.client-personnes dd { margin: 0; }
.client-bloc { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.client-bloc-t { font-size: var(--t-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); }
.client-aide { font-weight: 400; text-transform: none; letter-spacing: 0; }
.client-produit { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.client-produit + .client-produit { border-top: 1px dashed var(--line); }
.client-produit-nom { font-weight: 600; font-size: var(--t-texte); }
.client-mission { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--t-liste); padding-left: 12px; }
.client-mission-ref { min-width: 16ch; }
.client-etat { font-size: var(--t-meta); padding: 0 6px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-sm); color: var(--text-muted); white-space: nowrap; }
.client-etat--certifie, .client-etat--atteste_interne { border-color: var(--ok); color: var(--ok-texte); }
.client-etat--decision, .client-etat--demande_complement, .client-etat--demande_demandee { border-color: var(--warn); }
.client-etat--refuse { border-color: var(--err); color: var(--err-texte); }
.client-etat--soumis { border-color: var(--err); color: var(--err-texte); font-weight: 600; }
button.client-etat--lien { font: inherit; font-size: var(--t-meta); background: none; cursor: pointer; }
button.client-etat--lien:hover { border-color: var(--accent); color: var(--text); }
button.client-etat--lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.client-mission-instr { font-size: var(--t-liste); color: var(--text-muted); }
.client-vide { font-size: var(--t-liste); color: var(--text-muted); }
@media (max-width: 640px) { .client-personnes { grid-template-columns: 1fr; } }
.dpub-complement {
  margin-bottom: 12px; padding: 10px 12px; font-size: var(--t-liste);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border-color: var(--rg-warn-edge);
  border-top: 3px solid var(--warn);
}
.dpub-complement-t { margin-top: 6px; font-style: italic; color: var(--text-muted); }
.dem-suivi {
  margin-top: 6px; padding: 8px 12px; font-size: var(--t-meta);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border-color: var(--rg-warn-edge);
  border-top: 3px solid var(--warn);
}
.dem-suivi code { user-select: all; word-break: break-all; }
.dem-motif-aide {
  margin: 0 0 8px; font-size: var(--t-meta); line-height: 1.45; color: var(--text-muted);
}
.dem-attente {
  margin-top: 6px; padding: 8px 10px; font-size: var(--t-liste);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border-color: var(--rg-warn-edge);
  border-top: 3px solid var(--warn);
}
.dem-relien {
  display: block; margin-top: 4px; border: 0; background: none; padding: 0;
  cursor: pointer; font: inherit; font-size: var(--t-meta);
  color: var(--accent); text-decoration: underline;
}

/* ── Modale d'examen d'une demande de mission (lot O1c) ───────────────────── */
.exam-tag {
  margin-left: 8px;
  color: var(--text-muted); vertical-align: middle;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid currentColor;
}
.exam-corps {
  margin-top: 16px; max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 12px 10px;
}
.exam-sect {
  margin: 12px 0 4px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: var(--t-mention);
  color: var(--text-muted); font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.exam-corps .exam-sect:first-child { border-top: 0; margin-top: 6px; padding-top: 0; }
.exam-l {
  display: grid; grid-template-columns: 168px 1fr; gap: 10px;
  padding: 4px 0; font-size: var(--t-liste);
}
.exam-l > span { color: var(--text-muted); }
.exam-l > div { white-space: pre-line; }
@media (max-width: 560px) { .exam-l { grid-template-columns: 1fr; gap: 0; } }
.exam-attente {
  margin-top: 10px; padding: 8px 10px; font-size: var(--t-liste);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border-color: var(--rg-warn-edge);
  border-top: 3px solid var(--warn);
}

/* ── Surlignage des éléments obligatoires dans le document source ──────────── */
/* (pdf-highlight.jsx : repère « p. X · l. Y » + modale de lecture surlignée)   */

.loc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 1px 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--t-mention); font-weight: 500;
  color: var(--text-subtle); background: none;
  border: 1px solid var(--border);
  cursor: pointer; transition: border-color .12s, color .12s;
  border-radius: var(--radius-sm);
}
.loc-badge:hover { color: var(--text); border-color: var(--accent); }
.loc-badge.none,
.loc-badge.ce { cursor: default; border-style: dashed; }
.loc-badge.none:hover,
.loc-badge.ce:hover { color: var(--text-subtle); border-color: var(--border); }

.dhl-scrim {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.dhl-panel {
  background: var(--bg); overflow: hidden;
  /* Hauteur DÉFINIE (et non un plafond) : les colonnes du lecteur s'étirent dedans. */
  width: 100%; max-width: var(--modale-ample); height: var(--modale-haut-ample);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
}
.dhl-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.dhl-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dhl-title strong { font-size: var(--t-texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dhl-count {
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
  min-width: 0;
  height: auto;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);      /* était var(--bg) : le compteur ne se lisait pas */
}
.dhl-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.dhl-exig {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--accent) 5%, var(--bg));
}
.dhl-exig-id { font-family: "JetBrains Mono", monospace; font-size: var(--t-meta); font-weight: 600; flex-shrink: 0; }
.dhl-exig-art { font-size: var(--t-mention); color: var(--text-subtle); flex-shrink: 0; }
.dhl-exig-titre {
  font-size: var(--t-meta); color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dhl-body { flex: 1; display: grid; grid-template-columns: 380px 1fr; min-height: 0; }

.dhl-side { border-right: 1px solid var(--border); overflow: auto; min-height: 0; background: var(--surface); }
.dhl-side-head {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 16px; font-size: var(--t-mention); font-weight: 600; color: var(--text-subtle);
  background: var(--surface); border-bottom: 1px solid var(--border);
  text-transform: none;
  letter-spacing: 0;
}
.dhl-empty { padding: 20px 16px; font-size: var(--t-meta); color: var(--text-subtle); }

.dhl-group { border-bottom: 1px solid var(--border); }
.dhl-group-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: none; border: none; cursor: pointer; text-align: left;
}
.dhl-group-head:hover { background: color-mix(in oklch, var(--accent) 6%, transparent); }
.dhl-chev { color: var(--text-subtle); font-size: var(--t-mention); width: 10px; }
.dhl-group-id { font-family: "JetBrains Mono", monospace; font-size: var(--t-mention); font-weight: 600; }
.dhl-group-title {
  flex: 1; min-width: 0; font-size: var(--t-meta); color: var(--text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dhl-group-count {
  border: 1px solid var(--border); border-radius: 999px; padding: 0 6px;
  min-width: 0;
  height: auto;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--bg);
}

.dhl-items { list-style: none; margin: 0; padding: 0 0 6px; }
.dhl-item {
  display: flex; gap: 8px; padding: 8px 12px 8px 24px; cursor: pointer;
  border-left: 2px solid transparent;
  border-left-color: transparent;
}
.dhl-item:hover { background: color-mix(in oklch, var(--accent) 7%, transparent); }
.dhl-item.sel { background: color-mix(in oklch, var(--accent) 12%, transparent); }
.dhl-item.nomatch { opacity: 0.72; }
.dhl-item-main { min-width: 0; flex: 1; }
.dhl-item-label { font-size: var(--t-meta); line-height: 1.45; }
.dhl-item.hov { background: color-mix(in oklch, var(--accent) 10%, transparent); }

.dhl-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dhl-nav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.dhl-pageinfo { font-size: var(--t-meta); color: var(--text-subtle); }
.dhl-pagehits { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.dhl-pagehits-label { font-size: var(--t-mention); color: var(--text-subtle); margin-right: 2px; }
.dhl-pagechip {
  font-family: "JetBrains Mono", monospace; font-size: var(--t-mention);
  padding: 1px 8px; border: 1px solid var(--border);
  background: none; color: var(--text-subtle); cursor: pointer;
  border-radius: var(--radius-sm);
}
.dhl-pagechip:hover { border-color: var(--accent); color: var(--text); }
.dhl-pagechip.on { border-color: var(--accent); color: var(--text); font-weight: 600; }

.dhl-page-hote { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Lecteur de page zoomable (pdfz-*) — partagé par la modale de surlignage, la
   comparaison de documents et l'ouverture d'un fichier. Le conteneur défile ;
   la page est un bloc centré par `margin: auto`, qui se laisse dépasser à droite
   ET à gauche une fois zoomée (un flex centré rendrait le débord gauche
   inatteignable au défilement). */
.pdfz-scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px; scroll-behavior: smooth; }
.pdfz-wrap { position: relative; margin: 0 auto; box-shadow: var(--shadow-lg); }
.pdfz-wrap.tracer { cursor: crosshair; }
.pdfz-img { display: block; width: 100%; height: auto; }

.pdfz-ctl { display: inline-flex; align-items: center; gap: 2px; }
.pdfz-btn {
  border: 1px solid var(--border); background: none; color: var(--text-subtle);
  cursor: pointer; font-size: var(--t-meta); line-height: 1; padding: 4px 8px;
}
.pdfz-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.pdfz-btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.pdfz-lvl {
  border: 1px solid var(--border);
  background: none;
  color: var(--text-subtle);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-left: none; border-right: none; min-width: 52px; text-align: center;
  font-family: "JetBrains Mono", monospace; font-size: var(--t-mention);
}
.pdfz-btn:hover:not(:disabled), .pdfz-lvl:hover { color: var(--text); border-color: var(--accent); }
.pdfz-btn:disabled { opacity: 0.4; cursor: default; }
.dhl-unsupported {
  margin: auto; display: flex; align-items: center; gap: 10px;
  font-size: var(--t-liste); color: var(--text-subtle); max-width: 460px; text-align: left;
}

.dhl-hl {
  position: absolute; border-radius: var(--radius-sm); cursor: pointer;
  background: rgba(57, 255, 20, 0.38);
  mix-blend-mode: multiply; transition: background .12s;
}
.dhl-hl.partial { background: rgba(255, 214, 51, 0.45); }
.dhl-hl.absent  { background: rgba(255, 120, 100, 0.32); }
.dhl-hl.hov { background: rgba(57, 255, 20, 0.62); }
.dhl-hl.partial.hov, .dhl-hl.partial.sel { background: rgba(255, 214, 51, 0.72); }
.dhl-hl.absent.hov,  .dhl-hl.absent.sel  { background: rgba(255, 120, 100, 0.55); }
.dhl-hl.sel { background: rgba(57, 255, 20, 0.62); animation: dhl-pulse 1.4s ease-out 2; }
@keyframes dhl-pulse {
  0%   { box-shadow: var(--shadow); }
  100% { box-shadow: 0 0 0 10px transparent; }
}

.dhl-tip {
  position: absolute; z-index: 3; margin-top: 6px; max-width: 340px;
  padding: 8px 10px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); pointer-events: none;
}
.dhl-tip-exig { display: flex; align-items: baseline; gap: 8px; }
.dhl-tip-exig-id { font-family: "JetBrains Mono", monospace; font-size: var(--t-mention); font-weight: 600; }
.dhl-tip-exig-art { font-size: var(--t-mention); color: var(--text-subtle); }
.dhl-tip-repond {
  font-size: var(--t-meta); font-weight: 600; line-height: 1.45; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dhl-tip-bloc {
  margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px;
  font-size: var(--t-meta); line-height: 1.45; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.dhl-tip-cle { font-weight: 600; color: var(--text-subtle); }
/* ── Socle : contrat machine de la couche EES (carte des circuits + valeurs déclarées) ── */
.socle-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.socle-section:last-of-type { border-bottom: none; }
.socle-section h3 { font-size: var(--t-liste); font-weight: 700; color: var(--text); margin: 0 0 4px; }
.socle-hint { font-size: var(--t-meta); color: var(--text-subtle); margin: 0 0 12px; line-height: 1.45; }
.socle-table { width: 100%; font-size: var(--t-liste); border-collapse: collapse; }
.socle-table thead tr { border-bottom: 1px solid var(--line); }
.socle-table th { text-align: left; padding: 4px 10px 6px 0; color: var(--text-subtle); font-weight: 600; white-space: nowrap; }
.socle-table tbody tr { border-bottom: 1px solid var(--line); }
.socle-table td { padding: 6px 10px 6px 0; vertical-align: top; }
.socle-table .input { padding: 4px 8px; font-size: var(--t-meta); }
.socle-perim { font-weight: 600; white-space: nowrap; padding-right: 16px; }
.socle-cell { display: flex; gap: 4px; align-items: center; }
.socle-val { width: 72px; }
.socle-prov { font-size: var(--t-mention); color: var(--text-subtle); margin-top: 2px; font-style: italic; }

.socle-banner { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; margin-bottom: 16px; border: 1px solid transparent; flex-wrap: wrap; row-gap: 8px; column-gap: 8px; padding: 0 12px 10px; border-radius: var(--radius-sm); border-width: 1px; border-style: solid; background: var(--bg-elev); color: var(--text); font-size: var(--t-liste); }

.socle-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 20px; }
.socle-busy { font-size: var(--t-meta); color: var(--text-muted); }

/* Socle scellé : un champ verrouillé doit se voir, pas seulement refuser la frappe
   (même parti pris que le champ « Vérificateur » en lecture seule de la modale de sceau). */
.socle-table .input[readonly], .socle-table .input:disabled {
  background: var(--bg-sunken); color: var(--text-muted); cursor: default; border-color: var(--line);
}

/* ── Page Référence : écran partagé (saisie ⟷ déclaration ouverte) ────────────
   La déclaration est la SOURCE des valeurs saisies à gauche : elle reste ouverte en
   regard, au lieu d'obliger à ouvrir/refermer une modale par valeur relue. La page prend
   toute la hauteur du conteneur de défilement (.page) et gère elle-même son scroll : seule
   la colonne de saisie défile, la déclaration reste en place. */
.ref-page { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.ref-page-header { flex-shrink: 0; padding-bottom: 12px; }
.ref-split {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Une ligne À la hauteur de la grille : en `auto`, elle prenait la hauteur de l'image
     du PDF ; la colonne de saisie ne défilait plus et son bas — « Engager la
     référence » — sortait de la boîte, qui le coupait. */
  grid-template-rows: minmax(0, 1fr);
}
.ref-left { min-width: 0; padding: 12px 24px 24px; }
.ref-right { min-width: 0; border-left: 1px solid var(--line); background: var(--bg-sunken); display: flex; }

/* Sous un écran étroit, deux moitiés côte à côte rendraient les deux illisibles :
   on empile, la déclaration sous la saisie, et c'est la page entière qui défile. */
@media (max-width: 1100px) {
  .ref-page { height: auto; }
  .ref-split { grid-template-columns: 1fr; grid-template-rows: none; }
  .ref-left { padding: 12px 20px 20px; }
  .ref-right { border-left: none; border-top: 1px solid var(--line); height: 70vh; }
}

/* Volet droit : la déclaration elle-même */
.ref-doc { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.ref-doc-head {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-elev);
}
.ref-doc-name { font-size: var(--t-liste); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-doc-name.muted { font-weight: 500; color: var(--text-muted); }
.ref-doc-open { margin-left: auto; flex-shrink: 0; }
.ref-doc-body { flex: 1; min-height: 0; display: flex; }
.ref-doc-body iframe { flex: 1; width: 100%; height: 100%; border: none; background: var(--bg); }
/* Le lecteur de la visionneuse (window.FileViewerBody) occupe tout le volet. */
.ref-doc-body .file-viewer-body { display: flex; min-width: 0; }
.ref-doc-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px; text-align: center; color: var(--text-muted); font-size: var(--t-liste); line-height: 1.45;
}
.ref-doc-empty p { margin: 0; max-width: 44ch; }
.ref-doc-empty strong { color: var(--text); }

/* Choix de la déclaration : deux temps numérotés (désigner, puis extraire) — l'ordre
   se lit, là où trois contrôles alignés laissaient deviner lequel venait en premier. */
.ref-etapes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ref-etape { display: flex; gap: 8px; align-items: flex-start; }
.ref-etape-num {
  flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%;
  background: var(--bg-sunken); border: 1px solid var(--line-strong);
  color: var(--text-subtle); font-size: var(--t-mention); font-weight: 700;
  display: grid; place-items: center;
}
.ref-etape-corps { min-width: 0; flex: 1; }
.ref-etape-titre { font-size: var(--t-liste); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ref-etape-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ref-etape-note { font-size: var(--t-meta); color: var(--text-muted); }
/* Exigence avec laquelle l'outil cherche la déclaration (#249), sous les contrôles de l'étape 1. */
.ref-ancrage { margin-top: 6px; }
/* Schéma de référence vide (#250) : le motif tient la place de la grille des valeurs. */
.ref-schema-vide { margin: 0; padding: 12px 16px; font-size: var(--t-texte); color: var(--text-muted); background: var(--bg-sunken); border-radius: var(--radius); }
.ref-select { max-width: 280px; flex: 1 1 200px; padding: 4px 8px; font-size: var(--t-meta); }
.ref-ou { font-size: var(--t-meta); color: var(--text-subtle); }

/* Récapitulatif : ce qui est RETENU (par opposition à ce qui est seulement affiché à droite) */
.ref-source-recap {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken);
  font-size: var(--t-liste);
}
.ref-etape-corps .ref-source-recap { margin: 0 0 8px; }
.ref-recap-label { font-size: var(--t-mention); font-weight: 700; color: var(--text-subtle); text-transform: none; letter-spacing: 0; }
.ref-recap-vide { color: var(--text-muted); font-style: italic; }
.ref-recap-extr { margin-left: auto; font-size: var(--t-mention); color: var(--text-muted); }
.ref-select-type { width: auto; padding: 4px 6px; font-size: var(--t-meta); }

/* Table des valeurs, resserrée : la colonne de saisie ne fait plus qu'une demi-largeur,
   et l'origine (« proposé »/« corrigé ») se lit en bout de ligne au lieu d'une 3ᵉ colonne. */
.ref-table td { padding: 4px 8px 4px 0; vertical-align: middle; }
.ref-table tbody tr:last-child { border-bottom: none; }
.ref-table .socle-perim { padding-right: 10px; font-size: var(--t-meta); }
.ref-table .socle-val { width: 100%; max-width: 210px; }
.ref-table .socle-prov { margin-top: 0; white-space: nowrap; }
.ref-table tr.ref-groupe td { padding: 12px 0 4px; font-size: var(--t-mention); font-weight: 700; color: var(--text-subtle); border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; }
.ref-table tbody tr.ref-groupe:first-child td { padding-top: 2px; }
.ref-retour-liste { padding: 2px 8px; white-space: nowrap; }
.socle-unit-fixe { opacity: 0.55; font-size: var(--t-meta); white-space: nowrap; padding-left: 2px; }

/* ─── Mon profil (lot Profil) ───────────────────────────────────────────────
   Réutilise le squelette des pages « insc-* » ; n'ajoute que ce qui lui est
   propre : en-tête d'identité, tuiles de mesure, courbe, barres, lignes de
   périmètre. Aucune couleur en dur — tout passe par les tokens de :root, pour
   que la refonte de palette n'ait qu'un seul point d'entrée.                  */

.prof-head {
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
  padding: 16px 16px; margin-bottom: 16px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.prof-avatar {
  width: 48px; height: 48px; flex: none; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--bg-sunken);
  display: grid; place-items: center;
  font-size: var(--t-section); font-weight: 600; color: var(--text-muted); letter-spacing: .02em;
}
.prof-name { font-size: var(--t-panneau); font-weight: 600; letter-spacing: -.01em; }
.prof-rattachement { font-size: var(--t-meta); color: var(--text-muted); margin-top: 2px; }
.prof-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Puces en contour : la bordure porte le statut, jamais un aplat de couleur. */
.prof-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg-elev); color: var(--text-muted);
  padding: 2px 8px; font-size: var(--t-meta); font-weight: 500; white-space: nowrap;
}
.prof-chip.on   { border-color: var(--accent-line); color: var(--accent); }
.prof-chip.warn { border-color: var(--warn); color: var(--warn-texte); }

.prof-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin: 12px 0 16px;
}
@media (max-width: 700px) { .prof-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prof-tile { background: var(--bg-elev); padding: 12px 12px; display: flex; flex-direction: column; gap: 4px; }
/* Tuile qui mène à l'écran de son chiffre (Supervision, Plateforme) : un bouton, qui promet
   une action au survol — fond et cadre intérieur lime. */
.prof-tile--lien { border: 0; border-radius: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.prof-tile--lien:hover { background: var(--bg-hover); box-shadow: inset 0 0 0 2px var(--accent-verificateur-line); }
.prof-tile--lien:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.prof-tile-v {
  font-size: var(--t-page); font-weight: 600; line-height: 1.2; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.prof-tile-k { font-size: var(--t-meta); color: var(--text); line-height: 1.45; }
.prof-tile-u { font-size: var(--t-mention); color: var(--text-subtle); }

.prof-viz { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .prof-viz { grid-template-columns: 1fr; } }
.prof-spark { display: block; width: 100%; height: 62px; }
.prof-legende { font-size: var(--t-meta); color: var(--text-muted); margin: 4px 0 0; }

.prof-bars { display: flex; flex-direction: column; gap: 8px; }
.prof-bar-row { display: grid; grid-template-columns: 110px 1fr 40px; gap: 10px; align-items: center; }
.prof-bar-lb { font-size: var(--t-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-bar-track {
  height: 9px; background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.prof-bar-fill { display: block; height: 100%; background: var(--accent); width: var(--pct, 0%); }
.prof-bar-n { font-size: var(--t-meta); color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

.prof-rows { display: flex; flex-direction: column; }
.prof-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.prof-row:first-child { border-top: 0; }
.prof-row-m { font-size: var(--t-liste); }
.prof-row-s { grid-column: 1; font-size: var(--t-meta); color: var(--text-muted); }
.prof-row-r { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: center; }

/* Encarts secondaires (notes, compléments, attentes) : cadre simple, sans liseré */
.prof-note {
  padding: 8px 12px; font-size: var(--t-meta); color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
}

/* ── Remarques ancrées sur un passage (vérificateur → rédacteur) ───────────── */

/* En mode tracé, les surlignages ne doivent pas intercepter le glissé. */
.pdfz-wrap.annoter .dhl-hl,
.pdfz-wrap.annoter .dhl-note { pointer-events: none; }

.dhl-trace {
  position: absolute; pointer-events: none;
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  outline: 1.5px dashed var(--accent);
}

.dhl-draft {
  position: absolute; pointer-events: none; border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--accent) 34%, transparent);
  mix-blend-mode: multiply;
}

/* Encre neutre + pastille : une remarque humaine ne se confond pas avec un
   surlignage produit par l'IA. */
.dhl-note {
  position: absolute; cursor: pointer; border-radius: var(--radius-sm);
  background: rgba(90, 90, 110, 0.22);
  border-bottom: 2px solid var(--text);
  transition: background .12s;
}
.dhl-note:hover,
.dhl-note.sel { background: rgba(90, 90, 110, 0.36); }
.dhl-note-pin {
  position: absolute; left: -9px; top: -11px;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--text); box-shadow: var(--shadow);
}

.dhl-note-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 4px 0 0 6px; padding: 1px 8px;
  font-size: var(--t-mention); color: var(--text);
  border: 1px solid var(--text);
  border-radius: var(--radius-sm);
}

.dhl-draft-box {
  margin: 10px; padding: 10px; border: 1px solid var(--accent); border-radius: var(--radius);
  background: color-mix(in oklch, var(--accent) 6%, var(--bg));
}
.dhl-draft-box.vide {
  border-color: var(--border); display: flex; align-items: center; gap: 10px;
  font-size: var(--t-meta); color: var(--text-subtle);
}
.dhl-draft-tt { font-size: var(--t-meta); font-weight: 600; margin-bottom: 6px; }
.dhl-draft-extrait {
  font-size: var(--t-meta); line-height: 1.45; margin-bottom: 8px;
  border-left: 2px solid var(--accent); padding-left: 8px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.dhl-draft-lb {
  display: block; font-size: var(--t-mention); font-weight: 600; color: var(--text-subtle); margin-bottom: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.dhl-draft-sel {
  width: 100%; margin-bottom: 8px; padding: 6px 8px; font-size: var(--t-meta);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
.dhl-draft-box .textarea { width: 100%; font-size: var(--t-meta); }
.dhl-draft-act { display: flex; gap: 6px; margin-top: 8px; }
/* Mode « indiquer » du surligneur (#311) : l'élément visé et la consigne. */
.dhl-indiquer:not(.dhl-draft-box) {
  margin: 10px; padding: 10px; border: 1px dashed var(--warn-texte); border-radius: var(--radius);
  background: var(--warn-soft);
}
.dhl-draft-box.dhl-indiquer { border-color: var(--warn-texte); background: var(--warn-soft); }
.dhl-indiquer .dhl-draft-tt { display: flex; align-items: center; gap: 6px; }
.dhl-indiquer-el { font-size: var(--t-meta); font-weight: 600; margin-bottom: 6px; }
.dhl-indiquer-aide { font-size: var(--t-mention); color: var(--text-subtle); line-height: 1.45; }
/* #313 — passages tracés, pas encore confirmés : document, page, extrait ; un ✕ les retire. */
.dhl-indiquer-liste { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dhl-indiquer-passage {
  display: flex; align-items: flex-start; gap: 4px;
  border-left: 2px solid var(--warn-texte); padding-left: 6px;
}
.dhl-indiquer-aller {
  flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 2px 0; cursor: pointer;
  font-size: var(--t-meta); line-height: 1.45; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dhl-indiquer-aller:hover { text-decoration: underline; text-underline-offset: 3px; }
.dhl-indiquer-aller:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dhl-fil {
  margin: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
}
.dhl-fil-tt { display: flex; align-items: center; gap: 6px; font-size: var(--t-meta); font-weight: 600; }
.dhl-fil-el { font-size: var(--t-meta); color: var(--text-subtle); margin-top: 4px; }
.dhl-fil-msgs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dhl-msg { border-radius: var(--radius); padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); }
.dhl-msg.redacteur { margin-left: 16px; background: color-mix(in oklch, var(--accent) 7%, var(--surface)); }
.dhl-msg-tete {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--t-mention); font-weight: 600; color: var(--text-subtle);
}
.dhl-msg-date { font-family: "JetBrains Mono", monospace; font-weight: 400; }
.dhl-msg-corps { font-size: var(--t-meta); line-height: 1.45; margin-top: 4px; }
.dhl-fil-rep { margin-top: 8px; }
.dhl-fil-rep .textarea { width: 100%; font-size: var(--t-meta); }
.dhl-fil-rep .btn { margin-top: 6px; }

/* Passage visé par un message : dans la vue surlignée, et sur la carte et la page Messages
   (`.msg-ancre`, #316), où il ouvre la vue surlignée sur ce passage. */
.dhl-msg-ancre, .msg-ancre {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; padding: 1px 8px; max-width: 100%;
  font-size: var(--t-mention); color: var(--text-subtle); text-align: left;
  background: none; border: 1px solid var(--border);
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: var(--radius-sm);
}
.dhl-msg-ancre:hover:not(:disabled), .msg-ancre:hover { color: var(--text); border-color: var(--accent); }
.dhl-msg-ancre:disabled { cursor: default; opacity: 0.7; }

/* Le viewer de fichier passe au lecteur maison pour les PDF d'un dossier :
   il empile sa barre de navigation et la page zoomable, au lieu d'un iframe. */
.file-viewer-body.lecteur { display: flex; flex-direction: column; min-height: 0; }
.file-viewer-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface);
}

/* Repère approché : la citation est une reformulation, pas un extrait. Le trait
   tireté dit « à peu près ici », là où l'aplat plein dit « exactement ici ». */
.loc-badge.approche { border-style: dashed; }
.dhl-hl.approche {
  background: none;
  outline: 1.5px dashed rgba(90, 90, 110, 0.85);
  outline-offset: 1px;
  mix-blend-mode: normal;
}
.dhl-tip-bloc.approche { color: var(--text-subtle); font-style: italic; }
/* Statut hors des trois connus (« en attente ») : gris neutre, jamais le vert du
   « présent » — un surlignage ne doit pas affirmer plus que le statut réel. */
.dhl-hl.indetermine { background: rgba(120, 120, 130, 0.30); }
/* Avis à l'aveugle (#315) : exigence encore à juger — encre neutre, aucune couleur de statut,
   même au survol ou à la sélection. */
.dhl-hl.masque { background: rgba(120, 120, 130, 0.30); }
.dhl-hl.masque.hov, .dhl-hl.masque.sel { background: rgba(120, 120, 130, 0.50); }
/* Un repère approché reste un trait tireté, même en aveugle : jamais d'aplat. */
.dhl-hl.masque.approche, .dhl-hl.masque.approche.hov, .dhl-hl.masque.approche.sel { background: none; }
/* Passage indiqué par le rédacteur, dans la bulle : qui, quand, son commentaire (#315). */
.dhl-tip-bloc.indique { color: var(--warn-texte); }

/* Exigence : éléments ajoutés depuis la dernière vérification (verification.jsx) */
.req-section-note { font-weight: 400; font-size: var(--t-meta); margin-left: 6px; color: color-mix(in oklab, var(--warn) 40%, var(--text)); }
.checklist .checklist-attente { opacity: .85; }
.item-label-auteur { font-weight: 400; font-style: italic; color: var(--text-subtle); margin-left: 6px; }
.req-reverifier { margin-top: 10px; }
.req-reverifier-manque { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--t-meta);
  color: color-mix(in oklab, var(--warn) 40%, var(--text)); }
/* ── Demande de mission complète : plusieurs référentiels, formulaire PV/231 ── */
.dem-form-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 8px; padding-right: 6px; }
.dem-refs { display: flex; flex-direction: column; gap: 6px; }
.dem-ref {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--t-liste); background: var(--bg);
}
.dem-ref.on { border-color: var(--accent); }
.dem-ref.on .dem-ref-nom { color: var(--accent); font-weight: 600; }
.dem-ref.off { opacity: .55; cursor: not-allowed; }
.dem-ref-motif { margin-left: auto; font-size: var(--t-meta); color: var(--text-muted); text-align: right; }
.dem-a-creer {
  margin-left: 6px; padding: 0 6px; border: 1px dashed var(--line); border-radius: var(--radius-sm);
  font-size: var(--t-mention); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600; vertical-align: middle;
}
/* Message « mission acceptée » (accueil du rédacteur) */
.db-msg--mission.pending { border-left-color: var(--accent); }
.db-msg-invite {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px 0 0 20px; font-size: var(--t-meta); color: var(--text-muted);
}
.db-msg-invite .btn { flex-shrink: 0; }

/* ─── Vue « Liste des ESP » (#150, liste-esp.jsx) ───────────────────────────
   Pleine largeur (la table des vingt-six colonnes défile horizontalement, en-tête fixe) ;
   teintes : corrigée (ambre — la même famille que la marque « à compléter » du modèle PDF),
   colonne absente (marque ambrée en tête), cellule vide (grisée). */
.lesp-page { max-width: none; padding-right: 24px; }
.lesp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.lesp-titre { margin: 0; font-size: var(--t-panneau); font-weight: 700; }
.lesp-sous { font-size: var(--t-meta); color: var(--text-subtle); margin-top: 4px; max-width: 900px; }
.lesp-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lesp-bandeau { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: var(--t-liste); margin: 8px 0 16px; }
.lesp-bandeau.lecture-seule { background: var(--bg-sunken); border-color: var(--line); color: var(--text-muted); }
.lesp-bandeau-note { color: var(--text-muted); }
.lesp-identite { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.lesp-identite-bloc { min-width: 280px; }
.lesp-bloc-titre { font-size: var(--t-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; }
.lesp-note { font-size: var(--t-meta); color: var(--text-subtle); margin-top: 6px; }
.lesp-none { font-size: var(--t-meta); color: var(--text-subtle); }
.lesp-kv { border-collapse: collapse; font-size: var(--t-meta); }
.lesp-kv td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; position: relative; }
.lesp-kv th { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; background: var(--bg-sunken); font-weight: 600; color: var(--text-muted); white-space: nowrap; position: relative; }
.lesp-kv td.vide { background: var(--bg-sunken); min-width: 80px; }
.lesp-circuits td { text-align: center; min-width: 56px; }
.lesp-scroll { overflow: auto; max-height: calc(100vh - 300px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
.lesp-table { border-collapse: separate; border-spacing: 0; font-size: var(--t-meta); min-width: 100%; }
.lesp-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-sunken); color: var(--text); font-weight: 600;
  padding: 6px 6px; border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line); text-align: center; vertical-align: bottom; white-space: normal; }
.lesp-table thead th.absente { background: var(--warn-soft); }
.lesp-marque-tete { font-size: var(--t-mention); font-style: italic; font-weight: 500; color: oklch(0.55 0.12 70); margin-bottom: 2px; }
.lesp-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 4px 6px; vertical-align: top; position: relative; }
.lesp-table tr.lesp-section td { background: var(--accent-soft); font-weight: 700; font-style: italic; font-size: var(--t-meta); position: sticky; left: 0; }
.lesp-table tr.hors-classement td { color: var(--text-muted); }
.lesp-cell { min-width: 40px; }
.lesp-cell.editable { cursor: text; }
.lesp-cell.editable:hover { outline: 1px solid var(--accent-line); outline-offset: -1px; }
.lesp-cell.vide { background: var(--bg-sunken); }
.lesp-cell.absente { background: var(--warn-soft); }
.lesp-cell.corrigee { background: var(--cat-amber-soft); box-shadow: inset 2px 0 0 var(--cat-amber); padding-right: 20px; }   /* place pour « ↶ » */
.lesp-val { white-space: pre-wrap; word-break: break-word; }
.lesp-marque { font-size: var(--t-mention); font-style: italic; color: oklch(0.55 0.12 70); }
.lesp-videe { font-size: var(--t-mention); font-style: italic; color: var(--text-subtle); }
.lesp-lue { font-size: var(--t-mention); color: var(--text-subtle); text-decoration: line-through; margin-top: 2px; white-space: pre-wrap; }
.lesp-undo { position: absolute; top: 2px; right: 2px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text-muted);
  border-radius: var(--radius); font-size: var(--t-mention); line-height: 1; padding: 1px 4px; cursor: pointer; opacity: 0; }
.lesp-cell:hover .lesp-undo { opacity: 1; }
.lesp-undo:hover { color: var(--text); border-color: var(--line-strong); }
/* L'en-tête corrigeable (#152) : les cases d'identité et d'enveloppe portent les mêmes marques que la table. */
.lesp-kv td.editable { cursor: text; }
.lesp-kv td.editable:hover { outline: 1px solid var(--accent-line); outline-offset: -1px; }
.lesp-kv td.corrigee { background: var(--cat-amber-soft); box-shadow: inset 2px 0 0 var(--cat-amber); padding-right: 20px; }
.lesp-kv td:hover .lesp-undo { opacity: 1; }
.lesp-kv tr.ajoutee th { background: var(--cat-amber-soft); padding-right: 24px; }
.lesp-undo-ligne { top: 3px; }
.lesp-kv th:hover .lesp-undo { opacity: 1; }
.lesp-circuits td .lesp-saisie { min-width: 90px; }
/* Lignes ajoutées et exclues (#153). */
.lesp-actions-cell { width: 34px; min-width: 34px; text-align: center; white-space: nowrap; padding: 4px 2px !important; }
.lesp-act { border: 1px solid var(--line); background: var(--bg-elev); color: var(--text-muted); border-radius: var(--radius);
  font-size: var(--t-mention); line-height: 1; padding: 2px 6px; cursor: pointer; }
.lesp-act:hover { color: var(--text); border-color: var(--line-strong); }
.lesp-act.discret { opacity: 0; }
.lesp-table tr:hover .lesp-act.discret { opacity: 1; }
.lesp-act.ajouter { margin-left: 12px; font-style: normal; font-weight: 500; }
.lesp-tag { display: inline-block; font-size: var(--t-mention); font-style: italic; border-radius: var(--radius-sm); padding: 0 4px; margin-right: 4px; }
.lesp-tag.exclue { background: var(--bg-sunken); color: var(--text-subtle); text-decoration: none; }
.lesp-tag.ajoutee { background: var(--ok-soft); color: var(--ok, var(--text-muted)); }
.lesp-table tr.exclue td { color: var(--text-subtle); background: var(--bg-sunken); }
.lesp-table tr.exclue td.lesp-cell .lesp-val { text-decoration: line-through; }
.lesp-table tr.exclue td.lesp-cell.corrigee { background: var(--bg-sunken); box-shadow: none; }
.lesp-table tr.ajoutee td.lesp-cell { background: var(--ok-soft); }
.lesp-table tr.ajoutee td.lesp-cell.corrigee { background: var(--cat-amber-soft); }
.lesp-sw.ajoutee { background: var(--ok-soft); }
.lesp-sw.exclue { background: var(--bg-sunken); text-decoration: line-through; }
.lesp-input { width: 100%; min-width: 60px; box-sizing: border-box; font: inherit; font-size: var(--t-meta); padding: 2px 4px;
  border: 1px solid var(--accent); border-radius: var(--radius); background: var(--bg-elev); color: var(--text); outline: none; }
.lesp-saisie { min-width: 120px; }
.lesp-select { padding: 1px 2px; }
.lesp-lu-comme { font-size: var(--t-mention); color: var(--text-muted); margin-top: 4px; white-space: normal; line-height: 1.2; max-width: 260px; }
.lesp-legende { display: flex; gap: 20px; flex-wrap: wrap; font-size: var(--t-meta); color: var(--text-muted); margin: 8px 2px 0; }
.lesp-sw { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); vertical-align: -2px; margin-right: 6px; }
.lesp-sw.corrigee { background: var(--cat-amber-soft); box-shadow: inset 2px 0 0 var(--cat-amber); }
.lesp-sw.absente { background: var(--warn-soft); }
.lesp-sw.vide { background: var(--bg-sunken); }
.lesp-orphelines { margin-top: 20px; }
.lesp-orph td { max-width: 260px; word-break: break-word; }

/* ── Styles sortis du JSX (nettoyage lot 4, 17/09/2026) ─────────────────────── */
/* dialog.jsx : conteneur des surcouches, sans boîte propre */
.dlg-surcouche { display: contents; }
/* inscription.jsx : aucun référentiel pour le marché */
.insc-hint.insc-hint--vide { padding: 8px 6px; }
/* process.jsx : jauges et arrêt du traitement */
.proc-fill.proc-fill--indet { width: 100%; animation: progress-indeterminate 1.4s ease infinite; }
.proc-fill.proc-fill--pct { width: var(--pct, 0%); }
.btn.proc-arret { margin-left: auto; }
/* demandes.jsx : lien de suivi et accès ouvert */
.dem-suivi-ligne { margin-top: 6px; }
.dlg-actions.dem-suivi-actions { margin-top: 6px; }
/* entreprise.jsx : fiche entreprise */
.insc-wrap.ent-page { max-width: 760px; }
.modal-box.ent-ok-box { max-width: 360px; }
.modal-body.ent-ok-corps { align-items: center; text-align: center; gap: 12px; padding: 32px 24px; }
.ent-ok-picto { font-size: var(--t-affiche); line-height: 1; color: var(--ok-texte); }
.ent-ok-titre { font-size: var(--t-section); font-weight: 600; }
.ent-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ent-pleine { grid-column: 1 / -1; }
/* Le formulaire de fiche (window.FicheEntrepriseForm) : page « Ma fiche entreprise » et
   modale « Modifier » des Entreprises fabricantes. */
.fiche-ent { display: flex; flex-direction: column; gap: 24px; }
.fiche-ent-titre { font-size: var(--t-section); font-weight: 600; margin: 0 0 8px; }
.insc-seg.ent-seg { margin-bottom: 16px; }
/* profil.jsx : Mon profil */
.insc-wrap.prof-page { max-width: 880px; }
.prof-ident { flex: 1; min-width: 200px; }
.prof-grille { display: grid; gap: 12px; }
.prof-grille--2 { grid-template-columns: 1fr 1fr; }
.prof-grille--3 { grid-template-columns: 1fr 1fr 1fr; }
/* Interrupteur « Contraste élevé » : une case native (role=switch), à l'accent du thème. */
.prof-interrupteur { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-liste); cursor: pointer; }
.prof-interrupteur input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.insc-hint.prof-aide { margin-top: 4px; }
.prof-page .prof-suite { margin-top: 12px; }
.prof-page .prof-suite--serre { margin-top: 10px; }
.prof-rows.prof-sessions { margin-top: 16px; }
.insc-section.prof-section { margin-top: 16px; }
.prof-bar-fill--autre { opacity: .55; }
.prof-tile-v--warn { color: var(--warn-texte); }
.prof-tile-v--err  { color: var(--err-texte); }
.prof-tile-v--ok   { color: var(--ok-texte); }
/* entreprises.jsx : Field, champ libellé partagé par les écrans d'administration */
.champ-form { display: flex; flex-direction: column; gap: 4px; }

/* ── Styles sortis du JSX, suite (nettoyage lot 4, 17/09/2026) ────────────── */
/* ── users.jsx : écran Utilisateurs (styles sortis du JSX) ─────────────────── */
.usr-page { padding: 16px 24px; max-width: 1100px; margin: 0 auto; }
.usr-titre { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.usr-intro { color: var(--text-muted); margin-top: -6px; font-size: var(--t-liste); }
.auth-err.usr-msg { max-width: 600px; }
.usr-flash { background: var(--ok-soft); color: var(--ok-texte); padding: 8px 12px; border-radius: var(--radius); margin-bottom: 12px; max-width: 600px; }
/* Lien d'invitation ou de réinitialisation à transmettre (window.LienInvitation,
   composants.jsx) : Utilisateurs, Entreprises fabricantes, équipe d'organisme, demandes. */
.lien-invit { background: var(--accent-soft); padding: 10px 16px; border-radius: var(--radius); margin: 0 0 12px; max-width: 600px; }
.lien-invit-texte { font-size: var(--t-liste); margin-bottom: 6px; }
.auth-input.lien-invit-url { width: 100%; font-family: var(--font-mono); font-size: var(--t-meta); }
.lien-invit-actions { display: flex; gap: 8px; margin-top: 6px; }
/* Mot de passe (window.ChampsMotDePasse) : l'aide « 6 caractères minimum. » */
.mdp-aide { color: var(--text-muted); font-size: var(--t-meta); margin: 4px 0 0; }
/* Journal d'administration : ancienne liste (ref-table + usr-table) */
.usr-voir-suppr { display: flex; align-items: center; gap: 6px; font-size: var(--t-meta); color: var(--text-muted); white-space: nowrap; }
.ref-table.usr-table { width: 100%; border-collapse: collapse; font-size: var(--t-liste); }
.usr-thead { text-align: left; border-bottom: 2px solid var(--line); }
/* sélecteur renforcé : l'emporte sur « .ref-table tbody tr:last-child { border-bottom: none } » */
.ref-table.usr-table tbody tr.usr-ligne { border-bottom: 1px solid var(--line); }
.usr-muted { color: var(--text-muted); }
.usr-nowrap { white-space: nowrap; }
.usr-niveau { margin-top: 4px; display: block; font-size: var(--t-meta); }
/* rouge maintenu au survol */
.btn.subtle.usr-suppr { color: var(--err-texte); }
.btn.subtle.usr-suppr:hover { color: var(--err-texte); }
/* ── Liste des comptes (24/09/2026) : une surface, une barre de recherche en tête,
   des lignes séparées d'un filet ; l'état est un marqueur de forme ET un mot. ── */
.usr-page--liste { max-width: 1400px; padding: 16px 32px 40px; }
.usr-cadre { background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.usr-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-strong); background: var(--bg-sunken); }
.usr-recherche { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text-subtle); }
.usr-recherche:focus-within { border-color: var(--accent-verificateur); box-shadow: inset 0 0 0 1px var(--accent-verificateur-line); }
.usr-recherche input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit;
  font-size: var(--t-texte); padding: 10px 0; color: var(--text); }
.usr-recherche input::placeholder { color: var(--text-subtle); }
.usr-compte { font-family: var(--font-mono); font-size: var(--t-meta); font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
/* Sur un écran étroit, la table défile dans son cadre, jamais la page. */
.usr-defile { overflow-x: auto; }
.usr-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-liste); }
.usr-table th { text-align: left; font-size: var(--t-mention); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-subtle); padding: 10px 16px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.usr-table td { padding: 12px 16px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.usr-table tbody tr:last-child td { border-bottom: 0; }
.usr-table tbody tr.usr-ligne:hover { background: var(--bg-hover); }
.usr-table tr.usr-ligne:focus { outline: none; }
.usr-col-compte { width: 20%; }
.usr-col-role { width: 30%; }
.usr-col-etat { width: 12%; }
.usr-col-actions { width: 1%; }
.usr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.usr-ligne--off .usr-compte-cell { opacity: 0.55; }
/* Compte créé : cadre intérieur lime, qui s'efface quand la classe tombe. */
.usr-table tr.usr-ligne--nouvelle { background: var(--accent-verificateur-soft); box-shadow: inset 0 0 0 2px var(--accent-verificateur-line);
  transition: background-color 0.6s ease-out, box-shadow 0.6s ease-out; }
.usr-compte-cell { display: flex; flex-direction: column; gap: 2px; }
.usr-nom { font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.usr-vous { font-size: var(--t-mention); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-verificateur); border: 1px solid var(--accent-verificateur-line); border-radius: var(--radius-sm); padding: 0 6px; }
.usr-pseudo { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--text-muted); background: none; padding: 0; }
.usr-select { font: inherit; font-size: var(--t-liste); padding: 4px 8px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--text); max-width: 220px; }
.usr-select:disabled { color: var(--text-muted); background: transparent; border-color: var(--line); }
.usr-role-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.usr-case { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-top: 6px; font-size: var(--t-meta); }
/* État : la case dit actif / désactivé, le mot le répète ; seule l'invitation, qui n'a pas
   de case, porte un marqueur (◆) — un point à côté de la case ne disait rien (bug #42). */
.usr-bascule { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.usr-bascule input { accent-color: var(--ok); width: 16px; height: 16px; cursor: pointer; }
.usr-bascule input:disabled { cursor: default; }
.usr-etat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-meta); font-weight: 600; white-space: nowrap; }
.usr-etat--on { color: var(--ok-texte); }
.usr-etat--off { color: var(--text-muted); }
.usr-etat--attente { color: var(--warn-texte); background: var(--warn-soft); padding: 2px 8px; border-radius: var(--radius-sm); }
.usr-etat--attente::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--warn); transform: rotate(45deg); }
/* Gestes d'une ligne : alignés au centre, avec ou sans picto (bug #43). */
.usr-actions { white-space: nowrap; }
.usr-actions-groupe { display: flex; align-items: center; gap: 4px; }
.usr-supprime-note { font-size: var(--t-meta); color: var(--text-muted); }
/* sélecteur renforcé : l'emporte sur le padding de « .ref-table td » */
.ref-table td.usr-vide, .usr-table td.usr-vide { color: var(--text-muted); padding: 24px 16px; text-align: center; }
/* Modale de création / d'invitation */
.usr-creation-form { display: flex; flex-direction: column; gap: 16px; }
.usr-creation-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.usr-note { font-size: var(--t-meta); line-height: 1.45; color: var(--text-muted); margin: -8px 0 0; }
/* Mot de passe d'un compte (bug #45) : deux voies, une liste à choix unique ; la voie
   retenue porte le cadre intérieur lime. */
.usr-voies { border: 1px solid var(--line-strong); border-radius: var(--radius); margin: 0; padding: 0; }
.usr-voie { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; cursor: pointer; }
.usr-voie + .usr-voie { border-top: 1px solid var(--line); }
.usr-voie:hover { background: var(--bg-hover); }
.usr-voie--on { background: var(--accent-verificateur-soft); box-shadow: inset 0 0 0 2px var(--accent-verificateur-line); }
.usr-voie input { margin-top: 2px; accent-color: var(--accent-verificateur); }
.usr-voie-titre { display: block; font-weight: 600; }
.usr-voie-aide { display: block; margin-top: 2px; font-size: var(--t-meta); line-height: 1.45; color: var(--text-muted); }
@media (max-width: 660px) {
  .usr-page--liste { padding: 12px 16px 32px; }
  .usr-creation-ligne { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .usr-table tr.usr-ligne--nouvelle { transition: none; } }
/* Fenêtre de suppression */
.modal-box.usr-suppr-box { max-width: 520px; }
.modal-body.usr-suppr-corps { gap: 12px; font-size: var(--t-liste); }
.usr-historique { margin: 0; padding-left: 20px; color: var(--text-muted); }
.usr-reprise { background: var(--bg-sunken); padding: 12px; border-radius: var(--radius); }
.usr-reprise-titre { margin-bottom: 6px; }
.usr-reprise-dossiers { font-size: var(--t-meta); color: var(--text-muted); margin-bottom: 8px; }
.auth-input.usr-repreneur { width: 100%; }
.auth-err.usr-sans-marge { margin: 0; }

/* ── acces.jsx : écran Gestion des droits (styles sortis du JSX) ───────────── */
.insc-wrap.acc-page { max-width: 820px; }
/* 1. Choix de l'utilisateur ou de l'organisme */
.acc-colonnes { display: flex; gap: 20px; flex-wrap: wrap; }
.acc-colonne { flex: 1 1 200px; }
.acc-col-titre { font-size: var(--t-meta); text-transform: uppercase; color: var(--text-muted); }
.acc-user { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 4px;
  border-radius: var(--radius); border: 1px solid var(--line); cursor: pointer;
  background: transparent; font-weight: 400; }
.acc-user.sel { background: var(--accent-soft, #eef6e6); font-weight: 600; }
.acc-compte { font-size: var(--t-mention); color: var(--text-muted); }
.acc-note { color: var(--text-muted); font-size: var(--t-liste); }
.btn.acc-nouvel-orga { margin-top: 4px; }
.insc-section.acc-section { margin-top: 16px; }
/* 2. Produit dépliable */
.acc-produit { border: 1px solid var(--line); border-radius: var(--radius); }
.acc-produit-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 12px 16px; background: transparent; border: none; cursor: pointer; }
/* sans principal : curseur neutre (l'emporte sur « button:disabled { cursor: not-allowed } ») */
.acc-produit-btn.acc-produit-btn--inactif { cursor: default; }
.acc-picto { display: inline-flex; }
.acc-produit-nom { font-weight: 700; flex: 1; }
.role-chip.acc-chip { margin-right: 8px; }
.acc-perimetre { border-top: 1px solid var(--line); padding: 6px 16px 16px; }
.insc-banner.acc-banner { font-size: var(--t-meta); margin: 10px 0; }
/* Plafond du mandat en tête de la page Accès (lecture, window.MANDAT) */
.insc-banner.acc-mandat { background: var(--info-soft); color: var(--info-texte); }
/* Référentiels et familles d'exigences */
.acc-refs { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 8px; }
.acc-ref { border-top: none; padding: 8px 10px; }
.acc-ref.acc-ref--suite { border-top: 1px solid var(--line); }
.acc-ref-tete { display: flex; align-items: center; gap: 8px; }
.btn.acc-deplier { width: 26px; }
.acc-ref-nom { font-weight: 600; flex: 1; }
.acc-ref-sous { color: var(--text-muted); font-weight: 400; }
.acc-tout { display: flex; align-items: center; gap: 6px; font-size: var(--t-liste); }
.acc-info { font-size: var(--t-meta); color: var(--text-muted); }
.acc-familles { margin-left: 32px; margin-top: 6px; }
.acc-famille { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: var(--t-liste); opacity: 1; }
.acc-famille.acc-famille--grisee { opacity: 0.55; }
.acc-muted { color: var(--text-muted); }
.acc-aucun-ref { padding: 12px; color: var(--text-muted); }
.acc-actions { margin-top: 16px; display: flex; gap: 10px; align-items: center; }
/* Reprises du dossier */
.acc-reprises { margin: 0; padding-left: 20px; font-size: var(--t-liste); }
/* ── Back-office du référentiel réglementaire (admin-referentiel.jsx) ──
   Styles sortis du JSX à l'identique (valeurs et couleurs en dur conservées). */
.aref-page { padding: 16px 24px; max-width: 1100px; margin: 0 auto; }
.aref-titre { margin-top: 0; }
.aref-intro { color: #666; margin-top: -6px; }
.aref-acteur { display: flex; gap: 12px; align-items: center; margin: 10px 0 20px; }
.aref-acteur-lb { font-size: var(--t-liste); color: var(--text-muted); }
.btn.aref-export { margin-left: auto; }
.aref-onglets { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid #ddd; }
.aref-err { background: #fdecea; color: #b71c1c; padding: 8px 12px; border-radius: var(--radius); margin-bottom: 12px; }
.aref-flash { background: #e8f5e9; color: #1b5e20; padding: 8px 12px; border-radius: var(--radius); margin-bottom: 12px; }

/* Formulaires d'ajout (instruments, mappings) et d'ajout de combinaison (modules) */
.aref-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  margin-bottom: 16px; background: #f7f7f9; padding: 12px; border-radius: var(--radius);
}
.aref-form-modules {
  display: flex; gap: 10px; align-items: flex-end; background: #f6f6f6;
  padding: 12px; border-radius: var(--radius); margin-bottom: 16px; flex-wrap: wrap;
}
.aref-w-120 { width: 120px; }
.aref-w-140 { width: 140px; }
.aref-w-200 { width: 200px; }
.aref-w-240 { width: 240px; }
.aref-minw-120 { min-width: 120px; }
.aref-minw-150 { min-width: 150px; }
.aref-minw-200 { min-width: 200px; }

/* Tableaux (instruments, mappings, matrice ; audit en 12.5px) */
.ref-table.aref-table { width: 100%; border-collapse: collapse; font-size: var(--t-liste); }
.ref-table.aref-table-audit { width: 100%; border-collapse: collapse; font-size: var(--t-liste); }
.aref-entete { text-align: left; border-bottom: 2px solid #ddd; }
/* Sélecteur renforcé : doit l'emporter sur `.ref-table tbody tr:last-child { border-bottom: none }`
   comme le faisait le style en ligne (la dernière ligne garde son filet). */
.ref-table.aref-table tbody tr.aref-ligne,
.ref-table.aref-table-audit tbody tr.aref-ligne { border-bottom: 1px solid #eee; }
.aref-ligne.aref-brouillon { opacity: 0.7; }
.aref-actions { white-space: nowrap; text-align: right; }
.aref-actions .btn + .btn { margin-left: 6px; }
.aref-sub { color: #888; }
.aref-publie { color: #1b5e20; }
.aref-brouillon-lb { color: #e65100; }
.aref-nowrap { white-space: nowrap; }
/* Composé : `.ref-table td` fixe déjà le padding (3px 8px 3px 0). */
.ref-table td.aref-vide { color: #888; padding: 10px; }
.ref-table td.aref-vide.aref-vide-pale { color: #999; }

/* Mappings : choix de la famille */
.aref-famille { margin-bottom: 12px; }
.aref-famille-lb { margin-right: 8px; }

/* Modules : catalogue */
.aref-note { font-size: var(--t-liste); color: #666; margin-top: 0; }
.aref-h4 { margin: 10px 0 6px; }
.aref-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.aref-chip { font-size: var(--t-meta); padding: 4px 8px; border-radius: var(--radius); border: 1px solid #bbb; color: #777; }
.aref-chip.aref-chip-tiers { border: 1px solid #3a6; color: #3a6; }
.aref-chips-vide { color: #999; font-size: var(--t-meta); }

/* ── Lecteur PDF surligné (pdf-highlight.jsx) ──
   Géométrie calculée à l'exécution : le JSX ne pose que des variables CSS
   (--dhl-zoom, --x, --y, --w, --h, en %), le rendu est ici. */
.pdfz-wrap.dhl-zoom { width: calc(min(900px, 100%) * var(--dhl-zoom, 1)); }
/* Rectangles : surlignages IA, remarques, tracé en cours, brouillon de remarque */
.dhl-rect { left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
/* Infobulle de survol : position seule */
.dhl-pos { left: var(--x); top: var(--y); }
/* ======================================================================== */
/* admin-indexation.jsx — console admin « Indexation & vérification »       */
/* (préfixe aidx-). Styles sortis du JSX, valeurs reprises à l'identique.   */
/* ======================================================================== */
.aidx-page { padding: 16px 24px; max-width: 1100px; margin: 0 auto; }
.aidx-titre { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.aidx-intro { color: var(--text-muted); margin-top: -6px; font-size: var(--t-liste); }
.aidx-options { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 10px; }
.aidx-option { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-liste); cursor: pointer; }
.aidx-subtil { color: var(--text-subtle); }
.aidx-v2-b { margin: 0 2px; }
.auth-err.aidx-err { max-width: 640px; }
/* Bandeau de l'opération inline en cours */
.aidx-busy { display: flex; align-items: center; gap: 10px; background: var(--accent-soft);
  padding: 8px 16px; border-radius: var(--radius); margin-bottom: 12px; font-size: var(--t-liste); }
.aidx-muted { color: var(--text-muted); }
.aidx-mono { font-family: var(--font-mono); }
.btn.aidx-stop { margin-left: auto; }
/* Liste des dossiers et carte d'un dossier */
.aidx-liste { display: flex; flex-direction: column; gap: 12px; }
.aidx-carte { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--bg-elev); }
.aidx-carte-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aidx-nom { font-weight: 700; font-size: var(--t-section); }
/* Pastille indexé / non indexé */
.aidx-etat { font-size: var(--t-meta); font-weight: 700; padding: 1px 8px; border-radius: var(--radius); }
.aidx-etat--ok { border: 1px solid var(--ok); color: var(--ok-texte); }
.aidx-etat--warn { border: 1px solid var(--warn); color: var(--warn-texte); }
.aidx-meta { font-size: var(--t-meta); color: var(--text-muted); }
.aidx-en-cours { font-size: var(--t-meta); color: var(--accent); font-weight: 600; }
.aidx-actions { margin-left: auto; display: flex; gap: 8px; }
/* Jauge de progression (largeur fournie par la variable --pct) */
.aidx-progression { margin-top: 10px; }
.aidx-jauge { height: 6px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.aidx-jauge-barre { height: 100%; width: var(--pct); background: var(--accent); transition: width .3s; }
.aidx-progression-texte { font-size: var(--t-meta); color: var(--text-muted); margin-top: 4px; }
/* Lignes « directive » */
.aidx-directives { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.aidx-aucune { font-size: var(--t-liste); color: var(--text-muted); }
.aidx-dir { display: flex; align-items: center; gap: 10px; font-size: var(--t-liste);
  padding: 6px 8px; border-radius: var(--radius); background: var(--bg-sunken); }
.aidx-dir--lien { cursor: pointer; transition: background 0.12s; }
.aidx-dir--lien:hover { background: var(--bg-hover); }
.aidx-dir--lien:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.aidx-dir-id { font-weight: 600; min-width: 70px; }
.aidx-live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-liste); color: var(--accent); font-weight: 700; }
.aidx-ancien { font-size: var(--t-liste); color: var(--text-subtle); }
.aidx-score { font-weight: 700; font-size: var(--t-section); }
.aidx-score-unite { font-size: var(--t-mention); font-weight: 600; color: var(--text-subtle); }
/* Ton d'un score / d'un écart (couleur seule) */
.aidx-ton--ok { color: var(--ok-texte); }
.aidx-ton--warn { color: var(--warn-texte); }
.aidx-ton--err { color: var(--err-texte); }
/* Puces de comparaison V1 ↔ V2 (hausse / baisse / nul) */
.aidx-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-meta); font-weight: 700;
  padding: 1px 8px; border-radius: var(--radius); }
.aidx-chip--ok { border: 1px solid var(--ok); color: var(--ok-texte); }
.aidx-chip--err { border: 1px solid var(--err); color: var(--err-texte); }
.aidx-chip--neutre { border: 1px solid var(--border); color: var(--text-muted); }
.aidx-vide { color: var(--text-muted); padding: 12px; }

/* ======================================================================== */
/* organismes-manage.jsx — gestion des organismes de vérification           */
/* (préfixe orgm-).                                                          */
/* ======================================================================== */
.insc-wrap.orgm-page { max-width: 900px; }
.auth-err.orgm-err { max-width: 600px; }
.orgm-flash { background: var(--ok-soft); color: var(--ok-texte); padding: 8px 12px; border-radius: var(--radius);
  margin-bottom: 12px; max-width: 600px; }
/* Bouton « Nouvel organisme » (le formulaire est une modale : window.OrganismeModale) */
.orgm-creation { margin: 8px 0 20px; }
/* Formulaire d'organisme (window.OrganismeModale) */
.orgm-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.orgm-pleine { grid-column: 1 / -1; }
/* Tableau */
.ref-table.orgm-table { width: 100%; border-collapse: collapse; font-size: var(--t-liste); }
.orgm-thead { text-align: left; border-bottom: 2px solid var(--line); }
/* Plus spécifique que « .ref-table tbody tr:last-child { border-bottom: none } » */
.ref-table.orgm-table tbody tr.orgm-ligne { border-bottom: 1px solid var(--line); }
.orgm-actions { white-space: nowrap; }
/* Plus spécifique que « .ref-table td { padding: … } » */
.ref-table td.orgm-membres { background: var(--bg-sunken); padding: 8px 16px; }
.orgm-membres-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.orgm-membre { font-size: var(--t-meta); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 8px; }
.orgm-aucun { font-size: var(--t-meta); }
.insc-hint.orgm-niveaux { margin: 8px 0 0; font-size: var(--t-meta); }
.ref-table td.orgm-vide { padding: 12px; }

/* ======================================================================== */
/* entreprises.jsx — gestion des entreprises (super admin) + modale fiche   */
/* (préfixe entl-).                                                          */
/* ======================================================================== */
.insc-wrap.entl-page { max-width: 820px; }
/* Formulaire de création */
.entl-creation { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin: 8px 0 20px; background: var(--bg-sunken); padding: 16px; border-radius: var(--radius); }
.auth-input.entl-raison { width: 200px; }
.auth-input.entl-siren { width: 120px; }
/* Domaine d'activité en ligne (window.ChoixDomaine compact, entreprise.jsx) */
.auth-input.dom-nomenclature { width: 160px; }
.auth-input.dom-secteur { width: 200px; }
.auth-input.entl-prenom { width: 130px; }
.auth-input.entl-nom { width: 130px; }
/* Tableau */
.ref-table.entl-table { width: 100%; border-collapse: collapse; font-size: var(--t-liste); }
.entl-th { text-align: left; }
.entl-td-actions { text-align: right; }
.ref-table td.entl-vide { padding: 12px; }
/* Modale « fiche entreprise » */
.modal-box.entl-modal { max-width: 680px; }
.modal-body.entl-modal-corps { gap: 16px; }
/* verification.jsx : message d'erreur de la modale de scellement */
.seal-err { color: var(--err-texte); font-size: var(--t-liste); }
/* app.jsx (registre) : motif écrit d'un verdict ou d'un bris */
.reg-motif { font-style: italic; color: var(--text); }
/* demandes.jsx : SIREN dont la clé est fausse — aucun rattachement possible */
.dem-rattach-alerte { color: var(--warn-texte); }
/* organismes-manage.jsx : habilitations déclarées, validées ou refusées (lot 3) */
.orgm-h3 { font-size: var(--t-texte); font-weight: 700; margin: 24px 0 2px; }
.orgm-hab { font-size: var(--t-meta); padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.orgm-hab--ok { border-color: var(--ok); color: var(--ok-texte); }
.orgm-hab--err { border-color: var(--err); color: var(--err-texte); }
.orgm-hab--attente { border-color: var(--warn); color: var(--warn-texte); }
.orgm-hab-ajout { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0 8px; }
.orgm-hab-ajout label { display: flex; flex-direction: column; }
.orgm-hab-ajout .auth-input { width: auto; max-width: 360px; }

/* ======================================================================== */
/* files-travail.jsx — les trois files de travail, une par métier            */
/* (préfixe ft-). Une file se PARCOURT : lignes serrées, repères constants,  */
/* aucune carte flottante — l'œil descend, il ne butine pas.                 */
/* ======================================================================== */
.ft-body { display: flex; flex-direction: column; gap: 16px; }
.ft-vide { font-size: var(--t-liste); color: var(--text-muted); padding: 16px; }
.ft-err { display: flex; align-items: center; gap: 8px; font-size: var(--t-liste); color: var(--err-texte);
  background: var(--err-soft); border: 1px solid var(--err); border-radius: var(--radius); padding: 8px 12px; }
.ft-err-x { margin-left: auto; background: none; border: 0; color: inherit; font-size: var(--t-section); cursor: pointer; }
.ft-info { font-size: var(--t-liste); color: var(--ok-texte); background: var(--ok-soft);
  border: 1px solid var(--ok); border-radius: var(--radius); padding: 8px 12px; }
.ft-ok { color: var(--ok-texte); }
.ft-ko { color: var(--err-texte); }

/* Pastilles d'état — même objet partout (statut, score, gravité) */
.ft-puce { display: inline-flex; align-items: center; white-space: nowrap;
  gap: 6px; font-size: var(--t-meta); font-weight: 600; padding: 4px 8px; border-radius: var(--radius-sm);
  background: var(--bg-sunken); border: 1px solid currentColor; color: var(--text-muted); }

/* ── Deux volets : la pile à gauche, l'exigence à droite ── */
/* Les deux volets tiennent dans la fenêtre : la pile et le détail défilent chacun chez
   eux, le rappel clavier reste visible au bas de la pile. Avec une hauteur par volet
   (pile 460 px, détail 72vh), la rangée prenait celle du plus haut : un grand vide sous
   la pile, et la barre du bas sortait de l'écran. `--ft-file-marge` = en-tête de
   l'application + en-tête de page + respiration sous le cadre. */
.ft-file { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  --ft-file-marge: 200px;
  height: max(420px, calc(100vh - var(--ft-file-marge)));
  border: 1px solid var(--line); background: var(--bg-elev); overflow: hidden;
  border-radius: var(--radius);
  box-shadow: none;
}
.ft-volet { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ft-volet + .ft-volet { border-left: 1px solid var(--line); }
.ft-volet-titre { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; font-size: var(--t-liste); background: transparent; border-bottom: 1px solid var(--line-strong); }
.ft-volet-note { font-size: var(--t-meta); color: var(--text-muted); }

.ft-lignes { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ft-lignes:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ft-ligne:hover { background: var(--bg-hover); }
.ft-ligne--active { border-left-color: var(--accent); }
.ft-case { width: 16px; height: 16px; padding: 0; line-height: 1; font-size: var(--t-mention);
  border: 1px solid var(--line-strong); background: var(--bg-elev);
  color: transparent; cursor: pointer; border-radius: var(--radius-sm); }
.ft-age { font-size: var(--t-meta);
  color: var(--text-muted); text-align: right; white-space: nowrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ft-age--chaud { font-weight: 600; color: var(--err-texte); }
/* Les marques de fin de ligne (dépôt, score) tiennent dans une seule cellule : la
   grille garde ses quatre colonnes, qu'il y ait une pastille ou deux. */
.ft-marques { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.ft-quoi { min-width: 0; display: flex; flex-direction: column; }
.ft-exig { font-family: var(--font-mono); font-size: var(--t-liste); font-weight: 600; }
/* Dossier de décision : l'exigence et le document scellés s'ouvrent (bug #14). */
.ft-exig--lien, .ft-doc-lien { display: inline; padding: 0; border: none; background: none; text-align: left; cursor: pointer; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ft-exig--lien:hover, .ft-doc-lien:hover { text-decoration-color: currentColor; }
.ft-doc-lien { font: inherit; }
.ft-ctx { overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-meta); color: var(--text-muted); }

/* Le rappel clavier ferme le volet, sous la liste qui occupe le reste de la hauteur ;
   le lot de sélection le suit et reste sous lui. */
.ft-clavier { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: var(--t-meta);
  margin-top: auto;
  color: var(--text-muted); padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg-sunken); }
.ft-clavier kbd { font-family: var(--font-mono); padding: 1px 6px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px;
  background: var(--bg-elev); color: var(--text); border-radius: var(--radius-sm); font-size: var(--t-mention); }
.ft-lot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--t-liste);
  padding: 8px 12px; border-top: 1px solid var(--line); background: var(--accent-verificateur-soft); }
.ft-lot-compte { font-weight: 600; }

/* ── Détail de l'exigence ── */
.ft-detail { display: flex; flex-direction: column; gap: 12px; padding: 12px;
  max-height: 520px; overflow-y: auto; }
/* La carte d'exigence complète (verification.jsx) occupe le volet : elle porte le
   surligneur PDF, le sélecteur de document et les verdicts — on lui laisse la hauteur.
   `.ft-detail` est un conteneur flex de hauteur bornée : sans `flex: 0 0 auto`, ses
   enfants sont COMPRIMÉS à la hauteur disponible, et `.req { overflow: hidden }` coupe
   alors la carte au lieu de la faire défiler — c'est le volet qui défile, pas la carte. */
.ft-detail--carte { flex: 1 1 auto; min-height: 0; max-height: none; padding: 10px; }
.ft-detail--carte > * { flex: 0 0 auto; }
.ft-detail--carte .req { margin: 0; }
.ft-meta { font-size: var(--t-liste); color: var(--text-muted); display: flex; flex-wrap: wrap;
  gap: 6px; align-items: center; }
.ft-motif { width: 100%; min-height: 62px; resize: vertical; font: inherit; font-size: var(--t-liste);
  padding: 8px 8px; border: 1px solid var(--line-strong);
  background: var(--bg-elev); color: var(--text); border-radius: var(--radius-sm); }
.ft-verdicts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ft-note { font-size: var(--t-meta); color: var(--text-subtle); margin: 0; }

/* ── Listes de tâches (rédacteur, attente fabricant, écarts) ── */
.ft-section { display: flex; flex-direction: column; gap: 8px; }
.ft-section-titre { margin: 4px 0 0;
  display: flex; align-items: center; gap: 12px;
  font-size: var(--t-section); font-weight: 600; color: var(--text); }
.ft-liste { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--bg-elev); overflow: hidden; border-radius: var(--radius); box-shadow: none; }
.ft-item { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; }
.ft-item + .ft-item { border-top: 1px solid var(--line); }
.ft-item--tache { align-items: flex-start; }
.ft-item-principal { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ft-item-sous { font-size: var(--t-liste); color: var(--text-muted); font-weight: 400; }
.ft-cit {
    font-size: var(--t-liste);
    padding-left: 10px;
    padding: 6px !important;
    background-color: var(--bg);
    font-style: italic;
    display: block; border-left: 2px solid var(--rg-lime); color: var(--text);
}
/* app.jsx : ancrages du registre (lot 5) — la date, pas seulement l'ordre */
.reg-ancrages { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-liste);
  border: 1px solid var(--line-strong); padding: 8px 12px;
  background: var(--bg-sunken); margin-bottom: 10px; border-radius: var(--radius-sm); }
.reg-ancrages--rompu { border-color: var(--err); background: var(--err-soft); color: var(--err-texte); }
.reg-ancrages-detail { font-size: var(--t-meta); color: var(--text-muted); }

/* verification.jsx : exigence scellée sur une version antérieure du référentiel (lot 5) */
.req-revoir { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0;
  padding: 10px 12px; border: 1px solid var(--warn); font-size: var(--t-liste); border-radius: var(--radius-sm); border-color: var(--rg-warn-edge);
  background: var(--warn-soft); color: var(--warn-texte); }
.req-revoir b { font-weight: 600; }

/* verification.jsx : avis à l'aveugle — le jugement de l'IA est masqué (lot 4) */
.req-aveugle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0; padding: 10px 12px; border: 1px dashed var(--line-strong); background: var(--bg-sunken); border-radius: var(--radius-sm); border-style: dashed; }
.req-aveugle-txt { flex: 1 1 260px; font-size: var(--t-liste); color: var(--text-muted); }
.req-aveugle-txt b { color: var(--text); }
.req-score.masque { color: var(--text-subtle);
  background: var(--bg-sunken); border-color: var(--line-strong); }
.req-status-dot.masque { background: var(--line-strong); }
.ft-etape--reglage { justify-content: flex-start; margin-top: 8px; }

/* F5 (#160) — les deux natures de run sur l'écran « Prêt à vérifier ». Le groupe est
   un seul objet : s'il est interdit (procédure engagée, référence en brouillon), c'est
   lui qui porte le motif, et les boutons sont grisés ensemble. */
.run-boutons { display: flex; gap: 10px; margin-top: 20px; justify-content: center;
  flex-wrap: wrap; align-items: center; }
.run-boutons-nature { display: inline-flex; gap: 10px; align-items: center; }

/* Pictos du fil : le genre se lit avant le texte. La bulle est réservée à la
   correspondance — c'est le seul genre où quelqu'un écrit à quelqu'un. */
.fil-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-top: 1px;
  color: var(--text-subtle); background: var(--bg-sunken); border-radius: var(--radius-sm); }
.fil-ico--message { color: var(--accent); background: var(--accent-soft); }
.fil-ico--a_decider, .fil-ico--a_prendre { color: var(--warn-texte); background: var(--warn-soft); }
.fil-ico--bris { color: var(--err-texte); background: var(--err-soft); }
.fil-ico--verdict { color: var(--ok-texte); background: var(--ok-soft); }
/* Le cadenas vert et le document jaune portent déjà leur couleur : pas de pastille
   derrière eux, sinon deux fonds se superposent et le picto se ternit. */
.fil-ico:has(.scelle), .fil-ico:has(svg circle[fill]), .fil-ico:has(.fil-clos), .fil-ico:has(.fil-instruit) { background: transparent; }
/* Dossier clos (certifié) : cadenas doré sur disque noir — ce picto-là seulement (bug #27). */
.fil-clos { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--clos-fond); color: var(--clos-or); }
/* Instruction close, décision à prononcer : coche sur disque vert pâle (bug #46). */
.fil-instruit { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ok-soft); color: var(--ok-texte); }

/* ── Page Messages : l'archive de la correspondance ── */
.msg-barre { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.msg-recherche { flex: 1 1 260px; min-width: 0; font: inherit; font-size: var(--t-liste);
  padding: 8px 12px; border: 1px solid var(--line-strong);
  background: var(--bg-elev); color: var(--text); border-radius: var(--radius-sm); }
.msg-recherche::placeholder { color: var(--text-subtle); }
.msg-fils { display: flex; flex-direction: column; gap: 8px; }
.msg-fil { border: 1px solid var(--line); background: var(--bg-elev);
  overflow: hidden; border-radius: 0; border-color: var(--line-strong); }
/* Fil qui porte des messages non lus : après le cadre du fil, sans quoi il ne se voit pas. */
.msg-fil--neuf { border-color: var(--accent); }
.msg-fil-tete { display: flex; gap: 12px; align-items: flex-start; width: 100%;
  text-align: left; padding: 10px 12px; background: transparent; border: 0;
  cursor: pointer; font: inherit; color: inherit; }
.msg-fil-tete:hover { background: var(--bg-hover); }
.msg-ico { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.msg-fil-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.msg-fil-titre { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: var(--t-liste); font-weight: 600; }
.msg-exig { font-size: var(--t-liste); font-family: var(--font-mono); }
.msg-pastille { min-width: 17px; padding: 0 6px; font-size: var(--t-mention);
  font-weight: 700; line-height: 17px; text-align: center; background: var(--err); color: #fff; border-radius: var(--radius-sm); }
.msg-attente { font-size: var(--t-mention); font-weight: 600; color: var(--warn-texte);
  background: var(--warn-soft); padding: 1px 6px; border-radius: var(--radius-sm); }
.msg-fil-extrait { font-size: var(--t-liste); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-fil-ou { font-size: var(--t-meta); color: var(--text-subtle); }
.msg-fil-age { flex: 0 0 auto; font-size: var(--t-meta); color: var(--text-subtle);
  font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 2px; }
.msg-fil-corps-ouvert { display: flex; flex-direction: column; gap: 8px;
  padding: 12px 12px 12px; border-top: 1px solid var(--line); background: var(--bg-sunken); }
/* Les bulles : la mienne à droite, celle de l'autre à gauche — la conversation se
   lit comme telle, sans avoir à chercher qui parle. */
.msg-bulle { max-width: min(560px, 82%); align-self: flex-start;
  border: 1px solid var(--line-strong); border-radius: var(--radius-bulle);
  background: var(--bg-elev); padding: 8px 12px; }
/* La mienne : à droite, filet lime, et le coin côté émetteur resserré (la « queue »). */
.msg-bulle--moi { align-self: flex-end; background: var(--bg-elev);
  border-radius: var(--radius-bulle) var(--radius-bulle) var(--radius-sm) var(--radius-bulle);
  border-color: var(--rg-lime); box-shadow: inset -2px -2px 0px var(--rg-lime); }
.msg-bulle-tete { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: var(--t-meta); color: var(--text-subtle); margin-bottom: 4px; }
.msg-auteur { font-weight: 600; color: var(--text-muted); }
.msg-neuf { font-size: var(--t-mention); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--err-texte); }
.msg-corps { font-size: var(--t-liste); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-fil-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding-top: 4px; }
/* L'onglet Messages : le picto au même gabarit que les autres onglets. */
.nav-tab--msg { display: inline-flex; align-items: center; gap: 6px; }
.nav-tab--msg .nav-tab-ico { display: inline-flex; align-items: center; }

/* Filtres de « Mes procédures » — le travail à gauche, le bilan à droite (19/09/2026,
   filtres depuis le 22/09/2026). « Validés » et « Certifiés » restent pleinement
   lisibles : ils servent à retrouver un statut qui a changé. Ils quittent seulement la
   place de tête, calés à droite sur la même ligne que « Tout » et « À instruire ». */
.db-val-tabs .db-val-tab--bilan { margin-left: auto; }
/* S'il y a les deux, seul le premier bilan pousse : « Certifiés » suit « Validés ». */
.db-val-tabs .db-val-tab--valides ~ .db-val-tab--bilan { margin-left: 0; }
/* Produits clos, repliés sous « N produits clos » — le rédacteur y accède, il ne les
   traverse plus pour atteindre ses dossiers en cours. */
.db-projets-clos > summary { cursor: pointer; padding: 8px 2px; font-size: var(--t-liste);
  color: var(--text-muted); display: flex; align-items: baseline; gap: 8px; }
.db-projets-clos > summary:hover { color: var(--text); }
.db-clos-note { font-size: var(--t-meta); color: var(--text-subtle); }
.db-projets-clos[open] > summary { margin-bottom: 4px; }

/* notifications.jsx : le fil en trois rangs (colonne droite du tableau de bord,
   19/09/2026). Il remplace la section « Messages » et la cloche : un fait, un endroit.
   Rang 1 « Action requise » (teinte d'alerte), rang 3 « En attente d'un autre acteur »
   (teinte d'accent), rang 2 « Activité récente » (neutre). L'âge de l'attente est à
   gauche, en chiffres alignés : c'est lui qui ordonne les rangs 1 et 3. */
.fil { display: flex; flex-direction: column; gap: 0; }
.fil .db-section-title { margin-bottom: 8px; }
.fil-rang { display: flex; flex-direction: column;
  border: 1px solid var(--line); overflow: hidden; border-radius: 0; border-color: var(--line-strong); }
.fil-rang-tete { display: flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-sunken);
  border-bottom: 1px solid var(--line); font-size: var(--t-mention); letter-spacing: 0.08em; }
.fil-rang--1 > .fil-rang-tete { color: var(--err-texte); background: var(--err-soft); }
.fil-rang--3 > .fil-rang-tete { color: var(--accent); background: var(--accent-soft); }
.fil-compte { margin-left: auto; font-variant-numeric: tabular-nums;
  letter-spacing: 0; text-transform: none; }
.fil-item { display: flex; gap: 10px; align-items: flex-start; text-align: left;
  width: 100%; padding: 8px 12px; background: transparent; border: 0;
  border-top: 1px solid var(--line); cursor: pointer; font: inherit; color: inherit; }
.fil-rang > .fil-item:first-of-type { border-top: 0; }
.fil-item:hover { background: var(--bg-hover); }
.fil-age { flex: 0 0 auto; min-width: 34px; padding-top: 1px;
  font-size: var(--t-meta); font-variant-numeric: tabular-nums;
  color: var(--text-subtle); white-space: nowrap; font-family: var(--font-mono, ui-monospace, monospace); }
.fil-age--chaud { color: var(--err-texte); font-weight: 600; }
.fil-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fil-titre { font-weight: 600; font-size: var(--t-liste); }
.fil-detail { font-size: var(--t-liste); color: var(--text-muted); }
.fil-ou { font-size: var(--t-meta); color: var(--text-subtle); }
.fil-plus { align-self: flex-start; margin: 4px 0 6px 12px; padding: 0;
  background: transparent; border: 0; cursor: pointer; font: inherit;
  font-size: var(--t-meta); color: var(--accent); }
.fil-plus:hover { text-decoration: underline; }
/* Pastille de l'onglet Tableau de bord : le compteur du rang 1, là où le fil se lit. */
.nav-tab--home { display: inline-flex; align-items: center; gap: 6px; }
.nav-tab-pastille { min-width: 18px; padding: 0 6px;
  font-size: var(--t-mention); font-weight: 700; line-height: 18px; text-align: center;
  background: var(--err); color: #fff; border-radius: var(--radius-sm); }

/* files-travail.jsx : bascule de lecture de la file et filtres de la grille (lot 4) */
.ft-vues { display: flex; gap: 0; border: 1px solid var(--line-strong);
  overflow: hidden; align-self: center; border-radius: var(--radius-sm); }
.ft-vue { font: inherit; font-size: var(--t-liste); padding: 6px 12px; cursor: pointer;
  background: var(--bg-elev); color: var(--text-muted); border: 0; }
.ft-vue + .ft-vue { border-left: 1px solid var(--line); }
.ft-filtres { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ft-filtre { font: inherit; font-size: var(--t-liste); padding: 4px 10px; cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev); color: var(--text-muted); border-radius: var(--radius-sm); }
.ft-table .ft-cit { padding-left: 0; }

/* app.jsx : actions groupées du rédacteur (lot 4) — étape 1 du bandeau de procédure */
/* Bilan d'un lot (étape 1 du bandeau) : étiquette bordée, refermée au clic (bug #75). */
.ag-bilan { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
  border: 1px solid var(--ok); border-radius: var(--radius-sm); background: var(--ok-soft);
  color: var(--ok-texte); font-size: var(--t-meta); cursor: pointer; }
.ag-bilan:hover { border-color: var(--ok-texte); }
.ag-bilan--err { border-color: var(--err); background: var(--err-soft); color: var(--err-texte); }
/* verification.jsx : la matière est figée par l'état de la procédure (verrou serveur) */
/* Pourquoi « ✓ Valider » est fermé : la phrase se lit à côté des verdicts restants. */
.req-verrou { flex: 1 1 100%; font-size: var(--t-meta); color: var(--text-muted); line-height: 1.45; }
.ft-item-actions { display: flex; flex-direction: row; align-items: flex-end; gap: 4px; }
/* Où mène le bouton : la promesse est tenue par la carte, qui ouvre ce contrôle. */
.ft-ou { text-align: right; line-height: 1.45; color: var(--text-muted); font-size: var(--t-mention); }
.ft-rang { font-size: var(--t-mention);
  border: 1px solid var(--line); padding: 1px 6px; border-radius: var(--radius-sm); border-color: var(--line-strong); color: var(--text-muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Bandeaux d'avancement (rédacteur) ──
   Une GRILLE, pas une ligne flex : les colonnes (produit · jauge · état · gestes) ont
   la même largeur d'un bandeau à l'autre, sinon chaque pastille déplace le bouton
   voisin et l'œil ne peut plus comparer deux référentiels. Largeurs en variables :
   le squelette se règle ici, pas dans le JSX. */
.ft-bandeaux { display: flex; flex-direction: column;
  --ft-col-jauge: 130px; --ft-col-etat: 200px; --ft-col-geste: 175px; border: 1px solid var(--line-strong); border-radius: var(--radius); gap: 0; }
/* Bandeaux d'avancement : cadre et filet, pas de liseré coloré ; la jauge est lime */
.ft-bandeau { display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) var(--ft-col-jauge) var(--ft-col-etat) var(--ft-col-geste); align-items: center;
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: transparent; padding: 10px 12px; }
.ft-bandeau-txt { min-width: 0; font-size: var(--t-texte); }
.ft-bandeau-detail { display: block; font-size: var(--t-liste); color: var(--text-muted); font-weight: 400; }
/* L'état, en pastille : elle peut passer à la ligne plutôt que de pousser la colonne. */
.ft-bandeau-etat { min-width: 0; }
.ft-bandeau-etat .ft-puce { white-space: normal; text-align: left; line-height: 1.2; }
/* Les gestes : même largeur pour tous, empilés quand il y en a deux. */
.ft-bandeau-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.ft-bandeau-actions .btn { width: 100%; justify-content: center; text-align: center; }
/* Sous 1000px, quatre colonnes ne tiennent plus : le produit prend toute la largeur,
   la jauge et l'état se rangent dessous à gauche, les gestes restent à droite. */
@media (max-width: 1000px) {
  .ft-bandeau { grid-template-columns: minmax(0, 1fr) var(--ft-col-geste); row-gap: 8px; }
  .ft-bandeau-txt { grid-column: 1 / -1; }
  .ft-jauge-bloc, .ft-bandeau-etat { grid-column: 1; }
  .ft-bandeau-actions { grid-column: 2; grid-row: 2 / 4; align-self: center; }
}
.ft-etape { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end;
  flex: 0 1 auto; }
.ft-bandeau-org { color: var(--text-muted); font-weight: 400; }
/* Les lignes d'un référentiel (retours, exigences sans document) sous son bandeau, dans
   le même cadre : elles ne répètent ni le produit ni le référentiel. */
.ft-liste--sous { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--bg-sunken); }
/* Intertitre d'un référentiel dont le bandeau est rangé sous un autre onglet. */
.ft-bandeau-tete { padding: 10px 12px; font-size: var(--t-texte); }
.ft-note--liste { margin-top: 4px; }
.ft-note--onglet { margin: -2px 0 10px; }

/* Onglets de « À faire » : un geste par onglet, dans l'ordre de travail. */
.ft-onglets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px;
  border-bottom: 1px solid var(--line); }
.ft-onglet { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; padding: 8px 12px; background: transparent;
  border: 0; border-bottom: 2px solid transparent; color: var(--text-muted);
  margin-bottom: -1px; font-size: var(--t-liste); letter-spacing: 0.01em; }
.ft-onglet:hover { color: var(--text); }
.ft-onglet--on { color: var(--text); font-weight: 600; border-bottom-color: var(--rg-lime); }
.ft-onglet--vide { opacity: 0.45; }
.ft-onglet-n { font-size: var(--t-mention); font-variant-numeric: tabular-nums; min-width: 17px;
  padding: 0 6px; background: var(--bg-sunken);
  border: 1px solid var(--line); line-height: 16px; text-align: center; border-radius: var(--radius-sm); font-family: var(--font-mono); }
.ft-onglet--on .ft-onglet-n { font-weight: 700;
  background: var(--rg-lime); border-color: var(--rg-lime); color: #1A1C20; }

/* La jauge et sa légende (« N exigences sur T prêtes ») : un seul énoncé de l'avancement. */
.ft-jauge-bloc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ft-jauge-legende { font-size: var(--t-meta); color: var(--text-muted); line-height: 1.3; }
.ft-jauge { position: relative; width: 100%; overflow: hidden; border-radius: 0; height: 5px; background: var(--bg-hover); }
.ft-jauge-part { position: absolute; inset: 0 auto 0 0; width: var(--ft-jauge, 0%); border-radius: 0; background: var(--rg-lime); }

/* ── Dossier de décision ── */
.ft-faits { display: flex; gap: 20px; flex-wrap: wrap; border: 1px solid var(--line); background: var(--bg-elev); padding: 12px 16px; border-radius: var(--radius); box-shadow: none; }
.ft-fait { font-size: var(--t-liste); color: var(--text-muted); }
/* L'explication d'un fait passe sous son libellé (bug #39) : collée à la suite, sa taille
   plus petite se lisait comme une faute de composition. */
.ft-fait .ft-ou { display: block; text-align: left; }
.ft-alerte { display: flex; flex-direction: column;
  border: 1px solid var(--err); border-radius: var(--radius); background: var(--bg-elev); padding: 0; gap: 0; }
.ft-alerte-tete { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 600;
  background: var(--err-soft); color: var(--err-texte);
  padding: 8px 12px; border-bottom: 1px solid var(--err); font-size: var(--t-liste); }
.ft-alerte-paire { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 12px; }
.ft-alerte-val { flex: 1 1 200px; border: 1px solid var(--err);
  background: var(--bg-elev); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; border-color: var(--line-strong); border-radius: var(--radius-sm); }
.ft-val { font-weight: 600; font-family: var(--font-mono); font-size: var(--t-section); }
.ft-src { font-size: var(--t-meta); color: var(--text-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ft-levee { display: flex; flex-direction: column; gap: 8px; }

.ft-defile { overflow-x: auto; border: 1px solid var(--line); background: var(--bg-elev); border-radius: var(--radius); box-shadow: none; }
.ft-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-liste); }
.ft-table th { text-align: left; font-size: var(--t-mention); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 600; background: var(--bg-sunken); white-space: nowrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ft-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ft-td-sous { display: block; font-size: var(--t-meta); color: var(--text-muted); }
/* Vue « Par élément » : un filet plus marqué ouvre le groupe d'une exigence. */
.ft-tr-groupe > td { border-top: 1px solid var(--line-strong); }
.ft-td-mono { font-size: var(--t-meta); white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.btn.ft-vers-registre { align-self: flex-start; }

.ft-decision { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); padding: 12px 16px; border-radius: var(--radius); background: var(--bg-sunken); }
.ft-controle { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-texte); cursor: pointer; }
.ft-controle input { margin-top: 4px; width: 15px; height: 15px; accent-color: var(--accent); }
.ft-gate { font-size: var(--t-liste); color: var(--text-muted); }

@media (max-width: 900px) {
  /* En une colonne, les volets s'empilent : la page défile, pas un cadre à hauteur fixe. */
  .ft-file { grid-template-columns: 1fr; height: auto; }
  .ft-lignes { max-height: 460px; }
  .ft-volet + .ft-volet { border-left: 0; border-top: 1px solid var(--line); }
}

/* ── Recherche dans le contenu des documents (recherche-contenu.jsx) ──────────
   Le vert signale une trouvaille DANS LE TEXTE du document, là où le filtre
   nom/description n'aurait rien donné : puce de catégorie concernée, compteur,
   extrait sous le nom du fichier. */
.file-chip--hit {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok-texte);
}
.file-chip--hit:hover { border-color: var(--ok); color: var(--ok-texte); }
.file-chip--hit.active {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--bg-elev);
}
.file-chip-hit-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  margin-left: 4px;
  background: var(--ok);
  color: var(--bg-elev);
  font-size: var(--t-mention);
  font-weight: 700; border-radius: var(--radius-sm);
}
.file-chip--hit.active .file-chip-hit-n { background: var(--bg-elev); color: var(--ok-texte); }

.file-extrait {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
  font-size: var(--t-mention);
  line-height: 1.45;
  color: var(--ok-texte);
}
.file-extrait > svg { flex-shrink: 0; align-self: center; }
.file-extrait-page { flex-shrink: 0; font-weight: 700; }
.file-extrait-txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted);
  font-style: italic;
}
.file-extrait-n { flex-shrink: 0; font-weight: 700; opacity: 0.8; }

.v2-table-desc .file-extrait { margin-top: 4px; }

.file-contenu-etat {
  padding: 4px 2px;
  font-size: var(--t-mention);
  color: var(--text-subtle);
}
.file-contenu-etat--ok {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ok-texte);
  font-weight: 600;
}
/* Orphelines : rattacher à une ligne choisie, ou supprimer (#154). */
.lesp-orph-gestes { min-width: 240px; }
.lesp-orph-gestes .lesp-select { display: block; width: 100%; max-width: 360px; margin-bottom: 4px; }
.lesp-orph-gestes .lesp-act { margin-right: 6px; }
.lesp-supprimee { margin: 10px 0 0; padding: 6px 10px; border-left: 3px solid var(--line-strong); background: var(--bg-sunken); }

/* ── Console de plateforme et supervision (routes/supervision.py) ─────────── */
/* Mode test du super admin : tant qu'il y est, le bandeau le dit — une indication, pas un
   bouton (on en sort par « Plateforme »). Noir sur jaune : lisible sur la barre sombre comme claire. */
.td-modetest {
  display: inline-block; margin-left: 8px; padding: 4px 8px; border: 0; border-radius: var(--radius-sm); cursor: default;
  font: inherit; font-size: var(--t-mention); letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: #000; background: var(--warn); white-space: nowrap;
}
/* Ce que la console ne montre pas : dit une fois, en tête de page. */
.sup-serment { border-left: 3px solid var(--ok); }
/* Roue crantée : la liste se lit en deux temps — les vues métier, puis l'administration.
   Les vues n'ont pas de picto (ce ne sont pas des réglages) : elles s'alignent sur le
   texte des autres entrées grâce au retrait. */
.settings-dropdown-titre {
  padding: 8px 12px 4px; font-size: var(--t-mention); letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--text-subtle);
}
.settings-dropdown-item--vue { padding-left: 32px; }
/* Deux listes dans une même section : la seconde reprend un titre, avec l'air qu'il faut. */
.sup-h2-suite { margin-top: 20px; }
/* Annuaire des organismes : une puce par habilitation (référentiel · module). */
.sup-hab {
  display: inline-block; margin: 0 6px 4px 0; padding: 1px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-sunken);
  font-size: var(--t-meta); color: var(--text-muted); white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   Thème Registre — règles propres au thème (fusionnées ici le 21/09/2026 : Registre
   est l'unique thème ; ce qui redéfinissait une règle de base a été replacé dans
   celle-ci). Principes :
     · une surface par liste — un cadre, des lignes séparées par un filet ;
     · l'état est une donnée — marqueur de forme + texte, jamais une teinte de liseré ;
     · angles vifs — cadres 4 px, lignes 0, étiquettes 3 px ;
     · palette neutres + lime, jaune vif pour « partiel / en attente » ;
     · avis normalisés (bandeau de tête portant le mot de signalement).
   Quelques sélecteurs portent « :root » : le préfixe [data-skin] les faisait passer
   devant une variante plus spécifique de la base (.db-proc-row devant
   .db-proc-row--avenir:hover, .req.open devant .req.status-…) ; :root leur garde
   exactement cette priorité.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 3. Titres de section : casse normale + filet ────────────────────────── */
.db-section-title:not(.db-val-tabs)::after {
  content: ""; flex: 1; height: 1px; background: var(--line); order: 1;
}
.db-section-title:not(.db-val-tabs) > .db-add-projet { order: 2; margin-left: 0; }

/* ── 4. Onglets et compteurs ─────────────────────────────────────────────── */
.db-val-tabs {
  gap: 20px; border-bottom: 1px solid var(--line); align-items: flex-end;
}
/* Onglets de filtre (« Mes procédures », page des demandes) sur une même ligne */
.db-val-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity 0.12s, color 0.12s;
  font-size: var(--t-liste); font-weight: 500; color: var(--text-muted); opacity: 1;
  padding: 0 0 8px; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.db-val-tab:hover { color: var(--text); }
.db-val-tab.active,
.db-val-tab--attente.active,
.db-val-tab--decider.active,
.db-val-tab--valides.active,
.db-val-tab--certifie.active {
  color: var(--text); font-weight: 600; border-bottom-color: var(--text);
}
/* Compteur = chiffre à chasse fixe, sans pastille */
:root .db-badge,
:root .db-badge--certifie {
  min-width: 0; height: auto; 
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--bg);
}
:root .db-badge--attente { min-width: 0; height: auto; font-family: var(--font-mono); font-size: var(--t-meta); font-variant-numeric: tabular-nums; color: var(--warn-texte); font-weight: 700; }
.db-val-tab.active .db-badge--green,
.db-val-tab.active .db-badge--certifie { color: var(--bg); background-color: var(--ok); border-color: var(--ok); }

/* ── 5. Étiquettes d'état (pilules → étiquettes à contour, casse normale) ─── */
.db-msg-flag,
.db-proc-etat,
.db-dir-etat,
.insc-tag,
.insc-modtag,
.pill,
.proc-pill,
.checklist .item-status {
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: none; letter-spacing: 0;
  font-size: var(--t-meta); font-weight: 600; line-height: 1.2;
  padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--bg-elev); border: 1px solid currentColor;
}
/* Marqueur de forme devant l'étiquette : l'état se lit sans la couleur */
.db-msg-flag::before,
.db-proc-etat::before,
.db-dir-etat::before {
  content: ""; width: 8px; height: 8px; flex-shrink: 0; background: currentColor;
}
.db-msg-flag.todo,
.db-proc-etat--warn { color: var(--warn-texte); border-color: var(--rg-warn-edge); }
.db-dir-etat--warn { color: var(--warn-texte); border-color: var(--rg-warn-edge); }
.db-msg-flag.todo::before,
.db-proc-etat--warn::before,
.db-dir-etat--warn::before {
  background: var(--warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 9px;
}
.db-msg-flag.done,
.db-proc-etat--ok,
.db-dir-etat--ok { color: var(--rg-lime-ink); border:none; }
.db-proc-etat--err,
.db-dir-etat--err { color: var(--err-texte); border-color: var(--err); }
.db-proc-etat--err::before,
.db-dir-etat--err::before {
  clip-path: polygon(20% 0,50% 30%,80% 0,100% 20%,70% 50%,100% 80%,80% 100%,50% 70%,20% 100%,0 80%,30% 50%,0 20%);
}
.db-dir-etat--def {
    color: var(--text);
    border-color: var(--text-muted);
}
.db-dir-etat--def::before,
.db-proc-etat--def::before { background: none; border: 1.5px solid currentColor; transform: rotate(45deg) scale(.8); }
.db-proc-etat--muted { color: var(--text-muted); border-color: var(--line-strong); }
.db-proc-etat--muted::before { background: none; border: 1.5px solid currentColor; border-radius: 50%; }

/* Codes (module, référentiel) : petite étiquette mono */
.cat-badge,
.classif-anomaly-badge {
  border-radius: var(--radius-sm);
}
.db-modbadge.tiers { color: var(--text-muted); border-color: var(--line-strong); }
/* Module retenu ≠ module de la déclaration : l'alerte se lit sur le badge (deux classes, pour
   passer devant `.tiers` / `.auto`). */
.db-modbadge.db-modbadge--ecart { display: inline-flex; align-items: center; gap: 4px; color: var(--warn-texte); border-color: var(--warn); }

/* Texte « jaune » illisible sur fond clair → encre jaune foncé */
.pill.warn,
.req-doc--warn,
.req-score.warn,
.checklist .item-status.partial,
.checklist .item-status.attente,
.checklist .item-remarque--partial,
.p4-fbranch .fbr.warn-b.active,
.p4-fbranch .fbr.warn-b.active .b2,
.insc-tag.cond,
.insc-modtag.none,
.pdfc-grav.warn,
.dec-elt-remarque--partial,
.prof-note.warn {
  color: var(--warn-texte);
}

/* ── 6. File de travail (A · Registre) ───────────────────────────────────── */
.db-sol,
.db-sol--attente,
.db-sol--certifie {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: start;
  padding: 10px 12px; background: transparent;
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
}
.db-soles > .db-sol:first-child { border-top: 0; }
.db-sol:hover,
.db-sol--attente:hover { background: var(--bg-hover); }
.db-sol--active,
.db-sol--attente.db-sol--active {
  background: var(--accent-verificateur-soft); box-shadow: inset 0 0 0 1px var(--rg-lime);
}
/* Marqueur de forme en tête : remplace le picto rond plein */
.db-sol-icon > * { display: none !important; }
.db-sol-icon::before {
  content: ""; width: 9px; height: 9px; border: 1.5px solid var(--text-muted); border-radius: 50%;
}
.db-sol--decider .db-sol-icon::before { border-radius: 0; transform: rotate(45deg) scale(.85); border-color: var(--text); }
/* Procédures certifiées (demandes de mission) : le cadenas vert commun (LockBadge = .scelle) */
.db-sol--certifie .db-sol-icon::before { display: none; }
.db-sol--certifie .db-sol-icon > .scelle { display: inline-block !important; }
.db-sol-meta {
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 600; color: var(--text);
  margin-bottom: 0; line-height: 1.45; letter-spacing: -0.01em;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
/* Corps « aplati » : référence + date sur la 1re ligne, description sur toute la largeur dessous */
.db-sol-body > .dem-attente { grid-column: 2 / 4; }

/* ── 7. Clarifications : fiche d'écart ───────────────────────────────────── */
.db-msg.answered {
  border: 1px solid var(--line); border-radius: 0; box-shadow: none;
  background: var(--surface); padding: 12px 16px;
}
.db-msgs > .db-msg:first-child { border-top: 0; }
.db-msg:hover { background: var(--bg-hover); box-shadow: none; }
.db-msg-loc { font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 600; color: var(--text); }
/* Tableau Qui / Quand | Quoi */
.db-msg-line.a .db-msg-txt { color: var(--text); font-weight: 400; }

/* ── 8. Accueil : cartes produit, lignes procédure / directive ───────────── */
.db-projet > :not(.db-projet-head) { margin: 0 12px; }
.db-projet > :last-child { margin-bottom: 10px; }
:root .db-proc-row {
  border-radius: 0; background: transparent; margin: 0;
  border-top: 1px solid var(--line); padding: 8px 2px;
}
.db-proc-row:hover,
.db-dir-row:hover { background: var(--bg-hover); }
.db-projet--processing { background: var(--bg-elev); border-color: var(--line-strong); }
.db-add-projet:hover { background: var(--bg-hover); color: var(--text); border-color: var(--line-strong); }

/* ── 9. États vides ──────────────────────────────────────────────────────── */
.db-empty-inline,
.socle-empty {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; font-size: var(--t-liste); color: var(--text-muted);
}

/* Pastilles de statut → marqueurs de forme (■ conforme · ▲ partiel · ✕ non couvert) */
:root .req-status-dot {
  width: 11px; height: 11px; border-radius: 0; background-color: transparent;
}
/* Ces trois blocs portent aussi le fond de base de la pastille (repliés ici, après la
   règle :root qui le remet à transparent, lot E). */
.req-status-dot.ok { background: var(--rg-lime); }
.req-status-dot.warn {
  background: var(--warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 12px;
}
.req-status-dot.err {
  background: var(--err);
  clip-path: polygon(20% 0,50% 30%,80% 0,100% 20%,70% 50%,100% 80%,80% 100%,50% 70%,20% 100%,0 80%,30% 50%,0 20%);
}

/* Carte d'exigence : ni liseré ni fond de statut (le statut reste porté par le marqueur et le score) */
.req,
.req.status-ok,
.req.status-warn,
.req.status-err,
.req.status-valide {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev);
}
:root .req.open { box-shadow: none; border-color: var(--line-strong); }
.req.status-valide .req-status-dot {
  width: 14px; height: 14px; border-radius: var(--radius-sm); clip-path: none;
  background: var(--rg-lime-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E") center / 74% no-repeat;
}

/* Onglets-intercalaires de référentiel */
.ref-tab.d-pill--partial { border-top-color: var(--warn); }
.ref-tab.d-pill--all_validated { border-top-color: var(--rg-lime); }
.ref-tab.active .ref-tab-s { color: var(--text-muted); }
/* Écart avec la déclaration : étiquette à contour, casse normale */
.ref-tab-ecart.ecart--declare { border-color: var(--rg-lime); background: var(--rg-lime); }
.ref-tab-ecart.ecart--a_verifier { border-color: var(--warn); background: var(--warn); }
.ref-tab-ecart.ecart--hors_perimetre { border-color: var(--warn); background: transparent; }
.ref-tab-ecart.ecart--non_declare { border-color: var(--err); background: var(--err); }

/* ── 11. Avis normalisés : bandeau de tête portant le mot de signalement ─── */
.socle-banner::before,
.amber-strip::before {
  flex: 0 0 calc(100% + 24px); margin: 0 -12px; padding: 4px 12px;
  font-size: var(--t-meta); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.45;
}
.socle-banner > span,
.amber-strip > div,
.dep-alert-strip > div { flex: 1 1 0; min-width: 0; }
.socle-banner > svg { margin-top: 4px; flex-shrink: 0; }
/* Attention (jaune) */
.socle-banner.warn { color: var(--warn-texte); border-color: var(--rg-warn-edge); }
.socle-banner.warn::before,
.amber-strip::before { content: "Attention"; background: var(--warn); color: #1A1C20; }
/* Alerte / erreur (rouge) */
.socle-banner.err { border-color: var(--err); }
.socle-banner.err::before { content: "Erreur"; background: var(--err); color: #FFFFFF; }
.dep-alert-strip::before { flex: 0 0 calc(100% + 24px); margin: 0 -12px; padding: 4px 12px; font-size: var(--t-meta); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.45; content: "Alerte"; background: var(--err); color: #FFFFFF; }
/* Note (neutre) */
.socle-banner.info { border-color: var(--line-strong); }
.socle-banner.info::before { content: "Note"; background: var(--bg-sunken); color: var(--text); border-bottom: 1px solid var(--line); }
.socle-banner a,
.amber-strip a { color: var(--text); }

/* ── 12. Chat — retirée le 10/10/2026 : l'assistant reprend les bulles (« Assistant :
   panneau ancré à droite », plus haut). ─────────────────────────────────── */

/* ── 13. Zones de dépôt et divers ────────────────────────────────────────── */
:root .element-drop-zone.drop-active {
  border-radius: var(--radius-sm); border-width: 1px; background: var(--bg-elev);
}

/* ── 14. Détail d'une exigence ───────────────────────────────────────────── */
.req-id {
  font-family: var(--font-mono); font-size: var(--t-affiche); font-weight: 400;
  color: var(--accent); letter-spacing: -0.01em;
}
/* Appel à l'action « voir les passages surlignés » : lime, carré */
.checklist .item-source--cta:hover { background: var(--accent-verificateur-soft); box-shadow: inset 0 0 0 1px var(--rg-lime); }

/* ── 15. Demandes de mission ─────────────────────────────────────────────── */
.dem-tab.active { border-bottom-color: var(--text); }
/* « À soumettre » : lignes de référentiel des cartes produit, comme l'accueil */
.dem-prod-row:hover { background: var(--bg-hover); }
.dem-prod-row--hors:hover { background: transparent; }
/* Action ou état sur la ligne du titre, à droite */
.dem-sol .dem-actions {
  grid-column: 3; grid-row: 1; justify-self: end; align-self: start; width: auto; margin-top: -4px;
}

/* Étiquettes d'état scellées : le cadenas vert commun (styles.css) au lieu du carré lime */
.db-etat-scelle::before {
  flex-shrink: 0;
  -webkit-mask: var(--scelle-svg) center / contain no-repeat;
  mask: var(--scelle-svg) center / contain no-repeat;
  content: "";
  --scelle-taille: 16px;
  width: var(--scelle-taille); height: var(--scelle-taille);
  border: 0; border-radius: 0; clip-path: none; transform: none; background: var(--ok);
}
.db-dir-head svg { max-width: 12px; }
/* ── 16. Files de travail (files-travail.jsx, préfixe ft-) ────────────────────
   Même langue que le reste du skin : une surface par liste, des lignes séparées
   d'un filet (jamais une carte par ligne), l'état porté par un marqueur de forme
   et un mot — pas par une teinte de liseré — et les identifiants en chasse fixe. */

/* Titres de section : casse normale + filet, comme les titres d'accueil */
.ft-section-titre::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* Lignes de file : pas de liseré d'accent, un cadre intérieur lime sur la ligne active */
.ft-ligne { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); cursor: pointer; border-left: 0; border-radius: 0; padding: 8px 12px; }
:root .ft-ligne--active {
  background: var(--accent-verificateur-soft);
  box-shadow: inset 0 0 0 1px var(--rg-lime);
}
.ft-case--on { background: var(--rg-lime); border-color: var(--rg-lime); color: #1A1C20; }

/* Étiquettes : contour + marqueur de forme, l'état se lit sans la couleur.
   Le fond est teinté (19/09/2026) : sur la page claire, un fond --bg-elev cerné d'un
   filet clair ne se distinguait pas du bandeau — la pastille passait pour du texte. */
.ft-puce--ok { background: var(--ok-soft); color: var(--rg-lime-ink); border-color: var(--rg-lime); }
.ft-puce--warn { background: var(--warn-soft); color: var(--warn-texte); border-color: var(--rg-warn-edge); }
.ft-puce--err { background: var(--err-soft); color: var(--err-texte); border-color: var(--err); }
.ft-puce--info { background: var(--info-soft); color: var(--info-texte); border-color: var(--info); }
.ft-puce::before {
  content: ""; width: 8px; height: 8px; flex-shrink: 0; background: currentColor;
}
.ft-puce--warn::before { background: var(--warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 9px; }
.ft-puce--err::before {
  clip-path: polygon(20% 0,50% 30%,80% 0,100% 20%,70% 50%,100% 80%,80% 100%,50% 70%,20% 100%,0 80%,30% 50%,0 20%);
}
.ft-puce--def::before { border-radius: 50%; background: var(--text-subtle); }
/* Non applicable / hors champ (statuts.js, teinte `muted`) : rond vide, texte atténué. */
.ft-puce--muted { color: var(--text-muted); }
.ft-puce--muted::before { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-subtle); }

.ft-bandeaux > .ft-bandeau:first-child { border-top: 0; }
.ft-bandeau b { font-family: var(--font-mono); font-size: var(--t-liste); }

/* Messages : des feuillets de correspondance, pas des bulles de messagerie grand
   public — angles vifs, la mienne marquée par un filet plutôt que par un aplat. */
.msg-fil + .msg-fil { margin-top: 0; }

/* Tâches : une ligne de registre, le rang en chasse fixe, la citation en retrait */
.ft-item-titre { font-size: var(--t-liste); font-weight: 600; }
.ft-item-titre .ft-exig { font-family: var(--font-mono); }
.ft-item--gele { background: var(--bg-sunken); }
/* « À faire » : une ligne d'exigence sous son bandeau, cliquable en entier (bug #23).
   Pastille et identifiant en tête, libellé en texte courant dessous (deux lignes au plus). */
.ft-item--clic { cursor: pointer; padding-left: 24px; transition: background 0.12s; }
.ft-item--clic:hover { background: var(--bg-hover); }
.ft-item--clic:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ft-item--clic .ft-item-titre { display: flex; align-items: center; gap: 8px; }
.ft-item-lib {
  font-size: var(--t-liste); line-height: 1.45; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ft-item--clic .ft-item-actions { align-items: center; }
.ft-attente { color: var(--warn-texte); }

/* Avis : bandeau de tête portant le mot de signalement, cadre neutre */
.ft-alerte > *:not(.ft-alerte-tete) { padding: 0 12px; }
.ft-alerte > *:last-child { padding-bottom: 12px; }

/* Faits de mission et registre des sceaux */
.ft-fait b { display: block; color: var(--text); font-family: var(--font-mono); font-size: var(--t-panneau); }
.ft-table thead th { text-transform: none; letter-spacing: 0; font-size: var(--t-meta); }

/* Avis à l'aveugle : le masque se voit — trait discontinu, pas de couleur d'état */
.item-status.masque {
  border-color: var(--line-strong); border: 1px dashed var(--line-strong);
  background: transparent; color: var(--text-muted); }

/* Fil d'activité : panneau à angles vifs, pastille carrée, neuf marqué par un filet */
/* Le fil en trois rangs : le registre n'arrondit pas et ne dégrade pas — les rangs
   sont des sections d'un même relevé, séparées par un filet, pas des cartes. */
.fil-rang + .fil-rang { margin-top: 12px; }
.fil-item--neuf { box-shadow: inset 2px 0 0 var(--accent-verificateur, var(--accent)); }
.ft-vue--on { background: var(--text); color: var(--bg-elev); }
.ft-filtre--on { background: var(--text); border-color: var(--text);
  color: var(--bg-elev); }
.ft-etape .btn { white-space: nowrap; }
.ft-item--gele .ft-ou { color: var(--warn-texte); }

/* Écran d'amorçage : le registre n'arrondit pas, et sa couleur d'action est le lime. */
.amorce-etat a { color: var(--rg-lime-ink, var(--accent)); }

/* ── Exigence « liste » : résumé dans la carte et vue par composant (verification.jsx) ── */
.liste-entete { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.liste-entete-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.liste-titre { font-weight: 700; font-size: var(--t-section); }
.liste-source { font-size: var(--t-meta); color: var(--text-subtle); margin-top: 4px; }
.liste-source-nom { font-weight: 500; }
.liste-consigne {
  margin-top: 8px; font-size: var(--t-meta); color: var(--text-subtle);
  background: var(--bg-sunken); border-radius: var(--radius);
  padding: 6px 10px; border-left: 3px solid var(--accent);
}
.liste-alerte {
  margin-top: 8px; font-size: var(--t-meta); color: var(--err-texte);
  background: rgba(220,53,69,0.08); border-radius: var(--radius); padding: 6px 10px;
}
.liste-bilan { display: flex; gap: 16px; margin-top: 12px; font-size: var(--t-liste); }
.liste-compte { font-weight: 600; }
.liste-compte--ok { color: var(--ok-texte); }
.liste-compte--warn { color: var(--warn-texte); }
.liste-compte--err { color: var(--err-texte); }
.liste-compte-total { color: var(--text-subtle); }
.liste-corps { overflow-y: auto; padding: 0 24px 24px; }
.liste-attente { padding: 8px 0; font-size: var(--t-meta); color: var(--text-subtle); }
/* Une colonne « composant », une par document attendu (--liste-cols, posé par la vue), une de statut. */
.liste-grille { display: grid; grid-template-columns: 220px var(--liste-cols) 36px; gap: 0 16px; }
.liste-grille-tete {
  padding: 10px 0 8px; margin-top: 12px; border-bottom: 2px solid var(--border);
  font-size: var(--t-mention); font-weight: 700; color: var(--text-subtle); letter-spacing: 0.03em;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.liste-col-tete { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-ligne { padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; font-size: var(--t-liste); }
.liste-ligne--absent { background: rgba(220,53,69,0.04); }
.liste-ligne--partiel { background: rgba(255,193,7,0.06); }
.liste-ref { font-weight: 600; line-height: 1.4; word-break: break-word; }
.liste-attrs { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.liste-attr { font-size: var(--t-mention); color: var(--text-subtle); }
.liste-attr-cle { font-weight: 500; }
.liste-annotation { font-size: var(--t-mention); color: var(--warn-texte); margin-top: 4px; }
.liste-constat { font-size: var(--t-mention); color: var(--text-subtle); margin-top: 4px; font-style: italic; line-height: 1.35; }
/* Avertissement d'une ligne (lots matière : diamètre, type 3.1 / 2.2) — signalé, hors verdict. */
.liste-avertissement { font-size: var(--t-mention); color: var(--warn-texte); margin-top: 4px; line-height: 1.35; }
.liste-cellule { min-width: 0; }
.liste-pile { display: flex; flex-direction: column; gap: 6px; }
.liste-fichier { display: flex; flex-direction: column; gap: 2px; }
.liste-fichier-tete { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.file-link.liste-fichier-nom { font-size: var(--t-meta); line-height: 1.3; }
.liste-fichier-gestes { display: flex; gap: 6px; align-items: center; }
.liste-statut { font-weight: 700; font-size: var(--t-texte); }
.liste-statut--gros { font-size: var(--t-section); }
.liste-statut--couvert { color: var(--ok-texte); }
.liste-statut--partiel { color: var(--warn-texte); }
.liste-statut--absent { color: var(--err-texte); }
.liste-statut-global { text-align: center; padding-top: 2px; }
.liste-generique {
  font-size: var(--t-mention); color: var(--text-subtle); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 4px; white-space: nowrap;
}
.icon-link.liste-geste { font-size: var(--t-mention); color: var(--text-subtle); }
.icon-link.liste-geste--choisir { color: var(--accent); }
.liste-candidats { display: flex; flex-direction: column; gap: 4px; }
.liste-candidats--suite { margin-top: 2px; }
.liste-candidats-titre { font-size: var(--t-mention); color: var(--text-subtle); }
.liste-candidats-titre--alerte { color: var(--warn-texte); }
.liste-candidat { display: flex; align-items: center; gap: 6px; }
.file-link.liste-candidat-nom { font-size: var(--t-mention); color: var(--text-subtle); }
.liste-cellule-gestes { display: flex; gap: 4px; margin-top: 2px; }
.btn.subtle.liste-valider { font-size: var(--t-mention); color: var(--ok-texte); border-color: var(--ok); }
.btn.liste-ajouter { font-size: var(--t-mention); }
.btn.liste-rattacher { font-size: var(--t-meta); }
.liste-na { color: var(--text-subtle); font-size: var(--t-meta); font-style: italic; }
.liste-absent { color: var(--err-texte); font-size: var(--t-liste); }
/* Motif d'absence en phrase (« Aucune pièce du dossier ne porte le lot 34509 »). */
.liste-motif { font-size: var(--t-mention); color: var(--err-texte); line-height: 1.35; }
.liste-vide { padding: 40px 0; text-align: center; color: var(--text-subtle); font-size: var(--t-liste); }
/* Résumé dans la carte */
.amber-strip > .liste-bandeau-corps { flex: 1; }
.liste-bandeau-titre { font-weight: 600; margin-bottom: 4px; }
.liste-bandeau-texte { font-size: var(--t-meta); }
.liste-bandeau-aide { font-size: var(--t-meta); color: var(--text-subtle); margin-bottom: 8px; }
.liste-source-choix { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.liste-source-select { font-size: var(--t-meta); flex: 1; max-width: 360px; }
.liste-source-ok { margin-top: 10px; font-size: var(--t-meta); color: var(--ok-texte); font-weight: 600; }
.liste-resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.liste-resume-comptes { font-size: var(--t-liste); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.liste-resume-source { color: var(--text-subtle); font-size: var(--t-meta); }
.liste-resume-lien {
  color: var(--accent); font-weight: 600; font-size: var(--t-liste);
  padding: 0; border: none; background: none; cursor: pointer; text-decoration: underline;
}
.liste-resume-lien--discret { color: var(--text-subtle); font-weight: normal; text-decoration: none; }
.liste-resume-alerte { color: var(--err-texte); font-size: var(--t-meta); }
/* Inventaire (source de la liste introuvable) : le motif, puis le choix de la source. */
.liste-inventaire-source { margin-top: 10px; }

/* ── Carte d'exigence, sceau, analyse ESP, hésitations de l'IA (verification.jsx) ── */
/* Un avis posé DANS une section de carte : sans la marge qui le sépare d'une page. */
.amber-strip.amber-strip--encart { margin: 0; }
.coherence-panel.coherence-panel--alerte { border-color: var(--err); }
.coherence-head.coherence-head--fixe { cursor: default; }
.alerte-technique-texte { font-size: var(--t-liste); line-height: 1.5; }
.req-ambigu {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  color: var(--warn-texte); font-size: var(--t-mention); font-weight: 600;
}
/* Le badge mène à l'encart d'hésitation (.req-hesitation), où l'on tranche. */
.req-ambigu.req-ambigu--lien {
  padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.field-aide { font-weight: 400; color: var(--text-subtle); }
.liste-textes-ligne { display: flex; gap: 6px; margin-bottom: 4px; }
.sceau-cible { font-size: var(--t-meta); color: var(--text-subtle); margin-bottom: 16px; }
.input.sceau-validateur { background: var(--bg-sunken); color: var(--text-muted); cursor: default; }
.sceau-motifs { display: flex; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.sceau-motif { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--t-liste); }
.sceau-avert { font-size: var(--t-meta); color: var(--warn-texte); margin-top: 6px; }
/* #315 — passages indiqués nommés par la fenêtre de scellement : un élément, puis ses passages. */
.sceau-pi { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
  max-height: 260px; overflow-y: auto; }
.sceau-pi-libelle { font-size: var(--t-liste); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.req-fiche-experte { display: flex; justify-content: flex-end; }
.amber-strip.esp-perimee { align-items: center; gap: 12px; }
.amber-strip > .esp-perimee-corps { flex: 1; min-width: 220px; }
.esp-perimee-titre { font-weight: 600; }
.esp-etat { font-size: var(--t-meta); color: var(--text-subtle); }
.esp-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.esp-gestes { display: flex; gap: 8px; }
.item-corps { flex: 1; }
.source-corrected-badge.source-corrected-badge--attente { opacity: 0.7; }
.clarif-gestes { display: flex; gap: 6px; margin-top: 6px; }
.btn.clarif-repondre { margin-top: 6px; }
.req-variables { font-size: var(--t-meta); border-collapse: collapse; width: 100%; }
.req-variables tr { border-bottom: 1px solid var(--border); }
.req-variables td { padding: 4px 0; }
.req-variables td.req-variable-nom { padding: 4px 8px 4px 0; color: var(--text-subtle); white-space: nowrap; font-weight: 600; }
/* Variable attendue que le document ne porte pas (bug #70) : l'état se lit au mot. */
.req-variable--vide td { color: var(--warn-texte); font-style: italic; }
.req-choix-doc { margin-top: 10px; }
.req-hesitation {
  margin-bottom: 8px; font-size: var(--t-meta); color: var(--warn-texte);
  background: rgba(255,193,7,0.1); border-radius: var(--radius); padding: 6px 10px;
}
/* Abstention exposée (#209) : aucun document retenu, mais une raison et une proposition —
   même encart que l'hésitation, mêmes gestes (« Utiliser <proposition> »). */
.req-proposition {
  margin-bottom: 8px; font-size: var(--t-meta); color: var(--warn-texte);
  background: rgba(255,193,7,0.1); border-radius: var(--radius); padding: 6px 10px;
}
/* La ligne d'abstention est un texte qui replie normalement (pas une rangée flex : un nom
   long y était réduit à un caractère par ligne) ; le bouton « Choisir un document » suit en ligne. */
.req-proposition-banque { color: var(--text-muted); }
.req-doc--abstention { display: block; line-height: 1.6; }
.req-doc--abstention .icon-svg { vertical-align: text-bottom; }
.req-doc--abstention .req-doc-changer { margin-left: 6px; vertical-align: middle; }
.req-doc-proposition { font-family: var(--font-mono); font-weight: 600; overflow-wrap: anywhere; }
/* Gestes de l'encart : « Garder <retenu> », « Utiliser <alternative> » (lot E). */
.req-hesitation-gestes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.req-hesitation-fichier { font-family: var(--font-mono); font-weight: 600; overflow-wrap: anywhere; }
.btn.btn--pleine { width: 100%; }
.amb-reste { font-size: var(--t-meta); color: var(--text-muted); margin-right: auto; }
.amb-intro { font-size: var(--t-liste); color: var(--text-muted); margin-top: 0; }
.amb-exigence { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.amb-exigence-tete { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.amb-directive {
  flex-shrink: 0; font-size: var(--t-mention); font-weight: 700; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 1px 6px;
}
.amb-id { font-size: var(--t-liste); }
.amb-titre { font-size: var(--t-liste); color: var(--text-muted); }
.amb-tranche { font-size: var(--t-liste); color: var(--ok-texte); font-weight: 600; }
.amb-candidat { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: var(--t-liste); }
.amb-fichier {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; cursor: pointer; text-decoration: underline;
}
.amb-score { color: var(--text-subtle); flex-shrink: 0; }
.amb-choix-ia {
  flex-shrink: 0; font-size: var(--t-mention); font-weight: 600; color: var(--warn-texte);
  border: 1px solid var(--warn); border-radius: var(--radius); padding: 1px 6px;
}
.btn.amb-choisir { flex-shrink: 0; }
.amb-erreur { font-size: var(--t-meta); color: var(--err-texte); margin-top: 4px; }
.amb-banniere {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--warn); border-radius: var(--radius);
  background: rgba(255,193,7,0.08); padding: 8px 16px;
  margin: 10px 0; font-size: var(--t-liste);
}
.amb-banniere-texte { flex: 1; }

/* ── Chat (other-tabs.jsx) ── */
.empty-state.empty-state--pleine { width: 100%; }
.chat-header.chat-header--outils { display: flex; align-items: center; gap: 12px; }
.chat-header--outils .h { flex: 1; }
.chat-header--outils .h strong { color: var(--text); }
/* Provenance d'une source : dossier, directive, norme. */
.chat-src-type { font-weight: 600; }
.chat-source-head .chat-src-type { font-size: 0.78em; margin-right: 0.4em; }
.chat-src-type--projet { color: var(--accent); }
.chat-src-type--normatif { color: var(--warn-texte); }
.chat-src-type--normes { color: var(--text-muted); }
.chat-source-score { color: var(--text-muted); font-size: 0.8em; margin-left: 0.3em; }
.chat-fb-barre { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.btn.subtle.chat-fb { padding: 2px 8px; font-size: var(--t-meta); }
.btn.subtle.chat-fb--up { color: var(--ok-texte); border-color: var(--ok); }
.btn.subtle.chat-fb--down { color: var(--err-texte); border-color: var(--err); }
.btn.subtle.chat-lier { padding: 2px 10px; font-size: var(--t-meta); }
.pill.chat-lie { font-size: var(--t-mention); }
.chat-form {
  margin-top: 10px; padding: 12px 16px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column; gap: 8px;
}
.chat-form-titre { font-size: var(--t-meta); font-weight: 600; }
.chat-form-ligne { display: flex; gap: 8px; }
.select.chat-form-directive { flex: 0 0 110px; font-size: var(--t-meta); }
.select.chat-form-exigence { flex: 1; font-size: var(--t-meta); }
.input.chat-form-texte { font-size: var(--t-meta); resize: vertical; }
.chat-form-aide { font-size: var(--t-mention); color: var(--text-muted); }
.chat-reponse-fb { margin-top: 8px; }
.chat-reponse-fb-ligne { display: flex; align-items: center; gap: 6px; }
.chat-reponse-fb-msg { font-size: var(--t-meta); }
.chat-reponse-fb-msg--ok { color: var(--ok-texte); }
.chat-reponse-fb-msg--err { color: var(--err-texte); }

/* ── Banque de documents génériques (other-tabs.jsx) ── */
.banque { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.banque-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.banque-tete h2 { margin: 0; }
.banque-gestes { display: flex; gap: 8px; }
.banque-msg { margin-bottom: 16px; padding: 10px 16px; border-radius: var(--radius); font-size: var(--t-texte); }
.banque-msg--ok { background: var(--ok-soft); color: var(--ok-texte); }
.banque-msg--err { background: var(--err-soft); color: var(--err-texte); }
.banque-msg-fermer { float: right; background: none; border: none; cursor: pointer; font-weight: 700; }
.banque-form { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.banque-form-champs {
  flex: 1 1 0; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px; min-width: 0;
}
.banque-form-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.banque-form-tete h3 { margin: 0; }
.banque-form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.banque-plein { grid-column: 1 / -1; }
.banque-remplace { font-size: var(--t-liste); color: var(--text-muted); }
.banque-libelle { font-size: var(--t-liste); display: block; margin-bottom: 4px; }
.banque-fichier-choix { display: inline-block; cursor: pointer; }
.btn.banque-fichier-btn { display: inline-block; }
.banque-fichier { margin-top: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.banque-fichier-nom { font-size: var(--t-texte); word-break: break-all; color: var(--text); }
.input.banque-lecture-seule { opacity: 0.6; cursor: default; }
.input.banque-description { width: 100%; resize: vertical; }
.banque-form-pied { margin-top: 12px; display: flex; gap: 8px; }
.banque-apercu {
  flex: 0 0 420px; position: sticky; top: 16px; align-self: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-elev); height: 560px;
}
.banque-apercu-cadre { width: 100%; height: 100%; border: none; }
.banque-apercu-vide {
  padding: 16px; font-size: var(--t-liste); color: var(--text-muted); height: 100%; overflow: auto;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.banque-apercu-icone { margin-bottom: 8px; }
.banque-apercu-taille { margin-top: 6px; font-size: var(--t-meta); }
.banque-apercu-aide { margin-top: 12px; font-size: var(--t-meta); }
.banque-filtres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.btn.sm.banque-filtre { border-radius: var(--radius); padding: 4px 12px; font-size: var(--t-liste); }
.banque-filtre-n { margin-left: 4px; opacity: 0.65; }
.banque-vide { text-align: center; color: var(--text-muted); padding: 48px; }
.banque-vide--categorie { padding: 32px; }
.banque-table { width: 100%; border-collapse: collapse; font-size: var(--t-texte); }
.banque-table thead tr { border-bottom: 2px solid var(--border); text-align: left; }
.banque-table th { padding: 6px 10px; }
.banque-table td { padding: 8px 10px; }
.banque-ligne { border-bottom: 1px solid var(--border); transition: background 0.15s; cursor: default; }
.banque-ligne--archive { opacity: 0.5; }
.banque-ligne--cliquable { cursor: pointer; }
.banque-ligne--cliquable:hover { background: var(--bg-hover); }
.banque-ligne--edition { background: var(--accent-soft); }
.banque-titre { font-weight: 500; }
.banque-desc { font-size: var(--t-liste); color: var(--text-muted); margin-top: 2px; }
.banque-remplace-lien { font-size: var(--t-meta); color: var(--text-subtle); margin-top: 2px; }
.banque-table td.banque-cat { font-size: var(--t-liste); color: var(--text-muted); }
.banque-table td.banque-fin--echue { color: var(--warn-texte); }
.banque-statut { font-weight: 600; font-size: var(--t-liste); }
.banque-statut--actif { color: var(--ok-texte); }
.banque-statut--fin_de_validite { color: var(--warn-texte); }
.banque-statut--archive { color: var(--text-subtle); }
/* Colonne « Utilisé dans » : une pastille par produit dont le dernier run retient le
   document ; teinte d'alerte quand un sceau le cite (il ne se supprime alors pas). */
.banque-usages { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }
.banque-usage { font-size: var(--t-liste); padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); white-space: nowrap; }
.banque-usage--scellee { border-color: var(--warn-texte); color: var(--warn-texte); }
.banque-usage-vide { color: var(--text-subtle); }
.banque-gestes-ligne { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Page Vérification (app.jsx) ── */
.empty-state.empty-state--page { padding: 64px; }
.btn.empty-state-geste { margin-top: 20px; }
/* Produit sans périmètre ni directive déclarée (#251) : la phrase dit les deux issues. */
.empty-state.choix-referentiel p { max-width: 440px; }
.socle-banner.socle-banner--centre { max-width: 560px; margin: 0 auto 4px; text-align: left; }
.file-search.file-search--biblio { margin: 0 10px 8px; }
.biblio-etat-recherche { margin: 0 10px 6px; }
.biblio-vide { padding: 16px 10px; color: var(--text-subtle); font-size: var(--t-liste); }
.classif-progress-wrap.classif-progress-wrap--ligne { position: absolute; left: 16px; right: 16px; bottom: 2px; }
.classif-progress-wrap.classif-progress-wrap--detail { padding: 0 0 8px; }
.page-defilante { flex: 1; overflow-y: auto; }
.page-chat { flex: 1; display: flex; overflow: hidden; height: 100%; }

/* ── Référentiel d'exigences (ExigencesPage, app.jsx) ── */
.select.exig-select { font-size: var(--t-meta); }
.btn.exig-sauver--modifie { background: var(--warn); border-color: var(--warn); }
.exig-lecture-seule { font-size: var(--t-meta); color: var(--text-subtle); align-self: center; }
.exig-depot { font-size: var(--t-meta); color: var(--ok-texte); align-self: center; }
.exig-variables { margin-bottom: 20px; background: var(--bg-subtle); border-radius: var(--radius); padding: 12px 16px; }
.exig-variables-titre { font-weight: 600; font-size: var(--t-liste); margin-bottom: 8px; }
.exig-variables-aide { font-weight: 400; font-size: var(--t-mention); color: var(--text-subtle); margin-left: 8px; }
.exig-variables-liste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.exig-variable {
  background: var(--ok-soft); border-radius: var(--radius); padding: 2px 8px;
  font-size: var(--t-meta); display: flex; align-items: center; gap: 4px;
}
.btn.subtle.exig-variable-retirer { padding: 0 4px; font-size: var(--t-mention); line-height: 1; }
.exig-variable-ajout { display: flex; gap: 4px; align-items: center; }
.input.exig-variable-saisie { padding: 2px 8px; font-size: var(--t-meta); width: 150px; }
.exig-note { font-size: var(--t-mention); color: var(--text-subtle); font-style: italic; }
.exig-note--bloc { margin-top: 6px; }
.input.exig-libelle { margin-bottom: 12px; font-size: var(--t-texte); font-weight: 500; }
.input.elem-edit-texte { flex: 1; padding: 4px 8px; }
.elem-props { font-size: var(--t-meta); color: var(--text-subtle); }
.elem-reglages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 4px 0 2px; }
.elem-reglages label { display: flex; align-items: center; gap: 6px; font-size: var(--t-meta); color: var(--text-subtle); white-space: nowrap; }
.elem-reglages .select { width: auto; }
.select.elem-reglages-voir { max-width: 420px; }
/* Document attendu d'une exigence (30/09/2026) : ce que l'identification cherche, en clair. */
.exig-attendu { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-subtle); padding: 8px 12px; margin-bottom: 12px; }
.exig-attendu-ligne { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.exig-attendu-titre { font-size: var(--t-meta); color: var(--text-subtle); }
.exig-attendu-valeur { font-weight: 500; color: var(--text); }
.exig-attendu-vide { font-style: italic; color: var(--text-subtle); }
.exig-attendu-faits { font-size: var(--t-meta); color: var(--text-subtle); margin-top: 4px; }
.exig-attendu-choix { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--t-meta); color: var(--text-subtle); white-space: nowrap; }
.exig-attendu-choix .select { width: auto; }
.btn.exig-modifier { margin-left: auto; }
.btn.exig-ajout-element { margin-top: 4px; }
.exig-criteres { margin-top: 16px; }
.req-edit-mandatory.exig-criteres-titre { display: flex; align-items: center; gap: 8px; }
.exig-criteres-nb {
  font-size: var(--t-mention); font-weight: 600; background: var(--accent-soft);
  color: var(--accent); border-radius: var(--radius); padding: 1px 8px;
}
.mandatory-list.exig-criteres-liste { margin-top: 6px; }
.mandatory-list li.exig-critere { border-left: 2px solid var(--accent); padding-left: 8px; flex-direction: column; align-items: flex-start; gap: 2px; }
.exig-critere-ligne { display: flex; align-items: center; gap: 8px; width: 100%; }
.exig-critere-texte { flex: 1; }
.exig-critere-auteur { font-size: var(--t-mention); color: var(--text-subtle); }
.btn.exig-ajout-critere { margin-top: 6px; border-color: var(--accent); color: var(--accent); }
.exig-type { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.exig-type-choix { display: flex; gap: 8px; align-items: center; font-size: var(--t-liste); cursor: pointer; }
.exig-type-val { font-size: var(--t-meta); color: var(--accent); font-weight: 500; }
.exig-notes { margin-top: 12px; }
.exig-notes summary {
  font-size: var(--t-mention); color: var(--text-subtle); cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.input.exig-notes-saisie { margin-top: 8px; resize: vertical; }
.exig-notes-texte { margin-top: 8px; font-size: var(--t-liste); color: var(--text-muted); font-style: italic; }
/* `.page-body` est centré par marges auto : dans la colonne flex de la modale, il prendrait la
   largeur de son contenu — celle des lignes repliées non tronquées. Il prend celle de la modale. */
.modale-page > .page-body.exig-page { width: 100%; }
/* Sommaire de la page : nombre d’exigences et « Tout déplier », puis une section par groupe de
   l’ordre documentaire — titre comme ceux de la page Vérification (.p4-phase-titre). */
.exig-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.exig-barre-nb { font-size: var(--t-meta); color: var(--text-subtle); }
.select.exig-referentiel { width: auto; }
.exig-groupe { margin-bottom: 24px; }
.exig-groupe-titre { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; font-size: var(--t-texte); font-weight: 600; letter-spacing: 0; color: var(--text); }
.exig-groupe-nb { font-weight: 600; color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* ── Sélecteur de dossier (DossierPicker, app.jsx) ── */
.dossier-menu-nb { font-size: var(--t-mention); color: var(--text-subtle); }
.dossier-menu-search.dossier-menu-search--filtre { padding-bottom: 0; }
.dossier-menu-ico { display: inline-flex; }
.dossier-date-ref { padding: 10px 12px; border-top: 1px solid var(--border); background: var(--bg-subtle); }
.dossier-date-ref-titre { font-size: var(--t-meta); color: var(--text-muted); margin-bottom: 4px; }
.dossier-date-ref-aide { margin-left: 6px; opacity: 0.7; }
.dossier-date-ref-ligne { display: flex; gap: 6px; align-items: center; }
.input.dossier-date-ref-saisie { flex: 1; font-size: var(--t-liste); padding: 4px 6px; }
.dossier-date-ref-repli { font-size: var(--t-meta); color: var(--text-muted); margin-top: 4px; }

/* ── Registre, réglages RAG, tableau de bord, barre de l'application (app.jsx) ── */
.reg-sceau-etiquette { font-weight: 600; color: var(--text); }
.reg-integrite { margin-top: 12px; padding: 8px 12px; border-radius: var(--radius); font-size: var(--t-liste); font-weight: 500; }
.reg-integrite--warn { background: var(--warn-soft); color: var(--warn-texte); }
.reg-integrite--ok { background: var(--ok-soft); color: var(--ok-texte); }
.reg-integrite--err { background: var(--err-soft); color: var(--err-texte); }
.reg-integrite-erreurs { margin: 6px 0 0; padding-left: 20px; }
.reg-integrite-portee { margin-top: 6px; font-weight: 400; opacity: 0.85; }
.select.reg-filtre { min-width: 220px; padding: 8px 10px; font-size: var(--t-liste); }
.reg-dossiers { display: flex; flex-direction: column; gap: 12px; }
.btn.empty-state-geste--proche { margin-top: 16px; }
.rag-reglages { max-width: 640px; margin: 0 auto; padding: 24px 16px; }
.rag-reglages > .page-header { margin-bottom: 24px; }
.rag-groupe { margin-bottom: 32px; }
.rag-groupe-titre {
  font-weight: 600; font-size: var(--t-liste); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 12px;
}
.rag-groupe-champs {
  display: flex; flex-direction: column; gap: 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px;
}
.rag-champ { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: start; }
.rag-champ-libelle { font-weight: 500; font-size: var(--t-texte); }
.rag-champ-aide { font-size: var(--t-liste); color: var(--text-muted); margin-top: 2px; }
.input.rag-champ-valeur { width: 90px; text-align: right; }
.rag-pied { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.rag-retour { font-size: var(--t-texte); }
.rag-retour--ok { color: var(--ok-texte); }
.rag-retour--err { color: var(--err-texte); }
.db-projet-name--lien, .db-projet-empty--lien { cursor: pointer; }
.db-projet-name:not(.db-projet-name--lien) { cursor: default; }
.btn.db-empty-geste { margin-left: 8px; }
.dec-panneau-entete { font-weight: 600; }
.p4-d-body.dec-panneau-corps { padding: 16px; overflow-y: auto; }
.dec-panneau-etat { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.proc-banner-etat.proc-banner-etat--ok { color: var(--ok-texte); }
.dec-panneau-contexte { font-size: var(--t-liste); color: var(--text-muted); margin-bottom: 12px; }
.dec-synth--ok { color: var(--ok-texte); }
.dec-synth--err { color: var(--err-texte); }
.dec-synth--warn { color: var(--warn-texte); }
.settings-dropdown-ico { display: inline-flex; }
.juridiction { display: inline-flex; align-items: center; align-self: center; margin-right: 10px; }
.juridiction--choix { gap: 8px; }
.juridiction-select {
  padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font-size: var(--t-liste); font-weight: 600; cursor: pointer;
}

/* ── Mémoire d'apprentissage (apprentissage.jsx) ── */
.page-body.appr { padding: 24px 32px; max-width: 1100px; }
.appr-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.appr-tete h2 { margin: 0; font-size: var(--t-panneau); font-weight: 700; }
.select.appr-filtre { width: 160px; }
.appr-section { margin-bottom: 32px; }
.appr-section-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.appr-section-tete h3 { margin: 0; font-size: var(--t-texte); font-weight: 700; }
.appr-compte { font-size: var(--t-meta); color: var(--text-subtle); }
.appr-vide { color: var(--text-subtle); font-size: var(--t-liste); padding: 12px 0; }
.appr-defile { overflow-x: auto; }
.appr-table { width: 100%; border-collapse: collapse; font-size: var(--t-meta); }
.appr-table thead tr { border-bottom: 2px solid var(--border); text-align: left; }
.appr-table tbody tr { border-bottom: 1px solid var(--line); }
.appr-table td { padding: 6px 10px 6px 0; }
.appr-table th { padding: 6px 10px 6px 0; color: var(--text-subtle); }
.appr-table .appr-col-geste, .appr-table .appr-col-fin { padding: 6px 0; }
.appr-table th.appr-col-geste { width: 30px; }
.appr-table td.appr-col-geste { text-align: right; white-space: nowrap; }
.appr-col-poids { width: 30px; }
.appr-col-directive { width: 90px; }
.appr-col-exigence { width: 110px; }
.appr-col-verdicts { width: 80px; }
.appr-col-dossier { width: 200px; }
.appr-col-exigence-large { width: 130px; }
.pill.appr-poids { font-family: var(--font-mono); letter-spacing: 1px; padding: 1px 6px; }
.appr-directive { font-weight: 600; }
.appr-code { font-size: var(--t-mention); }
.pill.appr-verdict { margin-right: 4px; }
.pill.appr-verdict--apres { margin-right: 0; margin-left: 4px; }
.appr-discret { color: var(--text-subtle); }
.appr-remarque { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appr-dossier { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appr-element { font-size: var(--t-mention); color: var(--text-subtle); margin-left: 6px; }
.appr-fichiers { display: flex; flex-wrap: wrap; gap: 6px; }
.appr-fichier {
  background: var(--ok-soft); border: 1px solid var(--ok); border-radius: var(--radius);
  padding: 1px 8px; font-size: var(--t-mention); font-family: var(--font-mono);
}

/* ── Référentiel expert (expert.jsx) ── */
.page-body.expert { padding: 24px 32px; max-width: 1100px; }
.expert-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.expert-tete h2 { margin: 0; font-size: var(--t-panneau); font-weight: 700; }
.select.expert-directive { width: 140px; }
.expert-intro { font-size: var(--t-meta); color: var(--text-subtle); margin: 0 0 20px; }
.expert-vide { color: var(--text-subtle); font-size: var(--t-liste); }
.expert-vide--centre { padding: 32px; text-align: center; }
.expert-exig { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--surface); }
.expert-exig-tete {
  display: flex; align-items: baseline; gap: 10px; width: 100%; flex-wrap: wrap;
  padding: 10px 16px; background: none; border: none;
  cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.expert-exig-chevron { font-size: var(--t-mention); color: var(--text-subtle); width: 14px; }
.expert-exig-id { font-size: var(--t-meta); font-weight: 700; }
.expert-exig-article { font-size: var(--t-meta); color: var(--text-subtle); flex: 1; }
.pill.expert-pastille { font-size: var(--t-mention); }
.expert-exig-libelle { font-size: var(--t-liste); flex-basis: 100%; padding-left: 24px; }
.expert-exig-corps { padding: 0 16px 16px 40px; }
.expert-phase { margin-bottom: 20px; }
.expert-phase--derniere { margin-bottom: 0; }
.expert-phase h4 { margin: 0 0 4px; font-size: var(--t-liste); font-weight: 700; }
.expert-aide { font-size: var(--t-meta); color: var(--text-subtle); margin: 0 0 8px; }
.input.expert-saisie { width: 100%; min-height: 52px; font-size: var(--t-liste); resize: vertical; }
.input.expert-saisie--consigne { min-height: 64px; }
.expert-gestes { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.expert-mention { font-size: var(--t-mention); color: var(--text-subtle); }
.expert-bloc { font-size: var(--t-meta); margin-bottom: 10px; }
.expert-bloc--fin { margin-bottom: 0; }
.expert-bloc-titre { color: var(--text-subtle); margin-bottom: 4px; }
.expert-elements { margin: 0; padding-left: 20px; }
.expert-critere { display: flex; align-items: baseline; gap: 8px; }
.expert-critere-texte { flex: 1; }
.expert-aucune { color: var(--text-subtle); font-style: italic; margin-bottom: 6px; }
.expert-remarque { border-left: 3px solid var(--border); padding: 4px 10px; margin-bottom: 6px; }
.expert-remarque-gestes { display: flex; gap: 8px; margin-top: 4px; }
.expert-sans { color: var(--text-subtle); }
.expert-remarque-meta {
  font-size: var(--t-mention); color: var(--text-subtle); margin-top: 2px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.expert-remarque-boutons { display: inline-flex; gap: 4px; }
.expert-extrait {
  white-space: pre-wrap; font-family: inherit; font-size: var(--t-meta);
  border-left: 3px solid var(--border); padding: 4px 10px; margin: 0 0 6px; background: none;
}

/* ── Page Fichiers (file-synthesis.jsx) ── */
.synth-toasts {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.synth-detail-label.synth-detail-label--espace { margin-top: 16px; }
.synth-empty-msg.synth-empty-msg--liste { padding: 16px; }
.synth-empty-msg.synth-empty-msg--table { padding: 24px 16px; }
.synth-archived-chevron { display: inline-flex; transition: transform 180ms; }
.synth-archived-chevron--ouvert { transform: rotate(90deg); }
.v2-col-coche { width: 28px; }
.v2-col-categorie { width: 130px; }
.synth-detail-img { width: 100%; border-radius: var(--radius); cursor: pointer; display: block; }
.synth-etat--ok { color: var(--ok-texte); }
.synth-etat--warn { color: var(--warn-texte); }
.synth-gestes { display: flex; gap: 6px; }
.synth-gestes--suite { margin-top: 6px; }
.synth-detail-select.synth-detail-select--pleine { flex: 1; }

/* ── Liste des ESP, sélecteur de document, référence (reliquats de style en ligne) ── */
.lesp-head-texte { min-width: 0; }
.amber-strip.lesp-avis { margin: 12px 0; }
.lesp-avis-titre { font-weight: 600; }
.lesp-avis-texte { font-size: var(--t-meta); }
.btn.lesp-ajout-circuit { margin-top: 6px; }
.btn.lesp-ajout-ligne { margin-top: 8px; }
.lesp-table th:not(.lesp-actions-cell) { min-width: var(--min, auto); }   /* --min : largeur de la colonne selon son poids */
.file-hover-card .fhc-placeholder.fhc-placeholder--plein { height: 100%; justify-content: center; }
.doc-overlay-filtres { padding: 10px 20px 0; }
.doc-overlay-vide { padding: 24px; text-align: center; color: var(--text-subtle); font-size: var(--t-liste); }
.ai-pick-section-header.ai-pick-section-header--suggestion { color: var(--accent); }
.cat-type-select.compact .select { font-size: var(--t-meta); }
.pill.ref-titre-pill { margin-left: 10px; vertical-align: middle; }
.socle-hint.socle-hint--espace { margin-bottom: 12px; }

/* Tableau de bord : sous un en-tête de juridiction, la puce de référentiel ne répète pas le drapeau. */
.rc--sans-drapeau .drapeau-plat { display: none; }

/* Fichiers & Dossiers : l'aperçu n'ouvre plus la visionneuse (le nom le fait). */
.synth-detail-preview--inerte { cursor: default; }
/* Demande publique : motif des référentiels grisés, dit une fois sous la liste. */
.dem-refs-grises { margin-top: 6px; font-size: var(--t-meta); color: var(--text-muted); }

/* ── Modale d'acte (soumettre, déclaration UE, marquage CE) ─────────────────── */
.acte-tete { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.acte-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px;
  border-radius: var(--radius); background: var(--accent-soft); color: var(--text); border: 1px solid var(--accent-line);
}
.acte-intro { font-size: var(--t-texte); line-height: 1.45; color: var(--text); }
.acte-faits {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 16px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken);
}
.acte-faits dt { font-size: var(--t-meta); color: var(--text-muted); }
.acte-faits dd { margin: 0; font-size: var(--t-liste); font-weight: 600; min-width: 0; }
.acte-liste { margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.acte-liste-titre {
  padding: 8px 12px; font-size: var(--t-mention); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--line); background: var(--bg-sunken);
}
.acte-liste ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.acte-liste li { display: flex; gap: 12px; align-items: baseline; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.acte-liste li:last-child { border-bottom: none; }
.acte-liste-id { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 600; }
.acte-liste-lib { min-width: 0; font-size: var(--t-meta); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acte-reste, .acte-engagement, .acte-err {
  display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; padding: 8px 12px;
  border-radius: var(--radius); font-size: var(--t-liste); line-height: 1.45;
}
.acte-reste { background: var(--warn-soft); color: var(--warn-texte); }
.acte-engagement { border: 1px solid var(--line-strong); color: var(--text); }
.acte-err { background: var(--err-soft); color: var(--err-texte); }
.acte-suite { margin-bottom: 12px; font-size: var(--t-liste); line-height: 1.45; color: var(--text-muted); }
.acte-suite-titre { margin-bottom: 4px; font-size: var(--t-mention); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
/* Dernier acte du parcours (déclaration UE, marquage CE) : il se détache des gestes courants. */
.btn.acte-final-cta { gap: 6px; padding-inline: 12px; font-weight: 700; box-shadow: 0 0 0 3px var(--accent-soft); }

/* ─── Préparer l'instruction (preparation.jsx) ─────────────────────────────────
   Une liste d'étapes : un cadre, des étapes séparées d'un filet ; l'état est un marqueur
   de forme ET un mot ; l'étape à faire porte le cadre intérieur lime. */
.prep { max-width: 960px; }
.prep-etapes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
.prep-etape { padding: 16px 20px; border-top: 1px solid var(--line); }
.prep-etape:first-child { border-top: 0; }
.prep-etape--afaire { box-shadow: inset 0 0 0 2px var(--accent-verificateur-line); }
.prep-etape--attente .prep-titre,
.prep-etape--attente .prep-num { color: var(--text-subtle); }
.prep-etape-tete { display: flex; align-items: center; gap: 12px; }
.prep-num { font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 600; color: var(--text-muted); min-width: 20px; }
.prep-titre { flex: 1 1 auto; margin: 0; font-size: var(--t-section); font-weight: 600; line-height: 1.2; }
.prep-etat { flex: 0 0 auto; font-size: var(--t-meta); font-weight: 600; white-space: nowrap; }
.prep-etat--fait { color: var(--ok-texte); }
.prep-etat--afaire { color: var(--warn-texte); }
.prep-etat--attente { color: var(--text-subtle); }
.prep-etape-corps { margin: 8px 0 0 32px; font-size: var(--t-liste); line-height: 1.45; }
.prep-etape-corps p { margin: 0 0 6px; }
.prep-aide { color: var(--text-muted); }
.prep-lecture { color: var(--text-muted); font-style: italic; }
.prep-gestes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.prep-liste { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.prep-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--line); }
.prep-ligne:first-child { border-top: 0; }
.prep-ligne .rc { flex: 0 0 auto; min-width: 80px; }
.prep-ligne-texte { flex: 1 1 240px; }
.prep-ligne--verifie .prep-ligne-texte { color: var(--ok-texte); }
.prep-ligne--attend .prep-ligne-texte,
.prep-ligne--organisme .prep-ligne-texte { color: var(--text-muted); }
/* Run de mission qui ne vaut plus pour la procédure (module corrigé, acte suivant). */
.prep-ligne--revoir .prep-ligne-texte { color: var(--warn-texte); }
.prep-ligne--revoir .prep-ligne-texte .icon-svg { vertical-align: text-bottom; margin-right: 4px; }
.prep-mono { font-family: var(--font-mono); }
.prep-propose { font-size: var(--t-meta); color: var(--text-muted); }
.prep-ecart { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-meta); color: var(--warn-texte); }
/* Autre module choisi alors qu'un acte est prononcé (03/10/2026) : une phrase, pleine largeur
   sous la ligne, après l'état. */
.prep-ecart--ligne { flex-basis: 100%; order: 1; }
/* Classement du produit (#345) : ce qui filtre les modules, ou pourquoi il n'est pas établi —
   une phrase pleine largeur sous la ligne. */
.prep-classement { flex-basis: 100%; order: 1; font-size: var(--t-meta); color: var(--text-muted); }
.prep-classement-geste { order: 2; }
.prep-select { flex: 1 1 240px; min-width: 200px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); color: var(--text); font-size: var(--t-liste); }
/* Bilan : avis à bandeau de tête portant le mot. */
.prep-fin { margin-bottom: 16px; border: 1px solid var(--ok); border-radius: var(--radius); background: var(--bg-elev); }
.prep-fin-tete { padding: 4px 12px; background: var(--ok); color: var(--bg-elev); font-size: var(--t-mention); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.prep-fin-corps { padding: 12px 16px; font-size: var(--t-liste); line-height: 1.45; }
.prep-fin-corps p { margin: 0 0 6px; }
@media (max-width: 660px) {
  .prep-etape { padding: 12px; }
  .prep-etape-corps { margin-left: 0; }
}

/* ── Page Vérification par étapes (parcours.jsx, 11/10/2026) ────────────────────────────
   En-tête du référentiel et onglets d'étapes en place ; le panneau de l'étape défile seul.
   Dans l'onglet Exigences, la bibliothèque et la liste défilent chacune de leur côté. Zones
   bien délimitées : panneaux blancs cernés sur le fond gris de la page. */
.parcours-page { flex: 1; min-height: 0; width: 100%; max-width: 1400px; margin: 0 auto; padding: 12px 32px 0; display: flex; flex-direction: column; }
.parcours-entete { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 10px; }
.parcours-entete-nom { font-size: var(--t-section); font-weight: 700; color: var(--text); }
.parcours-entete-acte { font-size: var(--t-meta); color: var(--text-muted); }
.parcours-entete-acte--certifie { color: var(--ok-texte); font-weight: 600; }
.parcours-entete-acte--refuse { color: var(--err-texte); font-weight: 600; }
.parcours-outils { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.parcours-phrase { margin: 0 0 10px; font-size: var(--t-liste); color: var(--text-muted); }
.parcours-compte { font-size: var(--t-meta); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Pastille d'étape : faite (vert), courante (noir), à venir (contour) */
.parcours-num { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg-elev); color: var(--text-muted); font-size: var(--t-meta); font-weight: 700; }
.fait > .parcours-num { background: var(--ok); border-color: var(--ok); color: var(--bg-elev); }
.courante > .parcours-num { background: var(--text); border-color: var(--text); color: var(--bg-elev); }

.parcours-onglets { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line-strong); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; background: var(--bg-sunken); overflow: hidden; }
.parcours-onglet { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: none; border-right: 1px solid var(--line-strong); border-bottom: 3px solid transparent; background: transparent; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.parcours-onglet:last-child { border-right: none; }
.parcours-onglet:hover { background: var(--bg-hover); }
.parcours-onglet.actif { background: var(--bg-elev); border-bottom-color: var(--text); }
.parcours-onglet-texte { display: flex; flex-direction: column; min-width: 0; }
.parcours-onglet-titre { font-size: var(--t-liste); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parcours-onglet-resume { font-size: var(--t-meta); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parcours-panneau { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 24px; background: var(--bg-elev); border: 1px solid var(--line-strong); border-bottom: none; }
.parcours-panneau--exigences { overflow: hidden; padding: 0; }

/* Onglet Exigences : bibliothèque (rail ↔ étendue, .p4-lib) | liste */
.parcours-exigences { display: grid; grid-template-columns: 52px minmax(0, 1fr); height: 100%; min-height: 0; transition: grid-template-columns 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
.parcours-exigences--lib { grid-template-columns: 300px minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) { .parcours-exigences { transition: none; } }
.parcours-exigences-liste { min-height: 0; overflow-y: auto; padding: 12px 20px 40px; }
.parcours-vide { padding: 24px 0; font-size: var(--t-liste); color: var(--text-muted); }
.parcours-vide p { margin: 0 0 12px; }

/* Groupe « ce qu'il reste à faire », puis phases du dossier dans le groupe */
.parcours-groupe { margin-top: 20px; }
.parcours-groupe-titre { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding-bottom: 6px; border-bottom: 2px solid var(--text); font-size: var(--t-section); font-weight: 700; color: var(--text); }
.parcours-groupe-titre .parcours-etapes-nues { margin-left: auto; }
.parcours-groupe-titre .proc-etape-reste { display: none; }   /* le groupe « À compléter » le dit déjà */
.parcours-groupe--replie > .parcours-groupe-titre { list-style: none; cursor: pointer; border-bottom-width: 1px; border-bottom-color: var(--line-strong); color: var(--text-muted); }
.parcours-groupe--replie > .parcours-groupe-titre::-webkit-details-marker { display: none; }
.parcours-groupe--replie > .parcours-groupe-titre::before { content: "▸"; display: inline-block; width: 12px; transition: transform 0.15s; }
.parcours-groupe--replie[open] > .parcours-groupe-titre::before { transform: rotate(90deg); }
.parcours-phase { margin-top: 10px; }
.parcours-phase-titre { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font-size: var(--t-liste); font-weight: 700; color: var(--text-muted); }
.parcours-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }

/* Une exigence en carte (présentation de la page Scellés) : sa teinte dit ce qu'il reste à faire */
.parcours-carte { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-elev); text-align: left; font: inherit; color: var(--text); cursor: pointer; overflow: hidden; }
.parcours-carte:hover { border-color: var(--text); }
.parcours-carte--completer { background: var(--warn-soft); border-color: var(--rg-warn-edge); }
.parcours-carte--reprendre { background: var(--err-soft); border-color: var(--err); }
.parcours-carte--prete { background: var(--info-soft); border-color: var(--info); }
.parcours-carte--validee { background: var(--ok-soft); border-color: var(--ok-soft); }
.parcours-carte--muette { background: var(--bg-sunken); border-style: dashed; }
.parcours-carte--cible { outline: 2px dashed var(--accent); outline-offset: 2px; }
.parcours-carte--reparee { box-shadow: inset 0 0 0 2px var(--rg-lime); }
.parcours-carte-tete { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.parcours-carte-titre { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--t-texte); font-weight: 700; line-height: 1.3; }
.parcours-carte-tete .pill { margin-left: auto; flex: none; }
.parcours-carte-lib { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--t-meta); line-height: 1.45; color: var(--text-muted); }
.parcours-carte-pied { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--t-mention); color: var(--text-subtle); }

/* Gestes réutilisés (ActionsGroupees, ActeFinalEtape) : sans la pastille numérotée d'étape */
.parcours-etapes-nues { display: inline-flex; margin: 0; padding: 0; border: none; list-style: none; }
.parcours-etapes-nues .proc-etape::before { display: none; }

/* Fiches des étapes Préparation, Organisme, Soumission, Déclaration : le geste sous le texte */
.parcours-fiches { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.parcours-fiches--une { grid-template-columns: minmax(0, 560px); }
.parcours-fiche { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.parcours-fiche--manque { background: var(--warn-soft); border-color: var(--rg-warn-edge); }
.parcours-fiche-tete { display: flex; align-items: center; gap: 8px; font-size: var(--t-liste); font-weight: 700; color: var(--text-muted); }
.parcours-fiche-marque { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: var(--t-mention); font-weight: 700; color: var(--text-muted); }
.parcours-fiche--fait .parcours-fiche-marque { background: var(--ok); border-color: var(--ok); color: var(--bg-elev); }
.parcours-fiche--manque .parcours-fiche-marque { background: var(--warn); border-color: var(--rg-warn-edge); color: var(--text); }
.parcours-fiche-valeur { font-size: var(--t-section); font-weight: 700; color: var(--text); }
.parcours-fiche-detail { font-size: var(--t-meta); line-height: 1.45; color: var(--text-muted); }
.parcours-fiche-geste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.parcours-fiche-erreur { display: flex; align-items: center; gap: 6px; font-size: var(--t-meta); color: var(--err-texte); }

/* Fenêtre d'une exigence : plus large que le cran « ample » (écran de travail), toute la
   hauteur d'une page de côté ; le corps défile (la fiche ne se tasse pas), ascenseur
   toujours visible ; éléments obligatoires sur deux colonnes. */
.modal-box.modale-exigence { max-width: var(--modale-travail); max-height: var(--modale-haut-page); }
.modale-exigence .modal-body { min-height: 0; overflow-y: scroll; scrollbar-gutter: stable; }
.modale-exigence .modal-body > * { flex-shrink: 0; }
.modale-exigence .modal-body::-webkit-scrollbar { width: 12px; }
.modale-exigence .modal-body::-webkit-scrollbar-track { background: var(--bg-sunken); }
.modale-exigence .modal-body::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--bg-sunken); border-radius: var(--radius); }
.modale-exigence .modal-body::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.modale-exigence .checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.modale-exigence-titre { display: inline-flex; align-items: center; gap: 10px; }

/* Éditeur d'exigences : le titre court, au-dessus du libellé */
.exig-titre { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-meta); font-weight: 600; color: var(--text-muted); }
.req-edit-titre { font-size: var(--t-texte); font-weight: 700; color: var(--text); }