/*
 * 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-*).
 */

/* Jetons de l'application : UN seul :root (audit Impeccable du 22 octobre 2026). Valeurs de la direction LEDGER
   (5 octobre 2026, docs/redesign-fintech/) ; les jetons que Ledger n'a pas touchés gardent leur valeur AURORE V3
   (1er octobre 2026, docs/refonte-aurore-v3/decisions.md). Les composants ne lisent que ces variables : changer de
   direction, c'est changer ce bloc, jamais les écrans. */
:root {
  --ln-ink: #0f172a;
  --ln-title: #0f172a;
  --ln-muted: #5d6a7e;
  --ln-page: #ffffff;
  --ln-soft: #f8fafc;
  --ln-line: #e5e8ee;
  --ln-line-strong: #d5dae3;  /* filets marqués (séparateurs, pointillés) : décoratifs, jamais le contour d'un contrôle */
  --ln-control-line: #878fa0; /* contour d'un champ ou d'un bouton : 3,25:1 sur blanc, 3,1:1 sur --ln-soft (WCAG 1.4.11) */
  --ln-accent: #1d4ed8;
  --ln-accent-strong: #1e40af;
  --ln-sky: #eef3ff;
  --ln-sky-line: #dbe6ff;

  /* Bandeau privé et navigation marine */
  --ln-navy: #152448;
  --ln-navy-raised: #26385d;  /* profil dans le bandeau */
  --ln-navy-active: #26385d;
  --ln-navy-hover: #23345b;
  --ln-navy-text: #dce6f9;    /* liens du bandeau */
  --ln-navy-line: #23345b;    /* bordure du bandeau */
  --ln-navy-mark: #a5d8ff;
  --ln-hero: #111c40;
  --ln-hero-muted: #ccd3f2;
  --ln-hero-line: #2a3a68;
  --ln-hero-text: #ffffff;
  --ln-cyan: #a5d8ff;
  --ln-brand: var(--ln-accent);
  --ln-brand-grey: #566780;
  --ln-grid-line: #1b4b8410;

  /* Menu latéral clair (dossier, administration) */
  --ln-side: #ffffff;
  --ln-side-line: #e5e8ee;
  --ln-side-text: #334155;
  --ln-side-active-bg: #eef3ff;
  --ln-side-active-text: #1e40af;
  --ln-side-active-mark: #1d4ed8;

  /* Diagrammes privés */
  --ln-diagram-bg: #fbfcff;
  --ln-diagram-line: #e1e8f2;
  --ln-node-line: #dce5f1;
  --ln-node-text: #263954;
  --ln-node-muted: #62728a;
  --ln-wire: #98acca;
  --ln-hub-text: #2a4165;
  --ln-question-bg: #fffbf2;
  --ln-question-mark: #d8b36c;

  /* États : texte / fond / filet */
  --ln-good: #15803d;
  --ln-good-bg: #ecfdf3;
  --ln-good-line: #bbf7d0;
  --ln-warn: #b45309;
  --ln-warn-bg: #fffbeb;
  --ln-warn-line: #fde68a;
  --ln-danger: #9a2c22;
  --ln-danger-bg: #fdeeed;
  --ln-danger-line: #efc4be;
  --ln-info: #1d4ed8;
  --ln-info-bg: #eff6ff;
  /* Anneau bleu d'action sur les surfaces claires ; le bandeau marine le redéfinit en bleu clair. */
  --ln-focus: #1d4ed8;

  /* Rayons Aurore : 6 px les contrôles, 10–12 px les panneaux, 20 px la grande scène publique. */
  --ln-radius-sm: 8px;
  --ln-radius: 12px;
  --ln-radius-lg: 12px;
  --ln-radius-stage: 20px;

  /* Échelle typographique (Trame) : texte courant 16 px, secondaire 14, titres de page 34. */
  --ln-text-xs: 11px;
  --ln-text-sm: 13px;
  --ln-text-base: 14px;
  --ln-text-md: 16px;
  --ln-text-lg: 18px;
  --ln-text-xl: 24px;
  --ln-text-2xl: 44px;  /* chiffres et titres de vitrine */
  --ln-text-lead: 20px;       /* titre de bloc, grand intertitre */
  --ln-text-title-sm: 28px;   /* titre de page sur téléphone, grand chiffre */
  --ln-text-title: 32px;      /* titre de page, grand chiffre */
  --ln-text-display: 40px;    /* grand chiffre du budget, titre d'exemple de la vitrine */
  --ln-text-hero: 52px;       /* titre du haut de page de l'accueil */
  --ln-text-code: 0.92em;     /* code en ligne : un cran sous le texte qui l'entoure */
  /* Titres fluides (clamp : taille mini, pente selon la largeur de l'écran, taille maxi) */
  --ln-text-hero-fluid: clamp(36px, 4.4vw, 56px);        /* titre du haut de page */
  --ln-text-hero-fluid-narrow: clamp(38px, 7vw, 49px);   /* le même, sous 860 px */
  --ln-text-section-fluid: clamp(26px, 3vw, 32px);       /* titre de section de la vitrine */
  --ln-text-intro-fluid: clamp(34px, 4vw, 47px);         /* titre d'introduction d'une page publique */
  --ln-text-figure-fluid: clamp(24px, 2.7vw, 34px);      /* grand chiffre d'une carte d'exemple */
  --ln-text-doc-title-fluid: clamp(30px, 5vw, 46px);     /* titre de la documentation fonctionnelle */
  --ln-text-doc-section-fluid: clamp(22px, 3.2vw, 28px); /* titre de section de la documentation fonctionnelle */
  --ln-measure-public: 66ch; /* longueur de ligne du texte courant de la vitrine (22 octobre 2026) */
  --ln-measure: 72ch;   /* longueur de ligne de la prose */

  --ln-font: "Inter", -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/20/24/32/40/48/64/80 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --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;

  /* Direction Ledger : jetons propres (police, ombres, gris de surface). */
  --ln-faint: #6b7280;
  --ln-canvas: #f6f7f9;
  --ln-surface: #ffffff;
  --ln-surface-muted: #f7f8fa;
  --ln-diagram-dot: #e8edf5;

  /* Surfaces, textes et états ajoutés (audit Impeccable du 22 octobre 2026) */
  --ln-on-dark: #ffffff;                       /* texte et filets sur une surface foncée ou colorée */
  --ln-neutral-bg: #f1f4f9;                    /* fond neutre : survol d'un lien, étiquette neutre, pastille d'icône */
  --ln-surface-band: #fbfcfe;                  /* bande d'en-tête d'un tableau ou d'un panneau */
  --ln-cobalt: #1853cf;                        /* cobalt Trame : tracé des schémas, lien secondaire */
  --ln-danger-strong: #7f1d1d;                 /* survol d'un bouton de danger */
  --ln-ink-hover: #1e293b;                     /* survol d'un bouton d'encre */
  --ln-accent-bright: #3b82f6;                 /* fin du dégradé de la pastille d'espace */
  --ln-highlight: #ffe58a;                     /* surlignage d'un passage cité */
  --ln-warn-ink: #7c4a0e;                      /* texte d'un avertissement en ligne */
  --ln-state-dot: #8094aa;                     /* point d'état neutre de l'en-tête d'un dossier */
  --ln-dash-line: #8a9eb8;                     /* filet pointillé d'une zone de dépôt */
  --ln-sky-dash: #9db4ee;                      /* filet pointillé d'une suggestion */
  --ln-sky-faint: #f4f7ff;                     /* fond bleu très pâle (bande, légende, dégradé) */
  --ln-ai-line: #c7d7ff;                       /* filet d'une carte portée par l'IA */
  --ln-on-dark-muted: #cbd5e1;                 /* libellé secondaire sur une tuile d'encre */
  --ln-mask: #000000;                          /* opaque d'un masque (aucune couleur rendue) */

  /* Ombres, voiles et filets translucides */
  --ln-shadow-card: rgba(21, 36, 72, 0.06);    /* ombre d'une carte */
  --ln-shadow-menu: rgba(21, 36, 72, 0.12);    /* ombre d'un menu, d'un volet ou d'un lanceur */
  --ln-shadow-stage: rgba(11, 23, 64, 0.16);   /* ombre d'une grande scène */
  --ln-shadow-stage-lift: rgba(11, 23, 64, 0.22); /* ombre d'une scène soulevée ou d'un bandeau d'appel */
  --ln-shadow-tab: rgba(15, 23, 42, 0.08);     /* ombre de l'onglet actif */
  --ln-shadow-todo: rgba(15, 23, 42, 0.28);    /* ombre profonde d'une carte « à faire » */
  --ln-shadow-hero-window: rgba(6, 21, 32, 0.25); /* ombre de la fenêtre de démonstration */
  --ln-shadow-node-faint: rgba(23, 51, 76, 0.03); /* ombre d'un nœud de l'ancienne scène */
  --ln-scrim: rgba(15, 23, 42, 0.35);          /* voile sous le volet latéral mobile */
  --ln-backdrop: rgba(20, 43, 71, 0.5);        /* voile d'une boîte de dialogue */
  --ln-backdrop-deep: rgba(15, 23, 42, 0.6);   /* voile du schéma en plein écran */
  --ln-on-dark-hover: rgba(255, 255, 255, 0.12); /* survol ou état actif sur surface foncée */
  --ln-on-dark-hover-soft: rgba(255, 255, 255, 0.08); /* survol discret sur surface foncée */
  --ln-on-dark-line: rgba(255, 255, 255, 0.55); /* contour d'un bouton fantôme sur surface foncée */
  --ln-on-dark-edge: rgba(255, 255, 255, 0.35); /* contour du bouton de menu sur le bleu de l'accueil */

  /* Accueil : haut bleu profond, scène de diagramme, processus */
  --ln-hero-deep: #0b1740;                     /* bleu de nuit : début du dégradé, cadre vidéo */
  --ln-hero-end: #14286b;                      /* fin du dégradé de l'accueil */
  --ln-hero-halo: #2a56d9;                     /* halo de l'accueil */
  --ln-hero-halo-clear: rgba(42, 86, 217, 0);  /* halo de l'accueil, extrémité transparente */
  --ln-hero-accent: #93c5fd;                   /* accent clair sur le bleu de l'accueil */
  --ln-hero-nav-text: #dbe4ff;                 /* liens du bandeau sur le bleu de l'accueil */
  --ln-hero-lead: #c7d2fe;                     /* texte d'introduction sur fond bleu */
  --ln-hero-fine: #b4c0ee;                     /* mention en petit sur fond bleu */
  --ln-hero-grid: rgba(255, 255, 255, 0.035);  /* quadrillé blanc sur fond bleu (atténué de moitié le 22 octobre 2026) */
  --ln-beam: #5b8bff;                          /* faisceau qui parcourt la scène */
  --ln-beam-clear: rgba(91, 139, 255, 0);      /* faisceau, extrémité transparente */
  --ln-beam-glow: rgba(91, 139, 255, 0.55);    /* lueur du faisceau */
  --ln-beam-glow-strong: rgba(91, 139, 255, 0.7); /* lueur forte du faisceau */
  --ln-stage-grid: rgba(152, 172, 202, 0.07);  /* quadrillé de la scène claire */
  --ln-stage-grid-strong: rgba(152, 172, 202, 0.1); /* quadrillé marqué de la scène claire */
  --ln-stage-wash: rgba(191, 219, 254, 0.35);  /* lavis bleu derrière la scène */
  --ln-glow-soft: rgba(34, 91, 210, 0.16);     /* anneau du centre qui s'allume */
  --ln-glow: rgba(34, 91, 210, 0.3);           /* lueur d'un nœud qui s'allume */
  --ln-glow-strong: rgba(34, 91, 210, 0.38);   /* anneau et lueur forte d'un nœud ou du centre */
  --ln-button-glow: rgba(29, 78, 216, 0.22);   /* ombre du bouton principal de l'accueil */
  --ln-data-line: #d3e8dc;                     /* filet d'un nœud de données */
  --ln-data-bg: #e8f5ee;                       /* fond de l'icône d'un nœud de données */
  --ln-data-mark: #3d8a63;                     /* icône et repère d'un nœud de données */
  --ln-data-ink: #2f6f4e;                      /* texte d'une étape logicielle */
  --ln-external-line: #e3cdb4;                 /* filet d'un nœud externe */
  --ln-external-bg: #fff2e4;                   /* fond de l'icône d'un nœud externe */
  --ln-external-mark: #c47a32;                 /* icône et repère d'un nœud externe */
  --ln-node-icon: #3b63c9;                     /* icône d'un nœud ou d'une tuile */
  --ln-hub-icon: #4a6fd1;                      /* icône d'un élément du centre, repère de légende */

  /* Vitrine : planche « blueprint » et bandeau de conseil */
  --ln-blueprint-text: #c6d6eb;                /* texte de la planche « blueprint » */
  --ln-blueprint-line: #334d6b;                /* cadre de la planche */
  --ln-blueprint-accent: #87c5ff;              /* accent de la barre de la planche */
  --ln-blueprint-label: #8ca9cb;               /* étiquette de la planche */
  --ln-blueprint-node-line: #527498;           /* contour d'un nœud de la planche */
  --ln-blueprint-wire: #6486ac;                /* fil de liaison de la planche */
  --ln-blueprint-text-soft: #a8c0dd;           /* texte secondaire de la planche et du bandeau d'appel */
  --ln-blueprint-shadow: #dbe5f2;              /* ombre pleine de la planche */
  --ln-hero-frame: #496577;                    /* losange décoratif du haut de page */
  --ln-hero-button-ink: #15384c;               /* texte du bouton clair du haut de page */
  --ln-hero-ghost-hover: rgba(132, 209, 230, 0.08); /* survol du bouton fantôme du haut de page */
  --ln-counsel-line: #e6ecf8;                  /* filet du bandeau de conseil */
  --ln-counsel-button-line: #c9d5e8;           /* filet du bouton du bandeau de conseil */
  --ln-alt-line: #ccd5e4;                      /* filet pointillé d'une approche écartée */

  /* Schémas et graphiques de l'espace connecté */
  --ln-diagram-name: #182c42;                  /* nom d'un composant du schéma */
  --ln-diagram-data: #22553b;                  /* contour d'un composant de données */
  --ln-diagram-integration: #85500b;           /* contour d'une intégration ou d'un composant externe */
  --ln-diagram-legend-line: #5278ce;           /* repère de légende : composant */
  --ln-diagram-legend-data-line: #3f8a62;      /* repère de légende : données */
  --ln-diagram-legend-data-bg: #eef8f2;        /* fond du repère : données */
  --ln-diagram-legend-ext-line: #b07a2a;       /* repère de légende : intégration */
  --ln-diagram-legend-ext-bg: #fff6ea;         /* fond du repère : intégration */
  --ln-chart-track: #e2e8f0;                   /* fond d'une barre empilée */
  --ln-chart-mid: #60a5fa;                     /* deuxième part d'une barre empilée */
  --ln-chart-light: #bfdbfe;                   /* troisième part d'une barre empilée */

  /* Rapport conservé, impression, boutons de marque */
  --ln-report-ink: #1a1a1a;                    /* texte du rapport conservé */
  --ln-report-text: #333333;                   /* note du rapport */
  --ln-report-text-soft: #444444;              /* pied du rapport */
  --ln-report-muted: #555555;                  /* légende du rapport */
  --ln-report-line: #cccccc;                   /* filet marqué du rapport */
  --ln-report-line-soft: #dddddd;              /* filet de tableau du rapport */
  --ln-report-notice-line: #b7791f;            /* cadre de la mention de démonstration */
  --ln-print-ink: #000000;                     /* encre de l'impression */
  --ln-print-paper: #ffffff;                   /* papier de l'impression */
  --ln-print-line: #bbbbbb;                    /* filet de l'impression */
  --ln-brand-google-ink: #1f1f1f;              /* texte du bouton Google (règles de la marque) */
  --ln-brand-google-line: #747775;             /* bordure du bouton Google */
  --ln-brand-google-hover: #f8f9fa;            /* survol du bouton Google */
  --ln-brand-apple: #000000;                   /* fond du bouton Apple (règles de la marque) */
  --ln-brand-apple-hover: #1a1a1a; /* survol du bouton Apple */
}

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

