/* ---- tokens.css ---- */
/* =========================================================================
   Métrologie GD&T — 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: #536277;          /* ≥ 4,5:1 sur blanc et sur #f5f7fb quadrillé sous le filigrane (lot 5) */
  --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: #a04808;        /* orange-700 assombri : ≥ 4,5:1 sur les fonds quadrillés (lot 5) */
  --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;
  /* ---- Fonds (lot 5) : bandeau en dégradé, filigrane de cotation, sections alternées ; le quadrillage millimétré
     (effet de cahier) est retiré le 22 oct. 2026 (D-80). Les figures gardent --fig-bg. Texte ≥ 4,5:1 sur chaque fond
     composé : tests/contrast-check.mjs ---- */
  --bandeau-1: #0b1528;
  --bandeau-2: #1b2e50;
  --fond-alt: var(--surface);             /* sections alternées : blanc sur le gris bleuté de --bg */
  --filigrane: rgba(16, 28, 50, 0.045);
  --photo-opacite: 0.42;                 /* photo de l'accueil, voilée (thème clair) */

  /* ---- 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) ---- */
  --barre-h: 60px;                 /* barre supérieure, une ligne (D-85) ; 56 px sous 960 px */
  --topbar-h: var(--barre-h);      /* hauteur collée en haut, pour les éléments placés sous la barre */
  --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;
  --large-max: 1240px;             /* pages sans colonnes (accueil) */
  --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 · grands écrans : 1680, 1920, 2400 px */

  color-scheme: light;
}

/* ---- Grands écrans (D-93) : la page s'élargit et le texte grandit par paliers (les tailles de texte sont en rem) ;
   en dessous de 1680 px, rien ne change. ---- */
@media (min-width: 1280px) and (max-width: 1439px) {
  :root { --nav-w: 244px; --toc-w: 220px; --gap-col: 28px; } /* trois colonnes serrées : l'article garde sa largeur */
}
@media (min-width: 1680px) {
  :root { --page-max: 1640px; --large-max: 1360px; --nav-w: 280px; --toc-w: 256px; --article-max: 920px; --read-max: 780px; }
}
@media (min-width: 1920px) {
  html { font-size: 106.25%; }     /* 17 px */
  :root { --barre-h: 64px; --page-max: 1840px; --large-max: 1520px; --nav-w: 300px; --toc-w: 272px; --gap-col: 40px; --article-max: 1000px; --read-max: 840px; }
}
@media (min-width: 2400px) {
  html { font-size: 118.75%; }     /* 19 px */
  :root { --barre-h: 72px; --page-max: 2240px; --large-max: 1800px; --nav-w: 340px; --toc-w: 300px; --gap-col: 48px; --article-max: 1180px; --read-max: 960px; }
}

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

  --bandeau-1: #060c18;
  --bandeau-2: #14233f;
  --filigrane: rgba(141, 180, 255, 0.09);
  --photo-opacite: 0.55;

  --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; text-wrap: pretty; } /* pas de mot seul en dernière ligne */
h1, h2, h3 { text-wrap: balance; } /* titres sur deux lignes équilibrées */
p + p { margin-top: var(--s-3); }
ul, ol { margin: 0; padding-left: 1.25em; }
li + li { margin-top: var(--s-1); }
/* Listes en grille : l'écart vient de la grille ; la marge ci-dessus ferait descendre de 4 px tous les éléments sauf le
   premier (cartes de l'accueil, vignettes des vidéos, chaîne des articles…). */
:is(.portes__liste, .vignettes-videos, .arbre__q, .memo-coches, .memo-famille ul, .chaine ol, .lecteur__chapitres ol) > li { margin-top: 0; }
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é), une seule ligne (D-85) : marque, recherche, accès principaux en icônes,
   réglages. Infobulles (classe ib) tirées du nom accessible, au survol et au focus clavier.
   Rythme (D-94) : tous les contrôles à la même hauteur (40 px, 44 px dès 1920 px), un seul écart entre groupes
   (--s-3), recherche centrée dans l'espace libre, séparateur court avant les réglages, réglages sans cadre. ---- */
.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: var(--barre-h); max-width: var(--page-max); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-3);
  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: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-3);
  height: 40px; 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); }

