/*
 * Linuen — système visuel (redesign P29, direction approuvée le 19 septembre 2026).
 *
 * Propshaft sert tous les fichiers de app/assets/stylesheets dans l'ordre alphabétique de leur chemin :
 *   application.css          tokens, base typographique, composants partagés (ce fichier)
 *   linuen/1-public.css      vitrine publique : en-tête, accueil bleu profond, sections, tarifs, pied de page
 *   linuen/2-workspace.css   espace connecté : navigation latérale, enveloppe du dossier, écrans métier
 *   linuen/3-report.css      rapport client, dossier partenaire (rendu conservé pour les versions figées)
 *   linuen/4-print.css       impression : navigation retirée, fond clair, sources et réserves conservées
 *   linuen/5-authentication.css  second facteur, fournisseurs et sécurité du compte
 *
 * Aucune chaîne de compilation : CSS natif, variables, grille et flex. Pas de préférence de thème persistante ;
 * l'espace de travail est clair, l'accueil est bleu profond (variables --ln-hero-*).
 */

/* Direction TRAME (26 septembre 2026, docs/redesign-trame/suivi.md) : atelier d'ingénierie numérique — surfaces
   claires, navigation marine, cobalt pour l'action et la sélection, contours fins, rayons de 4 px. Les composants ne
   lisent que ces variables : changer de direction, c'est changer ce bloc, jamais les écrans. */
:root {
  /* Palette Trame (PROMPT-REDESIGN-TRAME.md § 4). Le secondaire passe de #627487 à #5b6d80 : 4,5:1 exigé sur le
     fond de travail #f5f7fa, que la valeur de la maquette n'atteignait pas (4,49:1). */
  --ln-ink: #182c42;
  --ln-muted: #5b6d80;
  --ln-page: #ffffff;
  --ln-soft: #f5f7fa;
  --ln-line: #d9e1e9;
  --ln-line-strong: #b8c7d7;
  --ln-accent: #1853cf;
  --ln-accent-strong: #1242a8;
  --ln-sky: #eaf1fc;
  --ln-sky-line: #cbdaf3;

  /* Navigation marine et accueil */
  --ln-navy: #142b47;
  --ln-navy-raised: #1c3756;
  --ln-navy-active: #274566;
  --ln-navy-hover: #294868;
  --ln-navy-text: #bdcfe5;
  --ln-navy-line: #37506c;
  --ln-navy-mark: #79acff;
  --ln-hero: var(--ln-navy);
  --ln-hero-muted: #adc1d9;
  --ln-hero-line: var(--ln-navy-line);
  --ln-hero-text: #ffffff;
  --ln-cyan: var(--ln-navy-mark);
  --ln-brand: var(--ln-accent);
  --ln-brand-grey: #4d5863;
  --ln-grid-line: #1b4b8410;

  /* États : texte / fond / filet */
  --ln-good: #22553b;
  --ln-good-bg: #edf6f0;
  --ln-good-line: #c0ddc9;
  --ln-warn: #85500b;
  --ln-warn-bg: #fff7e7;
  --ln-warn-line: #efdcc0;
  --ln-danger: #8a2921;
  --ln-danger-bg: #fff1f0;
  --ln-danger-line: #edbdb7;
  --ln-info: #1853cf;
  --ln-info-bg: #eaf1fc;
  /* Anneau cobalt sur les surfaces claires (6,6:1 sur blanc) ; la barre marine le redéfinit en bleu clair. */
  --ln-focus: #1853cf;

  --ln-radius-sm: 4px;
  --ln-radius: 4px;
  --ln-radius-lg: 4px;

  /* Échelle typographique (Trame) : texte courant 16 px, secondaire 14, titres de page 34. */
  --ln-text-xs: 12px;   /* mentions légales, repères en capitales */
  --ln-text-sm: 14px;   /* métadonnées, aides, légendes */
  --ln-text-base: 16px; /* texte courant */
  --ln-text-md: 18px;   /* introductions, h3 */
  --ln-text-lg: 23px;   /* h2 */
  --ln-text-xl: 34px;   /* h1 d'écran */
  --ln-text-2xl: 44px;  /* chiffres et titres de vitrine */
  --ln-measure: 72ch;   /* longueur de ligne de la prose */

  --ln-font: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ln-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ln-ease: 160ms ease;

  /* Grille d'espacement 4/8/12/16/24/32/48/64 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

  --ln-wrap: 1280px;
  --ln-gutter: clamp(16px, 4vw, 42px);

  /* Alias historiques (J1-A) conservés pour les règles qui les citent encore. */
  --color-bg: var(--ln-soft);
  --color-surface: var(--ln-page);
  --color-text: var(--ln-ink);
  --color-muted: var(--ln-muted);
  --color-border: var(--ln-line);
  --color-primary: var(--ln-accent);
  --color-primary-dark: var(--ln-accent-strong);
  --color-focus: var(--ln-focus);
  --color-notice-bg: var(--ln-good-bg);
  --color-notice-text: var(--ln-good);
  --color-alert-bg: var(--ln-danger-bg);
  --color-alert-text: var(--ln-danger);
  --radius: var(--ln-radius-sm);
  --space: 1rem;
  --max-width: 64rem;

  color-scheme: light;
}