/* Inter servie par l'application (licence SIL OFL 1.1, app/assets/fonts/OFL-Inter.txt ; Inter 4.1, variable, axe de
   graisse 100 à 900). Direction LEDGER (5 octobre 2026) : la police de TOUTE l'application, vitrine comprise ; Space
   Grotesk (Trame, 26 septembre 2026) est retirée du dépôt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/inter-variable-884c49a1.woff2") format("woff2");
}

/* Direction LEDGER (5 octobre 2026, docs/redesign-fintech/) : ses valeurs sont désormais celles du :root unique, en tête
   de ce fichier (audit Impeccable du 22 octobre 2026 : un second :root écrasait le premier, dont les commentaires décrivaient
   encore les valeurs Aurore). */
.body--public { --ln-text-xs: 12px; --ln-text-sm: 14px; --ln-text-base: 16px; --ln-text-md: 18px; --ln-text-lg: 24px; --ln-text-xl: 36px; }
.num, .table td.num, td.num, th.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---- 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-page);
  font-feature-settings: "cv11" 1, "ss01" 1, "tnum" 1;
}

/* Ledger : titres en 700 (h1) et 600 (h2 à h4), jamais 500 — Inter demi-grasse tient le contraste sur fond gris. */
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--ln-title); }
h1 { font-size: var(--ln-text-xl); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
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: var(--ln-text-code); }
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: var(--ln-text-xs); 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-control-line); 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: var(--ln-on-dark); }
.button--primary:hover, button.button--primary:hover { background: var(--ln-accent-strong); border-color: var(--ln-accent-strong); color: var(--ln-on-dark); }
.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-control-line); 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); }
/* Une case à cocher et son libellé sur UNE ligne (« Se souvenir de cet appareil pendant 30 jours », second facteur) :
   le libellé d'un champ est en bloc, celui d'une case se place à côté d'elle (5 octobre 2026). */