/* Accès principaux : groupe d'icônes à droite de la barre, avant les réglages (D-90) ; la page en cours est éclairée
   et soulignée (repère orange). */
.barre__acces { flex-shrink: 0; }
.barre__acces ul {
  display: flex; align-items: center; gap: 2px; margin: 0; padding: 3px; list-style: none;
  border: var(--bw) solid rgba(255, 255, 255, 0.12); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.05);
}
.barre__acces li { display: flex; margin: 0; }
.barre__acces a {
  display: inline-grid; place-items: center; width: 38px; height: 32px; border-radius: var(--r-sm);
  color: #b9c5d8; text-decoration: none;
}
.barre__acces a svg { width: 20px; height: 20px; }
.barre__acces a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.barre__acces a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 -2px 0 var(--accent); }

.barre .ib { position: relative; }
.barre .ib::after {
  content: attr(aria-label); display: none; position: absolute; z-index: 70; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 5px 9px; border-radius: var(--r-sm); background: #fff; color: var(--navy-900); box-shadow: var(--shadow-2);
  font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 600; line-height: 1.3; letter-spacing: 0; white-space: nowrap; pointer-events: none;
}
.bascules .ib::after, .barre__acces li:nth-last-child(-n+2) .ib::after { left: auto; right: 0; transform: none; }
.barre .ib:focus-visible::after { display: block; }
@media (hover: hover) { .barre .ib:hover::after { display: block; } }
@media (min-width: 960px) { .barre__recherche.ib::after { content: none; } } /* libellé visible */

.bascules { display: flex; align-items: center; gap: var(--s-1); }
.bascules:not(:empty)::before { content: ""; width: 1px; height: 24px; margin-right: var(--s-2); background: rgba(255, 255, 255, 0.16); }
.barre .btn-icone[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.16); }
.barre .btn-icone { color: #d7dfeb; border-color: transparent; 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: var(--large-max); }
.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-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; 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); }

/* ---- Sommaire droit ---- */
.toc {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto; padding: var(--s-6) 0 140px; /* fin du sommaire au-dessus des boutons flottants */
  scrollbar-width: thin;
}

/* ---- Bas du plan (le pied de page est retiré, D-89) : version, confidentialité et crédits, raccourcis clavier ---- */
.nav-pied { margin-top: var(--s-6); padding: var(--s-4) var(--s-3) 0; border-top: var(--bw) solid var(--border); }
.nav-pied .nav-legende { margin: 0 0 var(--s-2); padding: 0; }
.nav-pied__liens { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; font-size: var(--fs-13); }
.nav-pied__liens a { color: var(--text-2); }
.nav-pied__aide { display: inline-flex; align-items: center; gap: 6px; 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); }
.nav-pied__aide svg { width: 16px; height: 16px; }
.nav-pied__aide:hover { border-color: var(--primary); color: var(--text); }
/* fin de page : place des boutons flottants (Remarque, Haut), pour que rien ne passe dessous */
.principal { padding-bottom: calc(var(--s-16) + 96px); }

/* ---- 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(--barre-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;
  }
}

.barre__recherche { min-width: 0; }
@media (min-width: 1920px) { .barre__recherche { max-width: 680px; height: 44px; } .barre__acces a { width: 42px; height: 36px; } .barre .btn-icone { width: 44px; height: 44px; } .barre .segments button { min-height: 36px; } }
.barre__menu, .bascules .btn-icone { flex-shrink: 0; }

@media (max-width: 959px) {
  :root { --barre-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: 0 0 0 auto; max-width: none; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; justify-content: center; }
  .barre__recherche span, .barre__recherche kbd { display: none; }
  .marque__l1 { font-size: 10px; }
  .marque__l2 { font-size: 13px; }
  .principal { padding-top: var(--s-4); }
}
/* La marque garde son texte quand la ligne a la place ; sur un téléphone, profil et thème passent en tête du tiroir
   (layout.mjs, .nav-reglages). */
