/* jimenezjulien.pro : dossier de planches techniques pour la refonte et la migration SEO.
   Papier quadrillé, encre bleue pour les structures, orange pour les flux de redirection,
   vert pour les validations. Polices : IBM Plex Sans (titres) et IBM Plex Mono (texte).
   Sommaire : 1 jetons, 2 base, 3 composants, 4 en-tête, 5 sections de l'accueil,
   6 pied de page, 7 rubrique Dossiers et articles, 8 page 404, 9 animations, 10 responsive, 11 impression. */

/* 1. Jetons */
:root {
  --bg: #FFFFFF;
  --surface: #F2F7FB;
  --ink: #0A2540;
  --muted: #52667D;
  --line: #D3E1EE;
  --primary: #1565C0;
  --secondary: #FF6D00;
  --accent: #00A389;

  --primary-d: #0E4C93;
  --primary-50: #EAF2FC;
  --secondary-ink: #B54800;
  --secondary-50: #FFF3EA;
  --accent-ink: #00735D;
  --accent-50: #E6F6F2;
  --old: #8C9DB0;
  --focus: #E25C00;
  --ink-20: rgba(10, 37, 64, .2);
  --ink-12: rgba(10, 37, 64, .12);
  --ink-60: rgba(10, 37, 64, .6);
  --grid-minor: rgba(211, 225, 238, .58);
  --grid-major: rgba(21, 101, 192, .12);

  --font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-2xs: .6875rem;
  --fs-xs: .75rem;
  --fs-sm: .84375rem;
  --fs-base: clamp(.90625rem, .87rem + .14vw, .984375rem);
  --fs-lead: clamp(1.0625rem, .98rem + .42vw, 1.3125rem);
  --fs-h3: clamp(1.1875rem, 1.06rem + .5vw, 1.4375rem);
  --fs-h2: clamp(1.875rem, 1.25rem + 2.4vw, 3.125rem);
  --fs-h1: clamp(2.125rem, 1.15rem + 3.1vw, 3.5rem);

  --container: 1200px;
  --gutter: clamp(20px, 3vw, 32px);
  --col-gap: clamp(16px, 2.2vw, 28px);
  --section-y: clamp(64px, 2.4rem + 4.8vw, 112px);
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 0v18M0 9h18' stroke='%230A2540' stroke-width='1' fill='none'/%3E%3Ccircle cx='9' cy='9' r='4.5' stroke='%230A2540' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  --arr-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M.75 0v14M.75 7 7.5 3.5M.75 7l6.75 3.5' fill='none' stroke='%231565C0' stroke-width='1.2'/%3E%3C/svg%3E");
  --arr-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M7.25 0v14M7.25 7 .5 3.5M7.25 7 .5 10.5' fill='none' stroke='%231565C0' stroke-width='1.2'/%3E%3C/svg%3E");
  --arr-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 .75h14M7 .75 3.5 7.5M7 .75l3.5 6.75' fill='none' stroke='%231565C0' stroke-width='1.2'/%3E%3C/svg%3E");
  --arr-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 7.25h14M7 7.25 3.5.5M7 7.25 10.5.5' fill='none' stroke='%231565C0' stroke-width='1.2'/%3E%3C/svg%3E");
  --arr-lo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M1 0v14M1 7l7.5-4M1 7l7.5 4' fill='none' stroke='%23FF6D00' stroke-width='1.8'/%3E%3C/svg%3E");
  --arr-ro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M8 0v14M8 7 .5 3M8 7 .5 11' fill='none' stroke='%23FF6D00' stroke-width='1.8'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.5 12.5 13.5 3.5' fill='none' stroke='%2300735D' stroke-width='2'/%3E%3C/svg%3E");
  --hatch-o: repeating-linear-gradient(45deg, rgba(255, 109, 0, .42) 0 1px, transparent 1px 6px);
}

/* 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  padding-top: var(--header-h);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: 1.72;
  color: var(--ink);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; }
sup { font-size: .62em; line-height: 0; position: relative; top: -.6em; vertical-align: baseline; }
small { font-size: inherit; }
strong { font-weight: 600; }
code, kbd, .tag-mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "zero" 1; }
::selection { background: #D6E6FA; color: var(--ink); }
a { color: var(--primary); text-decoration: underline dotted 1px; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
a:hover { text-decoration-style: solid; color: var(--primary-d); }
:focus-visible { outline: 2px dotted var(--focus); outline-offset: 3px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.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; }
html:not(.js) .js-only { display: none !important; }
.js .no-js-only { display: none !important; }
.muted { color: var(--muted); }

.skip {
  position: fixed; left: 12px; top: 10px; z-index: 100;
  padding: 10px 16px; background: var(--ink); color: #fff; font: 600 13px/1 var(--font-mono);
  text-decoration: none; transform: translateY(-160%); transition: transform .2s;
}
.skip:focus { transform: none; color: #fff; }

/* Papier quadrillé (couche fixe, décalée au défilement par app.js) */
.grid-bg {
  position: fixed; left: 0; right: 0; top: -120px; bottom: -120px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: calc(50% + .5px) 0;
  will-change: transform;
}

/* Règle graduée en marge gauche (grands écrans) */
.ruler { display: none; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); }

/* 3. Composants */
.h2 { font: 700 var(--fs-h2)/1.06 var(--font-display); letter-spacing: -.024em; margin: 0 0 .55em; max-width: 21ch; text-wrap: balance; }
.h2--center { text-align: center; margin-inline: auto; }
.h3 { font: 600 var(--fs-h3)/1.25 var(--font-display); letter-spacing: -.01em; margin: 0 0 .7em; }
.lede { font: 400 var(--fs-lead)/1.58 var(--font-display); color: var(--ink); margin: 0 0 1.2em; max-width: 60ch; }
.tag-mono { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.footnote { font-size: var(--fs-xs); color: var(--muted); margin: 18px 0 0; }
.footnote--center { text-align: center; max-width: 72ch; margin-inline: auto; }

/* En-tête de planche : numéro, titre, échelle */
.pl-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  margin: 0 0 clamp(28px, 4vw, 52px); padding: 10px 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--ink), var(--ink)) center top / 100% 1.5px no-repeat;
  font: 500 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.pl-head__num {
  color: #fff; padding: 5px 12px 5px 8px; font-weight: 600; letter-spacing: .06em;
  background: linear-gradient(225deg, transparent 5px, var(--primary) 5.5px);
}
.pl-head__title { flex: 1 1 auto; color: var(--ink); }
.pl-head__scale { margin-left: auto; text-align: right; }