/* ---- Police ---------------------------------------------------------------------------------------------- */

/* Space Grotesk servie par l'application (licence SIL OFL 1.1, app/assets/fonts/OFL-SpaceGrotesk.txt ; fichier
   variable fourni avec les maquettes Trame, axe de graisse 300 à 700). */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("/assets/space-grotesk-variable-44fd2800.ttf") format("truetype");
}

/* ---- Base ------------------------------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ln-font);
  font-size: var(--ln-text-base);
  line-height: 1.55;
  color: var(--ln-ink);
  background: var(--ln-soft);
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--ln-ink); }
h1 { font-size: var(--ln-text-xl); line-height: 1.15; letter-spacing: -0.04em; }
h2 { font-size: var(--ln-text-lg); }
h3 { font-size: var(--ln-text-md); letter-spacing: -0.015em; }
h4 { font-size: var(--ln-text-base); letter-spacing: 0; }

p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-1); }
dl { margin: 0; }
small { font-size: var(--ln-text-sm); }
strong, b { font-weight: 600; }
code, kbd, .mono { font-family: var(--ln-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--ln-line); margin: var(--sp-6) 0; }
img, svg { max-width: 100%; }
blockquote { margin: 0 0 var(--sp-4); }
details > summary { cursor: pointer; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--ln-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--ln-accent-strong); }

/* Trame : anneau cobalt de 3 px décalé ; la barre marine le redéfinit (--ln-focus) pour rester lisible sur le marine. */
:focus-visible { outline: 3px solid var(--ln-focus); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 50;
  background: var(--ln-page); color: var(--ln-ink); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--ln-line); border-radius: var(--ln-radius-sm); text-decoration: none;
}
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); }

/* Bandeau d'instance de démonstration (P23) : construit depuis l'état réel de l'instance, jamais masqué. */
.demo-banner {
  margin: 0; padding: var(--sp-2) var(--sp-4);
  background: var(--ln-warn-bg); color: var(--ln-warn); border-bottom: 1px solid var(--ln-warn-line);
  font-size: var(--ln-text-sm); font-weight: 500; text-align: center; letter-spacing: 0.01em;
}

/* ---- Éléments de texte ----------------------------------------------------------------------------------- */