@media (max-width: 759px) {
  .marque__texte { display: none; }
}
.nav-reglages { display: none; }
@media (max-width: 599px) {
  .barre .barre__reglage { display: none; }
  .bascules:not(:empty)::before { content: none; }
  .nav-reglages { display: flex; gap: var(--s-2); margin: 0 0 var(--s-4); }
  .nav-reglage {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 40px;
    border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface);
    color: var(--text-2); font-size: var(--fs-14); font-weight: 500; text-decoration: none;
  }
  .nav-reglage svg { width: 18px; height: 18px; }
  .nav-reglage:hover { border-color: var(--border-strong); color: var(--text); }
}
@media (max-width: 359px) {
  .marque { display: none; }
}
/* Téléphone : la ligne se resserre pour garder menu, marque, recherche et accès sans défilement horizontal. */
@media (max-width: 479px) {
  .barre__in { padding: 0 var(--s-2); gap: var(--s-1); }
  .bascules { gap: var(--s-1); }
  .barre .btn-icone, .barre__recherche { width: 36px; height: 36px; }
  .barre__acces ul { padding: 2px; }
  .barre__acces a { width: 34px; height: 30px; }
}

/* ---- 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 { min-height: 32px; 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); }
.leg--indecis i { width: 10px; height: 10px; border-radius: 50%; background: var(--undecided); }
.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) + 64px); 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 », seul accès au contact depuis le retrait du pied de
   page (D-89). Rond et compact pour ne pas masquer le texte (D-93) ; son libellé s'ouvre au survol et au focus. ---- */
.contact-wa {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 41;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 52px; height: 52px; padding: 0;
  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; white-space: nowrap;
}
.contact-wa svg { width: 24px; height: 24px; flex-shrink: 0; }
.contact-wa span { display: none; }
.contact-wa:hover { background: var(--whatsapp-hover); color: var(--on-whatsapp); }
.contact-wa:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.contact-wa:focus-visible, .contact-wa:hover { width: auto; padding: 0 var(--s-4) 0 var(--s-3); }
.contact-wa:focus-visible span, .contact-wa:hover span { display: inline; }
@media print { .contact-wa { display: none !important; } }

/* ---- 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; }
/* fond nuit dans les deux thèmes : texte clair fixe (--on-primary devient sombre en thème sombre ; lot 8, contraste WCAG) */
.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: #e8eef7; }
.lire__q .flux__n { background: var(--orange-700); flex: none; }
.lire__q small { display: block; color: #c6d0de; 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 d’une 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 {
  /* numéro de rubrique : au moins 18 px, plus large s'il le faut (« 28.1 ») pour ne jamais toucher le titre */
  display: grid; grid-template-columns: minmax(18px, max-content) 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); }

/* =========================================================================
   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, .lecteur__langue { 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__regle { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-12); color: var(--text-2); }
.lecteur__regle svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.lecteur__transcription p.lecteur__regle-tr { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--border); font-size: var(--fs-13); color: var(--text-muted); }
.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); }
/* crédit du corpus de la voix (CC BY 4.0), sous chaque lecteur (D-89) */
.lecteur__credit { margin: 0; padding: 0 var(--s-4) var(--s-3); font-size: var(--fs-12); line-height: 1.5; color: var(--text-muted); }
.lecteur__credit a { color: var(--text-2); }
.lecteur--plein .lecteur__credit { display: none; }
.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; } }

/* ---- Réviser (lot 7 ; laboratoire et animations retirés, D-78) : fin des chapitres 9 à 21, fiche et vidéo ---- */
.pratiquer { margin-top: var(--s-12); padding: var(--s-5); border: var(--bw) solid var(--border); border-top: 3px solid var(--primary); border-radius: var(--r-lg); background: var(--surface); }
.pratiquer__tete { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); font-size: var(--fs-20); }
.pratiquer__tete svg { width: 22px; height: 22px; color: var(--primary); }
:root[data-theme="dark"] .pratiquer__tete svg { color: var(--link); }
.pratiquer__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); }
.pratiquer__liste li { margin: 0; }
.pratiquer__lien { display: flex; gap: var(--s-3); height: 100%; padding: var(--s-4); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); text-decoration: none; }
.pratiquer__lien:hover { border-color: var(--primary); background: var(--primary-soft); }
.pratiquer__lien > svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--accent-ui); }
.pratiquer__lien > span { display: flex; flex-direction: column; gap: 2px; }
.pratiquer__titre { font-weight: 600; font-size: var(--fs-15); color: var(--link); }
.pratiquer__texte { font-size: var(--fs-13); color: var(--text-2); }
@media print { .pratiquer { display: none; } }

