/* ---- tokens.css ---- */
/* =========================================================================
   METROLOGY ENCYCLOPEDIA — Jetons de design
   Base : jetons de METROLOGY ACADEMY (cohérence graphique), complétés pour la
   consultation scientifique : dix natures d'encadrés, légende des figures,
   gabarit à trois colonnes et points de rupture.
   Palette du cahier des charges : #101C32 · #2563EB · #F07822 · #F5F7FB · #FFFFFF · #64748B
   Thème piloté par data-theme sur <html> ; mode de lecture par data-mode.
   ========================================================================= */

:root {
  /* ---- Palette brute ---- */
  --navy-950: #0a1222;
  --navy-900: #101c32;
  --navy-800: #182641;
  --navy-700: #22334f;
  --navy-600: #33466a;
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b76f6;
  --blue-100: #dbe6fe;
  --blue-50: #eef3ff;
  --orange-500: #f07822;
  --orange-700: #b3520c;
  --orange-100: #fde6d3;
  --orange-50: #fff4ea;
  --gray-50: #f5f7fb;
  --gray-100: #edf1f7;
  --gray-200: #e1e7ef;
  --gray-300: #cbd4e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #4b5b71;
  --gray-700: #334155;
  --white: #ffffff;

  /* ---- Rôles (thème clair) ---- */
  --bg: var(--gray-50);
  --surface: var(--white);
  --surface-2: #f9fafd;
  --surface-sunken: var(--gray-100);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --text: var(--navy-900);
  --text-2: var(--gray-700);
  --text-muted: #5b6b80;          /* ≥ 4,5:1 sur blanc et sur #f5f7fb */
  --text-inverse: var(--white);

  --primary: var(--blue-600);
  --primary-hover: var(--blue-700);
  --primary-soft: var(--blue-50);
  --primary-soft-2: var(--blue-100);
  --on-primary: var(--white);
  --link: var(--blue-700);

  --accent: var(--orange-500);    /* décor, fonds nuit : jamais du texte sur fond clair */
  --accent-ui: #d96512;           /* repères porteurs de sens : ≥ 3:1 sur blanc */
  --accent-text: var(--orange-700);
  --accent-soft: var(--orange-50);

  --focus: #1d4ed8;
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* États (réservés aux verdicts et aux alertes) */
  --ok: #157a3c;
  --ok-soft: #e7f5ec;
  --warn: #a8540a;
  --warn-soft: #fef4e6;
  --danger: #b42318;
  --danger-soft: #fdeceb;
  --info: var(--blue-700);
  --info-soft: var(--blue-50);
  --undecided: #7a5a00;            /* zone d'incertitude ISO 14253-1 */
  --undecided-soft: #fdf6dc;

  /* ---- Nature des informations (dix encadrés) ----
     Normatif : bordure complète. Pratique : barre gauche. Jamais confondus. */
  --k-norm: #1d4ed8;        --k-norm-soft: #eef3ff;   /* exigence normative */
  --k-asme: #3346a8;        --k-asme-soft: #eff1fb;   /* différence ISO / ASME */
  --k-bp: #0f766e;          --k-bp-soft: #e8f6f4;     /* bonne pratique métrologique */
  --k-reco: #6d3fd6;        --k-reco-soft: #f2eefd;   /* recommandation MMT */
  --k-impact: #22334f;      --k-impact-soft: #eef2f8; /* impact fonctionnel */
  --k-att: #a8540a;         --k-att-soft: #fef4e6;    /* attention */
  --k-err: #b42318;         --k-err-soft: #fdeceb;    /* erreur fréquente */
  --k-ex: #b3520c;          --k-ex-soft: #fff4ea;     /* exemple pédagogique */
  --k-conf: #b42363;        --k-conf-soft: #fdeef5;   /* information à confirmer */
  --k-ret: #101c32;         --k-ret-soft: #f3f6fb;    /* à retenir */

  /* ---- Légende stable des figures ---- */
  --fig-bg: #fbfcfe;
  --fig-grid: rgba(37, 99, 235, 0.07);
  --fig-line: #22334f;          /* contours de pièce, cotes */
  --fig-theo: #33466a;          /* géométrie théorique : trait mixte */
  --fig-hidden: #94a3b8;
  --fig-matter: #e3e9f2;        /* matière */
  --fig-matter-2: #cdd6e3;
  --fig-zone: rgba(37, 99, 235, 0.16);
  --fig-zone-line: #2563eb;     /* zone de tolérance */
  --fig-real: #c85a0c;          /* élément réel : ≥ 3:1 sur la matière et le fond des figures */
  --fig-datum: #157a3c;         /* référence */
  --fig-datum-soft: rgba(21, 122, 60, 0.14);
  --fig-datum-text: #11632f;    /* texte « référence » sur fond --fig-datum-soft : ≥ 4,5:1 */
  --fig-probe: #6d3fd6;         /* palpage */
  --fig-text: #22334f;
  --fig-text-muted: #5b6b80;

  /* ---- Images imprimées : fond blanc dans les deux thèmes ---- */
  --orig-bg: #ffffff;
  --orig-note: #5b6b80;
  /* ---- Animations 3D : faces éclairées (1 la plus claire) ---- */
  --a3-f1: #f4f7fb;
  --a3-f2: #e2e8f1;
  --a3-f3: #cad4e2;
  --a3-f4: #b3c0d2;
  /* ---- Visionneuse et modes plein écran : fond nuit dans les deux thèmes ---- */
  --scrim: rgba(8, 13, 24, 0.95);
  --scrim-text: #e8eef7;
  --scrim-muted: #b4c0d3;
  --scrim-line: rgba(255, 255, 255, 0.14);
  /* ---- Contact WhatsApp (D-52) : vert sombre de la marque, texte blanc ≥ 4,5:1, les deux thèmes ---- */
  --whatsapp: #0e7466;
  --whatsapp-hover: #0a5a4f;
  --on-whatsapp: #ffffff;

  /* ---- Typographie ---- */
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  --font-math: "Cambria Math", "STIX Two Math", "IBM Plex Sans", serif;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --lh-read: 1.7;
  --tracking-eyebrow: 0.1em;

  /* ---- Espacements : grille 4 / 8 px ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ---- Rayons, bordures, ombres, mouvements ---- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  --bw: 1px;
  --bw-strong: 2px;
  --bar: 4px;                      /* barre des encadrés de pratique */

  --shadow-1: 0 1px 2px rgba(16, 28, 50, 0.06);
  --shadow-2: 0 1px 2px rgba(16, 28, 50, 0.05), 0 6px 20px -8px rgba(16, 28, 50, 0.14);
  --shadow-3: 0 18px 48px -14px rgba(16, 28, 50, 0.32);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;

  /* ---- Gabarit : trois colonnes (cahier des charges § 06) ---- */
  --topbar-h: 60px;
  --nav-w: 264px;                  /* navigation gauche 240–280 */
  --toc-w: 240px;                  /* sommaire droit 220–260 */
  --gap-col: 32px;                 /* espace entre colonnes 24–32 */
  --read-max: 760px;               /* texte courant (≈ 75 caractères) */
  --article-max: 880px;            /* colonne d'article 700–900 : figures et tableaux */
  --page-max: 1480px;
  --gutter: 16px;                  /* marge latérale mobile */

  /* Points de rupture (documentaires : les media queries utilisent les valeurs)
     --bp-sm: 600px · --bp-md: 960px · --bp-lg: 1280px */

  color-scheme: light;
}

/* ---- Thème sombre : ses propres teintes, pas une inversion ---- */
:root[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #111a2c;
  --surface-2: #142036;
  --surface-sunken: #0e1626;
  --border: #233250;
  --border-strong: #2f4264;
  --text: #e8eef7;
  --text-2: #c3cede;
  --text-muted: #9babc1;
  --text-inverse: #0b1220;

  --primary: #4f86f7;
  --primary-hover: #6b9bff;
  --primary-soft: rgba(79, 134, 247, 0.14);
  --primary-soft-2: rgba(79, 134, 247, 0.24);
  --on-primary: #0b1220;
  --link: #8db4ff;

  --accent: #f58a3c;
  --accent-ui: #f58a3c;
  --accent-text: #ffa766;
  --accent-soft: rgba(245, 138, 60, 0.12);

  --focus: #8db4ff;
  --focus-ring: 0 0 0 3px rgba(141, 180, 255, 0.45);

  --ok: #4cc27e;
  --ok-soft: rgba(76, 194, 126, 0.13);
  --warn: #f2a54a;
  --warn-soft: rgba(242, 165, 74, 0.13);
  --danger: #ff7b70;
  --danger-soft: rgba(255, 123, 112, 0.13);
  --info: #8db4ff;
  --info-soft: rgba(141, 180, 255, 0.12);
  --undecided: #f1cf5b;
  --undecided-soft: rgba(241, 207, 91, 0.12);

  --k-norm: #8db4ff;   --k-norm-soft: rgba(141, 180, 255, 0.09);
  --k-asme: #a9b6ff;   --k-asme-soft: rgba(169, 182, 255, 0.09);
  --k-bp: #4fd1bf;     --k-bp-soft: rgba(79, 209, 191, 0.09);
  --k-reco: #b9a2ff;   --k-reco-soft: rgba(185, 162, 255, 0.09);
  --k-impact: #c3cede; --k-impact-soft: rgba(195, 206, 222, 0.07);
  --k-att: #f2a54a;    --k-att-soft: rgba(242, 165, 74, 0.1);
  --k-err: #ff7b70;    --k-err-soft: rgba(255, 123, 112, 0.1);
  --k-ex: #ffa766;     --k-ex-soft: rgba(255, 167, 102, 0.09);
  --k-conf: #ff8fbf;   --k-conf-soft: rgba(255, 143, 191, 0.09);
  --k-ret: #e8eef7;    --k-ret-soft: rgba(232, 238, 247, 0.06);

  --fig-bg: #0f182a;
  --fig-grid: rgba(141, 180, 255, 0.06);
  --fig-line: #c3cede;
  --fig-theo: #9babc1;
  --fig-hidden: #5d6f8b;
  --fig-matter: #22314b;
  --fig-matter-2: #2c3d5c;
  --fig-zone: rgba(79, 134, 247, 0.22);
  --fig-zone-line: #6b9bff;
  --fig-real: #f58a3c;
  --fig-datum: #4cc27e;
  --fig-datum-soft: rgba(76, 194, 126, 0.18);
  --fig-datum-text: #5fd08f;
  --fig-probe: #b9a2ff;
  --fig-text: #dbe3ef;
  --fig-text-muted: #9babc1;

  --a3-f1: #3a4e72;
  --a3-f2: #2e3f5f;
  --a3-f3: #24334e;
  --a3-f4: #1b283f;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 18px 48px -12px rgba(0, 0, 0, 0.75);

  color-scheme: dark;
}

/* ---- base.css ---- */
/* =========================================================================
   Base : polices locales (SIL OFL), remise à zéro, typographie de lecture.
   ========================================================================= */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + var(--s-6));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(var(--fs-28), 2.2vw + 1rem, var(--fs-40)); }
h2 { font-size: var(--fs-24); }
h3 { font-size: var(--fs-18); }
h4 { font-size: var(--fs-16); }
p { margin: 0; }
p + p { margin-top: var(--s-3); }
ul, ol { margin: 0; padding-left: 1.25em; }
li + li { margin-top: var(--s-1); }
img, svg { max-width: 100%; }
svg { display: block; }
strong { font-weight: 600; }
small { font-size: var(--fs-13); }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
hr { border: 0; border-top: var(--bw) solid var(--border); margin: var(--s-8) 0; }

a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 var(--s-1);
  border: var(--bw) solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-xs);
  background: var(--surface); color: var(--text-2); font-size: var(--fs-12); line-height: 1.5; text-align: center;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm);
  background: var(--surface); color: var(--link); box-shadow: var(--shadow-3); font-weight: 600;
}
.lien-evitement:focus { top: var(--s-2); }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .barre, .nav-gauche, .toc, .bascules, .tiroir-fond { display: none !important; }
  body { background: #fff; }
}

/* ---- layout.css ---- */
/* =========================================================================
   Gabarit : barre supérieure, coque à trois colonnes, tiroir mobile, pied.
   Desktop ≥ 1280 : navigation 264 | article ≤ 880 | sommaire 240, écarts 32.
   960–1279 : navigation en tiroir ; sommaire à droite conservé pour l'article.
   < 960 : une colonne ; sommaire replié en tête d'article.
   ========================================================================= */

/* ---- Barre supérieure (bleu nuit, identité) ---- */
.barre {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  background: var(--navy-900);
  color: #e8eef7;
  border-bottom: var(--bw) solid rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .barre { background: #0a1120; }
.barre__in {
  height: 100%; max-width: var(--page-max); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-6);
}
.marque {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.marque__logo { width: 30px; height: 30px; }
.marque__texte { display: flex; flex-direction: column; line-height: 1; }
.marque__l1 { font-size: 11px; letter-spacing: 0.2em; color: #aab7cb; font-weight: 500; }
.marque__l2 { font-size: 15px; letter-spacing: 0.08em; font-weight: 700; margin-top: 3px; }
.marque:hover .marque__l2 { color: #ffd1ad; }

.barre__recherche {
  flex: 1 1 auto; max-width: 520px; margin-left: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  height: 38px; padding: 0 var(--s-2) 0 var(--s-3);
  border: var(--bw) solid rgba(255, 255, 255, 0.14); border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.06); color: #b9c5d8; text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.barre__recherche:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); }
.barre__recherche svg { width: 18px; height: 18px; flex-shrink: 0; }
.barre__recherche span { flex: 1; font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre__recherche kbd { background: transparent; color: #b9c5d8; border-color: rgba(255, 255, 255, 0.25); }

.barre__liens { display: flex; gap: var(--s-1); margin-left: auto; }
.barre__liens a {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  color: #c6d0de; text-decoration: none; font-size: var(--fs-14); font-weight: 500; white-space: nowrap;
}
.barre__liens a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.barre__liens a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }

.bascules { display: flex; align-items: center; gap: var(--s-2); }
.barre .btn-icone { color: #d7dfeb; border-color: rgba(255, 255, 255, 0.14); background: transparent; }
.barre .btn-icone:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.barre .barre__menu { display: none; }

/* ---- Coque ---- */
.coque {
  max-width: var(--page-max); margin: 0 auto;
  display: grid; gap: var(--gap-col);
  padding: 0 var(--s-6);
}
.coque--article { grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--toc-w); }
.coque--outil { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
.coque--large { grid-template-columns: minmax(0, 1fr); max-width: 1240px; }
.coque--tuto { grid-template-columns: minmax(0, 1fr); max-width: 1040px; }

.principal { min-width: 0; padding: var(--s-6) 0 var(--s-16); }
.coque--article .principal { max-width: var(--article-max); width: 100%; justify-self: center; }

/* ---- Navigation gauche ---- */
.nav-gauche {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-6) var(--s-2) var(--s-10) 0;
  border-right: var(--bw) solid var(--border);
  scrollbar-width: thin;
}
.nav-gauche__tete { display: none; }
.nav-titre {
  margin: var(--s-5) 0 var(--s-2); padding: 0 var(--s-3);
  font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
}
.nav-titre:first-child { margin-top: 0; }
.nav-outils { list-style: none; padding: 0; margin: 0; }
.nav-outils li + li { margin-top: 2px; }
.nav-outils a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 7px var(--s-3); border-radius: var(--r-sm);
  color: var(--text-2); text-decoration: none; font-size: var(--fs-14); font-weight: 500;
}
.nav-outils a svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.nav-outils a:hover { background: var(--surface-sunken); color: var(--text); }
.nav-outils a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-hover); }
:root[data-theme="dark"] .nav-outils a[aria-current="page"] { color: var(--link); }
.nav-outils a[aria-current="page"] svg { color: currentColor; }

.nav-partie { border-radius: var(--r-sm); }
.nav-partie + .nav-partie { margin-top: 1px; }
.nav-partie > summary {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-3); border-radius: var(--r-sm);
  cursor: pointer; list-style: none; font-size: var(--fs-14); color: var(--text-2);
}
.nav-partie > summary::-webkit-details-marker { display: none; }
.nav-partie > summary:hover { background: var(--surface-sunken); color: var(--text); }
.nav-partie__lettre {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-xs);
  background: var(--surface-sunken); color: var(--text-2);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.nav-partie[open] > summary .nav-partie__lettre { background: var(--navy-900); color: #fff; }
:root[data-theme="dark"] .nav-partie[open] > summary .nav-partie__lettre { background: var(--primary); color: var(--on-primary); }
.nav-partie__chevron { width: 14px; height: 14px; color: var(--text-muted); transition: transform var(--t-fast); }
.nav-partie[open] > summary .nav-partie__chevron { transform: rotate(90deg); }
.nav-partie ul { list-style: none; margin: 2px 0 var(--s-2); padding: 0 0 0 21px; border-left: var(--bw) solid var(--border); margin-left: 23px; }
.nav-partie li + li { margin-top: 0; }
.nav-lien, .nav-indispo {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline; gap: var(--s-1);
  padding: 4px var(--s-2); border-radius: var(--r-xs);
  font-size: var(--fs-13); line-height: 1.4; text-decoration: none;
}
.nav-lien { color: var(--text-2); }
.nav-lien:hover { background: var(--surface-sunken); color: var(--text); }
.nav-lien[aria-current="page"] { background: var(--primary-soft); color: var(--primary-hover); font-weight: 600; box-shadow: inset 2px 0 0 var(--primary); }
:root[data-theme="dark"] .nav-lien[aria-current="page"] { color: var(--link); }
.nav-indispo { color: var(--text-muted); }
.nav-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.nav-pastille { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); align-self: center; }
.nav-lien .nav-pastille { background: var(--accent-ui); }

/* ---- Sommaire droit ---- */
.toc {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto; padding: var(--s-6) 0 var(--s-10);
  scrollbar-width: thin;
}

/* ---- Pied ---- */
.pied {
  border-top: var(--bw) solid var(--border);
  background: var(--surface);
  color: var(--text-muted); font-size: var(--fs-13);
}
.pied__in {
  max-width: var(--page-max); margin: 0 auto; padding: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); justify-content: space-between;
}
.pied a { color: var(--text-2); }