.eyebrow { font-size: 11px; line-height: 1.6; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; color: var(--ln-accent); margin: 0 0 var(--sp-2); }
.lead { color: var(--ln-muted); font-size: var(--ln-text-base); line-height: 1.6; max-width: 68ch; }
.help, .hint { color: var(--ln-muted); font-size: var(--ln-text-sm); line-height: 1.55; }
.hint { margin: var(--sp-1) 0 0; }
.fine { color: var(--ln-muted); font-size: var(--ln-text-sm); line-height: 1.6; }
.empty, .empty-state p { color: var(--ln-muted); }
.link-muted { color: var(--ln-muted); }
.prose { white-space: normal; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---- Boutons --------------------------------------------------------------------------------------------- */

.button,
input[type="submit"].button,
button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 10px 17px;
  font: inherit; font-size: var(--ln-text-sm); font-weight: 600; line-height: 1.3;
  color: var(--ln-ink); background: var(--ln-page);
  border: 1px solid var(--ln-line-strong); border-radius: var(--ln-radius-sm);
  text-decoration: none; cursor: pointer; white-space: normal; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.button:hover { border-color: var(--ln-accent); color: var(--ln-accent-strong); }
.button--primary, input[type="submit"].button--primary, button.button--primary { background: var(--ln-accent); border-color: var(--ln-accent); color: #fff; }
.button--primary:hover, button.button--primary:hover { background: var(--ln-accent-strong); border-color: var(--ln-accent-strong); color: #fff; }
.button--ghost { background: transparent; border-color: var(--ln-line); color: var(--ln-ink); }
.button--ghost:hover { background: var(--ln-soft); }
.button--subtle { background: transparent; border-color: transparent; color: var(--ln-accent); padding-left: 0; padding-right: 0; }
.button--subtle:hover { color: var(--ln-accent-strong); text-decoration: underline; }
.button--danger { color: var(--ln-danger); border-color: var(--ln-danger); background: var(--ln-page); }
.button--danger:hover { background: var(--ln-danger-bg); color: var(--ln-danger); }
.button--small, input[type="submit"].button--small { min-height: 36px; padding: 6px 12px; font-size: var(--ln-text-sm); }
.button[aria-disabled="true"], .button:disabled, input[type="submit"].button:disabled {
  cursor: default; opacity: 0.6; border-color: var(--ln-line); background: var(--ln-soft); color: var(--ln-muted);
}
.button[aria-disabled="true"]:hover { border-color: var(--ln-line); }
.page-header__actions form, .actions form, .table__actions form, .inline-actions form { display: inline; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-6); }
.actions--tight { margin-top: var(--sp-3); }

/* ---- Formulaires ----------------------------------------------------------------------------------------- */

.form .field { margin-bottom: var(--sp-4); }
.form label, .form legend, .field > label { display: block; font-weight: 500; font-size: var(--ln-text-sm); margin-bottom: var(--sp-1); }
.required { color: var(--ln-danger); text-decoration: none; }

.form input[type="text"], .form input[type="email"], .form input[type="password"], .form input[type="number"],
.form input[type="url"], .form input[type="date"], .form input[type="file"], .form select, .form textarea,
.inline-form input[type="text"], .inline-form input[type="number"], .inline-form select,
.decision-form input[type="text"], .allocations input[type="text"] {
  width: 100%; font: inherit; font-size: var(--ln-text-base); line-height: 1.4;
  padding: 10px 12px; min-height: 42px;
  border: 1px solid var(--ln-line-strong); border-radius: var(--ln-radius-sm);
  background: var(--ln-page); color: var(--ln-ink);
}
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: var(--ln-accent); }
.form input[disabled], .form input[readonly], .form textarea[readonly] { background: var(--ln-soft); color: var(--ln-muted); }
.form textarea { resize: vertical; min-height: 9rem; font-family: inherit; }
.form [aria-invalid="true"] { border-color: var(--ln-danger); }
.form input[type="checkbox"], .form input[type="radio"], .choice input[type="checkbox"], .choice input[type="radio"] {
  width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ln-accent); flex-shrink: 0;
}
.field--grow { flex: 1 1 14rem; min-width: 0; }
/* Formulaire en ligne (filtres, arbitrages) : champs côte à côte, retour à la ligne sur écran étroit. */
.form--inline { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: flex-end; }
.form--inline .field { margin-bottom: 0; flex: 1 1 12rem; min-width: 0; }
.form--inline .actions { margin-top: 0; }
.field-row { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: flex-end; }
.field--inline { display: inline-block; margin-right: var(--sp-3); }