/* Boutons à coin coupé (forme dessinée par dégradé : l'ombre portée suit la découpe) */
.btn {
  --bg: transparent; --fg: var(--ink); --bd: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px 12px 20px;
  font: 600 .9375rem/1.2 var(--font-display); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  color: var(--fg); border: 0; border-radius: 0; cursor: pointer;
  background: linear-gradient(225deg, transparent 7.07px, var(--bg) 7.6px);
  transition: translate .25s var(--ease), filter .25s var(--ease), color .2s;
}
.btn:hover { color: var(--fg); translate: -2px -2px; filter: drop-shadow(4px 4px 0 #CADCEF); }
.btn:active { translate: 0 0; filter: none; }
.btn .ic { width: 18px; height: 18px; flex: none; }
.btn--primary { --bg: var(--primary); --fg: #fff; }
.btn--primary:hover { --bg: var(--primary-d); }
.btn--mail { --bg: var(--secondary); --fg: var(--ink); }
.btn--mail:hover { --bg: #FF8124; }
.btn--line {
  border: 1px solid transparent;
  background:
    linear-gradient(225deg, transparent 6.6px, #fff 7.1px) padding-box,
    linear-gradient(225deg, transparent 7.07px, var(--bd) 7.6px) border-box;
}
.btn--line:hover { --bd: var(--primary); color: var(--primary); }
.btn--line.is-copied { --bd: var(--accent); color: var(--accent-ink); }
.btn--sm { min-height: 44px; padding: 10px 16px 10px 14px; font-size: .875rem; }
.btn-text {
  min-height: 44px; padding: 8px 4px; background: none; border: 0; cursor: pointer;
  font: 500 12.5px/1.2 var(--font-mono); color: var(--muted); text-decoration: underline dotted 1px; text-underline-offset: 3px;
}
.btn-text:hover { color: var(--ink); text-decoration-style: solid; }

/* Icônes au trait */
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: miter; stroke-linecap: square; flex: none; }
.ic--lg { width: 30px; height: 30px; stroke-width: 1.35; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Feuille encadrée avec croix de repérage */
.sheet { position: relative; isolation: isolate; padding: clamp(28px, 4.4vw, 60px); }
.sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--ink-20); background: rgba(255, 255, 255, .78); }
.sheet::after, .frame-x::after, .pv::after {
  content: ""; position: absolute; inset: -9px; pointer-events: none;
  background: var(--cross) left top / 18px no-repeat, var(--cross) right top / 18px no-repeat, var(--cross) left bottom / 18px no-repeat, var(--cross) right bottom / 18px no-repeat;
}
.frame-x { position: relative; margin: 0; padding: 10px; background: #fff; border: 1px solid var(--line); }

/* Lignes de cote */
.dim, .cote__dim { position: relative; display: flex; align-items: center; justify-content: center; color: var(--primary); }
.dim::before, .cote__dim::before { content: ""; position: absolute; background: currentColor; transition: transform 1s .15s var(--ease); }
.dim::after, .cote__dim::after { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; transition: opacity .4s .7s; }
.dim--h, .cote__dim { height: 14px; }
.dim--h::before, .cote__dim::before { left: 1px; right: 1px; top: 50%; height: 1px; }
.dim--h::after, .cote__dim::after { background-image: var(--arr-l), var(--arr-r); background-position: left center, right center; background-size: 8px 14px; }
.dim--v { width: 14px; }
.dim--v::before { top: 1px; bottom: 1px; left: 50%; width: 1px; }
.dim--v::after { background-image: var(--arr-t), var(--arr-b); background-position: center top, center bottom; background-size: 14px 8px; }
.dim__lbl { position: relative; z-index: 1; padding: 0 10px; background: #fff; font: 500 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* Cartouche d'ingénieur */
.cartouche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1.5px solid var(--ink); background: #fff; }
.cartouche > div { padding: 9px 14px 10px; border-left: 1px solid var(--ink-20); min-width: 0; }
.cartouche > div:first-child { border-left: 0; }
.cartouche dt { font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.cartouche dd { margin: 0; font: 600 12.5px/1.3 var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.cartouche a { color: var(--ink); }

/* Liste d'étiquettes entre crochets */
.taglist { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 26px 0 0; padding: 0; }
.taglist li { padding: 7px 10px; font: 500 12px/1.2 var(--font-mono); background: #fff; border: 1px dashed var(--ink-20); color: var(--ink); }
.taglist li::before { content: "["; color: var(--primary); margin-right: 3px; }
.taglist li::after { content: "]"; color: var(--primary); margin-left: 3px; }

/* Tableaux techniques */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tech-table { width: 100%; border-collapse: collapse; background: #fff; font-size: var(--fs-sm); border: 1px solid var(--ink-20); }
.tech-table caption { caption-side: top; text-align: left; padding: 0 0 12px; font: 500 var(--fs-xs)/1.4 var(--font-mono); color: var(--muted); }
.tech-table caption .tag-mono { margin-right: 8px; }
.tech-table th { text-align: left; padding: 12px 16px; font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--surface); border-bottom: 1.5px solid var(--ink); }
.tech-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.tech-table tbody tr:hover td { background: #FAFCFE; }
.tech-table code { font-size: .8125rem; color: var(--ink); overflow-wrap: anywhere; }
.tech-table td:last-child { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }
.code-pill { display: inline-block; padding: 3px 7px; font: 600 11px/1.2 var(--font-mono); color: #fff; background: var(--secondary-ink); }
.code-pill--gone { background: var(--muted); }

/* Citations signature */
.sig-quote { margin: 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--primary); }
.sig-quote p { font: italic 400 clamp(1.125rem, 1rem + .55vw, 1.4375rem)/1.5 var(--font-display); margin: 0 0 14px; color: var(--ink); }
.sig-quote footer { font: 600 var(--fs-2xs)/1.2 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.sig-quote footer::before { content: "Citation · "; color: var(--primary); }
.sig-quote--boxed { padding: 24px 24px 22px; border: 1px solid var(--ink-20); border-left: 3px solid var(--primary); background: #fff; }

.link-ext { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 .875rem/1.3 var(--font-mono); }
.link-ext .ic { width: 16px; height: 16px; }

/* 4. En-tête */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--header-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  transition: border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { border-bottom-color: #BCD2E8; }
.site-header__in { height: 100%; display: flex; align-items: center; gap: 20px; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); text-decoration: none; min-width: 0; }
.brand:hover { color: var(--ink); }
.brand__mono {
  display: grid; place-items: center; flex: none; width: 46px; height: 34px;
  font: 600 14px/1 var(--font-mono); letter-spacing: .06em; color: var(--primary);
  border: 1.5px solid transparent;
  background:
    linear-gradient(225deg, transparent 5.6px, #fff 6.2px) padding-box,
    linear-gradient(225deg, transparent 6.4px, var(--primary) 7px) border-box;
  transition: color .25s;
}
.brand:hover .brand__mono { color: var(--secondary-ink); }
.brand__txt { display: flex; flex-direction: column; min-width: 0; font: 600 15px/1.2 var(--font-display); white-space: nowrap; }
.brand__sep { display: none; color: var(--line); }
.brand__sub { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.nav { display: none; }
.nav__list { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.nav__link { display: flex; align-items: center; min-height: 44px; padding: 0 10px; font: 500 12.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: color .2s; }
.nav__link:hover, .nav__link.is-active { color: var(--primary); }
.nav__idx { margin-right: 6px; font-size: 10.5px; color: var(--primary); }
.nav__ind { position: absolute; left: 0; bottom: 9px; height: 1.5px; width: 0; background: var(--primary); opacity: 0; transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s; pointer-events: none; }
.nav__ind.is-on { opacity: 1; }
.nav__mag {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; margin-left: 8px;
  font: 600 12.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border: 1px solid var(--ink); transition: background .2s, color .2s;
}
.nav__mag:hover, .nav__mag[aria-current] { background: var(--ink); color: #fff; }
.nav .btn--mail { margin-left: 8px; }

.menu-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px;
  font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  background: #fff; border: 1px solid var(--ink); cursor: pointer;
}
.menu-btn .ic { width: 20px; height: 20px; color: var(--primary); }
.menu-btn__x { display: none; position: relative; width: 16px; height: 16px; }
.menu-btn__x::before, .menu-btn__x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); transform: rotate(45deg); }
.menu-btn__x::after { transform: rotate(-45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__x { display: block; }
.menu-btn[aria-expanded="true"] .menu-btn__ruler { display: none; }

.menu-panel {
  position: fixed; left: 0; right: 0; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
  overflow-y: auto; padding: 24px var(--gutter) 40px;
  background-color: #fff;
  background-image: linear-gradient(to right, var(--grid-minor) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
  background-size: 24px 24px;
  border-top: 1px solid var(--line);
}
.menu-panel__head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 0; border-bottom: 1px solid var(--line); background: linear-gradient(var(--ink), var(--ink)) top / 100% 1.5px no-repeat; font: 500 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.menu-panel__list { list-style: none; margin: 0; padding: 0; }
.menu-panel__list a {
  display: flex; align-items: baseline; gap: 16px; min-height: 56px; padding: 12px 0;
  font: 600 clamp(1.625rem, 1.2rem + 2vw, 2.25rem)/1.1 var(--font-display); letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--ink-20);
}
.menu-panel__list a span { font: 600 13px/1 var(--font-mono); color: var(--primary); letter-spacing: .04em; min-width: 26px; }
.menu-panel__list a:hover { color: var(--primary); }
.menu-panel__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px; }
.nav__mag--lg { margin: 0; min-height: 48px; font-size: 14px; }
.menu-panel .btn--mail { white-space: normal; text-align: left; font-family: var(--font-mono); font-size: .875rem; }
.menu-open { overflow: hidden; }

/* 5. Sections de l'accueil */

/* PL-01 : hero */
.hero { position: relative; display: flex; align-items: center; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding-block: clamp(36px, 4.6vw, 64px) clamp(56px, 6vw, 88px); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: center; }
.hero__text { grid-column: 1 / span 6; position: relative; z-index: 2; }
.hero__label { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 26px; font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.hero__label-num { color: #fff; padding: 6px 12px 6px 8px; background: linear-gradient(225deg, transparent 5px, var(--primary) 5.5px); }
.hero__label-sep { width: 28px; height: 1px; background: var(--ink); }
.hero__title { font: 700 var(--fs-h1)/1.06 var(--font-display); letter-spacing: -.03em; margin: 0 0 24px; text-wrap: balance; }
.hero__kicker { display: block; margin-bottom: .5em; font: 600 clamp(1.0625rem, .95rem + .5vw, 1.375rem)/1.3 var(--font-display); letter-spacing: -.005em; color: var(--primary); }
.cote-u { position: relative; display: inline-block; white-space: nowrap; padding-bottom: .02em; }
.cote-u::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -.2em; height: 14px;
  background: var(--arr-lo) left center / 9px 14px no-repeat, var(--arr-ro) right center / 9px 14px no-repeat, linear-gradient(var(--secondary), var(--secondary)) center / calc(100% - 4px) 2px no-repeat;
  transform-origin: center;
}
.hero__sub { font: 400 clamp(.9375rem, .88rem + .25vw, 1.0625rem)/1.65 var(--font-mono); color: var(--ink); margin: 0 0 18px; padding-left: 16px; border-left: 2px solid var(--secondary); max-width: 58ch; }
.hero__intro { font: 400 clamp(1rem, .96rem + .2vw, 1.125rem)/1.62 var(--font-display); color: var(--ink); margin: 0 0 28px; max-width: 60ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero__spec { display: flex; flex-wrap: wrap; gap: 0; margin: 0; border-top: 1px solid var(--ink-20); }
.hero__spec > div { padding: 12px 22px 0 0; margin-right: 22px; border-right: 1px solid var(--line); }
.hero__spec > div:last-child { border-right: 0; }
.hero__spec dt { font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.hero__spec dd { margin: 0; font: 600 12.5px/1.4 var(--font-mono); }

.hero__plate { grid-column: 7 / span 6; position: relative; padding-top: 18px; }
.hero__photo { width: 70%; margin-left: auto; }
.hero__photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface); }
.hero__photo figcaption { position: absolute; right: 0; bottom: 100%; padding: 0 0 6px; font-size: 10px; color: var(--muted); }
.hero__schema {
  position: relative; z-index: 1; width: 90%; margin: -24% 0 0; padding: 16px 16px 10px;
  border: 1px solid transparent;
  background:
    linear-gradient(225deg, transparent 10.6px, #fff 11.1px) padding-box,
    linear-gradient(225deg, transparent 11.3px, var(--ink-20) 11.8px) border-box;
  filter: drop-shadow(6px 6px 0 rgba(21, 101, 192, .08));
}
.hero__cartouche { position: relative; z-index: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 62%; margin: -26px 0 0 auto; }
.hero__cartouche > div:nth-child(3) { border-left: 0; }
.hero__cartouche > div:nth-child(n+3) { border-top: 1px solid var(--ink-20); }

.schema { display: block; width: 100%; height: auto; font-family: var(--font-mono); overflow: visible; }
.schema--m { display: none; }
.schema text { font-size: 12px; fill: var(--ink); }
.schema--m text { font-size: 10px; }
.sch-head text { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; fill: var(--muted); }
.schema--m .sch-head text { font-size: 9.5px; }
.sch-head path { stroke: var(--ink); stroke-width: 1; fill: none; }
.sch-tree path { fill: none; stroke-width: 1; }
.sch-tree--old path { stroke: var(--old); }
.sch-tree--old rect { fill: #fff; stroke: var(--old); }
.sch-tree--old text { fill: var(--muted); }
.sch-tree--new path { stroke: var(--primary); }
.sch-tree--new rect { fill: var(--primary-50); stroke: var(--primary); }
.sch-tree--new text { fill: var(--primary-d); }
.sch-orphan rect { fill: #fff; stroke: var(--secondary); stroke-dasharray: 3 3; }
.sch-orphan text { fill: var(--muted); }
.sch-strike { stroke: var(--secondary-ink); stroke-width: 1.4; fill: none; }
.sch-stub { stroke: var(--secondary); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.sch-x { stroke: var(--secondary); stroke-width: 2; fill: none; }
.schema .sch-note { font-size: 11px; font-weight: 600; fill: var(--secondary-ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.schema--m .sch-note { font-size: 9.5px; }
.trace { fill: none; stroke: var(--secondary); stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 0; }
.trace-head { fill: none; stroke: var(--secondary); stroke-width: 1.8; }
.trace-dot { fill: var(--secondary); stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity .3s; }
.trace-dot.is-on { opacity: 1; }
.sch-legend path { stroke-width: 2; fill: none; }
.sch-legend--old { stroke: var(--old); }
.sch-legend--new { stroke: var(--primary); }
.sch-legend--flow { stroke: var(--secondary); }
.schema .sch-legend text { font-size: 10.5px; fill: var(--muted); }
.schema--m .sch-legend text { font-size: 9.5px; }

/* Coordonnées de grille en marge */
[data-coord]::before { content: none; }

/* PL-02 : points de rupture */
.rupture__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.rupture__intro .h2 { grid-column: 1 / span 5; margin: 0; }
.rupture__intro .lede { grid-column: 7 / span 6; margin: 0; }
.coupe { margin: 0 0 clamp(32px, 4vw, 48px); padding: clamp(14px, 2vw, 26px); background: #fff; border: 1px solid var(--line); }
.coupe__svg { display: block; width: 100%; height: auto; font-family: var(--font-mono); }
.coupe__svg--tall { display: none; max-width: 420px; margin-inline: auto; }
.coupe__cap { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--ink-20); font-size: var(--fs-xs); color: var(--muted); }
.hatch-line { stroke: var(--secondary); stroke-width: 1; opacity: .55; }
.hatch-ground { stroke: var(--muted); stroke-width: .9; opacity: .45; }
.cp-bands rect { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.cp-bands path { fill: none; stroke: var(--ink-20); stroke-width: 1; stroke-dasharray: 4 4; }
.cp-labels text { font-size: 12px; font-weight: 600; letter-spacing: .06em; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.cp-labels .cp-sub { font-size: 11px; font-weight: 400; letter-spacing: 0; fill: var(--muted); }
.cp-draw rect:not([fill]) { fill: #fff; stroke: var(--old); stroke-width: 1; }
.cp-draw path { fill: none; stroke: var(--old); stroke-width: 1; }
.cp-mono { font-size: 11.5px; fill: var(--ink); }
.coupe .cp-note { font-size: 11px; font-weight: 600; fill: var(--secondary-ink); }
.cp-draw .cp-flow { stroke: var(--secondary); stroke-width: 1.6; }
.cp-draw .cp-dash { stroke-dasharray: 5 4; }
.cp-draw .cp-x, .cp-draw .cp-head { stroke: var(--secondary); stroke-width: 1.8; }
.cp-draw .cp-new { stroke: var(--primary); fill: var(--primary-50); }
.cp-draw .cp-doc { fill: #fff; stroke: var(--ink); }
.cp-draw .cp-risk, .cp-draw .cp-missing { stroke: var(--secondary); stroke-width: 1.2; }
.cp-draw .cp-missing { stroke-dasharray: 4 3; }
.cp-pages path { stroke: var(--line); stroke-width: 2; }
.cp-net path { stroke: var(--primary); stroke-width: 1.3; }
.cp-net .cp-broken { stroke: var(--secondary); stroke-dasharray: 3 5; stroke-width: 1.6; }
.cp-net circle { fill: #fff; stroke: var(--primary); stroke-width: 1.4; }
.cp-net .cp-orph { stroke: var(--secondary); stroke-dasharray: 2 2; }
.cp-draw .cp-gauge { stroke: var(--ink); stroke-width: 2; }
.cp-draw .cp-needle { stroke: var(--secondary); stroke-width: 2; }
.cp-draw .cp-ground { stroke: none; }
.cp-leaders path { fill: none; stroke: var(--ink-60); stroke-width: 1; transition: stroke .25s; }
.cp-leaders circle { fill: var(--ink); }
.cp-balls circle { fill: #fff; stroke: var(--ink); stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.cp-balls text { font-size: 15px; font-weight: 600; text-anchor: middle; fill: var(--ink); transition: fill .25s; }
.coupe .is-hot circle { fill: var(--primary); stroke: var(--primary); }
.coupe .is-hot text { fill: #fff; }
.coupe path.is-hot { stroke: var(--primary); stroke-width: 1.6; }

.nomen { border-top: 1.5px solid var(--ink); }
.nomen__head, .nomen__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.35fr); gap: 12px 28px; }
.nomen__head { padding: 10px 0; border-bottom: 1px solid var(--ink-20); font: 500 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.nomen__row { padding: 22px 0; border-bottom: 1px solid var(--line); transition: background-color .25s; }
.nomen__row:hover, .nomen__row.is-hot { background-color: rgba(234, 242, 252, .7); }
.nomen__ball { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 50%; font: 600 14px/1 var(--font-mono); background: #fff; transition: background .25s, color .25s, border-color .25s; }
.nomen__row:hover .nomen__ball, .nomen__row.is-hot .nomen__ball { background: var(--primary); border-color: var(--primary); color: #fff; }
.nomen__title { font: 600 1.0625rem/1.32 var(--font-display); margin: 5px 0 0; }
.nomen__cell { margin: 0; font-size: var(--fs-sm); line-height: 1.65; }
.nomen__cell--ctl { padding-left: 26px; background: var(--tick) left 3px / 16px no-repeat; }
.nomen__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* PL-03 : profil et Fig. 1 */
.profil__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.fig1 { grid-column: 1 / span 5; margin: 0; position: relative; }
.fig1__box { position: relative; padding-right: 30px; }
.fig1__frame { position: relative; padding: 12px; background: #fff; border: 1px solid var(--primary); }
.fig1__frame img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #1a2340; }
.fig1__tag {
  position: absolute; top: -15px; left: 26px; z-index: 2; padding: 8px 16px 8px 12px;
  font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(225deg, transparent 7px, var(--secondary) 7.5px);
}
.fig1__cross { position: absolute; width: 18px; height: 18px; background: var(--cross) center / 18px no-repeat; pointer-events: none; }
.fig1__cross--tl { left: -9px; top: -9px; }
.fig1__cross--tr { right: -9px; top: -9px; }
.fig1__cross--bl { left: -9px; bottom: -9px; }
.fig1__cross--br { right: -9px; bottom: -9px; }
.fig1__dimv { position: absolute; top: 0; bottom: 0; right: 0; }
.fig1__dimh { margin: 14px 30px 0 0; }
.fig1__cap { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--ink-20); font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--muted); }
.profil__text { grid-column: 7 / span 6; padding-top: 6px; }
.prose-sm p { max-width: 64ch; }

/* PL-04 : chantiers, fiches techniques */
.split-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.split-head .h2 { grid-column: 1 / span 6; margin: 0; }
.split-head .lede { grid-column: 8 / span 5; margin: 0; }
.ft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.ft { display: flex; }
.ft__face {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 22px 22px 20px;
  border: 1px solid transparent;
  background:
    linear-gradient(225deg, transparent 9.2px, #fff 9.7px) padding-box,
    linear-gradient(225deg, transparent 9.9px, var(--ink-20) 10.4px) border-box;
  transition: translate .3s var(--ease), filter .3s var(--ease);
}
.ft__face:hover { translate: -3px -3px; filter: drop-shadow(4px 4px 0 var(--line)); }
.ft__top { display: flex; justify-content: space-between; align-items: center; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px dashed var(--ink-20); }
.ft__ref { font: 600 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--primary); }
.ft__top .ic { color: var(--ink); }
.ft__title { font: 600 1.1875rem/1.25 var(--font-display); letter-spacing: -.008em; margin: 0 0 10px; }
.ft__def { font-size: var(--fs-sm); line-height: 1.65; margin: 0 0 18px; }
.ft__spec { display: grid; gap: 8px; margin: auto 0 0; }
.ft__row { padding: 10px 12px; font-size: .8125rem; line-height: 1.55; }
.ft__row dt { font: 600 10px/1.2 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 5px; }
.ft__row dd { margin: 0; }
.ft__row--risk { padding-left: 22px; background: var(--hatch-o) left top / 10px 100% no-repeat, var(--secondary-50); }
.ft__row--risk dt { color: var(--secondary-ink); }
.ft__row--ctl { padding-left: 34px; background: var(--tick) 11px 11px / 15px no-repeat, var(--accent-50); }
.ft__row--ctl dt { color: var(--accent-ink); }
.ft__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font: 600 12.5px/1.35 var(--font-mono); }
.ft__link::before { content: "→"; margin-right: 8px; color: var(--secondary); text-decoration: none; display: inline-block; }

/* PL-05 : redirections et simulateur */
.redir__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: end; margin-bottom: clamp(24px, 3vw, 36px); }
.redir__top .h2 { grid-column: 1 / span 6; margin: 0; }
.redir__top .lede { grid-column: 7 / span 6; margin: 0; }
.redir__banner { margin: 0 0 clamp(32px, 4vw, 52px); }
.redir__banner img { display: block; width: 100%; height: clamp(170px, 22vw, 300px); object-fit: cover; object-position: 35% 48%; padding: 8px; background: #fff; border: 1px solid var(--line); }
.redir__banner figcaption { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }
.redir__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; margin-bottom: clamp(36px, 5vw, 60px); }
.sim {
  grid-column: 1 / span 7; position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(225deg, transparent 9.2px, #fff 9.7px) padding-box,
    linear-gradient(225deg, transparent 9.9px, var(--ink) 10.4px) border-box;
}
.sim__bar { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(rgba(242, 247, 251, .7), rgba(242, 247, 251, .7)) padding-box; }
.sim__title { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.sim__title .ic { color: var(--secondary); }
.sim__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sim__tab { min-height: 40px; padding: 8px 12px; font: 500 12px/1.2 var(--font-mono); color: var(--ink); background: #fff; border: 1px solid var(--ink-20); border-radius: 2px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sim__tab:hover { border-color: var(--primary); color: var(--primary); }
.sim__tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.sim__stage { padding: 20px 18px 6px; }
.sim__state { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0 0 14px; font: 500 12px/1.4 var(--font-mono); }
.sim__count { font-weight: 600; color: var(--secondary-ink); }
.sim__count--ok, .sim.is-opt .sim__count { color: var(--accent-ink); }
.sim__after { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--ink-20); }
.chain { list-style: none; margin: 0; padding: 0; }
.chain__node, .chain__hop { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease), opacity .4s var(--ease); }
.chain__in { min-height: 0; overflow: hidden; transition: padding .55s var(--ease), border-width .55s var(--ease); }
.chain__node .chain__in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--ink-20); background: var(--surface); }
.chain__node--from .chain__in { background: #fff; border-color: var(--old); }
.chain__node--to .chain__in { background: var(--primary-50); border-color: var(--primary); }
.chain code { font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; min-width: 0; }
.chain__tag { font: 600 9.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chain__node--to .chain__tag { color: var(--primary); }
.chain__ok { margin-left: auto; padding: 2px 7px; font: 600 11px/1.3 var(--font-mono); color: var(--accent-ink); background: #fff; border: 1px solid var(--accent); }
.chain__hop .chain__in { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 0 8px 44px; }
.chain__hop .chain__in::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 7px; width: 2px; background: var(--secondary); }
.chain__hop .chain__in::after { content: ""; position: absolute; left: 17px; bottom: 0; border-top: 8px solid var(--secondary); border-left: 5px solid transparent; border-right: 5px solid transparent; }
.chain__code { padding: 2px 6px; font: 600 11px/1.3 var(--font-mono); color: #fff; background: var(--secondary-ink); }
.chain__why { font-size: 12px; line-height: 1.4; color: var(--muted); }
.chain__pulse { position: absolute; left: 18px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 0 3px rgba(255, 109, 0, .2); opacity: 0; }
.sim.is-opt .chain__node--mid, .sim.is-opt .chain__hop--mid { grid-template-rows: 0fr; opacity: 0; }
.sim.is-opt .chain__node--mid .chain__in, .sim.is-opt .chain__hop--mid .chain__in { padding-block: 0; border-width: 0; min-height: 0; }
.sim.is-opt .chain__hop--first .chain__in::before { background: linear-gradient(var(--secondary), var(--secondary)); }
.sim.is-opt .chain__hop--first .chain__why { color: var(--accent-ink); font-weight: 600; }
.sim__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px 4px; }
.sim__live { margin: 0; font-size: 12px; color: var(--accent-ink); }
.sim__note { margin: 0; padding: 12px 18px 18px; font-size: 12px; line-height: 1.6; color: var(--muted); }

.rules { grid-column: 9 / span 4; }
.rules .h3 { margin-bottom: 14px; }
.rules__list { counter-reset: r; list-style: none; padding: 0; border-top: 1.5px solid var(--ink); }
.rules__list li { counter-increment: r; position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.62; }
.rules__list li::before { content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 15px; display: grid; place-items: center; width: 30px; height: 24px; font: 600 11.5px/1 var(--font-mono); color: var(--primary); border: 1px solid var(--ink-20); background: #fff; }
.rules__list strong { font: 600 .9375rem/1.4 var(--font-display); }

/* PL-06 : protocole */
.proto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.proto__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 28px); }
.proto__aside .h2 { font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); }
.proto__intro { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink); max-width: 44ch; }
.proto__nav ol { --pp: 0; position: relative; list-style: none; margin: 26px 0 0; padding: 0; border-left: 1px solid var(--line); }
.proto__nav ol::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: calc(var(--pp) * 100%); background: var(--primary); transition: height .5s var(--ease); }
.proto__nav a { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 6px 0 6px 18px; font: 500 13px/1.3 var(--font-mono); color: var(--muted); text-decoration: none; transition: color .25s; }
.proto__nav a span { display: grid; place-items: center; flex: none; width: 30px; height: 28px; font-weight: 600; font-size: 12px; border: 1px solid var(--ink-20); background: #fff; color: var(--muted); transition: background .3s, color .3s, border-color .3s; }
.proto__nav a:hover { color: var(--ink); }
.proto__nav a.is-done span { border-color: var(--primary); color: var(--primary); }
.proto__nav a.is-active { color: var(--ink); font-weight: 600; }
.proto__nav a.is-active span { background: var(--primary); border-color: var(--primary); color: #fff; }
.proto__steps { grid-column: 6 / span 7; }
.step { position: relative; padding-bottom: clamp(32px, 4vw, 52px); margin-bottom: clamp(32px, 4vw, 52px); border-bottom: 1px dashed var(--ink-20); }
.step__head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.step__n { font: 700 clamp(2.75rem, 1.8rem + 3vw, 4.25rem)/1 var(--font-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.3px var(--primary); transition: color .45s var(--ease); font-variant-numeric: tabular-nums; }
.step.is-active .step__n, .step.is-done .step__n { color: var(--primary); }
.step__title { flex: 1; font: 600 var(--fs-h3)/1.25 var(--font-display); }
.step__head .ic { color: var(--muted); }
.step.is-active .step__head .ic { color: var(--primary); }
.step p { max-width: 64ch; }
.step__spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; border: 1px solid var(--line); background: #fff; }
.step__spec > div { padding: 12px 14px 13px; border-left: 1px solid var(--line); min-width: 0; }
.step__spec > div:first-child { border-left: 0; }
.step__spec dt { margin-bottom: 6px; font: 600 10px/1.2 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--primary); }
.step__spec dd { margin: 0; font-size: .8125rem; line-height: 1.5; }
.proto__note { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 18px 20px; font-size: var(--fs-sm); line-height: 1.65; background: var(--accent-50); border-left: 3px solid var(--accent); }
.proto__note .ic { color: var(--accent-ink); margin-top: 1px; }

/* PL-07 : frise */
.frise { --p: 1; position: relative; }
.js .frise { --p: 0; }
.frise__rail { position: relative; padding-top: 30px; }
.frise__track { position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: var(--line); }
.frise__fill { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--p) * 100%); background: var(--primary); }
.frise__cursor { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--secondary); transform: rotate(45deg); box-shadow: 0 0 0 5px rgba(255, 109, 0, .16); }
.frise__flag { position: absolute; right: -8px; top: -34px; width: 24px; height: 24px; color: var(--ink); }
.frise__phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.phase { position: relative; padding: 32px 8px 0 0; }
.phase__dot { position: absolute; left: 0; top: -7px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #B9CCE0; background: #fff; transition: background .35s, border-color .35s, box-shadow .35s; }
.phase.is-on .phase__dot { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 5px var(--primary-50); }
.phase__k { margin: 0 0 6px; font: 600 var(--fs-2xs)/1.2 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); transition: color .35s; }
.phase.is-on .phase__k { color: var(--primary); }
.phase__title { font: 600 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.2 var(--font-display); letter-spacing: -.015em; margin: 0 0 8px; }
.phase__when { margin: 0 0 12px; font: 500 12px/1.5 var(--font-mono); color: var(--secondary-ink); }
.phase__when::before { content: "["; }
.phase__when::after { content: "]"; }
.phase p:last-child { font-size: var(--fs-sm); line-height: 1.65; margin: 0; }
.cost { margin: clamp(44px, 5vw, 68px) 0 0; }
.cost__plot { position: relative; height: clamp(110px, 12vw, 150px); border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); background: rgba(255, 255, 255, .6); }
.cost__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cost__grid { fill: none; stroke: var(--ink-20); stroke-width: 1; stroke-dasharray: 3 4; }
.cost__area { fill: rgba(255, 109, 0, .09); }
.cost__line { fill: none; stroke: var(--secondary); stroke-width: 2.2; }
.cost__lbl { position: absolute; font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--secondary-ink); background: #fff; padding: 4px 6px; }
.cost__lbl--lo { left: 10px; bottom: 12px; }
.cost__lbl--hi { right: 10px; top: 8px; }
.cost figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 12px; font-size: var(--fs-xs); color: var(--muted); }
.frise__key { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.frise__msg { grid-column: 1 / span 5; margin: 0; padding: 20px 22px; font-size: var(--fs-sm); line-height: 1.7; background: #fff; border: 1px solid var(--ink-20); border-top: 3px solid var(--primary); }
.frise__msg strong { display: block; margin-bottom: 8px; font: 600 1.0625rem/1.4 var(--font-display); }
.frise__key .sig-quote { grid-column: 7 / span 6; }

/* PL-08 : check-list de recette */
.recette__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.recette__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 28px); }
.recette__aside .h2 { font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); }
.recette__more { font-size: var(--fs-sm); line-height: 1.7; }
.pl-head--stack .pl-head__title { flex-basis: 100%; order: 3; }
.pv { grid-column: 6 / span 7; position: relative; isolation: isolate; padding: clamp(20px, 3vw, 34px); background: #fff; border: 1px solid var(--ink-20); }
.pv__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 24px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1.5px solid var(--ink); }
.pv__fields { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, .7fr); gap: 10px 12px; align-items: end; font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.pv__blank { height: 16px; border-bottom: 1px dotted var(--ink-60); }
.pv__counter { grid-column: 1; margin: 0; font: 500 13px/1.3 var(--font-mono); color: var(--ink); }
.pv__num { display: inline-block; min-width: 2ch; margin-right: 4px; font: 600 2rem/1 var(--font-mono); color: var(--accent-ink); font-variant-numeric: tabular-nums slashed-zero; }
.pv__bar { grid-column: 1 / -1; position: relative; height: 4px; background: var(--surface); }
.pv__bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width .45s var(--ease); }
.chk { list-style: none; margin: 0; padding: 0; }
.chk li { border-bottom: 1px solid var(--line); }
.chk__item { position: relative; display: grid; grid-template-columns: 28px 26px minmax(0, 1fr); gap: 2px 12px; align-items: start; min-height: 48px; padding: 13px 4px; cursor: pointer; transition: background-color .2s; }
.chk__item:hover { background-color: #FAFCFE; }
.chk__input { position: absolute; left: 4px; top: 12px; width: 28px; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.chk__box { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--ink); background: #fff; transition: border-color .25s, background-color .25s; }
.chk__box svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: square; }
.chk__box path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s var(--ease); }
.chk__input:checked + .chk__box { border-color: var(--accent); background: var(--accent-50); }
.chk__input:checked + .chk__box path { stroke-dashoffset: 0; }
.chk__input:focus-visible + .chk__box { outline: 2px dotted var(--focus); outline-offset: 3px; }
.chk__n { grid-column: 2; grid-row: 1; font: 600 12px/26px var(--font-mono); color: var(--primary); }
.chk__txt { grid-column: 3; grid-row: 1; padding-top: 2px; font-size: var(--fs-sm); line-height: 1.55; }
.chk__tag { grid-column: 3; grid-row: 2; font: 500 11px/1.4 var(--font-mono); color: var(--muted); }
.chk__input:checked ~ .chk__tag { color: var(--accent-ink); }
.pv__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; }
.pv__live { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--accent-ink); min-height: 1.4em; }
.stamp {
  position: absolute; right: clamp(16px, 4vw, 40px); bottom: clamp(70px, 9vw, 96px); z-index: 2;
  display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
  border: 3px double var(--accent); color: var(--accent-ink); background: rgba(255, 255, 255, .55);
  font: 700 19px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  transform: rotate(-14deg) scale(1.5); opacity: 0; pointer-events: none; mix-blend-mode: multiply;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.stamp::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid var(--accent); }
.pv.is-done .stamp { opacity: 1; transform: rotate(-14deg) scale(1); }

/* PL-09 : repères, tableau des révisions */
.reperes__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.reperes__main { grid-column: 1 / span 8; }
.reperes__aside { grid-column: 10 / span 3; padding-top: clamp(0px, 7vw, 96px); }
.reperes__aside > p { margin-top: 22px; font-size: var(--fs-sm); line-height: 1.7; }
.rev { width: 100%; border-collapse: collapse; background: #fff; border: 1.5px solid var(--ink); }
.rev th, .rev td { padding: 14px 16px; text-align: left; vertical-align: top; border: 1px solid var(--ink-20); font-size: var(--fs-sm); line-height: 1.58; }
.rev thead th { font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; background: var(--surface); border-bottom: 1.5px solid var(--ink); }
.rev tbody th { width: 64px; }
.rev__l { display: inline-grid; place-items: center; width: 28px; height: 28px; font: 600 13px/1 var(--font-mono); color: var(--primary); border: 1.5px solid var(--primary); }
.rev__d { width: 128px; white-space: nowrap; font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums slashed-zero; }
.rev tbody tr { transition: background-color .2s; }
.rev tbody tr:hover { background-color: #FAFCFE; }
.rev__now td { background: var(--primary-50); }
.rev__now .rev__l { background: var(--primary); color: #fff; }

/* PL-10 : cotes */
.cotes-sec { background: linear-gradient(rgba(242, 247, 251, .82), rgba(242, 247, 251, .82)); border-block: 1px solid var(--line); }
.cotes { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink-20); border-left: 1px solid var(--ink-20); }
.cote { display: flex; flex-direction: column; padding: clamp(20px, 2.6vw, 32px); background: rgba(255, 255, 255, .78); border-right: 1px solid var(--ink-20); border-bottom: 1px solid var(--ink-20); }
.cote__pre { font: 600 var(--fs-2xs)/1.2 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.cote__num { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 14px; font: 700 clamp(2.25rem, 1.5rem + 3vw, 4.25rem)/1 var(--font-display); letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cote__num small { font: 600 clamp(.75rem, .7rem + .3vw, .9375rem)/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.cote__leg { margin-top: 12px; font-size: .8125rem; line-height: 1.55; }

/* PL-11 : témoignages en annexes */
.annexes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.annex {
  grid-column: 1 / span 6; position: relative; margin: 0; padding: clamp(22px, 3vw, 38px);
  border: 1px solid transparent;
  background:
    linear-gradient(225deg, transparent 10.6px, #fff 11.1px) padding-box,
    linear-gradient(225deg, transparent 11.3px, var(--ink-20) 11.8px) border-box;
}
.annex--b { grid-column: 7 / span 6; margin-top: clamp(0px, 6vw, 80px); }
.annex__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--primary); }
.annex__head span + span { color: var(--muted); font-weight: 500; }
.annex__quote { margin: 0; }
.annex__quote p { margin: 0; font: 400 clamp(1rem, .95rem + .28vw, 1.1875rem)/1.66 var(--font-display); }
.annex__sig { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: end; margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--ink-20); }
.annex__name { font: 600 1.0625rem/1.3 var(--font-display); }
.annex__role { grid-column: 1; font: 400 12.5px/1.5 var(--font-mono); color: var(--muted); }
.annex__sig::after { content: "Signé"; grid-column: 2; grid-row: 1 / span 2; padding: 6px 10px; font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--primary); border: 1px solid var(--primary); transform: rotate(-4deg); }
.avis__link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: clamp(28px, 4vw, 44px) 0 0; }

/* PL-12 : dossiers, cartes */
.dossiers__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.dossiers__head .h2 { grid-column: 1 / span 6; margin: 0; }
.dossiers__head .lede { grid-column: 7 / span 4; margin: 0; font-size: 1.0625rem; }
.dossiers__head .btn { grid-column: 11 / span 2; justify-self: end; }
.dgrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--col-gap); }
.dlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.dcard {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid transparent;
  background:
    linear-gradient(225deg, transparent 9.2px, #fff 9.7px) padding-box,
    linear-gradient(225deg, transparent 9.9px, var(--ink-20) 10.4px) border-box;
  transition: translate .3s var(--ease), filter .3s var(--ease);
}
.dcard:hover { translate: -3px -3px; filter: drop-shadow(4px 4px 0 var(--line)); }
.dcard--feature { grid-row: span 2; }
.dcard__media { position: relative; margin: 9px 9px 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--surface); }
.dcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.dcard:hover .dcard__media img { transform: scale(1.035); }
.dcard__ref { position: absolute; left: 0; top: 0; padding: 6px 10px; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--primary); background: #fff; }
.dcard__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.dcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 10px; font: 500 11.5px/1.4 var(--font-mono); color: var(--muted); }
.dcard__meta > * + *::before { content: "·"; margin: 0 9px; color: var(--ink-20); }
.dcard__cat { font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--primary); }
.dcard__title { font: 600 1.1875rem/1.3 var(--font-display); letter-spacing: -.01em; margin: 0 0 10px; }
.dcard--feature .dcard__title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.2; }
.dcard__lead { margin: 0 0 16px; font-size: var(--fs-sm); line-height: 1.6; }
.dcard__more { position: static; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; min-height: 40px; font: 600 12.5px/1.35 var(--font-mono); }
.dcard__more .ic { width: 16px; height: 16px; color: var(--secondary); transition: transform .3s var(--ease); }
.dcard__more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dcard:hover .dcard__more .ic { transform: translateX(4px); }

/* PL-13 : FAQ */
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.faq-grid__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 28px); }
.faq-grid__aside .h2 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); }
.faq-grid__aside .lede { font-size: 1.0625rem; }
.faq-grid .faq { grid-column: 6 / span 7; }
.faq { border-top: 1.5px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: grid; grid-template-columns: 54px minmax(0, 1fr) 26px; gap: 12px; align-items: start; padding: 19px 2px; cursor: pointer; list-style: none; font: 600 1.0625rem/1.42 var(--font-display); transition: color .2s; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--primary); }
.faq__n { font: 600 12px/1.95 var(--font-mono); color: var(--primary); }
.faq__ic { position: relative; width: 26px; height: 26px; border: 1px solid var(--ink-20); background: #fff; transition: background .2s, border-color .2s; }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--ink); transition: transform .3s var(--ease); }
.faq__ic::after { transform: rotate(90deg); }
.faq__item[open] .faq__ic { background: var(--primary); border-color: var(--primary); }
.faq__item[open] .faq__ic::before, .faq__item[open] .faq__ic::after { background: #fff; }
.faq__item[open] .faq__ic::after { transform: rotate(0deg); }
.faq__a { padding: 0 40px 22px 68px; }
.faq__a p { margin: 0; font-size: var(--fs-sm); line-height: 1.75; max-width: 66ch; }
.faq__a p + p { margin-top: .8em; }

/* PL-14 : contact */
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.contact__intro { grid-column: 1 / span 5; }
.brief-list { margin-top: 26px; padding: 16px 18px 6px; background: #fff; border: 1px dashed var(--ink-20); }
.brief-list__title { margin: 0 0 8px; font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.brief-list ol { list-style: none; padding: 0; }
.brief-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.5; }
.brief-list li span { font-weight: 600; color: var(--primary); }
.cx {
  grid-column: 7 / span 6; position: relative;
  border: 1.5px solid transparent;
  background:
    linear-gradient(225deg, transparent 11.6px, #fff 12.2px) padding-box,
    linear-gradient(225deg, transparent 12.7px, var(--ink) 13.3px) border-box;
}
.cx__label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 22px; border-bottom: 1px solid var(--ink-20); font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.cx__label .ic { width: 18px; height: 18px; color: var(--primary); }
.cx__mail { display: block; padding: 30px 22px 6px; font: 600 clamp(1.3rem, .75rem + 2.1vw, 2.125rem)/1.15 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.cx__mail:hover { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.cx__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 18px 22px 26px; }
.copy-ok { font: 600 12px/1.3 var(--font-mono); color: var(--accent-ink); }
.cx__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1.5px solid var(--ink); }
.cx__cells > div { padding: 13px 22px 14px; border-bottom: 1px solid var(--ink-20); min-width: 0; }
.cx__cells > div:nth-child(odd) { border-right: 1px solid var(--ink-20); }
.cx__cells > div:nth-last-child(-n+2) { border-bottom: 0; }
.cx__cells dt { margin-bottom: 4px; font: 600 10px/1.2 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--primary); }
.cx__cells dd { margin: 0; font-size: .8125rem; line-height: 1.45; }

/* 6. Pied de page */
.site-footer { position: relative; padding: clamp(52px, 6vw, 84px) 0 28px; background: rgba(242, 247, 251, .86); border-top: 1.5px solid var(--ink); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2.4fr) minmax(0, 2.8fr) minmax(0, 2.8fr); gap: clamp(28px, 3vw, 44px); }
.brand--footer { margin-bottom: 16px; }
.footer__brand p { font-size: .8125rem; line-height: 1.7; max-width: 42ch; margin-bottom: 14px; }
.footer__mail { display: inline-flex; align-items: center; min-height: 44px; font: 600 .875rem/1.3 var(--font-mono); overflow-wrap: anywhere; }
.footer__title { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink-20); font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.footer__col ul { list-style: none; padding: 0; }
.footer__col li a { display: inline-flex; align-items: center; min-height: 34px; font-size: .8125rem; color: var(--ink); text-decoration-color: var(--ink-20); }
.footer__col li a:hover { color: var(--primary); text-decoration-color: currentColor; }
.network-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.network-links li a, .footer__net .network-links a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px;
  font: 500 12.5px/1.3 var(--font-mono); color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
  background: #fff; border: 1px solid var(--ink-20); transition: border-color .2s, color .2s, translate .25s var(--ease);
}
.network-links a::before { content: "→"; color: var(--secondary); font-weight: 600; }
.network-links a:hover { color: var(--primary); border-color: var(--primary); translate: 3px 0; }
.cartouche--footer { margin-top: clamp(36px, 4vw, 52px); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 18px; font-size: .75rem; line-height: 1.6; color: var(--muted); }
.footer__legal p { margin: 0; max-width: 100ch; }
.footer__legal a { color: var(--muted); }

/* 7. Rubrique Dossiers et articles longs
   Classes prévues : .page-head, .breadcrumb, .mag-hero, .dlist et .dcard, .article-head, .article-meta,
   .article-cover, .article-layout, .toc, .prose (h2, h3, listes, tableaux, citations), .callout (--tip, --key, --warn),
   .approach, .checklist, .author-box, .related, .read-progress. */
.page-head { padding: clamp(36px, 5vw, 72px) 0 clamp(28px, 4vw, 48px); }
.breadcrumb { margin: 0 0 26px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font: 500 12px/1.5 var(--font-mono); color: var(--muted); }
.breadcrumb li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; color: #A9BED3; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

.mag-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.mag-hero__main { grid-column: 1 / span 7; }
.mag-hero__main .mag-hero__title { margin-bottom: 30px; }
.mag-hero__title { grid-column: 1 / span 7; font: 700 var(--fs-h1)/1.05 var(--font-display); letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.mag-hero__title span { display: block; margin-bottom: .45em; font: 600 clamp(1rem, .9rem + .5vw, 1.3125rem)/1.3 var(--font-display); letter-spacing: 0; color: var(--primary); }
.mag-hero__intro { grid-column: 8 / span 5; }
.mag-hero__intro p { font-size: var(--fs-sm); line-height: 1.75; }
.mag-hero__intro p:first-child { font: 400 var(--fs-lead)/1.58 var(--font-display); }
.mag-section { padding-bottom: var(--section-y); }

/* Index : légende de lecture, liste et renvoi final */
.mag-head .pl-head { margin-bottom: clamp(24px, 3vw, 40px); }
.mag-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(36px, 4.5vw, 60px) 0 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .82); }
.mag-legend > div { padding: 16px 18px 18px 0; min-width: 0; }
.mag-legend > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.mag-legend dt { margin: 0 0 6px; font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--primary); }
.mag-legend dd { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }
.mag-note { margin: 18px 0 0; max-width: 96ch; font-size: var(--fs-xs); line-height: 1.7; color: var(--muted); }
.mag-list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mag-list-head .h3, .mag-list-head p { margin: 0; }
.mag-more__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.mag-more__grid .h2 { grid-column: 1 / span 5; margin: 0; font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); }
.mag-more__grid > div { grid-column: 7 / span 6; }
.mag-more__grid p { font-size: var(--fs-sm); line-height: 1.75; }
.mag-more__cta { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 20px; }
@media (max-width: 1023px) {
  .mag-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-legend > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .mag-legend > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .mag-more__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .mag-more__grid .h2, .mag-more__grid > div { grid-column: 1; }
}
@media (max-width: 640px) {
  .mag-legend { grid-template-columns: minmax(0, 1fr); }
  .mag-legend > div, .mag-legend > div + div { padding-left: 0; border-left: 0; }
  .mag-legend > div + div { border-top: 1px solid var(--line); }
  .mag-more__cta .btn { flex: 1 1 auto; }
  .mag-more__cta .btn--mail { white-space: normal; font-family: var(--font-mono); font-size: .8125rem; }
}

.read-progress { position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 55; height: 3px; pointer-events: none; }
.read-progress span { display: block; width: 100%; height: 100%; background: var(--primary); transform-origin: 0 50%; transform: scaleX(var(--rp, 0)); }
.read-progress::after { content: ""; position: absolute; top: -2px; width: 7px; height: 7px; background: var(--secondary); left: calc(var(--rp, 0) * 100% - 4px); transform: rotate(45deg); }

.article-head { padding: clamp(32px, 4.5vw, 64px) 0 clamp(24px, 3vw, 40px); }
.article-head__cat { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.article-head__cat span, .article-head__cat a { padding: 6px 12px 6px 8px; color: #fff; text-decoration: none; background: linear-gradient(225deg, transparent 5px, var(--primary) 5.5px); }
.article-head__title { font: 700 clamp(2rem, 1.2rem + 2.9vw, 3.375rem)/1.07 var(--font-display); letter-spacing: -.026em; margin: 0 0 .55em; max-width: 24ch; text-wrap: balance; }
.article-head__lead { font: 400 var(--fs-lead)/1.6 var(--font-display); max-width: 66ch; margin: 0 0 26px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 12px 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); font: 500 12px/1.4 var(--font-mono); color: var(--muted); }
.article-meta > * { padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--line); }
.article-meta > *:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.article-meta strong, .article-meta a { color: var(--ink); font-weight: 600; }
.article-meta img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; border: 1px solid var(--primary); }
.article-meta__author { display: inline-flex; align-items: center; }
.article-cover { position: relative; margin: 0 0 clamp(36px, 5vw, 64px); padding: 10px; background: #fff; border: 1px solid var(--line); }
.article-cover::after { content: ""; position: absolute; inset: -9px; pointer-events: none; background: var(--cross) left top / 18px no-repeat, var(--cross) right top / 18px no-repeat, var(--cross) left bottom / 18px no-repeat, var(--cross) right bottom / 18px no-repeat; }
.article-cover img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; background: var(--surface); }
.article-cover figcaption { margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }

.article-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; padding-bottom: clamp(48px, 6vw, 80px); }
.toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 28px); max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto; padding-right: 4px; }
.toc__title { margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.toc ol { counter-reset: t; list-style: none; margin: 0; padding: 0; }
.toc li { counter-increment: t; }
.toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px; padding: 8px 6px 8px 10px; font: 500 12px/1.45 var(--font-mono); color: var(--muted); text-decoration: none; border-left: 2px solid var(--line); transition: color .2s, border-color .2s, background-color .2s; }
.toc a::before { content: counter(t, decimal-leading-zero); color: var(--primary); }
.toc a:hover { color: var(--ink); border-left-color: var(--ink-60); }
.toc a.is-active { color: var(--ink); font-weight: 600; border-left-color: var(--primary); background: var(--primary-50); }
.prose { grid-column: 4 / span 8; min-width: 0; counter-reset: h; }
.article-layout--wide .prose { grid-column: 3 / span 8; }
.prose > * { max-width: 70ch; }
.prose > .table-wrap, .prose > figure, .prose > .approach, .prose > .faq { max-width: none; }
:where(.prose) p, :where(.prose) li { font-size: var(--fs-base); line-height: 1.8; }
.anno { font-weight: 600; font-size: .86em; color: var(--secondary-ink); }
.prose h2 { counter-increment: h; position: relative; margin: 2.3em 0 .75em; padding-top: 20px; font: 700 clamp(1.5rem, 1.15rem + 1.35vw, 2.125rem)/1.16 var(--font-display); letter-spacing: -.02em; background: linear-gradient(var(--ink), var(--ink)) left top / 64px 1.5px no-repeat, linear-gradient(var(--line), var(--line)) left top / 100% 1px no-repeat; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2::before { content: "§ " counter(h, decimal-leading-zero); display: block; margin-bottom: 10px; font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .1em; color: var(--primary); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.9em 0 .6em; font: 600 clamp(1.1875rem, 1.06rem + .45vw, 1.375rem)/1.3 var(--font-display); letter-spacing: -.01em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3::before { content: "[" counter(h, decimal-leading-zero) "]"; margin-right: 10px; font: 600 .75em/1 var(--font-mono); color: var(--muted); }
.prose ul, .prose ol { list-style: none; padding: 0; margin: 0 0 1.5em; }
.prose ul > li { position: relative; padding-left: 26px; margin-bottom: .55em; }
.prose ul > li::before { content: ""; position: absolute; left: 3px; top: .78em; width: 10px; height: 2px; background: var(--primary); }
.prose ol { counter-reset: o; }
.prose ol > li { counter-increment: o; position: relative; padding-left: 44px; margin-bottom: .7em; }
.prose ol > li::before { content: counter(o, decimal-leading-zero); position: absolute; left: 0; top: .2em; padding: 1px 6px; font: 600 11.5px/1.6 var(--font-mono); color: var(--primary); background: #fff; border: 1px solid var(--ink-20); }
.prose li > ul, .prose li > ol { margin: .5em 0 0; }
.prose code { padding: .08em .35em; font-size: .88em; background: var(--surface); border: 1px solid var(--line); }
.prose blockquote { margin: 2em 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--primary); }
.prose blockquote p { font: italic 400 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.55 var(--font-display); margin: 0 0 .6em; }
.prose blockquote footer, .prose blockquote cite { font: 600 var(--fs-2xs)/1.3 var(--font-mono); font-style: normal; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.prose figure { margin: 2.2em 0; }
.prose figure img { display: block; width: 100%; padding: 8px; background: #fff; border: 1px solid var(--line); }
.prose figcaption { margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }
.prose .table-wrap { margin: 1.8em 0; }
.prose table { width: 100%; border-collapse: collapse; background: #fff; font-size: var(--fs-sm); border: 1px solid var(--ink-20); }
.prose table caption { caption-side: top; text-align: left; padding: 0 0 10px; font: 500 var(--fs-xs)/1.4 var(--font-mono); color: var(--muted); }
.prose th { text-align: left; padding: 11px 14px; font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--surface); border-bottom: 1.5px solid var(--ink); vertical-align: bottom; }
.prose td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.prose tbody th { font: 600 .8125rem/1.45 var(--font-display); text-transform: none; letter-spacing: 0; background: #FAFCFE; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose .tech-table td:first-child { font-weight: 600; }
.prose .tech-table td:last-child { font-size: inherit; color: var(--ink); }
.prose .tech-table code { overflow-wrap: break-word; }

.callout { position: relative; margin: 2em 0; padding: 18px 22px 16px; background: #fff; border: 1px solid var(--ink-20); border-left-width: 3px; }
.callout__label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.callout__label .ic { width: 18px; height: 18px; }
.callout > :last-child { margin-bottom: 0; }
.callout p, .callout li { font-size: var(--fs-sm); line-height: 1.72; }
.callout--tip { border-color: #BCD3EC; border-left-color: var(--primary); background: var(--primary-50); }
.callout--tip .callout__label { color: var(--primary-d); }
.callout--key { border-color: #B6E2D7; border-left-color: var(--accent); background: var(--accent-50); }
.callout--key .callout__label { color: var(--accent-ink); }
.callout--warn { border-color: #F5CDAE; border-left-color: var(--secondary); background: var(--hatch-o) right top / 14px 100% no-repeat, var(--secondary-50); padding-right: 34px; }
.callout--warn .callout__label { color: var(--secondary-ink); }

.approach {
  position: relative; margin: 2.6em 0; padding: 26px 26px 22px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(225deg, transparent 11.6px, #fff 12.2px) padding-box,
    linear-gradient(225deg, transparent 12.7px, var(--primary) 13.3px) border-box;
}
.approach__label { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--ink-20); font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.approach__label img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--primary); padding: 2px; background: #fff; }
.approach h3, .approach .approach__title { margin: 0 0 10px; font: 600 1.25rem/1.3 var(--font-display); }
.approach h3::before { content: none; }
.approach > :last-child { margin-bottom: 0; }

.prose .checklist, .checklist { list-style: none; margin: 1.8em 0; padding: 0; background: #fff; border: 1px solid var(--ink-20); border-top: 1.5px solid var(--ink); counter-reset: c; }
.prose .checklist > li, .checklist > li { counter-increment: c; position: relative; margin: 0; padding: 12px 54px 12px 50px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.6; }
.checklist > li::after { content: counter(c, decimal-leading-zero); position: absolute; right: 16px; top: 12px; font: 600 11.5px/1.6 var(--font-mono); color: var(--primary); }
.checklist-card { margin: 1.8em 0 1em; background: #fff; border: 1px solid var(--ink-20); border-top: 1.5px solid var(--ink); }
.prose > .checklist-card { max-width: none; }
.checklist-card .checklist, .prose .checklist-card .checklist { margin: 0; border: 0; }
.article-actions { margin: 0 0 1.4em; }
.prose .checklist > li:last-child, .checklist > li:last-child { border-bottom: 0; }
.prose .checklist > li::before, .checklist > li::before { content: ""; position: absolute; left: 16px; top: 13px; width: 18px; height: 18px; border: 1.5px solid var(--ink); background: #fff; }
.checklist__title { margin: 0; padding: 12px 16px; font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; background: var(--surface); border-bottom: 1px solid var(--line); }

.prose .faq { margin: 1.4em 0 2em; }
.prose .faq__a { padding-right: 8px; }

.author-box {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: start;
  margin: clamp(40px, 5vw, 64px) 0 0; padding: 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(225deg, transparent 10.6px, #fff 11.1px) padding-box,
    linear-gradient(225deg, transparent 11.3px, var(--ink-20) 11.8px) border-box;
}
.prose > .author-box { max-width: none; }
.author-box__img { display: block; width: 112px; height: 112px; object-fit: cover; padding: 5px; background: #fff; border: 1px solid var(--primary); }
.author-box__label { margin: 0 0 6px; font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.author-box__name { margin: 0 0 4px; font: 600 1.25rem/1.25 var(--font-display); }
.author-box__role { margin: 0 0 12px; font: 500 12px/1.4 var(--font-mono); color: var(--muted); }
.author-box p:not([class]) { font-size: var(--fs-sm); line-height: 1.7; }
.author-box__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.author-box__links a { display: inline-flex; align-items: center; min-height: 40px; font: 600 12.5px/1.3 var(--font-mono); }

.related { padding: clamp(56px, 7vw, 96px) 0 var(--section-y); border-top: 1px solid var(--line); }
.related .dlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 8. Page 404 */
.notfound { padding: clamp(48px, 7vw, 104px) 0 var(--section-y); }
.notfound__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: center; }
.notfound__text { grid-column: 1 / span 7; }
.notfound__code { margin: 0 0 6px; font: 700 clamp(5rem, 3rem + 9vw, 10.5rem)/.9 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.6px var(--primary); }
.notfound__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.notfound__aside { grid-column: 9 / span 4; }
.notfound__list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.notfound__list li { border-bottom: 1px solid var(--line); }
.notfound__list a { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; min-height: 52px; padding: 8px 0; font: 500 .875rem/1.4 var(--font-mono); color: var(--ink); text-decoration: none; }
.notfound__list a span { color: var(--primary); font-weight: 600; font-size: 12px; }
.notfound__list a:hover { color: var(--primary); }

/* 9. Animations (état caché uniquement via la classe .js posée sur html) */
.js .rv { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .pl-head { background-size: 0 1.5px; transition: background-size 1.1s var(--ease); }
.js .pl-head.is-in { background-size: 100% 1.5px; }
.js .dim::before, .js .cote__dim::before { transform: scaleX(0); }
.js .dim--v::before { transform: scaleY(0); }
.js .dim::after, .js .cote__dim::after { opacity: 0; }
.js .is-in .dim::before, .js .is-in .cote__dim::before { transform: none; }
.js .is-in .dim::after, .js .is-in .cote__dim::after { opacity: 1; }
.js .cost__plot svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s .2s var(--ease); }
.js .cost.is-in .cost__plot svg { clip-path: inset(0 0 0 0); }
.frise__fill, .frise__cursor { transition: width .15s linear, left .15s linear, top .15s linear, height .15s linear; }

@media (prefers-reduced-motion: no-preference) {
  .trace { stroke-dashoffset: 1; animation: draw .9s var(--ease) forwards; animation-delay: calc(.45s + var(--i) * .3s); }
  .trace-head { opacity: 0; animation: fade-in .3s forwards; animation-delay: calc(1.25s + var(--i) * .3s); }
  .cote-u::after { animation: cote 1s .3s var(--ease) both; }
  .chain__pulse { animation: hop 1.8s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .6s); }
  .faq__item[open] .faq__a { animation: drop .35s var(--ease); }
  .menu-panel:not([hidden]) { animation: panel .32s var(--ease); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes cote { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes panel { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html, html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .pl-head { background-size: 100% 1.5px; }
  .js .dim::before, .js .cote__dim::before { transform: none; }
  .js .dim::after, .js .cote__dim::after { opacity: 1; }
  .js .cost__plot svg { clip-path: none; }
  .js .frise { --p: 1; }
  .trace-dot, .chain__pulse { display: none; }
}

/* 10. Responsive */
@media (min-width: 1100px) {
  .nav { display: flex; align-items: center; margin-left: auto; position: relative; }
  .menu-btn, .menu-panel { display: none !important; }
  .brand__txt { flex-direction: row; align-items: baseline; }
  .brand__sub { display: none; }
}
@media (min-width: 1240px) {
  .brand__sep { display: inline; padding: 0 6px; }
  .brand__sub { display: inline; font: 600 15px/1.2 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--muted); }
}
@media (min-width: 1360px) {
  .ruler {
    display: block; position: fixed; left: 0; top: var(--header-h); bottom: 0; z-index: 5; width: 26px;
    border-right: 1px solid var(--line);
    background:
      repeating-linear-gradient(to bottom, var(--ink-20) 0 1px, transparent 1px 8px) right top / 6px 100% no-repeat,
      repeating-linear-gradient(to bottom, var(--ink-60) 0 1px, transparent 1px 40px) right top / 12px 100% no-repeat,
      rgba(255, 255, 255, .92);
  }
  .ruler__cursor { position: absolute; left: 0; right: 0; top: calc(var(--sp, 0) * (100% - 2px)); height: 1.5px; background: var(--secondary); }
  .ruler__cursor::before { content: ""; position: absolute; left: 0; top: -5px; border-left: 8px solid var(--secondary); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
  [data-coord]::before {
    content: attr(data-coord); position: absolute; top: calc(var(--section-y) - 4px); left: calc(50% - var(--container) / 2 - 66px);
    display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--ink-20); border-radius: 50%;
    font: 600 11px/1 var(--font-mono); color: var(--muted); background: #fff;
  }
  .hero[data-coord]::before { top: clamp(36px, 4.6vw, 64px); }
}

@media (max-width: 1099px) {
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero__text, .hero__plate { grid-column: 1 / -1; }
  .hero__plate { max-width: 680px; }
  .proto__aside .h2, .recette__aside .h2 { max-width: 20ch; }
}

@media (max-width: 1023px) {
  .rupture__intro .h2, .rupture__intro .lede, .split-head .h2, .split-head .lede, .redir__top .h2, .redir__top .lede { grid-column: 1 / -1; }
  .rupture__intro, .split-head, .redir__top { align-items: start; gap: 18px; }
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profil__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .fig1 { grid-column: 1; max-width: 480px; }
  .profil__text { grid-column: 1; }
  .sim, .rules { grid-column: 1 / -1; }
  .rules { margin-top: 12px; }
  .proto { grid-template-columns: minmax(0, 1fr); }
  .proto__aside { position: static; grid-column: 1; margin-bottom: 20px; }
  .proto__nav { display: none; }
  .proto__steps { grid-column: 1; }
  .recette__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .recette__aside { position: static; grid-column: 1; }
  .pv { grid-column: 1; }
  .reperes__grid { grid-template-columns: minmax(0, 1fr); }
  .reperes__main, .reperes__aside { grid-column: 1; }
  .reperes__aside { padding-top: 12px; max-width: 640px; }
  .annexes { grid-template-columns: minmax(0, 1fr); }
  .annex, .annex--b { grid-column: 1; margin-top: 0; }
  .dossiers__head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dossiers__head .h2, .dossiers__head .lede, .dossiers__head .btn { grid-column: 1; justify-self: start; }
  .dgrid { grid-template-columns: minmax(0, 1fr); }
  .dcard--feature { grid-row: auto; }
  .dlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-grid__aside { position: static; grid-column: 1; margin-bottom: 12px; }
  .faq-grid .faq { grid-column: 1; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact__intro, .cx { grid-column: 1; }
  .frise__key { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .frise__msg, .frise__key .sig-quote { grid-column: 1; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mag-hero__main, .mag-hero__title, .mag-hero__intro { grid-column: 1; }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: static; grid-column: 1; max-height: none; overflow: visible; margin-bottom: 36px; padding: 16px 18px 10px; background: #fff; border: 1px solid var(--ink-20); }
  .prose, .article-layout--wide .prose { grid-column: 1; }
  .notfound__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .notfound__text, .notfound__aside { grid-column: 1; }
}

@media (min-width: 1024px) {
  .dgrid .dcard:not(.dcard--feature) { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .dgrid .dcard:not(.dcard--feature) .dcard__media { margin: 9px 0 9px 9px; aspect-ratio: auto; min-height: 100%; }
  .dgrid .dcard:not(.dcard--feature) .dcard__body { padding: 16px 18px 16px; }
  .dgrid .dcard:not(.dcard--feature) .dcard__title { font-size: 1.0625rem; }
  .dgrid .dcard:not(.dcard--feature) .dcard__cat { flex-basis: 100%; margin-bottom: 2px; }
  .dgrid .dcard:not(.dcard--feature) .dcard__cat + *::before { content: none; }
}

@media (max-width: 860px) {
  .nomen__head { display: none; }
  .nomen__row { grid-template-columns: 42px minmax(0, 1fr); gap: 10px 14px; padding: 20px 0; }
  .nomen__ball { grid-row: 1 / span 3; width: 32px; height: 32px; }
  .nomen__title, .nomen__cell { grid-column: 2; }
  .nomen__title { margin: 4px 0 2px; }
  .nomen__lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; margin-bottom: 3px; font: 600 10px/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  .nomen__cell--ctl { background-position: left 20px; }
  .nomen__cell--ctl .nomen__lbl { color: var(--accent-ink); }
  .step__spec { grid-template-columns: minmax(0, 1fr); }
  .step__spec > div { border-left: 0; border-top: 1px solid var(--line); }
  .step__spec > div:first-child { border-top: 0; }
  .cotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .frise__rail { padding-top: 0; padding-left: 34px; }
  .frise__track { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .frise__fill { width: 100%; height: calc(var(--p) * 100%); }
  .frise__cursor { left: 50%; top: calc(var(--p) * 100%); }
  .frise__flag { display: none; }
  .frise__phases { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .phase { padding: 0; }
  .phase__dot { left: -34px; top: 2px; }
}

@media (max-width: 700px) {
  .coupe__svg--wide { display: none; }
  .coupe__svg--tall { display: block; }
  .schema--d { display: none; }
  .schema--m { display: block; }
  .tech-table, .tech-table tbody, .tech-table tr, .tech-table td { display: block; width: 100%; }
  .tech-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tech-table thead tr, .tech-table thead th { display: block; width: 1px; padding: 0; }
  .tech-table caption, .prose .tech-table caption { display: block; padding: 10px 14px; border-bottom: 1.5px solid var(--ink); background: var(--surface); }
  .tech-table tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .tech-table td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 4px 0; border: 0; }
  .tech-table td::before { content: attr(data-l); font: 600 10px/1.8 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .tech-table td > * { justify-self: start; }
  .tech-table tbody tr:hover td { background: none; }
}

@media (max-width: 640px) {
  .sheet { margin-inline: calc(10px - var(--gutter)); padding: 30px calc(var(--gutter) - 10px); }
  .pl-head__scale { display: none; }
  .hero__photo { width: 84%; }
  .hero__schema { width: 100%; margin-top: -14%; padding: 12px 10px 8px; }
  .hero__cartouche { width: 100%; margin-top: -1px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__spec > div { padding-right: 14px; margin-right: 14px; }
  .ft-grid { grid-template-columns: minmax(0, 1fr); }
  .fig1__tag { left: 18px; }
  .sim__stage { padding-inline: 14px; }
  .sim__bar, .sim__foot, .sim__note { padding-inline: 14px; }
  .sim__tab { flex: 1 1 calc(50% - 6px); }
  .chain code { font-size: 12px; }
  .rev th, .rev td { padding: 10px 10px; }
  .rev tbody th { width: 44px; }
  .rev__d { width: auto; white-space: normal; }
  .pv__fields { grid-template-columns: auto minmax(0, 1fr); }
  .chk__item { grid-template-columns: 28px 22px minmax(0, 1fr); gap: 2px 10px; }
  .stamp { width: 108px; height: 108px; font-size: 16px; transform: rotate(-14deg) scale(1.12); }
  .cote { padding: 18px 14px 20px; }
  .cote__num { flex-wrap: wrap; gap: 4px 8px; white-space: normal; }
  .faq__q { grid-template-columns: 44px minmax(0, 1fr) 26px; gap: 8px; font-size: 1rem; }
  .faq__a { padding: 0 2px 20px 52px; }
  .cx__mail { padding-inline: 18px; }
  .cx__actions { padding-inline: 18px; }
  .cx__actions .btn { flex: 1 1 auto; }
  .cx__cells { grid-template-columns: minmax(0, 1fr); }
  .cx__cells > div { padding-inline: 18px; border-right: 0 !important; border-bottom: 1px solid var(--ink-20) !important; }
  .cx__cells > div:last-child { border-bottom: 0 !important; }
  .dlist, .related .dlist { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__col li a { min-height: 44px; }
  .cartouche--footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartouche--footer > div:nth-child(3) { border-left: 0; }
  .cartouche--footer > div:nth-child(n+3) { border-top: 1px solid var(--ink-20); }
  .author-box { grid-template-columns: minmax(0, 1fr); }
  .article-meta > * { border-right: 0; margin-right: 14px; padding-right: 0; }
  .article-cover { padding: 6px; }
  .article-cover img { aspect-ratio: 16 / 10; }
  .callout, .approach { padding-inline: 16px; }
}

@media (max-width: 400px) {
  .brand__name { font-size: 14px; }
  .brand__sub { font-size: 9.5px; letter-spacing: .04em; }
  .menu-btn { padding: 0 10px; }
  .hero__label-sep { width: 16px; }
}

/* 11. Impression (check-list de recette) */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; }
  body { padding-top: 0; font-size: 11pt; color: #000; }
  .grid-bg, .ruler, .site-header, .skip, .menu-panel, .js-only, .stamp, .sprite { display: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .section { padding-block: 18pt; }
  a { color: #000; text-decoration: none; }
  .sheet::before, .sheet::after { display: none; }
  .print-recette main > section:not(#recette), .print-recette .site-footer { display: none !important; }
  .print-recette .recette__grid { display: block; }
  .print-recette .recette__aside .lede, .print-recette .recette__more { display: none; }
  .print-recette .pv { border: 1px solid #000; padding: 12pt; }
  .print-recette .chk__item { break-inside: avoid; padding: 7pt 2pt; }
  .print-recette .chk__box { border-color: #000; }
  .read-progress, .toc, .related, .article-actions, .author-box__links { display: none !important; }
  .article-layout { display: block; padding-bottom: 0; }
  .article-cover img { aspect-ratio: auto; max-height: 8cm; }
  .print-chk .article-head, .print-chk .article-cover, .print-chk .site-footer, .print-chk .prose > *:not(.checklist-card) { display: none !important; }
  .print-chk .checklist-card { margin: 0; border-color: #000; }
  .print-chk .checklist > li { break-inside: avoid; }
}