/* ---- Tiroir (navigation mobile) ---- */
.tiroir-fond {
  position: fixed; inset: 0; z-index: 44;
  background: rgba(10, 18, 34, 0.5);
}

@media (max-width: 1279px) {
  .coque--article, .coque--outil { grid-template-columns: minmax(0, 1fr) var(--toc-w); }
  .coque--outil { grid-template-columns: minmax(0, 1fr); }
  .barre .barre__menu { display: inline-grid; }
  .nav-gauche {
    position: fixed; z-index: 45; top: 0; left: 0; bottom: 0;
    width: min(320px, 86vw); height: 100vh;
    padding: 0 var(--s-3) var(--s-10);
    background: var(--surface); border-right: var(--bw) solid var(--border);
    box-shadow: var(--shadow-3);
    transform: translateX(-104%); visibility: hidden;
    transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .nav-gauche.ouvert { transform: none; visibility: visible; transition: transform var(--t-med) var(--ease); }
  .nav-gauche__tete {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--topbar-h); margin: 0 calc(-1 * var(--s-3)) var(--s-4); padding: 0 var(--s-3) 0 var(--s-4);
    background: var(--surface); border-bottom: var(--bw) solid var(--border);
    font-weight: 600;
  }
}

/* Les accès principaux restent dans le plan (tiroir « Consulter ») quand la barre manque de place. */
@media (max-width: 1239px) {
  .barre__liens { display: none; }
  .bascules { margin-left: auto; }
}
.barre__recherche { min-width: 0; }
.barre__menu, .bascules .btn-icone { flex-shrink: 0; }

@media (max-width: 959px) {
  :root { --topbar-h: 56px; }
  .coque, .coque--article { grid-template-columns: minmax(0, 1fr); padding: 0 var(--gutter); gap: 0; }
  .barre__in { padding: 0 var(--s-3); gap: var(--s-2); }
  .toc { display: none; }
  .barre__recherche { margin-left: auto; max-width: none; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; justify-content: center; }
  .bascules { margin-left: 0; }
  .barre__recherche span, .barre__recherche kbd { display: none; }
  .marque__l1 { font-size: 10px; }
  .marque__l2 { font-size: 13px; }
  .principal { padding-top: var(--s-4); }
}
@media (max-width: 359px) {
  .marque__texte { display: none; }
}
.pied__aide { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--s-2); padding: 2px var(--s-2); border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); font-size: var(--fs-12); }
.pied__aide svg { width: 16px; height: 16px; }
.pied__aide:hover { border-color: var(--primary); color: var(--text); }

/* ---- components.css ---- */
/* =========================================================================
   Composants réutilisables
   ========================================================================= */

/* ---- Boutons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 40px; padding: 0 var(--s-4);
  border: var(--bw) solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-14); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--primaire { background: var(--primary); color: var(--on-primary); }
.btn--primaire:hover { background: var(--primary-hover); }
.btn--secondaire { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--secondaire:hover { border-color: var(--primary); color: var(--primary-hover); }
.btn--discret { background: transparent; color: var(--link); padding: 0 var(--s-2); }
.btn--discret:hover { background: var(--primary-soft); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; }
.btn--petit { min-height: 32px; padding: 0 var(--s-3); font-size: var(--fs-13); }

.btn-icone {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: var(--bw) solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-2);
}
.btn-icone svg { width: 20px; height: 20px; }
.btn-icone:hover { color: var(--text); border-color: var(--border-strong); }

/* Bascule à deux états (thème) */
.ico-soleil { display: none; }
:root[data-theme="dark"] .ico-soleil { display: block; }
:root[data-theme="dark"] .ico-lune { display: none; }

/* Contrôle segmenté (mode de lecture, filtres exclusifs) */
.segments {
  display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--r-md); background: var(--surface-sunken); border: var(--bw) solid var(--border);
}
.segments button {
  min-height: 30px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); font-size: var(--fs-13); font-weight: 500;
}
.segments button[aria-pressed="true"], .segments button[aria-checked="true"] {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); font-weight: 600;
}
.barre .segments { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.barre .segments button { color: #b9c5d8; }
.barre .segments button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: none; }

/* Pastilles de filtre */
.puces { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.puce {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 32px; padding: 0 var(--s-3);
  border: var(--bw) solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-2); font-size: var(--fs-13); font-weight: 500;
  text-decoration: none;
}
.puce:hover { border-color: var(--primary); color: var(--text); }
.puce[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
:root[data-theme="dark"] .puce[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.puce .sym { width: 16px; height: 16px; }

/* ---- Étiquettes de statut (workflow éditorial) ---- */
.statut {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px var(--s-2); border-radius: var(--r-xs);
  font-size: var(--fs-12); font-weight: 600; line-height: 1.5; white-space: nowrap;
  border: var(--bw) solid currentColor;
}
.statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.statut--a-convertir { color: var(--text-muted); border-color: var(--border-strong); }
.statut--relecture, .statut--corrections { color: var(--k-reco); background: var(--k-reco-soft); border-color: transparent; }
.statut--valide, .statut--publie { color: var(--ok); background: var(--ok-soft); border-color: transparent; }

.badge {
  display: inline-flex; align-items: center; padding: 1px var(--s-2);
  border-radius: var(--r-xs); background: var(--surface-sunken); color: var(--text-2);
  font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.02em;
}

/* ---- Symboles GD&T (SVG) ---- */
.sym { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Cadre de tolérance ---- */
.cadre {
  display: inline-flex; align-items: stretch; vertical-align: middle;
  border: 1.5px solid var(--text); background: var(--surface);
  font-family: var(--font-mono); font-size: var(--fs-16); font-weight: 500; color: var(--text);
  line-height: 1;
}
.cadre > span { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; min-width: 2.1em; padding: 0.42em 0.55em; }
.cadre > span + span { border-left: 1.5px solid var(--text); }
.cadre .sym { width: 1.25em; height: 1.25em; stroke-width: 1.7; vertical-align: 0; }
.cadre .cadre__z { min-width: 4.2em; }
.cadre--petit { font-size: var(--fs-13); }
.cadre-groupe { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; vertical-align: middle; }
.cadre-groupe__n { font-family: var(--font-mono); font-size: var(--fs-14); font-weight: 500; }
.mod {
  display: inline-grid; place-items: center; width: 1.3em; height: 1.3em;
  border: 1.4px solid currentColor; border-radius: 50%;
  font-size: 0.78em; font-weight: 600; line-height: 1;
}
.mod-texte { font-size: 0.82em; font-weight: 600; letter-spacing: 0.02em; }
/* Lettre cerclée et symbole dans le texte courant (dessinés, jamais tapés : D-45) */
.mod--texte { font-family: var(--font-mono); vertical-align: 0.1em; margin: 0 0.08em; }
.sym--texte { vertical-align: -0.18em; }
.cote-th {
  display: inline-block; padding: 0.05em 0.35em; border: 1.3px solid currentColor;
  font-family: var(--font-mono); font-size: 0.95em; line-height: 1.2;
}

/* Cadre annoté (figure 16.1) */
.cadre-annote {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4);
  padding: var(--s-6); border-radius: var(--r-lg); background: var(--fig-bg); border: var(--bw) solid var(--border);
}
.cadre-annote__cadre { grid-column: 1 / -1; display: flex; justify-content: center; padding: var(--s-2) 0 var(--s-1); }
.cadre-annote__cadre .cadre { font-size: clamp(1.25rem, 3.2vw, 1.75rem); }
.cadre-annote__case { position: relative; padding-top: var(--s-3); border-top: var(--bw-strong) solid var(--fig-zone-line); font-size: var(--fs-14); }
.cadre-annote__case h4 { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); margin-bottom: var(--s-1); }

/* ---- Encadrés (dix natures) ----
   Normatif (norme, iso-asme) : bordure complète, en-tête formel, source et statut de vérification.
   Pratique (bonne-pratique, reco-mmt) : barre gauche, mention « non normatif ».
   Alerte (attention, erreur) : barre gauche colorée. À confirmer : bordure hachurée. */
.enc {
  --k: var(--k-impact); --k-soft: var(--k-impact-soft);
  margin: var(--s-6) 0; padding: var(--s-4) var(--s-5) var(--s-4);
  border-radius: var(--r-md); background: var(--k-soft);
  border-left: var(--bar) solid var(--k);
  font-size: var(--fs-15); line-height: var(--lh-body);
}
.enc__tete {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
}
.enc__type {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--k);
}
.enc__type svg { width: 16px; height: 16px; flex-shrink: 0; }
.enc__nature { font-size: var(--fs-12); color: var(--text-muted); font-style: italic; }
.enc__sources { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.enc__source {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  padding: 1px 6px; border-radius: var(--r-xs); border: var(--bw) solid var(--k); color: var(--k);
  background: var(--surface);
}
.enc__pied { margin-top: var(--s-3); padding-top: var(--s-2); border-top: var(--bw) dashed color-mix(in srgb, var(--k) 35%, transparent); font-size: var(--fs-12); color: var(--text-muted); }
.enc p + p { margin-top: var(--s-2); }
.enc ul { margin-top: var(--s-2); }

.enc--norme { --k: var(--k-norm); --k-soft: var(--k-norm-soft); border: var(--bw) solid var(--k); border-left-width: var(--bw); border-top: 3px solid var(--k); border-radius: var(--r-sm); background: var(--surface); }
.enc--norme .enc__tete { margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-5)) var(--s-3); padding: var(--s-2) var(--s-5); background: var(--k-soft); border-bottom: var(--bw) solid color-mix(in srgb, var(--k) 25%, transparent); }
.enc--iso-asme { --k: var(--k-asme); --k-soft: var(--k-asme-soft); border: var(--bw) solid var(--k); border-left-width: var(--bw); border-top: 3px double var(--k); border-radius: var(--r-sm); background: var(--surface); }
.enc--iso-asme .enc__tete { margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-5)) var(--s-3); padding: var(--s-2) var(--s-5); background: var(--k-soft); }
.enc--bonne-pratique { --k: var(--k-bp); --k-soft: var(--k-bp-soft); }
.enc--reco-mmt { --k: var(--k-reco); --k-soft: var(--k-reco-soft); }
.enc--impact { --k: var(--k-impact); --k-soft: var(--k-impact-soft); }
.enc--attention { --k: var(--k-att); --k-soft: var(--k-att-soft); }
.enc--erreur { --k: var(--k-err); --k-soft: var(--k-err-soft); }
.enc--exemple { --k: var(--k-ex); --k-soft: var(--k-ex-soft); border-left-style: dashed; }
.enc--a-confirmer {
  --k: var(--k-conf); --k-soft: var(--k-conf-soft);
  border-left: 0; padding-left: calc(var(--s-5) + 6px); position: relative;
}
.enc--a-confirmer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: var(--r-md) 0 0 var(--r-md);
  background: repeating-linear-gradient(135deg, var(--k) 0 4px, transparent 4px 8px);
}
.enc--retenir { --k: var(--k-ret); --k-soft: var(--k-ret-soft); border-left: 0; border: var(--bw) solid var(--border-strong); background: var(--surface); }
.enc--retenir .enc__type { color: var(--text); }
.enc--retenir ul { list-style: none; padding: 0; }
.enc--retenir li { position: relative; padding-left: var(--s-6); }
.enc--retenir li + li { margin-top: var(--s-2); }
.enc--retenir li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 10px; height: 6px; border-left: 2px solid var(--accent-ui); border-bottom: 2px solid var(--accent-ui); transform: rotate(-45deg); }

/* Mention en ligne « à confirmer » */
.ac {
  display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: var(--r-xs);
  background: var(--k-conf-soft); color: var(--k-conf); border: var(--bw) dashed var(--k-conf);
  font-size: 0.8em; font-weight: 700; letter-spacing: 0.02em; vertical-align: 0.05em;
}

/* ---- Figures ---- */
.fig { margin: var(--s-8) 0; }
.fig__cadre {
  border: var(--bw) solid var(--border); border-radius: var(--r-lg);
  background: var(--fig-bg); overflow: hidden;
}
.fig__entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--border);
  background: var(--surface);
}
.fig__num { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 600; color: var(--text); }
.fig__vue {
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-xs); background: var(--primary-soft); color: var(--primary-hover);
}
:root[data-theme="dark"] .fig__vue { color: var(--link); }
.fig__ech { margin-left: auto; font-size: var(--fs-12); color: var(--text-muted); }
.fig__panneaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; }
.fig__panneaux--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.fig__panneau { padding: var(--s-4); min-width: 0; }
.fig__panneau + .fig__panneau { border-left: var(--bw) solid var(--border); }
.fig__panneau h4 { font-size: var(--fs-13); font-weight: 600; margin-bottom: var(--s-2); color: var(--text); }
.fig__panneau p { font-size: var(--fs-13); color: var(--text-2); margin-top: var(--s-2); }
.fig__svg { width: 100%; height: auto; overflow: visible; }
.fig__legende {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-4); border-top: var(--bw) solid var(--border); background: var(--surface);
  font-size: var(--fs-12); color: var(--text-2);
}
.leg { display: inline-flex; align-items: center; gap: 6px; }
.leg i { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.leg--zone i { background: var(--fig-zone); border: 1.5px solid var(--fig-zone-line); }
.leg--reel i { height: 0; border-top: 2.5px solid var(--fig-real); border-radius: 0; }
.leg--theo i { height: 0; border-top: 1.5px dashed var(--fig-theo); border-radius: 0; }
.leg--ref i { background: repeating-linear-gradient(135deg, var(--fig-datum) 0 1.5px, transparent 1.5px 4px); border-bottom: 2px solid var(--fig-datum); border-radius: 0; }
.leg--palp i { width: 10px; height: 10px; border-radius: 50%; background: var(--fig-probe); }
.leg--matiere i { background: var(--fig-matter); border: 1px solid var(--fig-line); }
.leg--ok i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.leg--nok i { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.fig figcaption { margin-top: var(--s-3); font-size: var(--fs-14); color: var(--text-2); line-height: var(--lh-body); }
.fig figcaption b { color: var(--text); }
.fig__cartouche { margin-top: var(--s-2); font-size: var(--fs-13); }
.fig__cartouche summary { cursor: pointer; color: var(--link); font-weight: 500; width: fit-content; }
.fig__cartouche dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); margin: var(--s-2) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-sunken); }
.fig__cartouche dt { color: var(--text-muted); font-weight: 600; }
.fig__cartouche dd { margin: 0; color: var(--text-2); }

/* ---- Agrandir une figure (visionneuse, D-45) ---- */
.fig__zoom { width: 32px; height: 32px; margin: -4px -6px -4px 0; }
.fig__zoom svg { width: 18px; height: 18px; }
.fig__zoom[hidden] { display: none; }
@media print { .fig__zoom { display: none; } }

/* ---- Haut de page ---- */
.haut-de-page {
  position: fixed; right: var(--s-5); bottom: calc(var(--s-5) + 56px); z-index: 40;
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--s-3) 0 var(--s-2);
  border: var(--bw) solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-2);
  font-size: var(--fs-13); font-weight: 600;
}
.haut-de-page svg { width: 18px; height: 18px; }
.haut-de-page:hover { border-color: var(--primary); color: var(--primary-hover); }
.haut-de-page[hidden] { display: none; }
@media print { .haut-de-page { display: none !important; } }

/* ---- Contact WhatsApp (D-52) : bouton flottant sous « Haut », lien dans le pied de page ---- */
.contact-wa {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 41;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: var(--r-pill); background: var(--whatsapp); color: var(--on-whatsapp);
  box-shadow: var(--shadow-2); font-size: var(--fs-14); font-weight: 600; text-decoration: none;
}
.contact-wa svg { width: 22px; height: 22px; }
.contact-wa:hover { background: var(--whatsapp-hover); color: var(--on-whatsapp); }
.contact-wa:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 599px) { .contact-wa { padding: 0; width: 48px; height: 48px; justify-content: center; } .contact-wa span { display: none; } }
@media print { .contact-wa { display: none !important; } }
.pied__contact a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--whatsapp); }
:root[data-theme="dark"] .pied__contact a { color: #5fd0bd; }
.pied__contact svg { width: 18px; height: 18px; }

/* ---- Aide des raccourcis ---- */
.aide-clavier {
  width: min(560px, calc(100vw - 32px)); padding: 0; border: var(--bw) solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-3);
}
.aide-clavier::backdrop { background: rgba(10, 18, 34, 0.5); }
.aide-clavier__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: var(--bw) solid var(--border); }
.aide-clavier__tete h2 { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-18); }
.aide-clavier__tete h2 svg { width: 22px; height: 22px; color: var(--accent-ui); }
.aide-clavier__liste { margin: 0; padding: var(--s-3) var(--s-5) var(--s-5); }
.aide-clavier__liste div { display: grid; grid-template-columns: 150px 1fr; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: var(--bw) solid var(--border); }
.aide-clavier__liste div:last-child { border-bottom: 0; }
.aide-clavier__liste dt { font-size: var(--fs-13); }
.aide-clavier__liste dd { margin: 0; font-size: var(--fs-14); color: var(--text-2); }
@media (max-width: 479px) { .aide-clavier__liste div { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ---- Visionneuse plein écran (figures) ---- */
.visionneuse {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--scrim); color: var(--scrim-text);
}
.visionneuse[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.visionneuse::backdrop { background: var(--scrim); }
.visionneuse__barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--scrim-line);
}
.visionneuse__titre { font-size: var(--fs-15); font-weight: 600; margin-right: auto; color: var(--scrim-text); }
.visionneuse__barre .btn-icone { background: transparent; border-color: var(--scrim-line); color: var(--scrim-text); }
.visionneuse__barre .btn-icone:hover { border-color: var(--scrim-muted); }
.visionneuse__barre .btn-icone:disabled { opacity: 0.4; }
.visionneuse__zoom { min-width: 56px; text-align: center; font-family: var(--font-mono); font-size: var(--fs-13); color: var(--scrim-muted); }
.visionneuse__scene { overflow: auto; display: grid; place-items: center; padding: var(--s-4); cursor: grab; }
.visionneuse__scene.glisse { cursor: grabbing; }
.visionneuse__contenu { border-radius: var(--r-md); padding: var(--s-3); transform-origin: center center; transition: transform var(--t-med) var(--ease); }
.visionneuse__contenu--svg { background: var(--fig-bg); color: var(--text); }
.visionneuse__pied { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-4) var(--s-3); font-size: var(--fs-13); color: var(--scrim-muted); border-top: var(--bw) solid var(--scrim-line); }
.visionneuse__pied kbd { background: transparent; color: var(--scrim-text); border-color: var(--scrim-line); }
@media (prefers-reduced-motion: reduce) { .visionneuse__contenu { transition: none; } }