.choice { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); align-items: start; margin-bottom: var(--sp-2); }
.choice label { font-weight: 400; margin: 0; }
.choice .hint { grid-column: 2; margin: 0; }
.choice-group { border: 1px solid var(--ln-line); border-radius: var(--ln-radius); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); }
.choice-group legend, fieldset.field legend { font-weight: 500; padding: 0 var(--sp-1); }
fieldset.field { border: 1px solid var(--ln-line); border-radius: var(--ln-radius); padding: var(--sp-3) var(--sp-4); }

/* Rails ajoute size=maxlength aux champs texte : la largeur vient toujours du conteneur, jamais de cet attribut. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], select, textarea { max-width: 100%; }
.inline-form, .page-header__actions form.inline-form, .actions form.inline-form { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-1) 0; max-width: 100%; }
.inline-form input[type="text"] { width: auto; min-width: 12rem; flex: 1 1 14rem; max-width: 28rem; }
fieldset { min-width: 0; border: 1px solid var(--ln-line); border-radius: var(--ln-radius); padding: var(--sp-4) var(--sp-4) var(--sp-2); margin: 0 0 var(--sp-4); }
legend { padding: 0 var(--sp-1); font-weight: 500; }
@media (max-width: 640px) {
  .inline-form, .page-header__actions form.inline-form, .actions form.inline-form { display: flex; width: 100%; }
  .inline-form input[type="text"], .inline-form input[type="date"], .inline-form input[type="number"], .inline-form select { flex: 1 1 100%; min-width: 0; max-width: none; width: 100%; }
  .page-header__actions > form, .page-header__actions > .button { flex: 1 1 auto; }
}
.inline-forms { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.field--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .form input[type="text"], .form input[type="email"], .form input[type="password"], .form input[type="number"],
  .form input[type="url"], .form input[type="date"], .form select, .form textarea,
  .inline-form input[type="text"], .decision-form input[type="text"], .allocations input[type="text"] { font-size: var(--ln-text-base); }
}

/* ---- Messages, avis, erreurs ----------------------------------------------------------------------------- */

.flash { padding: var(--sp-3) var(--sp-4); border-radius: var(--ln-radius-sm); margin-bottom: var(--sp-4); border: 1px solid transparent; font-size: var(--ln-text-sm); }
.flash--notice { background: var(--ln-good-bg); color: var(--ln-good); border-color: var(--ln-good-line); }
.flash--alert { background: var(--ln-danger-bg); color: var(--ln-danger); border-color: var(--ln-danger-line); }

.notice-inline {
  background: var(--ln-warn-bg); color: var(--ln-warn);
  border: 1px solid var(--ln-warn-line); border-radius: var(--ln-radius-sm);
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); font-size: var(--ln-text-sm);
}
.notice-inline--simulated { background: var(--ln-soft); color: var(--ln-ink); border-color: var(--ln-line); }
.notice-inline--info { background: var(--ln-sky); color: var(--ln-ink); border-color: var(--ln-sky-line); }
.notice-inline--good { background: var(--ln-good-bg); color: var(--ln-good); border-color: var(--ln-good-line); }
.notice-inline--danger { background: var(--ln-danger-bg); color: var(--ln-danger); border-color: var(--ln-danger-line); }
.notice-inline p:last-child { margin-bottom: 0; }

.form-errors { background: var(--ln-danger-bg); color: var(--ln-danger); border: 1px solid var(--ln-danger-line); border-radius: var(--ln-radius-sm); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--ln-text-sm); }
.form-errors__title { font-weight: 600; margin-bottom: var(--sp-1); }
.form-errors ul { margin: 0; padding-left: 1.25rem; }

.conflict { background: var(--ln-warn-bg); border: 1px solid var(--ln-warn-line); border-radius: var(--ln-radius-sm); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); color: var(--ln-ink); }
.conflict__title { font-weight: 600; margin-bottom: var(--sp-1); color: var(--ln-warn); }