/* ---- Compte et profil (lot 4, D-96) : invitation de l'accueil, dialogue ouvert à la demande, page Profil, suppression ---- */
.invitation-profil {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  border: var(--bw) solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--r-md); background: var(--surface);
}
.invitation-profil > p:first-child { flex: 1 1 320px; margin: 0; color: var(--text-2); font-size: var(--fs-14); }
.invitation-profil strong { color: var(--text); }
.invitation-profil__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
@media print { .invitation-profil { display: none; } }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }
:root[data-theme="dark"] .btn--danger { color: var(--text-inverse); }
.compte-dialogue {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); margin: 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-y: auto; overscroll-behavior: contain;
}
.compte-dialogue::backdrop { background: rgba(10, 18, 34, 0.6); }
.compte-dialogue__tete { padding: var(--s-5) var(--s-5) var(--s-3); border-top: 4px solid var(--primary); }
.compte-dialogue__tete h2 { font-size: var(--fs-20); }
.compte-dialogue__tete p { margin-top: var(--s-2); font-size: var(--fs-14); color: var(--text-2); }
.compte-dialogue__corps { padding: 0 var(--s-5) var(--s-5); }
.compte-form { display: grid; gap: var(--s-4); }
.compte-form__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.compte-form__grille .compte-niveaux { grid-column: 1 / -1; }
.compte-form__erreurs { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-14); font-weight: 600; }
.compte-niveaux { margin: 0; padding: 0; border: 0; }
.compte-niveaux legend { padding: 0; margin-bottom: var(--s-1); font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.compte-niveaux__choix { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.compte-niveau { position: relative; display: inline-flex; }
.compte-niveau input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.compte-niveau span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border: var(--bw) solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-14); font-weight: 600; color: var(--text-2); }
.compte-niveau input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-hover); box-shadow: inset 0 0 0 1px var(--primary); }
:root[data-theme="dark"] .compte-niveau input:checked + span { color: var(--link); }
.compte-niveau input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.champ--erreur .compte-niveau span { border-color: var(--danger); }
.compte-consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-3); align-items: start; font-size: var(--fs-14); color: var(--text-2); }
.compte-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primary); }
.compte-consent .champ__erreur { grid-column: 2; }
.compte-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.compte-sans { font-size: var(--fs-14); font-weight: 600; }
.compte-fin { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--ok-soft); border: var(--bw) solid color-mix(in srgb, var(--ok) 30%, transparent); font-size: var(--fs-14); margin-bottom: var(--s-4); }
.compte-aide { font-size: var(--fs-14); color: var(--text-2); margin: var(--s-2) 0 var(--s-4); }
.compte-page { max-width: 720px; }
.compte-page h2 { margin-bottom: var(--s-2); }
.compte-fiche { margin: var(--s-4) 0 var(--s-2); }
.compte-lier { margin-top: var(--s-10); padding-top: var(--s-6); border-top: var(--bw) solid var(--border); }
.compte-lier h3 { font-size: var(--fs-18); }
.compte-confirmer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--bw) solid var(--danger); border-radius: var(--r-md); background: var(--danger-soft); }
.compte-confirmer p { flex-basis: 100%; }
@media (max-width: 599px) {
  .compte-form__grille { grid-template-columns: minmax(0, 1fr); }
  .compte-dialogue__tete { padding: var(--s-4) var(--s-4) var(--s-2); }
  .compte-dialogue__corps { padding: 0 var(--s-4) var(--s-4); }
}
@media print { .compte-dialogue { display: none; } }
.texte-legal { max-width: var(--read-max); }
.texte-legal h2 { margin: var(--s-8) 0 var(--s-3); font-size: var(--fs-20); }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal ul { display: grid; gap: var(--s-2); }
.texte-legal .tab-defil { margin: var(--s-3) 0; }
.texte-legal p + p { margin-top: var(--s-3); }
.compte-supprimer { display: grid; gap: var(--s-3); justify-items: start; }

/* ---- 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-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(--barre-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; }

.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(3, 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); }
.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; }


/* ======================================================= 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); }
/* cartes d'au moins 124 px : « Perpendicularité » tient sur une ligne, sans coupure au milieu du mot */
.cmp-selecteur ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 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: break-word; }
.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); }