/* Classes SVG : la légende suit le thème */
.f-matiere { fill: var(--fig-matter); stroke: var(--fig-line); stroke-width: 1.3; }
.f-matiere-2 { fill: var(--fig-matter-2); stroke: var(--fig-line); stroke-width: 1.3; }
.f-contour { fill: none; stroke: var(--fig-line); stroke-width: 1.3; }
.f-cache { fill: none; stroke: var(--fig-hidden); stroke-width: 1; stroke-dasharray: 4 3; }
.f-zone { fill: var(--fig-zone); stroke: var(--fig-zone-line); stroke-width: 1.3; }
.f-zone-trait { fill: none; stroke: var(--fig-zone-line); stroke-width: 1.3; }
.f-zone-pointille { fill: none; stroke: var(--fig-zone-line); stroke-width: 1.2; stroke-dasharray: 3 3; }
.f-theo { fill: none; stroke: var(--fig-theo); stroke-width: 1; stroke-dasharray: 10 3 2 3; }
.f-reel { fill: none; stroke: var(--fig-real); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.f-reel-pt { fill: var(--fig-real); stroke: var(--surface); stroke-width: 1; }
.f-reel-pt-creux { fill: var(--surface); stroke: var(--fig-real); stroke-width: 2; }
.f-ref { fill: var(--fig-datum-soft); stroke: var(--fig-datum); stroke-width: 1.3; }
.f-ref-trait { fill: none; stroke: var(--fig-datum); stroke-width: 2; }
.f-ref-tri { fill: var(--fig-datum); stroke: var(--fig-datum); stroke-width: 1; }
.f-palp { fill: var(--fig-probe); }
.f-palp-trait { fill: none; stroke: var(--fig-probe); stroke-width: 1.5; }
.f-cote { fill: none; stroke: var(--fig-line); stroke-width: 0.9; }
.f-fleche { fill: var(--fig-line); }
.f-ok { fill: var(--ok); }
.f-ok-trait { fill: none; stroke: var(--ok); stroke-width: 2; }
.f-nok { fill: var(--danger); }
.f-nok-trait { fill: none; stroke: var(--danger); stroke-width: 2; }
.f-grille { stroke: var(--fig-grid); stroke-width: 1; }
.f-axe { fill: none; stroke: var(--fig-text-muted); stroke-width: 1; }
.f-txt { fill: var(--fig-text); font-family: var(--font-sans); font-size: 12px; }
.f-txt-m { fill: var(--fig-text); font-family: var(--font-mono); font-size: 11.5px; }
.f-txt-p { fill: var(--fig-text-muted); font-family: var(--font-sans); font-size: 11px; }
.f-txt-g { font-weight: 600; }
.f-txt-zone { fill: var(--fig-zone-line); }
.f-txt-reel { fill: var(--fig-real); }
.f-txt-ref { fill: var(--fig-datum); font-weight: 700; }
.f-txt-palp { fill: var(--fig-probe); }
.f-txt-ok { fill: var(--ok); font-weight: 700; }
.f-txt-nok { fill: var(--danger); font-weight: 700; }
.f-repere { fill: var(--navy-900); }
:root[data-theme="dark"] .f-repere { fill: var(--primary); }
.f-repere-txt { fill: #fff; font-family: var(--font-sans); font-size: 11px; font-weight: 700; }
:root[data-theme="dark"] .f-repere-txt { fill: var(--on-primary); }
.f-halo { paint-order: stroke; stroke: var(--fig-bg); stroke-width: 3px; stroke-linejoin: round; }
.f-cadre-cote { fill: var(--fig-bg); stroke: var(--fig-line); stroke-width: 1.1; }
.f-cadre-ref { fill: var(--fig-bg); stroke: var(--fig-datum); stroke-width: 1.4; }
.f-cadre-svg { fill: var(--surface); stroke: var(--fig-line); stroke-width: 1.3; }
.sym-svg { fill: none; stroke: var(--fig-text); stroke-width: 1.7; stroke-linecap: round; }
.f-hachure { stroke: var(--fig-datum); stroke-width: 1.2; }
.f-trou { fill: var(--fig-bg); stroke: var(--fig-line); stroke-width: 1.2; }
.f-trou-plan { fill: var(--fig-bg); stroke: var(--fig-line); stroke-width: 1.3; }
.f-transp { fill-opacity: 0.55; }
.f-zone-corps { fill: var(--fig-zone); stroke: none; }
.f-zone-libre { stroke-dasharray: 4 3; fill-opacity: 0.6; }
.f-reel-axe { fill: none; stroke: var(--fig-real); stroke-width: 1.4; stroke-dasharray: 3 2; }
.f-reel-pt-mi { fill: var(--fig-bg); stroke: var(--fig-real); stroke-width: 1.4; }
.f-pt-hors { stroke: var(--danger); stroke-width: 2.4; }
.f-pt-ok { fill: var(--ok); stroke: var(--surface); stroke-width: 1.2; }
.f-pt-nok { fill: var(--danger); stroke: var(--surface); stroke-width: 1.2; }
.f-pt-a { fill: var(--fig-datum); stroke: var(--surface); stroke-width: 1; }
.f-pige { fill: var(--fig-line); fill-opacity: 0.85; stroke: var(--fig-line); stroke-width: 1; }
.f-section { fill: none; stroke: var(--fig-probe); stroke-width: 1.2; stroke-dasharray: 5 3; }
.f-fleche-ecart { fill: none; stroke: var(--fig-real); stroke-width: 2; }
.f-fleche-ecart-p { fill: var(--fig-real); }
.f-groupe-mesure { fill: none; stroke: var(--fig-real); stroke-width: 1.2; stroke-dasharray: 2 3; }
.f-fond { fill: var(--fig-bg); }
.f-mod { fill: none; stroke: var(--fig-text); stroke-width: 1.2; }
.f-txt-mod { font-size: 9.5px; font-weight: 600; }
.f-hachure-trait { stroke: var(--fig-line); stroke-width: 0.8; opacity: 0.6; }
.f-instrument { fill: var(--surface); stroke: var(--fig-line); stroke-width: 1.4; }
.f-stylet { fill: none; stroke: var(--fig-line); stroke-width: 2.4; stroke-linecap: round; }
.f-pastille-ok { fill: var(--ok); }
.f-pastille-nok { fill: var(--danger); }
.f-txt-pastille { fill: #fff; font-family: var(--font-sans); font-size: 11px; font-weight: 700; }
:root[data-theme="dark"] .f-txt-pastille { fill: #0b1220; }
.f-cone { fill: var(--fig-zone); stroke: none; }
.f-graphe-fond { fill: var(--surface); stroke: none; }
.f-reel-fin { stroke-width: 1.4; }
.f-ref-cercle { fill: none; stroke: var(--fig-datum); stroke-width: 1.6; stroke-dasharray: 6 3; }
.f-plan-section { fill: var(--fig-probe); fill-opacity: 0.12; }
.f-pointille { stroke-dasharray: 3 3; fill: none; }
.f-barre-ok { fill: var(--ok); fill-opacity: 0.85; }
.f-barre-nok { fill: var(--danger); fill-opacity: 0.85; }
.pastille-av { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.pastille-av--ok { background: var(--ok); } .pastille-av--moyen { background: var(--accent-ui); } .pastille-av--nok { background: var(--danger); }
.f-grille-ligne { stroke: var(--border); stroke-width: 1; }
.f-serie { fill: none; stroke: var(--fig-line); stroke-width: 1.4; }
.f-serie-2 { fill: none; stroke: var(--fig-hidden); stroke-width: 1.2; stroke-dasharray: 4 3; }
.f-limite { fill: none; stroke: var(--danger); stroke-width: 2.4; }
.f-bande { fill: var(--fig-zone); stroke: var(--fig-zone-line); stroke-width: 1; }
.f-axe-a { fill: none; stroke: var(--fig-hidden); stroke-width: 1.4; stroke-dasharray: 5 4; }
.f-ref-epais { stroke-width: 3; }
.f-ref-axe { stroke-dasharray: 12 3 2 3; }
.f-sans-fond { fill: none; }
.f-simulateur { fill: var(--fig-hidden); fill-opacity: 0.35; stroke: var(--fig-line); stroke-width: 1; }
.f-cercle-appui { fill: none; stroke: var(--fig-datum); stroke-width: 1.6; }
.f-mc { fill: none; stroke: var(--fig-zone-line); stroke-width: 1.6; stroke-dasharray: 6 4; }
.f-contour-nominal { fill: none; stroke: var(--fig-line); stroke-width: 1.8; }
.f-reel-contour { stroke: var(--fig-real); stroke-width: 2.2; }
.f-fantome { fill: none; stroke: var(--fig-hidden); stroke-width: 1; stroke-dasharray: 3 3; }
.f-associe { stroke-width: 2; }
.f-derive { fill: none; stroke: var(--fig-zone-line); stroke-width: 2; stroke-dasharray: 10 3 2 3; }
.f-taille { fill: none; stroke: var(--fig-zone-line); stroke-width: 1.6; }
.f-taille-p { fill: var(--fig-zone-line); }
.f-cote-nok { fill: none; stroke: var(--danger); stroke-width: 1.3; }
.f-enveloppe { fill: none; stroke: var(--fig-zone-line); stroke-width: 1.6; }
.f-touche { fill: var(--fig-hidden); stroke: var(--fig-line); stroke-width: 1; }
.hach-fond { fill: var(--fig-matter); }
.hach-trait { stroke: var(--fig-matter-2); stroke-width: 2.2; }
.f-interference { fill: var(--danger); fill-opacity: 0.55; stroke: none; }
.f-hachure-zone { fill: url(#hachures-matiere); stroke: var(--fig-line); stroke-width: 1; }
.f-trans { fill: none; stroke: var(--fig-line); stroke-width: 1.8; }
.f-trans-p { fill: var(--fig-line); }
.f-rot { fill: none; stroke: var(--fig-real); stroke-width: 1.8; }
.f-rot-p { fill: var(--fig-real); }
.f-txt-rot { fill: var(--fig-real); font-weight: 600; }
.f-coche { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.f-ref-contour { stroke: var(--fig-datum); stroke-width: 2; }
.leg-fleche { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--s-4); font-size: var(--fs-12); }
.leg-fleche::before { content: ""; width: 22px; height: 0; border-top: 2px solid var(--fig-line); }
.leg-fleche--rot::before { border-top-color: var(--fig-real); }
.vues-321 { display: grid; gap: var(--s-2); }
.vues-321 > div { display: grid; grid-template-columns: 150px 1fr; gap: var(--s-3); align-items: center; }
.vues-321 p { margin: 0; font-size: var(--fs-13); color: var(--text-2); }
.vues-321 .fig__svg { max-width: 150px; }
.ddl { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; }
.ddl--b { background: var(--fig-datum); }
.ddl--l { border: 2px solid var(--fig-real); }
/* Étapes illustrées (ex. construction d'un cadre, figure 4.1) */
.etapes-fig { list-style: none; margin: 0; padding: 0; }
.etapes-fig > li { display: grid; grid-template-columns: 28px minmax(0, 15rem) 120px minmax(0, 1fr); gap: var(--s-4); align-items: center; margin: 0; padding: var(--s-3) var(--s-4); }
.etapes-fig > li + li { border-top: var(--bw) solid var(--border); }
.etapes-fig .etapes-fig__n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy-900); color: var(--on-primary); font-size: 12px; font-weight: 700; }
:root[data-theme="dark"] .etapes-fig .etapes-fig__n { background: var(--primary); color: var(--on-primary); }
.etapes-fig .fig__svg { max-width: 120px; }
.etapes-fig h4 { font-size: var(--fs-14); margin-bottom: 2px; }
.etapes-fig p { font-size: var(--fs-13); color: var(--text-2); }
@media (max-width: 700px) {
  .etapes-fig > li { grid-template-columns: 28px minmax(0, 1fr); }
  .etapes-fig > li > :nth-child(3) { grid-column: 2; }
  .etapes-fig > li > :nth-child(4) { grid-column: 1 / -1; }
}
.f-sans-trait { stroke: none; }
.f-trou-3d { fill: var(--fig-bg); fill-opacity: 0.6; stroke: var(--fig-line); stroke-width: 1.2; }
.f-txt-petit { font-size: 10px; }
.fig__panneaux--plan { grid-template-columns: minmax(0, 1fr) 180px; }
.fig__panneaux--plan .fig__panneau:first-child .fig__svg { max-width: 560px; margin: 0 auto; }
@media (max-width: 700px) {
  .fig__panneaux--plan { grid-template-columns: minmax(0, 1fr); }
  .fig__panneaux--plan .fig__panneau:last-child .fig__svg { max-width: 150px; margin: 0 auto; }
}
.f-zone-bande { fill: none; stroke: var(--fig-zone); stroke-width: 14; }
/* Flux d'étapes groupées (chapitres 24, 29, annexes) : cartes numérotées, bandeau de couleur par temps */
.flux { list-style: none; margin: 0; padding: var(--s-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.flux > li { margin: 0; padding: var(--s-3); background: var(--surface); border: var(--bw) solid var(--border); border-top: 4px solid var(--flux-c, var(--accent-ui)); border-radius: var(--r-sm); min-width: 0; }
.flux__temps { display: block; font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-1); }
.flux__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--flux-c, var(--accent-ui)); color: var(--on-primary); font-size: 12px; font-weight: 700; margin-right: var(--s-2); }
.flux h4 { display: flex; align-items: center; font-size: var(--fs-14); margin: 0 0 var(--s-1); }
.flux p { font-size: var(--fs-13); color: var(--text-2); margin: 0; }
.flux > li[data-temps="1"] { --flux-c: var(--navy-700); }
.flux > li[data-temps="2"] { --flux-c: var(--blue-600); }
.flux > li[data-temps="3"] { --flux-c: var(--orange-700); }
.flux > li[data-temps="4"] { --flux-c: var(--k-reco); }
.flux > li[data-temps="5"] { --flux-c: var(--ok); }
.flux > li.flux--alerte { box-shadow: inset 0 0 0 2px var(--warn); }
.flux p.flux__ch { margin-top: var(--s-2); font-size: var(--fs-12); color: var(--text-muted); }
.flux > li.flux--reglage { border-left: 4px solid var(--orange-700); }
.flux__tag { display: inline-block; margin-top: var(--s-2); padding: 1px var(--s-2); border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-2); font-size: 11px; font-weight: 600; }
/* Données d'essai au format texte, à copier dans un logiciel (chapitre 29) */
.donnees-texte { margin: var(--s-4) 0; font-size: var(--fs-14); }
.donnees-texte summary { cursor: pointer; color: var(--link); font-weight: 500; width: fit-content; }
.donnees-texte pre { margin: var(--s-2) 0 0; padding: var(--s-3) var(--s-4); max-height: 22rem; overflow: auto; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-13); line-height: 1.5; }
/* Exercices : questions numérotées, corrigé à déplier, planche de symboles */
.questions { list-style: none; padding: 0; margin: var(--s-4) 0; display: grid; gap: var(--s-2); max-width: var(--read-max); }
.questions > li { display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--s-2); margin: 0; }
.questions__n { font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.corrige { margin: var(--s-4) 0; border: var(--bw) solid var(--border); border-left: 4px solid var(--ok); border-radius: var(--r-md); background: var(--surface); }
.corrige > summary { cursor: pointer; padding: var(--s-3) var(--s-4); font-weight: 600; color: var(--link); }
.corrige[open] > summary { border-bottom: var(--bw) solid var(--border); }
.corrige__corps { padding: var(--s-2) var(--s-4) var(--s-4); }
.planche { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s-3); padding: var(--s-4); }
.planche__case { position: relative; display: grid; place-items: center; min-height: 64px; border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); font-weight: 600; }
.planche__case .sym { width: 30px; height: 30px; }
.planche__l { position: absolute; top: -9px; left: -9px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-900); color: var(--on-primary); font-size: 12px; font-weight: 700; }
.planche__titre { grid-column: 1 / -1; margin: 0; font-size: var(--fs-14); font-weight: 600; }
.planche .mod, .planche .cote-encadree { font-size: var(--fs-16); }
.cadres-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); padding: var(--s-4); }
.cadres-liste h4 { margin: 0 0 var(--s-3); font-size: var(--fs-14); }
.cadres-liste__l { display: grid; grid-template-columns: 30px 1fr; gap: 2px var(--s-2); align-items: center; margin-bottom: var(--s-3); }
.cadres-liste__c { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cadres-liste__lib { grid-column: 2; font-size: var(--fs-13); color: var(--text-muted); }
.planche__l--en-ligne { position: static; }
.biblio { font-size: var(--fs-14); max-width: var(--read-max); }
.biblio li { margin-bottom: var(--s-2); overflow-wrap: anywhere; }
.memo-familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin: var(--s-4) 0; }
.memo-famille { border: var(--bw) solid var(--border); border-top: 4px solid var(--navy-700); border-radius: var(--r-sm); background: var(--surface); padding: var(--s-3); }
.memo-famille__tete { display: grid; margin-bottom: var(--s-2); font-size: var(--fs-14); }
.memo-famille__tete span { color: var(--text-muted); font-size: var(--fs-12); }
.memo-famille ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.memo-famille li { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-13); }
.memo-famille li .sym { width: 24px; height: 24px; flex: none; }
.memo-famille li span { display: grid; }
.memo-famille li i { color: var(--text-muted); font-size: var(--fs-12); }
.memo-exemples { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); margin: var(--s-3) 0; }
.memo-exemple { padding: var(--s-3); border: var(--bw) solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.memo-exemple p { margin: var(--s-2) 0 0; font-size: var(--fs-13); color: var(--text-2); }
.memo-coches { list-style: none; padding: 0; margin: var(--s-3) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-1) var(--s-4); }
.memo-coches li { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-1) 0; border-bottom: var(--bw) solid var(--border); font-size: var(--fs-14); }
.memo-coches input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--ok); }
@media print {
  .fiche-memo { break-after: page; }
  .fig__cartouche, .voir-aussi { display: none; }
}
.regles { counter-reset: regle; list-style: none; padding: 0; margin: var(--s-4) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); }
.regles > li { counter-increment: regle; position: relative; margin: 0; padding: var(--s-4) var(--s-4) var(--s-3) 56px; border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.regles > li::before { content: counter(regle); position: absolute; left: var(--s-4); top: var(--s-4); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange-700); color: var(--on-primary); font-weight: 700; font-size: 14px; }
.regles h3 { margin: 0 0 var(--s-2); font-size: var(--fs-16); }
.regles p { margin: 0 0 var(--s-2); font-size: var(--fs-14); color: var(--text-2); }
.regles__reflexe { color: var(--text); }
.regles p.regles__ch { margin: 0; font-size: var(--fs-12); color: var(--text-muted); }
.lire { list-style: none; margin: 0; padding: var(--s-4); display: grid; gap: var(--s-2); }
.lire__etape { display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(0, 2fr); gap: var(--s-2) var(--s-3); align-items: start; margin: 0; }
.lire__q { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-3); border-radius: var(--r-sm); background: var(--navy-900); color: var(--on-primary); }
.lire__q .flux__n { background: var(--orange-700); flex: none; }
.lire__q small { display: block; color: var(--on-primary); opacity: 0.8; font-size: var(--fs-12); }
.lire__action { padding: var(--s-3); border: var(--bw) solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-13); color: var(--text-2); }
.lire__rep { font-weight: 700; color: var(--text); }
.lire__suite { grid-column: 1; font-size: var(--fs-12); color: var(--text-muted); padding-left: var(--s-4); }
.lire__verdicts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s-2); }
.verdict-carte { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-13); text-align: center; }
.verdict-carte b { text-transform: uppercase; letter-spacing: 0.04em; }
.verdict-carte--ok { background: var(--ok-soft); color: var(--ok); border: var(--bw) solid var(--ok); }
.verdict-carte--indecis { background: var(--undecided-soft); color: var(--undecided); border: var(--bw) solid var(--undecided); }
.verdict-carte--nok { background: var(--danger-soft); color: var(--danger); border: var(--bw) solid var(--danger); }
.lire__note { margin: 0 var(--s-4) var(--s-4); padding: var(--s-3); border-radius: var(--r-sm); background: var(--undecided-soft); font-size: var(--fs-13); color: var(--text); }
@media (max-width: 640px) { .lire__etape { grid-template-columns: 1fr; } }
.rapport-type { margin: var(--s-5) 0; padding: var(--s-4); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.rapport-type__tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-2); border-bottom: 2px solid var(--navy-700); font-size: var(--fs-14); text-transform: uppercase; letter-spacing: 0.04em; }
.rapport-type__tete span { text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: var(--fs-13); }
.rapport-type__entete, .rapport-type__lecture { font-size: var(--fs-13); color: var(--text-2); margin: var(--s-2) 0; }
.ap { font-size: 1.05em; }
.ap--a { color: var(--ok); }
.ap--p { color: var(--undecided); }
.ap--n { color: var(--text-muted); }
.coches th[scope="row"] { white-space: normal; }
.coches input[type="checkbox"] { width: 18px; height: 18px; margin: 0 var(--s-2) 0 0; vertical-align: -3px; accent-color: var(--ok); }
.coches label { cursor: pointer; }
.fiche-entete td { height: 2.2rem; }
.arbre { padding: var(--s-4); }
.arbre__racine { margin: 0 0 var(--s-3); text-align: center; font-weight: 700; }
.arbre__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s-3); }
.arbre__col { border: var(--bw) solid var(--border); border-top: 4px solid var(--navy-700); border-radius: var(--r-sm); background: var(--surface); padding: var(--s-3); min-width: 0; }
.arbre__tete { display: grid; margin-bottom: var(--s-2); font-size: var(--fs-14); }
.arbre__tete span { color: var(--text-muted); font-size: var(--fs-12); }
.arbre__q { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--fs-13); }
.arbre__q li { display: grid; gap: 2px; }
.arbre__question { font-weight: 600; }
.arbre__oui { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--ok); }
.arbre__oui .sym { width: 16px; height: 16px; }
.arbre__oui b { color: var(--text); }
.arbre__non { color: var(--text-muted); font-size: var(--fs-12); }
.arbre__note { margin: var(--s-3) 0 0; font-size: var(--fs-13); color: var(--text-2); }
.decomp-liste { display: grid; padding: var(--s-2) var(--s-4) var(--s-4); }
.decomp { display: grid; grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.6fr); gap: var(--s-3); align-items: start; padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--border); }
.decomp:last-child { border-bottom: 0; }
.decomp__ex { display: grid; font-size: var(--fs-14); }
.decomp__ex span { color: var(--text-muted); font-size: var(--fs-13); }
.decomp__roles { font-size: var(--fs-13); color: var(--text-2); }
.decomp__roles ol { margin: 0 0 var(--s-1); padding-left: 1.4em; }
.decomp__roles p { margin: 0; color: var(--text-muted); }
@media (max-width: 640px) { .decomp { grid-template-columns: 1fr; } }
.cote-encadree { display: inline-block; padding: 0 6px; border: 1.5px solid currentColor; font-family: var(--font-mono); }
/* Vignettes isométriques de pièces (chapitre 30, études de cas) */
.f-iso-haut { fill: var(--fig-bg); stroke: var(--fig-line); stroke-width: 1; stroke-linejoin: round; }
.f-iso-g { fill: var(--fig-matter); stroke: var(--fig-line); stroke-width: 1; stroke-linejoin: round; }
.f-iso-d { fill: var(--fig-matter-2); stroke: var(--fig-line); stroke-width: 1; stroke-linejoin: round; }
.f-iso-tol { fill: var(--fig-zone); stroke: var(--fig-zone-line); stroke-width: 1.3; stroke-linejoin: round; }
.f-iso-tol-trait { fill: none; stroke: var(--fig-zone-line); stroke-width: 1.6; }
.f-sans-trait { stroke-width: 0; }
.f-transp path { fill-opacity: 0.55; }
.dl { font-size: 1.1em; line-height: 1; }
.dl--bloque { color: var(--ok); }
.dl--libre { color: var(--text-muted); }
.f-iso-maille { fill: none; stroke: var(--fig-line); stroke-width: 0.6; opacity: 0.55; }
.pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); padding: var(--s-4); }
.piece { margin: 0; padding: var(--s-3); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.piece h4 { margin: 0 0 var(--s-2); font-size: var(--fs-14); }
.piece .fig__svg { display: block; width: 100%; height: auto; }
.piece__tol { list-style: none; margin: var(--s-2) 0 0; padding: 0; font-size: var(--fs-13); color: var(--text-2); }
.piece__tol li { display: flex; align-items: center; gap: var(--s-2); margin: 2px 0; }
.piece__tol .sym { width: 16px; height: 16px; flex: none; }
.f-ref-pt-creux { fill: var(--fig-bg); stroke: var(--fig-datum); stroke-width: 1.5; }
.f-cercle-ok { fill: none; stroke: var(--ok); stroke-width: 1.8; }
.f-cercle-nok { fill: none; stroke: var(--danger); stroke-width: 1.4; stroke-dasharray: 6 4; }
.f-tirets { stroke-dasharray: 4 3; }
.f-barre-ok { fill: var(--ok); }
.f-barre-indecis { fill: var(--undecided); }
.f-barre-nok { fill: var(--danger); }
/* Zones de décision (chapitre 28, annexe T) */
.f-zone-ok { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 0.8; }
.f-zone-indecis { fill: var(--undecided-soft); stroke: var(--undecided); stroke-width: 0.8; }
.f-zone-nok { fill: var(--danger-soft); stroke: var(--danger); stroke-width: 0.8; }
.f-pt-indecis { fill: var(--undecided); stroke: var(--surface); stroke-width: 1.2; }
/* Tableau-carte « ce que voient N points » (chapitre 26) */
.carte-vue { border-collapse: separate; border-spacing: 2px; font-family: var(--font-mono); font-size: var(--fs-13); }
.carte-vue th, .carte-vue td { padding: 3px 8px; text-align: center; border: 0; }
.carte-vue td.vue-ok { background: var(--ok-soft); color: var(--text); }
.carte-vue td.vue-moy { background: var(--warn-soft); color: var(--text); }
.carte-vue td.vue-nul { background: var(--danger-soft); color: var(--text); font-weight: 600; }
.duo-fig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: var(--s-4); padding: var(--s-4); align-items: start; }
@media (max-width: 700px) { .duo-fig { grid-template-columns: minmax(0, 1fr); } }
.duo-fig h4 { font-size: var(--fs-13); font-weight: 600; margin: 0 0 var(--s-2); }
.duo-fig .tab-defil { margin: 0; }
.fig__note { font-size: var(--fs-13); color: var(--text-2); margin-top: var(--s-2); }
/* Carte d'écarts (profils de surface) : échelle divergente sur les jetons de figure ; − vers la matière, + hors matière */
.f-ech { stroke: var(--fig-line); stroke-width: 0.6; stroke-opacity: 0.35; }
.f-ech-n3 { fill: var(--fig-zone-line); fill-opacity: 0.85; }
.f-ech-n2 { fill: var(--fig-zone-line); fill-opacity: 0.55; }
.f-ech-n1 { fill: var(--fig-zone-line); fill-opacity: 0.28; }
.f-ech-0 { fill: var(--fig-bg); }
.f-ech-p1 { fill: var(--fig-real); fill-opacity: 0.28; }
.f-ech-p2 { fill: var(--fig-real); fill-opacity: 0.55; }
.f-ech-p3 { fill: var(--fig-real); fill-opacity: 0.85; }
.f-ech-hors { fill: var(--danger); stroke: var(--danger); stroke-width: 2.4; stroke-opacity: 1; }
.f-txt-ech { fill: var(--fig-text); font-family: var(--font-mono); font-size: 10px; font-weight: 500; }
.f-txt-ech-inv { fill: var(--fig-bg); }
.fig__panneaux--pile { grid-template-columns: minmax(0, 1fr); }
.fig__panneaux--pile .fig__panneau + .fig__panneau { border-left: 0; border-top: var(--bw) solid var(--border); }
.fig__panneaux--pile .fig__svg { max-width: 640px; margin: 0 auto; }
.fig__panneaux .fig__svg--etroit { max-width: 400px; margin: 0 auto; }
.fig__panneaux--grille2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fig__panneaux--grille2 .fig__svg { max-width: 230px; margin: 0 auto; }
/* Tableaux à plusieurs colonnes : largeur minimale, défilement interne sur petit écran */
.tab--n3 { min-width: 520px; }
.tab--n4 { min-width: 640px; }
.tab--n5, .tab--n6 { min-width: 680px; }
.fig__panneaux--grille2 .fig__panneau:nth-child(odd) { border-left: 0; }
.fig__panneaux--grille2 .fig__panneau:nth-child(n+3) { border-top: var(--bw) solid var(--border); }
.fig__panneau h4 small { font-weight: 400; color: var(--text-muted); }
.fig__cadre-titre { display: block; margin-top: var(--s-2); }
.txt-ok { color: var(--ok); }
.txt-nok { color: var(--danger); }
@media (max-width: 700px) {
  .fig__panneau + .fig__panneau { border-left: 0; border-top: var(--bw) solid var(--border); }
  .fig__panneaux--grille2 .fig__panneau:nth-child(2) { border-left: var(--bw) solid var(--border); border-top: 0; }
  .fig__panneaux--grille2 .fig__panneau:nth-child(4) { border-left: var(--bw) solid var(--border); }
  .fig__panneaux--grille2 .fig__panneau { padding: var(--s-3); }
}