.warning { border: 1px solid var(--ln-warn-line); background: var(--ln-warn-bg); color: var(--ln-warn); padding: var(--sp-3); border-radius: var(--ln-radius-sm); font-size: var(--ln-text-sm); }
.warning b, .warning strong { color: var(--ln-warn); display: block; margin-bottom: var(--sp-1); }
.warning p { margin: 0 0 var(--sp-2); color: var(--ln-warn); }
.warning p:last-child { margin-bottom: 0; }
.warning .button--subtle { color: inherit; font-size: var(--ln-text-sm); min-height: 30px; padding: var(--sp-2) 0 0; }

/* ---- Étiquettes de statut ------------------------------------------------------------------------------- */

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 2px;
  font-size: var(--ln-text-xs); font-weight: 500; line-height: 1.5; letter-spacing: 0.01em;
  background: var(--ln-soft); color: var(--ln-muted); border: 1px solid var(--ln-line); vertical-align: middle; white-space: normal;
}
/* SIX pastilles, une par SENS (audit de présentation, 24 septembre 2026, priorité 12). Le CSS en déclarait 79,
   une par famille d'états, toutes retombant sur ces quatre couleurs : le lecteur devait apprendre 27 vocabulaires
   pour lire quatre signaux. `BadgeHelper#state_badge` traduit désormais un état en sens ; le libellé reste écrit en
   toutes lettres, la couleur ne porte jamais l'information seule. */
.badge--good { background: var(--ln-good-bg); color: var(--ln-good); border-color: var(--ln-good-line); }
.badge--pending { background: var(--ln-warn-bg); color: var(--ln-warn); border-color: var(--ln-warn-line); }
.badge--danger { background: var(--ln-danger-bg); color: var(--ln-danger); border-color: var(--ln-danger-line); }
.badge--info { background: var(--ln-sky); color: var(--ln-info); border-color: var(--ln-sky-line); }
.badge--retired { background: var(--ln-soft); color: var(--ln-muted); border-color: var(--ln-line); }
.badge--simulated { background: var(--ln-soft); color: var(--ln-brand-grey); border: 1px dashed var(--ln-brand-grey); }

.tag { display: inline-block; font-size: var(--ln-text-xs); border: 1px solid var(--ln-line); border-radius: 2px; padding: 2px 7px; color: var(--ln-muted); background: var(--ln-page); line-height: 1.5; }
.tag--accent { color: var(--ln-accent); border-color: var(--ln-sky-line); background: var(--ln-sky); }
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 0; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ln-text-sm); font-weight: 500; color: var(--ln-muted); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status--good { color: var(--ln-good); }
.status--warn { color: var(--ln-warn); }
.status--danger { color: var(--ln-danger); }

/* ---- Panneaux et en-têtes de page ------------------------------------------------------------------------ */

.panel {
  background: var(--ln-page); border: 1px solid var(--ln-line); border-radius: var(--ln-radius);
  padding: var(--sp-6);
}
.panel > :last-child { margin-bottom: 0; }
.panel--narrow { max-width: 30rem; margin: var(--sp-8) auto; }
.panel--attention { border-left: 3px solid var(--ln-warn); }
.panel--proposal { border-left: 3px solid var(--ln-accent); }
/* « Et ensuite ? » : une invitation, pas une alerte — le bandeau porte l'accent de la marque, jamais l'orange. */
.panel--next { border-left: 0; border-top: 2px solid var(--ln-navy-active); background: var(--ln-page); }
.panel--estimate { border-left: 3px solid var(--ln-good); }
.panel--soft { background: var(--ln-soft); }
.panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-6); padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--ln-line); }
.panel__head h2, .panel__head h3 { margin: 0; font-size: var(--ln-text-md); }
.panel__head p { margin: var(--sp-1) 0 0; font-size: var(--ln-text-sm); color: var(--ln-muted); }
@media (max-width: 580px) { .panel__head { flex-direction: column; } .panel__head .page-header__actions { width: 100%; } }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.page-header > div:first-child { min-width: 0; flex: 1 1 20rem; }
.page-header h1 { margin-bottom: var(--sp-2); }
.page-header h2, .page-header h3 { margin-bottom: var(--sp-1); }
.page-header .lead { margin-bottom: var(--sp-2); }
.page-header .badge { vertical-align: middle; }
.page-header__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