.field--check { display: flex; align-items: center; gap: var(--sp-2); }
.field--check > input[type="checkbox"] { margin: 0; flex: 0 0 auto; }
.field--check > label, .form .field--check > label { display: inline; margin: 0; font-weight: 400; font-size: var(--ln-text-base); }

.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; }
/* Aurore V3 : le titre d'un panneau est une BANDE d'en-tête pâle (#f9fbfe) séparée du contenu par un filet — maquettes 02
   et 03. Seul le premier titre direct est concerné ; un panneau sans titre garde son contenu tel quel. */
.panel > h2:first-child, .panel > h3:first-child {
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-5); padding: 15px var(--sp-6);
  background: var(--ln-soft); border-bottom: 1px solid var(--ln-line); border-radius: var(--ln-radius) var(--ln-radius) 0 0;
  font-size: var(--ln-text-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--ln-title);
}
.panel--narrow { max-width: 30rem; margin: var(--sp-8) auto; }
.panel--attention { border-left: 3px solid var(--ln-question-mark); }
.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); background: var(--ln-soft); border-radius: var(--ln-radius) var(--ln-radius) 0 0; }
.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: var(--ln-backdrop); }
.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: var(--ln-highlight); 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); }

/* ---- Socle LEDGER (5 octobre 2026) : composants de base, pour toute l'application ------------------------- */
/* Boutons : 36 px, rayon 8, trait fin ; le bleu d'action seul porte le primaire. */
.button, input[type="submit"].button, button.button { min-height: 36px; padding: 6px 14px; font-size: var(--ln-text-sm); font-weight: 600; border-radius: var(--ln-radius-sm); border: 1px solid var(--ln-control-line); background: var(--ln-page); color: var(--ln-ink); box-shadow: none; }
.button:hover { background: var(--ln-soft); border-color: var(--ln-control-line); color: var(--ln-ink); }
.button--primary, input[type="submit"].button--primary, button.button--primary { background: var(--ln-accent); border-color: var(--ln-accent); color: var(--ln-on-dark); }
.button--primary:hover, button.button--primary:hover { background: var(--ln-accent-strong); border-color: var(--ln-accent-strong); color: var(--ln-on-dark); }
.button--ghost { border-color: transparent; background: transparent; color: var(--ln-accent); }
.button--ghost:hover { background: var(--ln-sky); color: var(--ln-accent-strong); }
.button--subtle { border-color: transparent; background: transparent; color: var(--ln-accent); padding-left: 0; padding-right: 0; }
.button--danger { color: var(--ln-on-dark); border-color: var(--ln-danger); background: var(--ln-danger); }
.button--danger:hover { background: var(--ln-danger-strong); border-color: var(--ln-danger-strong); color: var(--ln-on-dark); }
.button--small, input[type="submit"].button--small { min-height: 30px; padding: 3px 10px; font-size: var(--ln-text-sm); }
.button[aria-disabled="true"], .button:disabled, input[type="submit"].button:disabled { opacity: 0.55; background: var(--ln-soft); border-color: var(--ln-line); color: var(--ln-muted); }
/* Champs : 36 px, rayon 8, anneau bleu pâle au focus ; libellés en 13 px demi-gras. */
.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="search"], .form input[type="tel"], .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"],
.qhelp__form input[type="text"], .question-card__text, .understood__edit textarea, .qhelp__answer textarea {
  font-size: var(--ln-text-base); line-height: 1.4; padding: 7px 10px; min-height: 36px; border: 1px solid var(--ln-control-line); 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, .inline-form input:focus-visible, .inline-form select:focus-visible,
.qhelp__form input:focus-visible, .question-card__text:focus-visible, .qhelp__answer textarea:focus-visible { outline: 2px solid var(--ln-focus); outline-offset: 1px; border-color: var(--ln-accent); box-shadow: none; border-radius: var(--ln-radius-sm); }
.form label, .form legend, .field > label, legend { font-size: var(--ln-text-sm); font-weight: 600; color: var(--ln-ink); }
.form textarea { min-height: 7rem; }
.choice label { font-weight: 400; }
fieldset, .choice-group, fieldset.field { border-color: var(--ln-line); border-radius: var(--ln-radius); }
/* Titres de page et de panneau. */
.page-header h1, .pagehead h1 { font-size: var(--ln-text-xl); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.pagehead__sub, .page-header .lead { color: var(--ln-muted); font-size: var(--ln-text-base); max-width: 70ch; margin: 0 0 6px; }
.pagehead > div > .ln-kicker, .page-header > div > .ln-kicker, .pagehead > div > .eyebrow, .page-header > div > .eyebrow { display: none; }
.panel, .ln-panel { background: var(--ln-page); border: 1px solid var(--ln-line); border-radius: var(--ln-radius); padding: 18px 20px; box-shadow: none; }
.panel > h2:first-child:not(.visually-hidden), .panel > h3:first-child:not(.visually-hidden) { margin: -18px -20px 16px; padding: 13px 20px; background: transparent; border-bottom: 1px solid var(--ln-line); border-radius: var(--ln-radius) var(--ln-radius) 0 0; font-size: var(--ln-text-base); font-weight: 600; color: var(--ln-ink); }
.panel__head { margin: -18px -20px 16px; padding: 13px 20px; background: transparent; border-bottom: 1px solid var(--ln-line); align-items: center; }
.panel__head h2, .panel__head h3 { font-size: var(--ln-text-base); font-weight: 600; }
.ln-panel h2 { font-size: var(--ln-text-md); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.ln-panel h3 { font-size: var(--ln-text-base); font-weight: 600; }
.ln-panel p { font-size: var(--ln-text-sm); color: var(--ln-muted); }
.ln-panel > .ln-kicker { color: var(--ln-faint); font-size: var(--ln-text-xs); letter-spacing: 0.06em; margin-bottom: 4px; }
.ln-panel > .ln-tag + h2 { margin-top: 10px; }
.panel--attention { border-left: 3px solid var(--ln-warn); }
.panel--next, .ln-continue { border-top: 1px solid var(--ln-line); border-left: 3px solid var(--ln-accent); }
.ln-continue h2, .ln-continue h3 { font-size: var(--ln-text-md); font-weight: 600; }
.ln-handoff { background: var(--ln-sky); border-color: var(--ln-sky-line); padding: 28px; }
.ln-handoff h2 { font-size: var(--ln-text-title-sm); font-weight: 700; letter-spacing: -0.02em; }
.ln-budget-value { font-size: var(--ln-text-title); font-weight: 700; letter-spacing: -0.03em; }
.ln-feature-row strong, .ln-document-row strong, .ln-cycle strong { font-weight: 600; font-size: var(--ln-text-base); }
.ln-warning, .notice-inline, .flash, .form-errors, .conflict, .warning { border-radius: var(--ln-radius-sm); }
.ln-warning { border-radius: var(--ln-radius-sm); }
.ln-account-tabs { gap: 4px; padding: 4px; background: var(--ln-soft); border: 1px solid var(--ln-line); border-radius: 999px; width: fit-content; }
.ln-account-tabs a { border: 0; border-radius: 999px; padding: 7px 14px; background: transparent; font-weight: 500; }
.ln-account-tabs a[aria-current="page"] { background: var(--ln-page); color: var(--ln-ink); border: 0; box-shadow: 0 1px 2px var(--ln-shadow-tab); font-weight: 600; }
.ln-account-tabs a:hover { color: var(--ln-ink); }
/* Étiquettes, tableaux, onglets, listes descriptives, état vide. */
.badge, .ln-tag, .tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 0; border-radius: 6px; font-size: var(--ln-text-sm); font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; vertical-align: middle; }
.badge { background: var(--ln-neutral-bg); color: var(--ln-muted); }
.tag { background: var(--ln-neutral-bg); color: var(--ln-muted); }
.tag--accent { background: var(--ln-sky); color: var(--ln-accent-strong); }
.badge--good { background: var(--ln-good-bg); color: var(--ln-good); }
.badge--pending { background: var(--ln-warn-bg); color: var(--ln-warn); }
.badge--danger { background: var(--ln-danger-bg); color: var(--ln-danger); }
.badge--info { background: var(--ln-info-bg); color: var(--ln-info); }
.badge--retired { background: var(--ln-neutral-bg); color: var(--ln-muted); }
.badge--simulated { background: var(--ln-neutral-bg); color: var(--ln-muted); border: 1px dashed var(--ln-line-strong); }
.table { border: 0; font-size: var(--ln-text-sm); }
.table th, .table td { padding: 10px 14px; }
.table thead th { font-size: var(--ln-text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ln-faint); background: var(--ln-surface-band); border-bottom: 1px solid var(--ln-line); }
.table tbody th { font-weight: 600; }
.table tfoot td, .table tfoot th { font-weight: 700; background: var(--ln-surface-band); }
.table-wrap { border: 1px solid var(--ln-line); border-radius: var(--ln-radius-sm); }
.panel > .table-wrap, .ln-panel > .table-wrap, .fold > .table-wrap, .solution-fold > .table-wrap, details.panel.fold > .table-wrap { border: 0; border-radius: 0; }
.scope-tabs, .page-tabs { gap: 4px; margin-bottom: 14px; }
.scope-tab, .page-tabs a { padding: 8px 12px; font-size: var(--ln-text-sm); font-weight: 500; }
.scope-tab[aria-current="page"], .page-tabs a[aria-current="page"] { color: var(--ln-ink); border-bottom-color: var(--ln-ink); }
.meta-grid dt, .card__meta dt { font-size: var(--ln-text-xs); color: var(--ln-faint); font-weight: 600; }
.empty-state { border: 1px dashed var(--ln-line-strong); border-radius: var(--ln-radius); background: var(--ln-page); }
.steps li::before, .ln-cycle__mark, .onboarding-steps__number { font-weight: 600; }
.more-menu__toggle { min-height: 32px; font-weight: 600; border-color: var(--ln-control-line); }
.flash { padding: 10px 14px; font-size: var(--ln-text-sm); }
.flash--notice { background: var(--ln-good-bg); color: var(--ln-good); border-color: var(--ln-good-line); }
details > summary { font-weight: 600; }
.fold > .fold__summary, details.panel.fold > .fold__summary { font-size: var(--ln-text-base); font-weight: 600; }
/* Une section ou un titre caché en tête de panneau n'ouvre pas une bande vide (relecture du 5 octobre 2026). */
.panel > .section:first-child { margin-top: 0; }
.panel > .visually-hidden:first-child + * { margin-top: 0; }