/* ---- Tableaux ---- */
.tab-defil { position: relative; /* contient les textes masqués (.sr-only) des cellules */ margin: var(--s-6) 0; overflow-x: auto; border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.tab-defil:focus-visible { outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
caption { padding: var(--s-3) var(--s-4); text-align: left; font-size: var(--fs-13); color: var(--text-muted); caption-side: top; border-bottom: var(--bw) solid var(--border); }
caption b { color: var(--text); font-weight: 600; }
th, td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: var(--bw) solid var(--border); }
thead th { font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); white-space: nowrap; }
.unite { text-transform: none; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 600; color: var(--text); }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-size: var(--fs-13); white-space: nowrap; }
tr.ligne-nok > * { background: var(--danger-soft); }
.verdict {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r-xs);
  font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
}
.verdict--ok { background: var(--ok-soft); color: var(--ok); }
.verdict--nok { background: var(--danger-soft); color: var(--danger); }
.verdict--indecis { background: var(--undecided-soft); color: var(--undecided); }
.verdict--neutre { background: var(--surface-sunken); color: var(--text-2); }

/* ---- Formules ---- */
.formule {
  margin: var(--s-4) 0; padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md); background: var(--surface); border: var(--bw) solid var(--border);
  font-family: var(--font-mono); font-size: var(--fs-15);
  display: grid; grid-template-columns: minmax(0, max-content) 1fr; gap: var(--s-2) var(--s-5); align-items: baseline;
}
.formule__lib { font-family: var(--font-sans); font-size: var(--fs-13); color: var(--text-muted); font-weight: 600; }
.formule__expr { overflow-wrap: anywhere; }
.formule__expr b { font-weight: 600; }
.formule .res-nok { color: var(--danger); font-weight: 600; }
.formule .res-ok { color: var(--ok); font-weight: 600; }
.formule-cle {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-4);
  margin: var(--s-5) 0; padding: var(--s-5); border-radius: var(--r-md);
  background: var(--primary-soft); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-20);
}
.formule-cle small { font-family: var(--font-sans); font-size: var(--fs-13); color: var(--text-2); }

/* ---- Fiches de calcul (Données → Calcul → Résultat → Décision) ---- */
.etapes-calc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: var(--s-6) 0; border: var(--bw) solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); counter-reset: etape; }
.etapes-calc > div { padding: var(--s-4); font-size: var(--fs-14); position: relative; }
.etapes-calc > div + div { border-left: var(--bw) solid var(--border); }
.etapes-calc h4 { counter-increment: etape; font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-2); }
.etapes-calc h4::before { content: counter(etape) " · "; color: var(--accent-ui); }
.etapes-calc .decision-nok { background: var(--danger-soft); }

/* ---- Chaîne du besoin à la décision (Fonction → … → Décision) ---- */
.chaine { margin: var(--s-6) 0 0; }
.chaine ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; }
.chaine li { margin: 0; }
.chaine a, .chaine span.etape {
  display: flex; flex-direction: column; gap: 2px; height: 100%;
  padding: var(--s-2) var(--s-2) var(--s-2); border-top: 3px solid var(--border-strong);
  background: var(--surface); text-decoration: none; color: var(--text-2);
  font-size: 11.5px; line-height: 1.25; font-weight: 600;
}
.chaine li:first-child a { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.chaine li:last-child a { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.chaine a:hover { background: var(--primary-soft); color: var(--text); }
.chaine a.actif { border-top-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.chaine .lettres { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-muted); }

/* ---- Workflow éditorial ---- */
.workflow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); font-size: var(--fs-12); }
.workflow li { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--s-2); border-radius: var(--r-pill); color: var(--text-muted); border: var(--bw) solid var(--border); background: var(--surface); }
.workflow li[aria-current="step"] { color: var(--warn); border-color: var(--warn); font-weight: 700; background: var(--warn-soft); }
.workflow li + li::before { content: ""; width: 0; }

/* ---- Fil d'Ariane ---- */
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--fs-13); color: var(--text-muted); }
.fil li { margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); }
.fil li + li::before { content: "/"; color: var(--border-strong); }
.fil a { color: var(--text-2); text-decoration: none; }
.fil a:hover { color: var(--link); text-decoration: underline; }
.fil [aria-current="page"] { color: var(--text); font-weight: 500; }

/* ---- Sommaire (TOC) ---- */
.toc__titre { font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-3); }
.toc__liste { list-style: none; margin: 0; padding: 0; border-left: var(--bw) solid var(--border); }
.toc__liste li { margin: 0; }
.toc__liste a {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--s-2); align-items: baseline;
  margin-left: -1px; padding: 5px var(--s-2) 5px var(--s-3); border-left: 2px solid transparent;
  color: var(--text-2); text-decoration: none; font-size: var(--fs-13); line-height: 1.4;
}
.toc__liste a:hover { color: var(--text); border-left-color: var(--border-strong); }
.toc__liste a.actif { color: var(--primary-hover); border-left-color: var(--primary); font-weight: 600; }
:root[data-theme="dark"] .toc__liste a.actif { color: var(--link); }
.toc__lettre { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); font-weight: 600; }
.toc__appro { font-size: 10px; color: var(--text-muted); font-weight: 500; margin-left: 4px; }
html:not([data-mode="essentiel"]) .toc__appro { display: none; }
.toc__bloc { margin-top: var(--s-8); padding-top: var(--s-5); border-top: var(--bw) solid var(--border); font-size: var(--fs-13); }
.toc__bloc ul { list-style: none; padding: 0; margin: 0; }
.toc__bloc li + li { margin-top: var(--s-2); }
.toc__bloc a { color: var(--text-2); }