.breadcrumb { margin: 0 0 var(--sp-3); font-size: var(--ln-text-sm); color: var(--ln-muted); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.breadcrumb a { color: var(--ln-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ln-accent); text-decoration: underline; }
.breadcrumb--local::before { content: "‹"; color: var(--ln-muted); }

.section { margin-top: var(--sp-8); }
.section > h2:first-child, .section > h3:first-child { margin-bottom: var(--sp-3); }
.section--tight { margin-top: var(--sp-4); }

.empty-state { background: var(--ln-page); border: 1px dashed var(--ln-line-strong); border-radius: var(--ln-radius); padding: var(--sp-8) var(--sp-6); text-align: center; }
.empty-state h2 { font-size: var(--ln-text-md); }
.empty-state .button { margin-top: var(--sp-2); }

/* Boîte de dialogue native (<dialog>) et tiroir */
.dialog { border: 1px solid var(--ln-line); border-radius: var(--ln-radius); padding: var(--sp-6); max-width: 36rem; width: calc(100% - 2 * var(--sp-4)); color: var(--ln-ink); background: var(--ln-page); }
.dialog::backdrop { background: rgba(20, 43, 71, 0.5); }
.drawer { padding: var(--sp-4); border-top: 1px solid var(--ln-line); background: var(--ln-soft); font-size: var(--ln-text-sm); }
.drawer p { color: var(--ln-muted); margin: var(--sp-1) 0 0; }

/* ---- Listes descriptives et cartes ---------------------------------------------------------------------- */

.meta-grid, .card__meta { display: grid; gap: var(--sp-3) var(--sp-6); margin: 0 0 var(--sp-4); }
.meta-grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.meta-grid > div, .card__meta > div { min-width: 0; }
.meta-grid dt, .card__meta dt { font-size: var(--ln-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ln-muted); margin-bottom: 2px; }
.meta-grid dd, .card__meta dd { margin: 0; overflow-wrap: anywhere; }
.submitted-values div { min-width: 0; }
.submitted-values dt { text-transform: none; }
.submitted-values dd { overflow-wrap: anywhere; white-space: pre-wrap; }

.cards { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.card { background: var(--ln-page); border: 1px solid var(--ln-line); border-radius: var(--ln-radius); padding: var(--sp-4) var(--sp-5, 20px); }
.card > :last-child { margin-bottom: 0; }
.card__title { font-size: var(--ln-text-md); margin-bottom: var(--sp-2); }
.card__title a { color: var(--ln-ink); text-decoration: none; }
.card__title a:hover { color: var(--ln-accent); text-decoration: underline; }
.card h3 { margin-top: 0; font-size: var(--ln-text-base); }
.card--accent { border-top: 3px solid var(--ln-accent); }

/* Listes à séparateurs fins (livrables, exigences, exports) */
.list-lines { list-style: none; padding: 0; margin: var(--sp-4) 0; }
.list-lines li { border-top: 1px solid var(--ln-line); padding: var(--sp-3) 0; display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--ln-text-sm); margin: 0; flex-wrap: wrap; }
.list-lines li:last-child { border-bottom: 1px solid var(--ln-line); }
.list-lines li > span:last-child, .list-lines__meta { font-size: var(--ln-text-sm); color: var(--ln-muted); }
.list-lines__main { flex: 1 1 16rem; min-width: 0; }

/* ---- Tableaux -------------------------------------------------------------------------------------------- */

/* position: relative — un élément absolu masqué (.visually-hidden dans un en-tête) reste confiné au conteneur défilant. */
.table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; margin-bottom: var(--sp-4); position: relative; }
.table { width: 100%; border-collapse: collapse; background: var(--ln-page); border: 1px solid var(--ln-line); font-size: var(--ln-text-sm); }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ln-line); vertical-align: top; }
.table thead th { font-size: var(--ln-text-sm); font-weight: 500; color: var(--ln-muted); background: var(--ln-soft); letter-spacing: 0.02em; }
.table tbody th { font-weight: 500; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table--compact th, .table--compact td { padding: 6px 8px; font-size: var(--ln-text-sm); }
.table__actions { white-space: nowrap; }
.table .badge { white-space: nowrap; }
.table .num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.row--retired td, .row--retired, .row--retired th { color: var(--ln-muted); }
.row--changed td { background: var(--ln-sky); }

/* ---- Navigation locale par onglets (liens) et filtres ------------------------------------------------ */

.scope-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-6); border-bottom: 1px solid var(--ln-line); margin-bottom: var(--sp-6); }
.scope-tab { padding: 10px 0; margin-bottom: -1px; text-decoration: none; color: var(--ln-muted); border-bottom: 2px solid transparent; font-size: var(--ln-text-sm); font-weight: 500; }
.scope-tab:hover { color: var(--ln-ink); }
.scope-tab[aria-current="page"] { color: var(--ln-accent); border-bottom-color: var(--ln-accent); }