/* ---- 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); }
.art-code svg { width: 28px; height: 28px; }
.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, :root[data-theme="dark"] .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 ===== */
/* Trois outils sur l'accueil (laboratoire retiré, D-78) : trois colonnes, une seule sous 960 px */
@media (max-width: 959px) {
  .accueil-outils { grid-template-columns: minmax(0, 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; }
  .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); }
  .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); }
  .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; }
}

/* ---- 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__soustitre { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-16); color: var(--text-2); }
.recos--grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 959px) { .recos--grille { grid-template-columns: minmax(0, 1fr); } }
.portes__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 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; }
/* Fiche de la capsule (C27, D-96) : objectif, prérequis, erreur fréquente, chapitre, question d'application */
.fiche-capsule { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.fiche-capsule__titre { margin: 0 0 var(--s-3); font-size: var(--fs-16); }
.fiche-capsule__etat { margin: 0 0 var(--s-3); font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.fiche-capsule__etat[data-etat="terminee"], .fiche-capsule__etat[data-compris="oui"] { color: var(--ok); }
.fiche-capsule__dl { display: grid; gap: var(--s-2); margin: 0; }
.fiche-capsule__dl > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s-3); }
.fiche-capsule__dl dt { font-weight: 600; color: var(--text); }
.fiche-capsule__dl dd { margin: 0; color: var(--text-2); }
@media (max-width: 599px) { .fiche-capsule__dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.fiche-capsule__question { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4) var(--s-4); border: var(--bw) solid var(--border); border-radius: var(--r-md); }
.fiche-capsule__question legend { padding: 0 var(--s-2); font-weight: 700; }
.fiche-capsule__question > p { margin: 0 0 var(--s-2); }
.fiche-capsule__choix { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.fiche-capsule__choix label { display: flex; align-items: flex-start; gap: var(--s-2); cursor: pointer; }
.fiche-capsule__choix input { margin-top: 4px; flex-shrink: 0; }
.fiche-capsule__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-3) 0 0; }
.fiche-capsule__retour { font-weight: 600; }
.fiche-capsule__retour[data-juste="oui"] { color: var(--ok); }
.fiche-capsule__retour[data-juste="non"] { color: var(--danger); }
.fiche-capsule__corrige { margin-top: var(--s-3); }
.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; }
.recos--grille .reco__lien { padding-right: var(--s-5); }

/* ---- fonds.css ---- */
/* =========================================================================
   Fonds (lot 5) : bandeau bleu nuit en dégradé, filigrane de cotation, sections
   alternées blanc / gris bleuté, dans les deux thèmes (jetons --bandeau-*,
   --filigrane, --fond-alt). Le quadrillage millimétré, qui faisait un effet de
   cahier, est retiré à la demande de l'éditeur (22 oct. 2026, D-80) ; la photo
   de l'accueil reste.
   Écran seulement : l'impression garde le fond blanc de base.css. Aucun fond
   animé ; les figures gardent leur fond neutre (--fig-bg, opaque).
   Poids et contrastes contrôlés par tests/contrast-check.mjs.
   ========================================================================= */