/* Sommaire replié (< 960 px) */
.toc-mobile { display: none; margin: var(--s-5) 0 0; border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.toc-mobile summary { padding: var(--s-3) var(--s-4); cursor: pointer; font-weight: 600; font-size: var(--fs-14); }
.toc-mobile .toc__liste { margin: 0 var(--s-4) var(--s-4); }
@media (max-width: 959px) { .toc-mobile { display: block; } }

/* ---- Mode Essentiel : replis (le contenu reste disponible) ---- */
.repli {
  display: none; width: 100%; margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4);
  border: var(--bw) dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text-2); text-align: left; font-size: var(--fs-14);
}
.repli:hover { border-color: var(--primary); color: var(--text); }
.repli b { color: var(--link); font-weight: 600; }
html[data-mode="essentiel"] [data-niveau="approfondi"]:not(.deplie) > .repli { display: block; }
html[data-mode="essentiel"] [data-niveau="approfondi"]:not(.deplie) > :not(.repli):not(.rub-tete) { display: none; }

/* ---- Recherche (dialogue) ---- */
.recherche-dialogue {
  width: min(720px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 48px));
  margin: 8vh auto auto; padding: 0;
  border: var(--bw) solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-3);
  overflow: hidden;
}
.recherche-dialogue::backdrop { background: rgba(10, 18, 34, 0.55); }
.recherche-dialogue[open] { display: flex; flex-direction: column; }
.rech-champ { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); border-bottom: var(--bw) solid var(--border); }
.rech-champ > svg { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; }
.rech-champ input {
  flex: 1; min-width: 0; height: 56px; border: 0; background: transparent; outline: none;
  font-size: var(--fs-18);
}
.rech-champ input::placeholder { color: var(--text-muted); }
.rech-corps { overflow-y: auto; padding: var(--s-2); }
.rech-aide { padding: var(--s-3) var(--s-3) var(--s-2); font-size: var(--fs-13); color: var(--text-muted); }
.rech-statut { padding: var(--s-2) var(--s-3); font-size: var(--fs-12); color: var(--text-muted); }
.rech-liste { list-style: none; margin: 0; padding: 0; }
.rech-liste li { margin: 0; }
.rech-res {
  display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s-3); align-items: start;
  padding: var(--s-3); border-radius: var(--r-md); cursor: pointer; color: var(--text); text-decoration: none;
}
.rech-res[aria-selected="true"], .rech-res:hover { background: var(--primary-soft); }
.rech-res[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--primary); }
.rech-res__ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--surface-sunken); color: var(--text-2); font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
.rech-res__ico .sym { width: 22px; height: 22px; }
.rech-res__titre, .rech-res__cat, .rech-res__extrait, .rech-res__termes { display: block; }
.rech-res__titre { font-weight: 600; font-size: var(--fs-15); }
.rech-res__en { font-weight: 400; color: var(--text-muted); font-style: italic; }
.rech-res[aria-disabled="true"] { cursor: default; }
.rech-res[aria-disabled="true"] .rech-res__titre { color: var(--text-2); }
.rech-res__cat { font-size: var(--fs-12); color: var(--text-muted); margin-top: 1px; }
.rech-res__extrait { font-size: var(--fs-13); color: var(--text-2); margin-top: var(--s-1); line-height: 1.45; }
.rech-res mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.rech-res__termes { font-size: 11.5px; color: var(--text-muted); margin-top: var(--s-1); }
.rech-res__etat { align-self: center; }
.rech-vide { padding: var(--s-8) var(--s-4); text-align: center; color: var(--text-2); }
.rech-vide strong { display: block; font-size: var(--fs-16); color: var(--text); margin-bottom: var(--s-2); }
.rech-pied { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-4); border-top: var(--bw) solid var(--border); background: var(--surface-2); font-size: var(--fs-12); color: var(--text-muted); }

/* ---- Champs de formulaire ---- */
.champ { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.champ label, .champ .champ__lib { font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.champ input, .champ select {
  height: 40px; padding: 0 var(--s-3); width: 100%;
  border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); font-family: var(--font-mono); font-size: var(--fs-14);
}
.champ select { font-family: var(--font-sans); }
.champ textarea {
  width: 100%; padding: var(--s-2) var(--s-3); resize: vertical;
  border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-14); line-height: 1.5;
}
.champ input, .champ select { color: var(--text); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.champ textarea[aria-invalid="true"], .champ select[aria-invalid="true"] { border-color: var(--danger); }
.champ__aide { font-size: var(--fs-12); color: var(--text-muted); }
.champ input[aria-invalid="true"] { border-color: var(--danger); }
.champ__erreur { font-size: var(--fs-12); color: var(--danger); font-weight: 600; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; font-size: var(--fs-14); }

/* =========================================================================
   Animations pilotables (src/js/animations.js)
   ========================================================================= */
.anim { margin: var(--s-6) 0; border: var(--bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.anim__attente { padding: var(--s-5); color: var(--text-2); font-size: var(--fs-14); }
.anim__outils {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--border); background: var(--surface-2);
}
.anim__outils .btn svg { width: 16px; height: 16px; }
.anim__plein { margin-left: auto; }
.anim__corps { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr); }
.anim__corps--pile { grid-template-columns: minmax(0, 1fr); }
.anim__corps--large { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
.anim__scene { min-width: 0; padding: var(--s-4); background: var(--fig-bg); border-right: var(--bw) solid var(--border); }
.anim__corps--pile .anim__scene { border-right: 0; border-bottom: var(--bw) solid var(--border); }
.anim__panneau { min-width: 0; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.anim__corps--pile .anim__panneau { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; gap: var(--s-3) var(--s-6); }
.anim__corps--pile .anim__panneau .an-resultats { grid-column: 1 / -1; }
.anim__etat { margin: 0; padding: var(--s-2) var(--s-4); min-height: 2.4em; border-top: var(--bw) solid var(--border); font-size: var(--fs-14); color: var(--text); background: var(--surface-2); }
.anim__aide { margin: 0; padding: var(--s-2) var(--s-4) var(--s-3); font-size: var(--fs-13); color: var(--text-muted); display: flex; gap: var(--s-2); align-items: flex-start; }
.anim__aide svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.anim__erreur { padding: var(--s-4); color: var(--danger); }
.anim--plein { overflow: auto; border-radius: 0; background: var(--bg); }
.anim--plein .anim__corps { min-height: calc(100vh - 140px); }
.anim--plein .an-svg--3d { max-height: calc(100vh - 220px); }
@media (max-width: 899px) {
  .anim__corps, .anim__corps--large { grid-template-columns: minmax(0, 1fr); }
  .anim__scene { border-right: 0; border-bottom: var(--bw) solid var(--border); }
  .anim__plein { margin-left: 0; }
}
@media print { .anim__outils, .anim__aide { display: none; } }

/* Éléments de commande */
.an-titre { font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin: var(--s-1) 0 0; }
.an-curseur { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-2); align-items: baseline; }
.an-curseur label { font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.an-curseur__val { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--text); }
.an-curseur input { grid-column: 1 / -1; width: 100%; accent-color: var(--primary); min-height: 28px; }
.an-bascule { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); font-weight: 600; color: var(--text); cursor: pointer; }
.an-bascule input { width: 18px; height: 18px; accent-color: var(--primary); }
.an-bascule:has(input:disabled) { color: var(--text-muted); cursor: not-allowed; }
.an-cas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.an-refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.an-ref {
  display: grid; gap: 2px; justify-items: start; text-align: left; padding: var(--s-2) var(--s-3);
  border: var(--bw-strong) solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text-2);
}
.an-ref__l { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-18); color: var(--text); }
.an-ref__lib { font-size: var(--fs-12); font-weight: 600; }
.an-ref__rang { font-size: 11.5px; color: var(--text-muted); }
.an-ref[aria-pressed="true"] { border-color: var(--fig-datum); background: var(--fig-datum-soft); }
.an-ref[aria-pressed="true"] .an-ref__l { color: var(--fig-datum-text); }
.an-ref:hover { border-color: var(--fig-datum); }
.an-cadre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.an-cadre__lib { font-size: var(--fs-12); color: var(--text-muted); }
.an-ddl { display: grid; gap: 4px; }
.an-ddl__ligne {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 36px; grid-template-areas: "nom etat jouer" "rng rng jouer";
  gap: 2px var(--s-2); align-items: center; padding: 6px var(--s-2); border-radius: var(--r-sm); border: var(--bw) solid var(--border);
}
.an-ddl__nom { grid-area: nom; display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--fs-13); color: var(--text-2); min-width: 0; }
.an-ddl__nom b { font-family: var(--font-mono); color: var(--text); min-width: 1.8em; }
.an-ddl__etat { grid-area: etat; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--text-muted); }
.an-ddl__etat svg { width: 14px; height: 14px; }
.an-ddl__ligne input { grid-area: rng; width: 100%; accent-color: var(--primary); }
.an-ddl__jouer { grid-area: jouer; width: 34px; height: 34px; }
.an-ddl__jouer svg { width: 16px; height: 16px; }
.an-ddl__ligne--bloque { background: var(--fig-datum-soft); border-color: transparent; }
.an-ddl__ligne--bloque .an-ddl__etat { color: var(--fig-datum-text); font-weight: 600; }
.an-bilan { margin: 0; font-size: var(--fs-14); color: var(--text-2); }
.an-resultats { display: grid; gap: var(--s-2); }
.an-valeurs { margin: 0; display: grid; gap: 2px; }
.an-valeurs div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 5px 0; border-bottom: var(--bw) dashed var(--border); font-size: var(--fs-13); }
.an-valeurs dt { color: var(--text-2); }
.an-valeurs dd { margin: 0; font-family: var(--font-mono); font-weight: 600; color: var(--text); white-space: nowrap; }
.an-decision { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-14); }
.an-note { margin: 0; font-size: var(--fs-13); color: var(--text-muted); }
.an-verdict { display: inline-flex; align-items: center; padding: 1px var(--s-2); border-radius: var(--r-xs); font-size: var(--fs-12); font-weight: 700; white-space: nowrap; }
.an-verdict--ok { color: var(--ok); background: var(--ok-soft); }
.an-verdict--nok { color: var(--danger); background: var(--danger-soft); }
.an-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.an-table caption { text-align: left; font-size: var(--fs-12); color: var(--text-muted); padding-bottom: var(--s-1); }
.an-table th, .an-table td { padding: 5px var(--s-2); border-bottom: var(--bw) solid var(--border); text-align: left; }
.an-table thead th { font-size: var(--fs-12); color: var(--text-muted); font-weight: 600; }
.an-table .num { text-align: right; font-family: var(--font-mono); }
.an-avert { display: flex; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-13); }
.an-avert svg { width: 18px; height: 18px; flex-shrink: 0; }
.an-avert--erreur { background: var(--k-err-soft); color: var(--k-err); }
.an-avert--attention { background: var(--k-att-soft); color: var(--k-att); }

/* Scènes */
.an-svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); touch-action: pan-y; }
.an-svg--3d { max-height: 460px; cursor: grab; touch-action: none; }
.an-svg--3d.glisse { cursor: grabbing; }
.an-svg--glisser { cursor: crosshair; touch-action: none; }
.an-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.an-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.an-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 899px) { .an-trois { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .an-duo { grid-template-columns: minmax(0, 1fr); } }
.an-mini { margin: 0; border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--fig-bg); overflow: hidden; }
.an-mini__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: var(--bw) solid var(--border); background: var(--surface); font-size: var(--fs-13); }
.an-mini__lib { font-weight: 600; color: var(--text); margin-right: auto; }
.an-mini__sym .sym { width: 18px; height: 18px; }