/* Onglets d'une page servis par des routes (politique de chiffrage) : même lecture que .scope-tabs, en liste. */
.page-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-6); list-style: none; margin: 0 0 var(--sp-6); padding: 0; border-bottom: 1px solid var(--ln-line); }
.page-tabs li { margin: 0; }
.page-tabs a { display: inline-block; padding: 10px 0; margin-bottom: -1px; text-decoration: none; color: var(--ln-muted); border-bottom: 2px solid transparent; font-size: var(--ln-text-sm); font-weight: 500; }
.page-tabs a:hover { color: var(--ln-ink); }
.page-tabs a[aria-current="page"] { color: var(--ln-accent); border-bottom-color: var(--ln-accent); }

.scoping-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); font-size: var(--ln-text-sm); }
.scoping-nav a { text-decoration: none; color: var(--ln-accent); border: 1px solid var(--ln-line); border-radius: var(--ln-radius-sm); padding: 4px 12px; background: var(--ln-page); }
.scoping-nav a:hover { border-color: var(--ln-accent); }

/* ---- Historique, citations ------------------------------------------------------------------------------ */

.history { list-style: none; padding: 0; }
.history li { border-bottom: 1px solid var(--ln-line); padding: var(--sp-2) 0; }
.history__list { margin: 0; padding-left: 1.25rem; }
.history__reason, .history__change, .reference-meta, .question-list__answer { color: var(--ln-muted); font-size: var(--ln-text-sm); }
.source-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; background: var(--ln-soft); border: 1px solid var(--ln-line); border-radius: var(--ln-radius-sm); padding: var(--sp-4); max-height: 32rem; overflow-y: auto; }
.source-text mark { background: #ffe58a; padding: 0 0.1em; }
.excerpt { margin: 0 0 var(--sp-1); padding-left: var(--sp-3); border-left: 3px solid var(--ln-line-strong); white-space: pre-wrap; }
.reference-fields template { display: none; }

/* ---- Mouvement ------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color var(--ln-ease), border-color var(--ln-ease), color var(--ln-ease); }
  a { transition: color 120ms ease; }
  html { scroll-behavior: smooth; }
}

/* ---- Audit « impression professionnelle » (25 septembre 2026) ------------------------------------------------ */

/* Longueur de ligne de la prose : jusqu'à 178 caractères mesurés, la lecture décrochait au bout de la ligne. */
.panel > p, .section > p, .page-intro p, .report__section p, .report__section li, .boundary p, .feature p, .data-items p {
  max-width: var(--ln-measure);
}
/* Tableaux : un code (« D-10 ») et un montant ne se coupent jamais sur deux lignes. */
.table .table__code, .table th.table__code { white-space: nowrap; width: 1%; }
.table td.nowrap, .table th.nowrap { white-space: nowrap; }
.table td.table__code { color: var(--ln-muted); font-variant-numeric: tabular-nums; }
.check-inline { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-2); }
.check-inline input { width: 18px; height: 18px; accent-color: var(--ln-accent); }
.toolbar-title { font-size: var(--ln-text-lg); margin: 0 0 var(--sp-2); }
.icon { display: inline-block; flex: none; vertical-align: -0.2em; color: currentColor; }
.icon--lg { width: 28px; height: 28px; color: var(--ln-accent); }