@media screen {
  :root {
    --degrade: linear-gradient(100deg, var(--bandeau-1), var(--bandeau-2));
    /* Cotation d'un alésage : axes en trait mixte, lignes d'attache, ligne de cote fléchée, cadre de tolérance */
    --cotation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 130' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='70' cy='55' r='32'/%3E%3Cpath d='M26 55h88M70 11v88' stroke-width='1' stroke-dasharray='14 3 2 3'/%3E%3Cpath d='M38 62v62M102 62v62M38 116h64M140 24h112v26H140zM166 24v26M222 24v26M145 37h16M153 29v16M174 44l12-14'/%3E%3Ccircle cx='153' cy='37' r='6'/%3E%3Ccircle cx='180' cy='37' r='5'/%3E%3Cpath d='M38 116l10-3.5v7zM102 116l-10-3.5v7z' fill='%23000'/%3E%3C/svg%3E");
    --bande-d: var(--gap-col);      /* débord latéral d'une section alternée : l'écart entre colonnes, pour que l'aplat
                                       rejoigne le filet de la navigation au lieu de laisser une bande grise de 8 px */
  }
  body { background: var(--bg); }

  /* Bandeau et panneaux nuit : même dégradé dans les deux thèmes (jetons propres au sombre) */
  .barre, :root[data-theme="dark"] .barre { background: var(--degrade); }
  .hero-cadre, :root[data-theme="dark"] .hero-cadre { background: var(--degrade); }

  /* Filigrane de cotation dans les en-têtes : décor seul, sous le texte */
  .accueil-hero, .outil-tete, .art-tete { position: relative; isolation: isolate; }
  .accueil-hero { background: none; }
  .accueil-hero::after, .outil-tete::after, .art-tete::after {
    content: ""; position: absolute; z-index: -1; top: var(--s-2); right: 0;
    width: min(260px, 42%); aspect-ratio: 2; pointer-events: none;
    background: var(--filigrane);
    -webkit-mask: var(--cotation) center / contain no-repeat; mask: var(--cotation) center / contain no-repeat;
  }
  .accueil-hero::after { top: auto; bottom: var(--s-4); right: var(--s-6); }
  /* téléphone : le filigrane passerait sous le surtitre et le titre ; le décor s'efface devant la lecture */
  @media (max-width: 599px) { .outil-tete::after, .art-tete::after { display: none; } }

  /* Photo de fond de l'accueil (demande de l'éditeur, 20 oct. 2026) : bille rubis d'un palpeur de MMT au contact d'un
     alésage (Rally, Wikimedia Commons, usage libre). À droite, voilée et fondue vers la gauche : le texte de gauche reste
     sur le fond uni ; la légende du cadre reçoit son propre fond. */
  .accueil-hero::before {
    /* la photo, à la hauteur du bandeau, est remontée de 41 % : la bille (57 % de la hauteur de l'image) se place
       au-dessus du cadre de tolérance ; la partie remontée est rognée au ras du bandeau */
    content: ""; position: absolute; z-index: -2; top: -41%; right: 0; width: 56%; height: 100%;
    clip-path: inset(41% 0 0 0);
    background: url("../images/fond-palpeur.webp") 18% 0 / auto 100% no-repeat;
    opacity: var(--photo-opacite); pointer-events: none;
    /* fondus : à gauche vers le texte, à droite et en bas vers le fond (aucun bord net) */
    -webkit-mask: linear-gradient(to right, transparent, #000 55%, #000 88%, transparent), linear-gradient(to bottom, #000 78%, transparent);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(to right, transparent, #000 55%, #000 88%, transparent), linear-gradient(to bottom, #000 78%, transparent);
    mask-composite: intersect;
  }
  .accueil-hero__cadre figcaption { position: relative; padding: 2px var(--s-2); border-radius: var(--r-sm); background: var(--bg); text-wrap: balance; }
  @media (max-width: 959px) { /* colonnes empilées : la photo forme une bande sous le cadre, fondue vers le haut */
    .accueil-hero { padding-bottom: calc(var(--s-8) + 170px); }
    .accueil-hero::before { top: auto; bottom: 0; width: 100%; height: 200px; clip-path: none; background-position: 50% 52%; background-size: cover;
      -webkit-mask: linear-gradient(to bottom, transparent, #000 35%); -webkit-mask-composite: source-over; mask: linear-gradient(to bottom, transparent, #000 35%); mask-composite: add; }
  }

  /* Sections alternées : blanc (--fond-alt) sur le gris bleuté ; l'aplat déborde sans créer de défilement */
  .bande, .art-corps > .rubrique:nth-of-type(even) {
    border-image: linear-gradient(var(--fond-alt) 0 0) fill 0 // 0 var(--bande-d);
  }
  .bande { padding-block: var(--s-10); }
  .bande > :first-child { margin-top: 0; } /* l'aplat donne déjà l'espace : pas de marge de titre en plus */
  .page-accueil { --bande-d: 100vmax; }
  .page-accueil .principal > section:not(.accueil-hero) { margin: 0; padding-block: var(--s-10); }
  .art-corps > .rubrique { padding-block: var(--s-10); }
  .art-corps > .rubrique + .rubrique { margin-top: 0; border-top: 0; }
  .trente.bande { margin-bottom: var(--s-6); }
  @media (max-width: 959px) { :root { --bande-d: var(--gutter); } }
}