.an-txt { font-size: 13px; fill: var(--fig-text); font-weight: 600; }
.an-txt-p { font-size: 11.5px; fill: var(--fig-text-muted); }
.an-txt-ref { fill: var(--fig-datum); font-weight: 700; }
.an-txt-ted { font-family: var(--font-mono); font-weight: 500; }
.an-txt-calibre { fill: var(--ok); }
.an-matiere { fill: var(--fig-matter); }
.an-zone { fill: var(--fig-zone); stroke: none; }
.an-zone--bonus { fill: none; stroke: var(--fig-zone-line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.an-svg circle.an-zone { stroke: var(--fig-zone-line); stroke-width: 1.6; }
.an-zone-bord { fill: none; stroke: var(--fig-zone-line); stroke-width: 1.6; }
.an-theo { fill: none; stroke: var(--fig-theo); stroke-width: 1.2; stroke-dasharray: 8 3 2 3; }
.an-reel { fill: none; stroke: var(--fig-real); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.an-ref { stroke: var(--fig-datum); stroke-width: 3; }
.an-cote { stroke: var(--fig-line); stroke-width: 1; }
.an-ted { fill: var(--surface); stroke: var(--fig-line); stroke-width: 1.2; }
.an-echelle { stroke: var(--fig-text-muted); stroke-width: 1.5; }
.an-axe-theo { fill: none; stroke: var(--fig-theo); stroke-width: 1; stroke-dasharray: 10 3 2 3; }
.an-axe-ref { fill: none; stroke: var(--fig-datum); stroke-width: 1.2; stroke-dasharray: 10 3 2 3; }
.an-rayon { stroke: var(--fig-text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.an-point { stroke: var(--surface); stroke-width: 2; }
.an-point--ok { fill: var(--fig-probe); }
.an-point--nok { fill: var(--danger); }
.an-trou { fill: var(--fig-bg); stroke: var(--fig-line); stroke-width: 2; }
.an-calibre { stroke-width: 2; }
.an-calibre--ok { fill: var(--ok-soft); stroke: var(--ok); }
.an-calibre--nok { fill: var(--danger-soft); stroke: var(--danger); }
.an-cartouche { fill: var(--surface); stroke: var(--border-strong); }
.an-piece { fill: var(--fig-matter); stroke: var(--fig-real); stroke-width: 2; }
.an-centre { stroke: var(--fig-real); stroke-width: 1.5; }
.an-repere { fill: var(--fig-line); }
.an-touche { stroke: var(--fig-line); stroke-width: 3; stroke-linecap: round; }
.an-comparateur-corps { fill: var(--fig-matter-2); stroke: var(--fig-line); }
.an-cadran { fill: var(--surface); stroke: var(--fig-line); stroke-width: 2; }
.an-aiguille { stroke: var(--danger); stroke-width: 2.2; stroke-linecap: round; }
.an-grille { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.an-bande { fill: var(--fig-zone); }

/* Scène 3D */
.a3-plan { fill: var(--fig-datum-soft); stroke: var(--fig-datum); stroke-width: 1.4; }
.a3-plan--alerte { fill: var(--danger-soft); stroke: var(--danger); stroke-width: 2.4; }
.a3-face { stroke: none; fill-opacity: 0.8; }
.a3-face--1 { fill: var(--a3-f1); }
.a3-face--2 { fill: var(--a3-f2); }
.a3-face--3 { fill: var(--a3-f3); }
.a3-face--4 { fill: var(--a3-f4); }
.a3-arete { fill: none; stroke: var(--fig-line); stroke-width: 1.6; stroke-linejoin: round; }
.a3-fantome { fill: none; stroke: var(--fig-theo); stroke-width: 1; stroke-dasharray: 5 4; }
.a3-point { fill: var(--fig-datum); stroke: var(--surface); stroke-width: 1.5; }
.a3-txt-point { font-size: 11px; font-weight: 700; fill: var(--fig-datum); paint-order: stroke; stroke: var(--fig-bg); stroke-width: 3px; }
.a3-lettre-fond { fill: var(--surface); stroke: var(--fig-datum); stroke-width: 1.6; }
.a3-lettre { font-size: 14px; font-weight: 700; fill: var(--fig-datum); font-family: var(--font-mono); }
.a3-mvt { fill: none; stroke: var(--fig-real); stroke-width: 2.6; stroke-linecap: round; }
.a3-axe-mvt { stroke: var(--fig-real); stroke-width: 1; stroke-dasharray: 6 4; }
.a3-txt-mvt { font-size: 14px; font-weight: 700; fill: var(--fig-real); font-family: var(--font-mono); paint-order: stroke; stroke: var(--fig-bg); stroke-width: 3px; }
.a3-pointe { fill: var(--fig-real); }
.a3-pointe-t { fill: var(--fig-line); }
.a3-triedre { stroke: var(--fig-line); stroke-width: 1.6; }
.a3-txt-axe { font-size: 12px; font-weight: 700; fill: var(--fig-text); font-family: var(--font-mono); }

/* Lire un cadre */
.an-symboles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--s-2); }
.an-symbole {
  display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: var(--s-1) var(--s-2);
  border: var(--bw) solid var(--border-strong); border-radius: var(--r-md); background: var(--surface);
  font-size: var(--fs-12); font-weight: 600; color: var(--text-2); text-align: left;
}
.an-symbole .sym { width: 22px; height: 22px; flex-shrink: 0; color: var(--text); }
.an-symbole:hover { border-color: var(--primary); }
.an-symbole[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--primary); }
.an-cadre-vue { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.an-cadre-vue__cadre { display: flex; justify-content: center; padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: var(--bw) solid var(--border); }
.cadre--grand { font-size: clamp(1.2rem, 3vw, 1.7rem); }
.an-lecture { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.an-lecture li { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3); font-size: var(--fs-14); padding-bottom: var(--s-2); border-bottom: var(--bw) solid var(--border); }
.an-lecture b { color: var(--text); }
.an-lecture span { color: var(--text-2); }
@media (max-width: 599px) { .an-lecture li { grid-template-columns: 1fr; gap: 2px; } }
.an-dec { stroke: none; }
.an-dec--ok { fill: var(--ok-soft); }
.an-dec--indecis { fill: var(--undecided-soft); }
.an-dec--nok { fill: var(--danger-soft); }
.an-limite { stroke: var(--fig-line); stroke-width: 2; }
.an-mesure { stroke: var(--fig-real); stroke-width: 2.4; }
.an-mesure-point { fill: var(--fig-real); stroke: var(--surface); stroke-width: 2; }
.an-intervalle { stroke: var(--fig-real); stroke-width: 2; stroke-linecap: round; }
.an-verdict--indecis { color: var(--undecided); background: var(--undecided-soft); }
.an-groupe { display: grid; gap: var(--s-2); align-content: start; }
.an-ddl__ligne--bloque input { display: none; }
.an-ddl__ligne--bloque { grid-template-areas: "nom etat jouer"; }
.anim[data-anim="decision"] .an-svg { max-width: 760px; margin: 0 auto; }
.anim[data-anim="ddl"] .an-svg--3d { position: sticky; top: calc(var(--topbar-h) + 72px); }

/* =========================================================================
   Lecteur des vidéos des tolérances (src/js/video.js, D-43, D-45).
   Commandes en couleur d'action (primary) : l'orange reste un repère, jamais une action.
   ========================================================================= */
.lecteur { margin: var(--s-6) 0; border: var(--bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; scroll-margin-top: calc(var(--topbar-h) + 64px); }
.lecteur__ecran { position: relative; background: var(--scrim); aspect-ratio: 16 / 9; }
.lecteur__ecran:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.lecteur__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
.lecteur__soustitre {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); max-width: 86%; margin: 0;
  padding: 4px 12px; border-radius: var(--r-sm); background: rgba(8, 13, 24, 0.82); color: #fff;
  font-size: clamp(0.85rem, 2.1vw, 1.35rem); line-height: 1.35; text-align: center; pointer-events: none;
}
.lecteur__grand {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 0;
  background: var(--primary); color: var(--on-primary); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.lecteur__grand svg { width: 38px; height: 38px; margin-left: 5px; fill: currentColor; }
.lecteur__grand:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--primary-hover); }
.lecteur__commandes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--navy-900); color: #e8eef7; }
.lecteur__commandes[hidden] { display: none; }
.lecteur__btn { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-sm); background: transparent; color: #e8eef7; }
.lecteur__btn:hover { background: rgba(255, 255, 255, 0.1); }
.lecteur__btn svg { width: 18px; height: 18px; }
.lecteur__btn--texte { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.lecteur__btn[aria-pressed="true"] { background: rgba(37, 99, 235, 0.45); border-color: #8fb0f5; color: #fff; }
.lecteur__horloge { font-family: var(--font-mono); font-size: var(--fs-13); color: #c6d0de; white-space: nowrap; }
.lecteur__barre { position: relative; flex: 1 1 200px; min-width: 120px; display: flex; align-items: center; }
.lecteur__barre input { width: 100%; accent-color: #5b8def; }
.lecteur__reperes { position: absolute; left: 8px; right: 8px; top: 50%; height: 0; pointer-events: none; }
.lecteur__reperes i { position: absolute; top: -7px; width: 2px; height: 14px; background: rgba(255, 255, 255, 0.55); }
.lecteur__vitesse { height: 36px; border-radius: var(--r-sm); border: 1px solid rgba(255, 255, 255, 0.16); background: var(--navy-800); color: #e8eef7; font-size: var(--fs-13); }
.lecteur__legende { display: grid; gap: 4px; padding: var(--s-3) var(--s-4) 0; }
.lecteur__titre { font-size: var(--fs-18); margin: 0; }
.lecteur__meta { font-size: var(--fs-13); color: var(--text-muted); }
.lecteur__avis { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-12); color: var(--k-reco); }
.lecteur__avis svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.lecteur__annexes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); }
.lecteur__annexes summary { cursor: pointer; font-weight: 600; font-size: var(--fs-14); color: var(--link); width: fit-content; }
.lecteur__chapitres ol { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: 2px; }
.lecteur__chapitres a { display: flex; gap: var(--s-2); padding: 4px var(--s-2); border-radius: var(--r-sm); font-size: var(--fs-14); color: var(--text-2); text-decoration: none; }
.lecteur__chapitres a:hover { background: var(--surface-sunken); color: var(--text); }
.lecteur__chapitres a[aria-current="true"] { background: var(--primary-soft); color: var(--text); font-weight: 600; }
.lecteur__temps { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-muted); min-width: 2.8em; }
a.lecteur__temps { text-decoration: none; }
.lecteur__transcription div { margin-top: var(--s-2); max-height: 260px; overflow-y: auto; padding-right: var(--s-2); font-size: var(--fs-14); color: var(--text-2); }
.lecteur__transcription p { margin: 0 0 var(--s-2); padding: 4px var(--s-2); border-radius: var(--r-sm); }
.lecteur__transcription p.actif { background: var(--primary-soft); color: var(--text); }
.lecteur--plein { display: flex; flex-direction: column; border-radius: 0; background: #000; }
.lecteur--plein .lecteur__ecran { flex: 1; aspect-ratio: auto; }
.lecteur--plein .lecteur__legende, .lecteur--plein .lecteur__annexes { display: none; }
@media (max-width: 699px) {
  .lecteur__annexes { grid-template-columns: minmax(0, 1fr); }
  .lecteur__grand { width: 64px; height: 64px; }
  .lecteur__grand svg { width: 28px; height: 28px; }
  .lecteur__btn[data-l="recul"], .lecteur__btn[data-l="avance"] { display: none; }
}
@media print { .lecteur__commandes, .lecteur__grand { display: none; } }

/* ---- pages.css ---- */
/* =========================================================================
   Styles propres aux écrans : article, accueil, atlas, comparateur, laboratoire.
   ========================================================================= */

.surtitre {
  font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--accent-text);
}
.chapeau { font-size: var(--fs-18); line-height: 1.55; color: var(--text-2); max-width: var(--read-max); }
.chapeau__note { display: block; margin-top: var(--s-2); font-size: var(--fs-14); color: var(--text-muted); }
.lien-fleche { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-14); font-weight: 600; text-decoration: none; }
.lien-fleche svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.lien-fleche:hover svg { transform: translateX(3px); }
.ico { width: 1em; height: 1em; }
.nav-legende { margin: var(--s-6) var(--s-3) 0; font-size: 11.5px; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.nav-legende .nav-pastille { display: inline-block; }
.nav-pastille--dispo { background: var(--accent-ui) !important; }
.nav-partie__lettre--large { font-size: 9.5px; letter-spacing: -0.02em; }

/* ======================================================= Article ======== */
.article .fil { margin-bottom: var(--s-5); }
.art-tete { padding-bottom: var(--s-6); border-bottom: var(--bw) solid var(--border); }
.art-titre { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-2) 0 var(--s-4); }
.art-symbole {
  flex-shrink: 0; display: grid; place-items: center; width: 64px; height: 64px;
  border: 1.5px solid var(--text); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
}
.art-symbole .sym { width: 40px; height: 40px; stroke-width: 1.5; vertical-align: 0; }
.titre-en { display: block; margin-top: 6px; font-size: var(--fs-18); font-weight: 400; font-style: italic; color: var(--text-muted); letter-spacing: 0; }
.fiche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: var(--s-6) 0 0; border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.fiche > div { padding: var(--s-3) var(--s-4); }
.fiche > div + div { border-left: var(--bw) solid var(--border); }
.fiche dt { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.fiche dd { margin: var(--s-1) 0 0; font-size: var(--fs-14); line-height: 1.45; }
.fiche--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.statut-article { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--warn-soft); border: var(--bw) solid color-mix(in srgb, var(--warn) 30%, transparent); }
.statut-article__tete { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-14); }
.statut-article__tete svg { width: 20px; height: 20px; color: var(--warn); flex-shrink: 0; margin-top: 1px; }
.statut-article .workflow { margin-top: var(--s-3); padding-left: 32px; }
.statut-article--compact { margin-top: var(--s-4); }
/* Publié (D-49) : vert des états « conforme », le mot toujours écrit */
.statut-article--publie { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.statut-article--publie .statut-article__tete svg { color: var(--ok); }
.art-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-4); font-size: var(--fs-12); color: var(--text-muted); }
.art-meta code { font-size: var(--fs-12); color: var(--text-2); }

.art-corps { font-size: var(--fs-17); line-height: var(--lh-read); }
.art-corps > .rubrique > p, .art-corps > .rubrique > ul, .art-corps > .rubrique > ol, .art-corps .bloc-appro > p { max-width: var(--read-max); }
.rubrique { padding-top: var(--s-10); }
.rubrique + .rubrique { border-top: var(--bw) solid var(--border); margin-top: var(--s-10); }
.rub-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-5); }
.rub-tete h2 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-28); }
.rub-lettre {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--r-sm); background: var(--navy-900); color: #fff;
  font-family: var(--font-mono); font-size: var(--fs-16); font-weight: 600;
}
:root[data-theme="dark"] .rub-lettre { background: var(--primary); color: var(--on-primary); }
.rub-meta { font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.rub-niveau { color: var(--k-reco); }
.art-corps h3 { font-size: var(--fs-20); margin: var(--s-8) 0 var(--s-3); }
.art-corps .fig, .art-corps .tab-defil, .art-corps .enc { font-size: var(--fs-15); }
.question { font-weight: 600; color: var(--text); }

.reperes { list-style: none; padding: 0; margin: var(--s-4) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-6); font-size: var(--fs-15); }
.reperes li { display: flex; gap: var(--s-3); margin: 0; align-items: baseline; }
.repere-n { flex-shrink: 0; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-900); color: #fff; font-size: 11px; font-weight: 700; }
:root[data-theme="dark"] .repere-n { background: var(--primary); color: var(--on-primary); }
.ordre-releve { counter-reset: ordre; list-style: none; padding: 0; margin: var(--s-4) 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); font-size: var(--fs-14); line-height: 1.45; }
.ordre-releve li { counter-increment: ordre; margin: 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface); border: var(--bw) solid var(--border); border-top: 3px solid var(--k-reco); }
.ordre-releve li::before { content: counter(ordre); display: block; font-family: var(--font-mono); font-weight: 600; color: var(--k-reco); margin-bottom: 2px; }
.formules { margin: var(--s-5) 0; }
.formules .formule { margin: 0; border-radius: 0; }
.formules .formule:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.formules .formule:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }
.formules .formule + .formule { border-top: 0; }
.formules .formule { grid-template-columns: 9.5rem 1fr; font-size: var(--fs-14); }
.note-regle { font-size: var(--fs-14); color: var(--text-2); padding-left: var(--s-4); border-left: 2px solid var(--border-strong); }
.bloc-appro { margin-top: var(--s-8); }
.voir-aussi { margin-top: var(--s-8); padding: var(--s-5); border-radius: var(--r-md); background: var(--surface); border: var(--bw) solid var(--border); font-size: var(--fs-15); }
.voir-aussi h3 { margin: 0 0 var(--s-3); font-size: var(--fs-16); }
.voir-aussi ul { list-style: none; padding: 0; }
.voir-aussi li + li { margin-top: var(--s-2); }
.lien-indispo { color: var(--text-muted); }
.mode-article { display: none; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.mode-article__lib { font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
/* Sous 1440 px, la barre supérieure n'a plus la place des accès et du niveau de lecture : celui-ci passe dans l'article. */
@media (max-width: 1439px) {
  .mode-article { display: flex; }
  .barre .segments { display: none; }
}
.lien-indispo__pastille { display: inline-block; white-space: nowrap; margin-left: 4px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; border: var(--bw) solid var(--border-strong); border-radius: var(--r-xs); vertical-align: 1px; }

.precsuiv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-12); padding-top: var(--s-6); border-top: var(--bw) solid var(--border); }
.precsuiv__lien { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4); border-radius: var(--r-md); border: var(--bw) solid var(--border); background: var(--surface); text-decoration: none; color: var(--text); }
a.precsuiv__lien:hover { border-color: var(--primary); }
.precsuiv__lien--suiv { text-align: right; align-items: flex-end; }
.precsuiv__sens { font-size: var(--fs-12); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.precsuiv__titre { font-weight: 600; }
.precsuiv__lien--indispo { color: var(--text-muted); background: var(--surface-2); border-style: dashed; }
.precsuiv__etat { font-size: var(--fs-12); }

/* ======================================================= Accueil ======== */
.page-accueil .principal { padding-top: 0; }
.accueil-hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: var(--s-10); align-items: center;
  margin: 0 calc(-1 * var(--s-6)); padding: var(--s-12) var(--s-6) var(--s-10);
  background:
    linear-gradient(var(--bg), transparent 30%),
    repeating-linear-gradient(0deg, var(--fig-grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--fig-grid) 0 1px, transparent 1px 24px);
  border-bottom: var(--bw) solid var(--border);
}
.accueil-hero h1 { margin: var(--s-3) 0 var(--s-4); font-size: clamp(2rem, 2.6vw + 1rem, 3rem); letter-spacing: -0.02em; max-width: 20ch; }
.accueil-hero__lead { font-size: var(--fs-18); color: var(--text-2); max-width: 46ch; }
.recherche-inline { position: relative; margin-top: var(--s-8); max-width: 640px; }
.recherche-inline__champ { display: flex; align-items: center; gap: var(--s-3); height: 60px; padding: 0 var(--s-5); border: var(--bw-strong) solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); }
.recherche-inline__champ:focus-within { border-color: var(--primary); box-shadow: var(--shadow-2), var(--focus-ring); }
.recherche-inline__champ > svg { width: 22px; height: 22px; color: var(--text-muted); flex-shrink: 0; }
.recherche-inline__champ input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--fs-18); height: 100%; }
.recherche-inline__liste:not(:empty) { margin-top: var(--s-2); padding: var(--s-2); max-height: 440px; overflow-y: auto; border: var(--bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-3); }
.recherche-inline .rech-statut { padding: var(--s-2) var(--s-1) 0; }
.recherche-inline .rech-statut:empty { display: none; }
.recherche-inline .rech-vide { margin-top: var(--s-2); border: var(--bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.recherche-inline__sugg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); font-size: var(--fs-13); color: var(--text-muted); }
/* Accès directs sous la recherche (D-52) : les outils restent à un clic, à toutes les largeurs */
.acces { margin-top: var(--s-6); max-width: 640px; }
.acces ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.acces li { margin: 0; }
.acces__lien { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 var(--s-4) 0 var(--s-3); border: var(--bw) solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-size: var(--fs-14); font-weight: 600; text-decoration: none; }
.acces__lien svg { width: 18px; height: 18px; color: var(--primary); }
:root[data-theme="dark"] .acces__lien svg { color: var(--link); }
.acces__lien:hover { border-color: var(--primary); background: var(--primary-soft); }
/* Accueil : le plan de l'encyclopédie s'ouvre en tiroir à toutes les largeurs (D-52) */
.page-accueil .barre .barre__menu { display: inline-grid; }
.page-accueil .nav-gauche {
  position: fixed; z-index: 45; top: 0; left: 0; bottom: 0;
  width: min(320px, 86vw); height: 100vh; padding: 0 var(--s-3) var(--s-10);
  background: var(--surface); border-right: var(--bw) solid var(--border); box-shadow: var(--shadow-3);
  transform: translateX(-104%); visibility: hidden;
  transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.page-accueil .nav-gauche.ouvert { transform: none; visibility: visible; transition: transform var(--t-med) var(--ease); }
.page-accueil .nav-gauche__tete {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  height: var(--topbar-h); margin: 0 calc(-1 * var(--s-3)) var(--s-4); padding: 0 var(--s-3) 0 var(--s-4);
  background: var(--surface); border-bottom: var(--bw) solid var(--border); font-weight: 600;
}

.accueil-hero__cadre { margin: 0; }
.hero-cadre { padding: var(--s-8) var(--s-6); border-radius: var(--r-xl); background: var(--navy-900); color: #e8eef7; box-shadow: var(--shadow-3); }
:root[data-theme="dark"] .hero-cadre { background: #0a1120; border: var(--bw) solid var(--border); }
.hero-cadre__frame { display: flex; justify-content: center; }
.hero-cadre .cadre { font-size: clamp(1.3rem, 2.2vw, 1.9rem); background: #fff; color: var(--navy-900); border-color: #fff; }
.hero-cadre .cadre > span + span { border-left-color: var(--navy-900); }
.hero-cadre__cases { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--fs-14); color: #c6d0de; }
.hero-cadre__cases li { display: flex; gap: var(--s-3); align-items: baseline; margin: 0; }
.hero-cadre__cases b { color: #fff; font-weight: 600; }
.hero-cadre__n { flex-shrink: 0; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--navy-900); font-size: 12px; font-weight: 700; }
.accueil-hero__cadre figcaption { margin-top: var(--s-3); font-size: var(--fs-13); color: var(--text-muted); text-align: center; }

.accueil-bloc { margin-top: var(--s-12); }
.accueil-bloc__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.accueil-bloc__tete h2 { display: flex; align-items: center; gap: var(--s-2); }
.accueil-bloc__tete h2 svg { width: 22px; height: 22px; color: var(--accent-ui); }
.accueil-bloc__intro { color: var(--text-2); max-width: 70ch; margin-bottom: var(--s-5); }
.accueil-bloc__aside { font-size: var(--fs-13); color: var(--text-muted); }

.familles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: var(--bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
@media (max-width: 520px) { .familles { grid-template-columns: minmax(0, 1fr) !important; } .famille + .famille { border-left: 0; } }
.famille { padding: var(--s-5) var(--s-4); border-top: 3px solid var(--fam, var(--primary)); }
.famille + .famille { border-left: var(--bw) solid var(--border); }
.famille--forme { --fam: #2563eb; }
.famille--orientation { --fam: #0f766e; }
.famille--position { --fam: #d96512; }
.famille--profil { --fam: #6d3fd6; }
.famille--battement { --fam: #b42363; }
.famille h3 { font-size: var(--fs-16); }
.famille__ref { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; }
.famille ul { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.famille li + li { margin-top: 2px; }
.symbole-lien { display: flex; align-items: center; gap: var(--s-3); padding: 6px var(--s-2); margin: 0 calc(-1 * var(--s-2)); border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: var(--fs-14); font-weight: 500; }
.symbole-lien:hover { background: var(--surface-sunken); }
.symbole-lien .sym { width: 26px; height: 26px; padding: 3px; border: 1.3px solid var(--text); border-radius: 3px; flex-shrink: 0; stroke-width: 1.8; vertical-align: 0; }

.accueil-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-8); }
.vide { padding: var(--s-5); border: var(--bw) dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-muted); font-size: var(--fs-14); }
.recents { list-style: none; padding: 0; margin: 0; border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.recents li { margin: 0; }
.recents li + li { border-top: var(--bw) solid var(--border); }
.recents a { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-3) var(--s-4); text-decoration: none; color: var(--text); }
.recents a:hover { background: var(--primary-soft); }
.recents__code { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--accent-text); min-width: 2.5em; }
.recents__titre { font-weight: 600; }
.recos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.reco { margin: 0; position: relative; }
.reco__lien { display: grid; gap: 2px; padding: var(--s-4) var(--s-5); padding-right: 140px; border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); text-decoration: none; color: var(--text); }
a.reco__lien:hover { border-color: var(--primary); box-shadow: var(--shadow-2); }
.reco__lien.est-indispo { background: var(--surface-2); }
.reco__num { font-size: var(--fs-12); font-weight: 600; color: var(--accent-text); text-transform: uppercase; letter-spacing: 0.06em; }
.reco__titre { font-weight: 600; font-size: var(--fs-16); }
.reco__resume { font-size: var(--fs-13); color: var(--text-2); }
.reco > .statut { position: absolute; top: var(--s-4); right: var(--s-4); }

.idx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.idx-partie { padding: var(--s-4) var(--s-4) var(--s-3); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.idx-partie--annexes { grid-column: span 3; }
.idx-partie--annexes ul { columns: 3; column-gap: var(--s-6); }
.idx-partie > summary { display: flex; gap: var(--s-3); align-items: center; list-style: none; cursor: pointer; }
.idx-partie > summary::-webkit-details-marker { display: none; }
.idx-partie[open] > summary { margin-bottom: var(--s-3); }
.idx-partie__titres { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.idx-partie__titre { font-size: var(--fs-15); font-weight: 600; }
.idx-partie__compte { font-size: var(--fs-12); color: var(--text-muted); }
.idx-partie__chevron { width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--t-fast); }
.idx-partie[open] .idx-partie__chevron { transform: rotate(90deg); }
@media (min-width: 960px) { .idx-partie__chevron { display: none; } .idx-partie > summary { cursor: default; pointer-events: none; } }
.idx-partie__lettre { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: var(--r-sm); background: var(--navy-900); color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-14); }
:root[data-theme="dark"] .idx-partie__lettre { background: var(--primary); color: var(--on-primary); }
.idx-partie__lettre svg, .nav-partie__lettre svg { width: 16px; height: 16px; }
.idx-partie h3 { font-size: var(--fs-15); }
.idx-partie header p { font-size: var(--fs-12); color: var(--text-muted); }
.idx-partie ul { list-style: none; padding: 0; margin: 0; }
.idx-partie li { margin: 0; break-inside: avoid; }
.idx__lien { display: grid; grid-template-columns: 2.4em 1fr; gap: var(--s-1); padding: 3px 0; font-size: var(--fs-13); line-height: 1.4; text-decoration: none; color: var(--text-2); }
a.idx__lien { color: var(--link); font-weight: 600; }
a.idx__lien:hover .idx__titre { text-decoration: underline; }
.idx__lien.est-indispo { color: var(--text-muted); }
.idx__num { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }

.accueil-outils { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.outil { padding: var(--s-5); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.outil h3 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-16); }
.outil h3 svg { width: 20px; height: 20px; color: var(--accent-ui); }
.outil > p { font-size: var(--fs-14); color: var(--text-2); margin: var(--s-2) 0 var(--s-3); }
.outil--labo { background: var(--navy-900); border-color: var(--navy-900); color: #e8eef7; }
:root[data-theme="dark"] .outil--labo { background: #0a1120; border-color: var(--border); }
.outil--labo > p { color: #c6d0de; }
.outil--labo .outil__note { font-size: var(--fs-12); color: #aab7cb; margin-top: var(--s-3); }
/* L'orange n'est jamais une couleur d'action (système de design) : bouton en primary, même sur fond nuit */
.outil--labo .btn--primaire { background: var(--primary); color: var(--on-primary); }
.outil--labo .btn--primaire:hover { background: var(--primary-hover); }
.mini { list-style: none; padding: 0; margin: 0; }
.mini li { margin: 0; }
.mini__lien { display: grid; grid-template-columns: 2.6em 1fr; gap: var(--s-1); padding: 3px 0; font-size: var(--fs-13); line-height: 1.4; text-decoration: none; color: var(--text-muted); }
a.mini__lien { color: var(--link); font-weight: 600; }
.mini__code { font-family: var(--font-mono); font-size: 11.5px; }

.accueil-etat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; margin: var(--s-12) 0 0; padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); border: var(--bw) solid var(--border); }
.accueil-etat h2 { font-size: var(--fs-20); margin-bottom: var(--s-2); }
.accueil-etat p { font-size: var(--fs-14); color: var(--text-2); max-width: 64ch; }
.etat { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: var(--s-2) var(--s-5); }
.etat li { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
.etat__n { font-family: var(--font-mono); font-size: var(--fs-20); font-weight: 600; min-width: 2ch; text-align: right; }

/* ======================================================= Outils (atlas, labo) */
.outil-tete { padding-bottom: var(--s-6); margin: var(--s-5) 0 var(--s-6); border-bottom: var(--bw) solid var(--border); }
.outil-tete h1 { margin: var(--s-2) 0 var(--s-3); }

/* ---- Atlas ---- */
.atlas-filtres { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: var(--s-4) var(--s-6); align-items: end; padding: var(--s-5); border: var(--bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin-bottom: var(--s-6); }
.atlas-filtres__groupe { display: flex; flex-direction: column; gap: var(--s-2); }
.atlas-filtres__compte { grid-column: 1 / -1; font-size: var(--fs-13); color: var(--text-muted); }
.atlas-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--s-4); }
.carte-sym { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border: var(--bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); scroll-margin-top: calc(var(--topbar-h) + var(--s-4)); }
.carte-sym--cible, .carte-sym:target { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft-2); }
.carte-sym__tete { display: flex; gap: var(--s-4); align-items: center; }
.carte-sym__symbole { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.carte-sym__symbole .sym { width: 60px; height: 60px; padding: 8px; border: 1.6px solid var(--text); border-radius: var(--r-sm); stroke-width: 1.5; background: var(--surface); vertical-align: 0; }
.carte-sym__code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.carte-sym h2 { font-size: var(--fs-20); }
.carte-sym__en { font-style: italic; color: var(--text-2); font-size: var(--fs-15); }
.carte-sym__asme { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; }
.carte-sym__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.carte-sym__badges li { margin: 0; }
.badge-fam, .badge-ref { display: inline-flex; padding: 2px 8px; border-radius: var(--r-xs); font-size: var(--fs-12); font-weight: 600; }
.badge-fam { color: #fff; background: var(--fam); }
.badge-fam--forme { --fam: #2563eb; } .badge-fam--orientation { --fam: #0f766e; } .badge-fam--position { --fam: #c2570e; } .badge-fam--profil { --fam: #6d3fd6; } .badge-fam--battement { --fam: #b42363; }
:root[data-theme="dark"] .badge-fam { color: #0b1220; }
:root[data-theme="dark"] .badge-fam--forme { --fam: #8db4ff; } :root[data-theme="dark"] .badge-fam--orientation { --fam: #4fd1bf; } :root[data-theme="dark"] .badge-fam--position { --fam: #ffa766; } :root[data-theme="dark"] .badge-fam--profil { --fam: #b9a2ff; } :root[data-theme="dark"] .badge-fam--battement { --fam: #ff8fbf; }
.badge-ref { border: var(--bw) solid var(--border-strong); color: var(--text-2); }
.badge-ref--oui { border-color: var(--fig-datum); color: var(--fig-datum); }
.carte-sym__zone { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3); align-items: center; padding: var(--s-3); border-radius: var(--r-md); background: var(--fig-bg); border: var(--bw) solid var(--border); }
.carte-sym__zone h3 { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); }
.carte-sym__zone p { font-size: var(--fs-14); margin-top: 2px; }
.vignette { width: 120px; height: auto; }
.carte-sym__def { font-size: var(--fs-14); color: var(--text-2); line-height: 1.55; }
.carte-sym__dl { margin: 0; display: grid; gap: var(--s-2); font-size: var(--fs-13); }
.carte-sym__dl dt { font-weight: 600; color: var(--text); }
.carte-sym__dl dd { margin: 0; color: var(--text-2); }
.carte-sym__pied { margin-top: auto; padding-top: var(--s-3); border-top: var(--bw) solid var(--border); }
.carte-sym__indispo { font-size: var(--fs-13); color: var(--text-muted); }
.atlas-vide { padding: var(--s-8); text-align: center; border: var(--bw) dashed var(--border-strong); border-radius: var(--r-lg); }
.atlas-vide p { margin-bottom: var(--s-4); }
.atlas-section { margin-top: var(--s-12); }
.atlas-section > h2 { margin-bottom: var(--s-4); }
.legende-vignettes { font-size: var(--fs-13); color: var(--text-muted); }
.tab-modifs .tab-groupe th { background: var(--surface-sunken); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.tab-modifs__ind { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; font-size: var(--fs-15); }
.tab-modifs__ind .mod { font-size: 0.9em; }

/* ---- Comparateur (H5) ---- */
.cmp-selecteur { margin-top: var(--s-6); }
.cmp-selecteur__lib { font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-2); }
.cmp-selecteur ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.cmp-selecteur li { margin: 0; }
.cmp-selecteur a, .cmp-selecteur__indispo { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: var(--s-2); border-radius: var(--r-sm); border: var(--bw) solid var(--border); background: var(--surface); text-decoration: none; font-size: 11.5px; line-height: 1.3; }
.cmp-selecteur a { color: var(--text); }
.cmp-selecteur a:hover { border-color: var(--primary); }
.cmp-selecteur a.actif { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 3px 0 var(--primary); }
.cmp-selecteur__indispo { color: var(--text-muted); background: var(--surface-2); border-style: dashed; }
.cmp-selecteur__code { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-12); }
.cmp-selecteur__titre { hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .cmp-selecteur ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cmp-selecteur ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.explorateur { margin: var(--s-8) 0; border: var(--bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.explorateur__tete { padding: var(--s-4) var(--s-5); border-bottom: var(--bw) solid var(--border); }
.explorateur__tete h3 { margin: 0 0 var(--s-1); font-size: var(--fs-18); }
.explorateur__tete p { font-size: var(--fs-14); color: var(--text-2); }
.explorateur__corps { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); }
.explorateur__vue { background: var(--fig-bg); border: var(--bw) solid var(--border); border-radius: var(--r-md); padding: var(--s-2); }
.explorateur__champs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-content: start; }
.explorateur__cas { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s-2); }
.explorateur__verdicts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.explo-verdict { padding: var(--s-4); border-radius: var(--r-md); border: var(--bw) solid var(--border); }
.explo-verdict--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.explo-verdict--nok { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.explo-verdict__titre { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.explo-verdict__val { font-size: var(--fs-20); font-weight: 700; margin: 2px 0; }
.explo-verdict--ok .explo-verdict__val { color: var(--ok); }
.explo-verdict--nok .explo-verdict__val { color: var(--danger); }
.explo-verdict__det { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--text-2); }
.f-zone-carre { fill: rgba(37, 99, 235, 0.10); stroke: var(--fig-line); stroke-width: 1.4; }
.f-zone-faux { fill: none; stroke: var(--danger); stroke-width: 1.2; stroke-dasharray: 5 4; }
.machine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: var(--s-4) 0; border: var(--bw) solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.machine__etape { padding: var(--s-4); font-size: var(--fs-14); }
.machine__etape + .machine__etape { border-left: var(--bw) solid var(--border); }
.machine__etape h4 { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--s-2); }
.machine__etape--cotes { background: var(--danger-soft); }
.machine__etape--loc { background: var(--ok-soft); }

/* ---- Laboratoire ---- */
.labo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.labo__liste { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
.labo__liste-titre { font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-3); }
.sims { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.sim { margin: 0; }
.sim a, .sim--prevue { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); text-decoration: none; font-size: var(--fs-13); }
.sim--actif a { background: var(--primary-soft); color: var(--text); box-shadow: inset 3px 0 0 var(--primary); }
.sim--prevue { color: var(--text-muted); }
.sim__nom { font-weight: 600; }
.sim__ch { font-size: var(--fs-12); }
.sim .statut { justify-self: start; margin-top: 2px; font-size: 10.5px; }
.labo__liste-note { margin-top: var(--s-4); font-size: var(--fs-12); color: var(--text-muted); }
.sim-panneau { border: var(--bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-6); min-width: 0; }
.sim-panneau__tete { display: flex; justify-content: space-between; gap: var(--s-4); align-items: flex-start; }
.sim-panneau__tete h2 { font-size: var(--fs-24); margin-bottom: var(--s-1); }
.sim-panneau__tete p { color: var(--text-2); font-size: var(--fs-15); }
.sim-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.sim-form { display: grid; gap: var(--s-5); }
.sim-form legend { margin-bottom: var(--s-2); }
.sim-form fieldset:disabled legend, .sim-form fieldset:disabled .champ { opacity: 0.55; }
.champs-2 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-3); align-items: end; }
.champs-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.champs-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.sim-form .champ__aide { margin-top: var(--s-2); }
.sim-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.sim-form__erreur { padding: var(--s-3); border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-13); font-weight: 600; }
.sim-resultats { display: grid; gap: var(--s-4); position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
.sim-vue { padding: var(--s-2); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--fig-bg); }
.sim-vue svg { max-width: 360px; margin: 0 auto; }
.f-zone-bonus { fill: rgba(37, 99, 235, 0.07); stroke: var(--fig-zone-line); stroke-width: 1.2; stroke-dasharray: 5 3; }
.sim-valeurs { margin: 0; display: grid; grid-template-columns: 1fr; border: var(--bw) solid var(--border); border-radius: var(--r-md); overflow: hidden; font-size: var(--fs-13); }
.sim-valeurs > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px var(--s-3); }
.sim-valeurs > div:nth-child(even) { background: var(--surface-2); }
.sim-valeurs dt { color: var(--text-2); }
.sim-valeurs dd { margin: 0; font-family: var(--font-mono); font-weight: 600; text-align: right; }
.sim-decision { padding: var(--s-4); border-radius: var(--r-md); border: var(--bw) solid var(--border); font-size: var(--fs-14); }
.sim-decision--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.sim-decision--nok { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.sim-decision--indecis { background: var(--undecided-soft); border-color: color-mix(in srgb, var(--undecided) 40%, transparent); }
.sim-decision__verdict { font-size: var(--fs-20); font-weight: 700; margin-bottom: var(--s-1); }
.sim-decision--ok .sim-decision__verdict { color: var(--ok); }
.sim-decision--nok .sim-decision__verdict { color: var(--danger); }
.sim-decision--indecis .sim-decision__verdict { color: var(--undecided); }
.sim-hypotheses { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--surface-2); border: var(--bw) solid var(--border); font-size: var(--fs-14); }
.sim-hypotheses summary { cursor: pointer; font-weight: 600; }
.sim-hypotheses ul { margin-top: var(--s-3); }
.sim-form textarea { font-family: var(--font-mono); font-size: var(--fs-14); }
.sim-form fieldset > .champ + .champs-2, .sim-form fieldset > .champ + .champs-3 { margin-top: var(--s-3); }
.sim-pas { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.sim-pas h3 { font-size: var(--fs-16); margin-bottom: var(--s-3); }
.sim-pas__liste { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s-2); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.sim-pas__liste li { overflow-wrap: anywhere; }
.sim-algo { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-14); }
.sim-algo summary { cursor: pointer; font-weight: 600; }
.sim-algo__etapes { margin: var(--s-3) 0 0; padding-left: 1.4em; display: grid; gap: var(--s-2); }
.sim-algo .tab-defil { margin: var(--s-4) 0; }
.sim-algo .note-regle { margin-top: var(--s-3); }
/* Calculateurs à remplir (D-56) */
.champs-libres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: end; }
.champs-libres .champ--large { grid-column: 1 / -1; }
.sim-form fieldset > .champ + .champ, .sim-form fieldset > .champ + div, .sim-form fieldset > div + .champ, .sim-form fieldset > div + div { margin-top: var(--s-3); }
.sim-form textarea::placeholder, .sim-form input::placeholder { color: var(--text-muted); opacity: 1; }
.sim-form__actions .btn { min-height: 40px; }
.sim-panneau__tete + .sim-grille { margin-top: var(--s-5); }
.sim-vue:empty, .sim-valeurs:empty { display: none; }
.sim-form [data-si] > .champ + .champ, .sim-form [data-si] > div + .champ { margin-top: var(--s-3); }
.saisie__defil { margin: 0 0 var(--s-2); }
.saisie { font-size: var(--fs-14); table-layout: fixed; }
.saisie caption { font-size: var(--fs-12); }
.saisie th, .saisie td { padding: 6px 4px; vertical-align: middle; }
.saisie th:first-child, .saisie td:first-child { padding-left: var(--s-3); }
.saisie thead th { white-space: normal; letter-spacing: 0.02em; }
.saisie thead th:first-child { width: 2.6em; }
.saisie thead th:last-child { width: 44px; }
.saisie tbody th { color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.saisie input { width: 100%; min-width: 0; height: 36px; padding: 0 6px; border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-14); }
.saisie input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.saisie td:last-child { text-align: center; }
.saisie__retirer { width: 32px; height: 32px; border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; }
.saisie__retirer:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.saisie__retirer:disabled { opacity: 0.4; cursor: default; }
.saisie__ajouter { margin-bottom: var(--s-2); }
.sim-decision--attente { background: var(--surface-2); color: var(--text-2); border-style: dashed; }
.sim-avert { margin: var(--s-3) 0 0; padding-left: 1.2em; font-size: var(--fs-13); color: var(--text-2); display: grid; gap: var(--s-1); }
.sim-tests { margin-top: var(--s-4); font-size: var(--fs-13); color: var(--text-muted); overflow-wrap: anywhere; }
.sim-tests svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* ---- Article : variantes génériques ---- */
.art-code {
  flex-shrink: 0; display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 var(--s-2);
  border-radius: var(--r-sm); background: var(--navy-900); color: #fff;
  font-family: var(--font-mono); font-size: var(--fs-24); font-weight: 600;
}
:root[data-theme="dark"] .art-code { background: var(--primary); color: var(--on-primary); }
.rub-lettre { width: auto; min-width: 36px; padding: 0 8px; }
.fiche--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chaine--statique .etape {
  display: flex; height: 100%; align-items: center; padding: var(--s-2); border-top: 3px solid var(--border-strong);
  background: var(--surface); color: var(--text-muted); font-size: 11.5px; line-height: 1.25; font-weight: 600;
}
.chaine--statique .etape.actif { border-top-color: var(--navy-900); color: var(--text); background: var(--surface-sunken); }
:root[data-theme="dark"] .chaine--statique .etape.actif { border-top-color: var(--primary); }

/* ---- Composants de contenu génériques ---- */
.etats { list-style: none; margin: 0; padding: var(--s-4); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); counter-reset: etat; }
.etats > li { margin: 0; text-align: center; }
.etats h4 { font-size: var(--fs-14); margin-bottom: var(--s-1); }
.etats .fig__svg { max-width: 150px; margin: 0 auto; }
.etats p { font-size: var(--fs-12); color: var(--text-2); line-height: 1.4; margin-top: var(--s-1); }
.etats__origine { font-weight: 700; color: var(--text) !important; }
.etats > li + li .etats__origine::before { content: "→ "; color: var(--text-muted); font-weight: 400; }
.etats--entites .etats__origine::before { content: none; }
.badge-entite { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: var(--ok); color: #fff !important; font-weight: 700; }
:root[data-theme="dark"] .badge-entite { color: #0b1220 !important; }
.badge-entite--non { background: none; color: var(--text-muted) !important; font-weight: 500; }
.etats__note { padding: 0 var(--s-4) var(--s-4); font-size: var(--fs-12); color: var(--text-muted); text-align: center; }
.etapes-liste { counter-reset: el; list-style: none; padding: 0; margin: var(--s-4) 0; display: grid; gap: var(--s-3); max-width: var(--read-max); }
.etapes-liste > li { counter-increment: el; position: relative; margin: 0; padding-left: 40px; }
.etapes-liste > li::before { content: counter(el); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-900); color: #fff; font-size: 13px; font-weight: 700; }
:root[data-theme="dark"] .etapes-liste > li::before { background: var(--primary); color: var(--on-primary); }
.chaine--demo .etape, .chaine--statique .etape { display: flex; height: 100%; align-items: center; padding: var(--s-2); border-top: 3px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 11.5px; line-height: 1.25; font-weight: 600; }
.chaine--demo .etape.actif { border-top-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.fig__legende--seule { border: var(--bw) solid var(--border); border-radius: var(--r-md); margin: var(--s-4) 0; }
.cadres-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.cadres-duo .cadre-annote { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .cadres-duo { grid-template-columns: minmax(0, 1fr); } }
.familles--fig { border: 0; border-radius: 0; }
.famille__liste { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.famille__liste li { display: flex; gap: var(--s-2); align-items: center; margin: 0 0 var(--s-2); font-size: var(--fs-13); line-height: 1.3; }
.famille__liste li > span { display: flex; flex-direction: column; }
.famille__liste span[lang="en"] { font-style: italic; color: var(--text-muted); font-size: var(--fs-12); }
.famille__liste .sym { width: 26px; height: 26px; padding: 3px; flex-shrink: 0; border: 1.3px solid var(--text); border-radius: 3px; stroke-width: 1.8; vertical-align: 0; }
.familles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-5) 0; }
.familles4 > div { padding: var(--s-4); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-14); }
.familles4 h4 { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--accent-text); }
.familles4 .q { font-weight: 600; margin: var(--s-1) 0; }
.familles4 .sym { width: 20px; height: 20px; margin-right: 4px; }
@media (max-width: 960px) { .etats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .familles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .etats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .familles4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- Index des connaissances ---- */
.trente { margin-bottom: var(--s-10); }
.trente h2 { margin-bottom: var(--s-4); }
.trente__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px var(--s-4); }
.trente__liste li { margin: 0; }
.trente__liste a, .trente__liste .est-indispo { display: grid; grid-template-columns: 2.2em 1fr; gap: var(--s-2); padding: 6px var(--s-2); border-radius: var(--r-sm); text-decoration: none; font-size: var(--fs-14); }
.trente__liste a { color: var(--text); font-weight: 500; }
.trente__liste a:hover { background: var(--primary-soft); }
.trente__liste .est-indispo { color: var(--text-muted); }
.trente__n { font-family: var(--font-mono); color: var(--accent-text); font-weight: 600; }
.cx-index { display: block; }
.cx__titre { margin-bottom: var(--s-4); }
.cx-outils { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: var(--s-3) var(--s-6); align-items: end; padding: var(--s-5); border: var(--bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.cx-outils__groupe { display: flex; flex-direction: column; gap: var(--s-2); }
.cx-compte { grid-column: 1 / -1; font-size: var(--fs-13); color: var(--text-muted); }
.cx-barre { position: sticky; top: var(--topbar-h); z-index: 5; display: flex; flex-wrap: wrap; gap: 2px; margin: var(--s-4) 0; padding: var(--s-2) 0; background: var(--bg); border-bottom: var(--bw) solid var(--border); }
.cx-barre a, .cx-barre span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 600; text-decoration: none; }
.cx-barre a { color: var(--link); }
.cx-barre a:hover { background: var(--primary-soft); }
.cx-barre span { color: var(--border-strong); }
.cx-lettre { scroll-margin-top: calc(var(--topbar-h) + 56px); }
.cx-lettre h2 { font-family: var(--font-mono); font-size: var(--fs-24); color: var(--accent-text); margin: var(--s-6) 0 var(--s-2); padding-bottom: var(--s-1); border-bottom: var(--bw) solid var(--border); }
.cx-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s-4); }
.cx-liste li { margin: 0; }
.cx { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--s-2); padding: 6px var(--s-2); border-radius: var(--r-sm); text-decoration: none; color: var(--text); font-size: var(--fs-14); line-height: 1.4; }
a.cx:hover { background: var(--primary-soft); }
.cx--indispo { color: var(--text-muted); }
.cx-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding-top: 2px; }
.cx-cat--symbole { color: var(--k-reco); } .cx-cat--terme { color: var(--k-bp); } .cx-cat--sigle { color: var(--accent-text); } .cx-cat--article { color: var(--link); }
.cx-titre { font-weight: 600; }
a.cx .cx-titre { color: var(--link); }
.cx-en { font-style: italic; color: var(--text-muted); font-size: var(--fs-13); }
.cx-detail { font-size: var(--fs-12); color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.cx-etat { display: block; font-size: 11px; color: var(--text-muted); }
.cx .sym { width: 18px; height: 18px; margin-right: 4px; vertical-align: -4px; }
.cx-vide { padding: var(--s-6); text-align: center; color: var(--text-2); }

/* ======================================================= Responsive ===== */
@media (max-width: 1279px) {
  .accueil-outils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .labo { grid-template-columns: minmax(0, 1fr); }
  .labo__liste { position: static; }
  .sims { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 1100px) {
  .familles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .famille:nth-child(4) { border-left: 0; }
  .famille:nth-child(n+4) { border-top: var(--bw) solid var(--border); box-shadow: inset 0 3px 0 var(--fam); }
  .idx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idx-partie--annexes { grid-column: span 2; }
  .idx-partie--annexes ul { columns: 2; }
  .sim-grille { grid-template-columns: minmax(0, 1fr); }
  .sim-resultats { position: static; }
  .fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche > div:nth-child(3) { border-left: 0; }
  .fiche > div:nth-child(n+3) { border-top: var(--bw) solid var(--border); }
  .ordre-releve { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .accueil-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); margin: 0 calc(-1 * var(--gutter)); padding: var(--s-8) var(--gutter); }
  .accueil-duo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .accueil-etat { grid-template-columns: minmax(0, 1fr); }
  .explorateur__corps { grid-template-columns: minmax(0, 1fr); }
  .explorateur__vue { max-width: 320px; }
  .machine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .machine__etape:nth-child(3) { border-left: 0; }
  .machine__etape:nth-child(n+3) { border-top: var(--bw) solid var(--border); }
  .etapes-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes-calc > div:nth-child(3) { border-left: 0; }
  .etapes-calc > div:nth-child(n+3) { border-top: var(--bw) solid var(--border); }
  .chaine ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .art-titre { align-items: flex-start; }
  .art-symbole { width: 52px; height: 52px; }
  .art-symbole .sym { width: 32px; height: 32px; }
  .rub-tete h2 { font-size: var(--fs-24); }
  .art-corps { font-size: var(--fs-16); }
  .fiche, .fiche--duo, .fiche--trio { grid-template-columns: minmax(0, 1fr); }
  .trente__liste, .cx-liste { grid-template-columns: minmax(0, 1fr); }
  .cx-outils { grid-template-columns: minmax(0, 1fr); }
  /* sur écran étroit, la catégorie passe au-dessus du titre : toute la largeur pour le texte */
  .cx { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--s-2); }
  .cx-barre { gap: 0; }
  .cx-barre a, .cx-barre span { min-width: 28px; height: 30px; }
  .art-code { min-width: 52px; height: 52px; font-size: var(--fs-20); }
  .fiche > div + div { border-left: 0; border-top: var(--bw) solid var(--border); }
  .reperes { grid-template-columns: minmax(0, 1fr); }
  .ordre-releve { grid-template-columns: minmax(0, 1fr); }
  .formules .formule { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .familles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .famille:nth-child(n) { border-left: 0; }
  .famille:nth-child(even) { border-left: var(--bw) solid var(--border); }
  .famille:nth-child(n+3) { border-top: var(--bw) solid var(--border); box-shadow: inset 0 3px 0 var(--fam); }
  .idx { grid-template-columns: minmax(0, 1fr); }
  .idx-partie--annexes { grid-column: auto; }
  .idx-partie--annexes ul { columns: 1; }
  .accueil-outils { grid-template-columns: minmax(0, 1fr); }
  .reco__lien { padding-right: var(--s-5); padding-top: var(--s-10); }
  .etat { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
  .precsuiv { grid-template-columns: minmax(0, 1fr); }
  .atlas-filtres { grid-template-columns: minmax(0, 1fr); }
  .atlas-grille { grid-template-columns: minmax(0, 1fr); }
  .champs-3, .champs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champs-libres { grid-template-columns: minmax(0, 1fr); }
  .explorateur__verdicts, .explorateur__champs { grid-template-columns: minmax(0, 1fr); }
  .sim-panneau { padding: var(--s-4); }
  .sim-panneau__tete { flex-direction: column; }
  .cadre-annote { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
  .etapes-calc { grid-template-columns: minmax(0, 1fr); }
  .etapes-calc > div + div { border-left: 0; border-top: var(--bw) solid var(--border); }
  .machine { grid-template-columns: minmax(0, 1fr); }
  .machine__etape + .machine__etape { border-left: 0; border-top: var(--bw) solid var(--border); }
  .enc { padding: var(--s-3) var(--s-4); }
  .enc--norme .enc__tete, .enc--iso-asme .enc__tete { margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-4)) var(--s-3); padding: var(--s-2) var(--s-4); }
  .enc__sources { margin-left: 0; }
}

/* ---- Studio d'animations : onglets horizontaux collants, scènes pleine largeur ---- */
.outil-tete__statut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--fs-13); color: var(--text-muted); }
.studio { display: grid; gap: var(--s-6); }
.studio__nav {
  position: sticky; top: var(--topbar-h); z-index: 20;
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 calc(-1 * var(--s-2)); padding: var(--s-2);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px);
  border-bottom: var(--bw) solid var(--border);
}
.studio__nav-titre { flex-shrink: 0; font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.studio__nav ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.studio__lien { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-3); border-radius: var(--r-pill); border: var(--bw) solid transparent; color: var(--text-2); text-decoration: none; font-size: var(--fs-13); font-weight: 600; white-space: nowrap; }
.studio__lien svg { width: 16px; height: 16px; color: var(--text-muted); }
.studio__lien:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.studio__lien.actif { background: var(--surface); border-color: var(--primary); color: var(--text); box-shadow: var(--shadow-1); }
.studio__lien.actif svg { color: var(--primary); }
.studio__num { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-muted); }
.studio__nav-note { display: none; }
.studio__blocs { display: grid; gap: var(--s-12); min-width: 0; }
.studio__bloc { scroll-margin-top: calc(var(--topbar-h) + 64px); min-width: 0; }
.studio__tete h2 { font-size: var(--fs-28); margin: var(--s-1) 0 var(--s-2); }
.studio__intro { color: var(--text-2); font-size: var(--fs-16); max-width: var(--read-max); }
.studio__pied { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-4); }
.studio__pied h3 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-15); margin-bottom: var(--s-2); }
.studio__pied h3 svg { width: 18px; height: 18px; color: var(--accent-ui); }
.studio__observer, .studio__liens { padding: var(--s-4); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-14); }
.studio__observer ul, .studio__liens ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-1); color: var(--text-2); }
@media (max-width: 959px) { .studio__nav-titre { display: none; } .studio__nav { margin: 0 calc(-1 * var(--gutter)); padding: var(--s-2) var(--gutter); } }
@media (max-width: 699px) {
  .studio__pied { grid-template-columns: minmax(0, 1fr); } .studio__tete h2 { font-size: var(--fs-24); }
  .studio__nav { position: static; backdrop-filter: none; }
  .studio__nav ol { flex-wrap: wrap; overflow: visible; }
}
/* ---- Accueil : trois portes d'entrée ---- */
.portes { margin: var(--s-8) 0 var(--s-4); }
.portes__titre { font-size: var(--fs-24); margin-bottom: var(--s-4); }
.portes__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.porte { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-lg); border: var(--bw) solid var(--border); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
.porte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--primary); }
.porte--apprendre::before { background: var(--accent); }
.porte--manipuler::before { background: var(--fig-datum); }
.porte__ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary-hover); }
.porte--apprendre .porte__ico { background: var(--accent-soft); color: var(--accent-text); }
.porte--manipuler .porte__ico { background: var(--fig-datum-soft); color: var(--fig-datum); }
:root[data-theme="dark"] .porte__ico { color: var(--link); }
:root[data-theme="dark"] .porte--manipuler .porte__ico { color: var(--fig-datum); }
.porte__ico svg { width: 24px; height: 24px; }
.porte h3 { font-size: var(--fs-20); margin: var(--s-1) 0 0; }
.porte p { margin: 0; color: var(--text-2); font-size: var(--fs-15); }
.porte .porte__note { font-size: var(--fs-13); color: var(--text-muted); }
.porte > .btn, .porte__actions { margin-top: auto; padding-top: var(--s-2); }
.porte > .btn { align-self: flex-start; }
.porte__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 959px) { .portes__liste { grid-template-columns: minmax(0, 1fr); } }

/* ---- Article : liens vers la vidéo et les animations ---- */
.art-apprendre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); }
.art-apprendre__lib { font-size: var(--fs-13); font-weight: 600; color: var(--text-muted); margin-right: var(--s-1); }
.art-apprendre__lien { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--s-3); border-radius: var(--r-pill); border: var(--bw) solid var(--border-strong); background: var(--surface); font-size: var(--fs-13); font-weight: 600; color: var(--text-2); text-decoration: none; }
.art-apprendre__lien svg { width: 16px; height: 16px; color: var(--accent-ui); }
.art-apprendre__lien:hover { border-color: var(--primary); color: var(--text); }

/* ---- Vidéos des tolérances (D-43, D-45) ---- */
.page-videos .fil { margin-top: var(--s-3); }
.videos-section-titre { font-size: var(--fs-20); margin: var(--s-8) 0 var(--s-4); }
.vignette-video__num .sym { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; color: var(--text); }
.enchainer { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--fs-14); font-weight: 600; color: var(--text-2); cursor: pointer; }
.enchainer[hidden] { display: none; }
.enchainer input { width: 18px; height: 18px; accent-color: var(--primary); }
.vignettes-videos { list-style: none; margin: 0 0 var(--s-8); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-3); }
.vignette-video { position: relative; display: grid; border-radius: var(--r-md); border: var(--bw) solid var(--border); background: var(--surface); overflow: hidden; text-decoration: none; color: var(--text); box-shadow: var(--shadow-1); }
.vignette-video:hover { border-color: var(--primary); }
.vignette-video img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.vignette-video__duree { position: absolute; right: 8px; top: 8px; padding: 1px 6px; border-radius: var(--r-xs); background: rgba(8, 13, 24, 0.85); color: #fff; font-family: var(--font-mono); font-size: var(--fs-12); }
.vignette-video__corps { display: grid; gap: 2px; padding: var(--s-2) var(--s-3) var(--s-3); }
.vignette-video__num { font-size: var(--fs-12); font-weight: 700; color: var(--accent-text); letter-spacing: 0.04em; text-transform: uppercase; }
.vignette-video__titre { font-size: var(--fs-14); font-weight: 600; }
.videos { display: grid; gap: var(--s-10); }
.videos__bloc .lecteur { margin: 0; }
.videos__liens { margin: var(--s-2) 0 0; }
.videos__liens a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.videos__liens svg { width: 18px; height: 18px; }
.videos__clavier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s-8); font-size: var(--fs-13); color: var(--text-muted); }
.videos__clavier svg { width: 18px; height: 18px; }
.art-video { margin: 0 0 var(--s-8); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.art-video__titre { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-20); margin-bottom: var(--s-3); }
.art-video__titre svg { width: 22px; height: 22px; color: var(--accent-ui); }
.art-video .lecteur { margin: 0; }