/* =====================================================================
   sehatpour.com — V2 « Plan-séquence » (2026-10)
   Feuille unique : polices, jetons, base, sections, modes de rendu
   (.js, [data-motion], .gl, .gl-fallback, .js-repli), Lenis, replis,
   contraste renforcé, couleurs forcées, impression, pages annexes.
   ===================================================================== */

/* ---------- 1. Polices (auto-hébergées, OFL) ---------- */
/* IBM Plex Sans est un fichier VARIABLE (axe wght 100–700) : une seule face par sous-ensemble. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(../fonts/IBMPlexSans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(../fonts/IBMPlexSans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexMono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Michroma : chiffres seulement (numéros de chapitre, téléphones, rail, 404) — jamais les noms ni les phrases */
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Michroma-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Michroma-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Repli à métriques ajustées contre le CLS (calibré avec fontTools sur Plex variable) */
@font-face{font-family:'Plex Fallback';src:local('Arial'),local('ArialMT');font-weight:100 500;size-adjust:102.5%;ascent-override:100%;descent-override:26.8%;line-gap-override:0%}
@font-face{font-family:'Plex Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:501 700;size-adjust:97.5%;ascent-override:105.1%;descent-override:28.2%;line-gap-override:0%}
@property --a{syntax:'<angle>';inherits:false;initial-value:360deg}

/* ---------- 2. Jetons ---------- */
/* Palette « script couleur » en trois actes : I Nuit platine → II Trois bascules → III Lumière.
   Les teintes signature des emblèmes (#5c9ef2, #d9925c, #2fc3b0), le platine et l’encre sont conservés tels quels
   (la palette s’accorde aux logos par construction). Ajouts : un vide plus profond (pour le bloom), un fond 950
   par marque (bascule des chapitres), des 300 pour l’accent sur sombre, les 700 « site » pour la section claire,
   les métaux relevés dans les dégradés des SVG, et le papier platine (contact, mentions). */
:root{
  color-scheme:dark;
  --void:#05070b;--ink:#0a0d12;--ink-2:#11161e;--ink-3:#18202b;--line:#222c3a;--line-soft:rgba(201,207,214,.12);
  --platine-50:#f5f7f9;--platine-100:#eef1f4;--platine-200:#d9dee3;--platine-300:#c9cfd6;--platine-400:#b9c0c8;
  --platine-500:#9aa3ad;--platine-600:#7f8791;--platine-700:#6b737c;--platine-800:#4a535d;
  --grad-metal:linear-gradient(100deg,#7f8791 0%,#c9cfd6 22%,#f5f7f9 50%,#b9c0c8 78%,#6b737c 100%);
  --sdi-300:#8fbcff;--sdi-500:#5c9ef2;--sdi-700:#2160c0;--sdi-950:#06142b;--sdi-metal:#c9cfd6;
  --idf-300:#f0b07e;--idf-500:#d9925c;--idf-700:#98541f;--idf-950:#1a0f08;--idf-metal:#c47d4b;
  --tla-300:#6fe3d2;--tla-500:#2fc3b0;--tla-700:#12786c;--tla-950:#04130f;--tla-metal:#d2b167;
  --paper:#eef1f4;--paper-ink:#0a0d12;--paper-muted:#4a535d;--paper-line:#c3cad2;
  --bg:var(--void);--fg:var(--platine-100);--fg-muted:var(--platine-500);--focus:var(--platine-100);
  --brand:var(--platine-300);--brand-hi:var(--platine-100);--brand-bg:var(--void);--brand-metal:var(--platine-300);--brand-ink:var(--paper-ink);

  --sans:'IBM Plex Sans','Plex Fallback',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --display:'Michroma','IBM Plex Mono',monospace;

  --fs-label:.75rem;--fs-small:.875rem;
  --fs-body:clamp(1rem,.96rem + .2vw,1.125rem);
  --fs-lead:clamp(1.125rem,1rem + .55vw,1.5rem);
  --fs-h3:clamp(1.25rem,1.05rem + .9vw,1.75rem);
  --fs-h2:clamp(1.75rem,1.1rem + 2.6vw,3.5rem);
  --fs-brand:clamp(2.25rem,1.2rem + 3.6vw,4.75rem);
  --fs-display:clamp(2.1rem,min(1rem + 4.6vw,8.6svh),5.5rem);
  --fs-phone:clamp(1.6rem,1rem + 3vw,3.25rem);
  --fs-ghost:clamp(10rem,6rem + 16vw,22rem);

  --maxw:1440px;--gutter:clamp(16px,4vw,64px);--gap:16px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;--sp-11:192px;
  --section-y:clamp(96px,12vw,192px);
  --r-1:6px;--r-2:14px;--r-pill:999px;

  --ease-film:cubic-bezier(.22,.61,.12,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-1:.2s;--dur-2:.45s;--dur-3:.9s;--dur-4:1.6s;

  /* boîte de l’emblème du héros : ne dépend jamais des polices (raccord M1) */
  --emb:min(84vw,48svh);--emb-top:72px;
}
@media (min-width:640px){:root{--gap:20px}}
@media (min-width:1024px){:root{--gap:24px;--emb:min(46svh,38vw);--emb-top:9svh;--fs-display:clamp(2.1rem,min(1rem + 4.6vw,8svh),5.5rem)}}
@media (min-width:1024px) and (max-height:999px){:root{--emb:min(42svh,38vw)}}
@media (min-width:1024px) and (max-height:759px){:root{--emb:min(38svh,38vw);--emb-top:8svh}}
/* noyau du sujet (centre de la « montée en lumière ») : sceau complet y 150/400 → .125 ; sceau réduit (finale ≤ 657 px de haut) y 137/400 → .1575 */
@media (min-width:1024px) and (max-height:657px){:root{--nuc:.1575}}
[data-brand=sdi]{--brand:var(--sdi-500);--brand-hi:var(--sdi-300);--brand-bg:var(--sdi-950);--brand-metal:var(--sdi-metal);--brand-ink:var(--sdi-700)}
[data-brand=idf]{--brand:var(--idf-500);--brand-hi:var(--idf-300);--brand-bg:var(--idf-950);--brand-metal:var(--idf-metal);--brand-ink:var(--idf-700)}
[data-brand=tla]{--brand:var(--tla-500);--brand-hi:var(--tla-300);--brand-bg:var(--tla-950);--brand-metal:var(--tla-metal);--brand-ink:var(--tla-700)}
.light{--bg:var(--paper);--fg:var(--paper-ink);--fg-muted:var(--paper-muted);--focus:var(--paper-ink);color-scheme:light}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html:not(.js){scroll-behavior:smooth}}
body{margin:0;background:var(--scene-bg,var(--void));color:var(--fg);font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:600}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}
sup{font-size:.62em;line-height:0;vertical-align:.5em}
button{font:inherit;color:inherit}
main{position:relative;z-index:1}
section{scroll-margin-top:88px;position:relative}
[tabindex="-1"]:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.light :focus-visible{outline-color:var(--paper-ink)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--platine-100);color:var(--void);padding:12px 18px;border-radius:var(--r-1);font-family:var(--mono);font-weight:500;font-size:var(--fs-small);text-decoration:none;transition:top var(--dur-1)}
.skip:focus{top:16px;outline:2px solid var(--platine-100);outline-offset:3px}
.skip+.skip:focus{left:auto;right:16px}
.eyebrow,.kicker{font-family:var(--mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted)}
.h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.03em;font-weight:600}
.num,.n{font-synthesis:none}

/* Lenis (repris de lenis.css, version 1.3.26) */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

/* ---------- 4. En-tête ---------- */
.site{position:fixed;z-index:50;top:0;left:50%;width:100%;max-width:var(--maxw);height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gutter);translate:-50% 0}
.site::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,13,18,.78);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid var(--line-soft);opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.site.is-capsule::before,html:not(.js) .site::before{opacity:1}
@media (min-width:1441px){.site::before{border-radius:0 0 var(--r-2) var(--r-2)}}
.site-logo{display:block;flex:none;border-radius:4px}
.site-logo img{height:28px;width:auto}
.site-logo picture{display:contents}
.site-brands{display:none}
.site-brands a,.lang a{font-family:var(--mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--platine-400);transition:color var(--dur-1)}
.site-brands a{display:inline-flex;align-items:center;gap:8px;padding:12px;border-radius:var(--r-pill)}
.site-brands a i{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.site-brands a:hover,.site-brands a.on{color:var(--brand-hi)}
.site-end{display:flex;align-items:center;gap:4px}
.lang{display:flex}
.lang a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;border-radius:var(--r-pill)}
.lang a[aria-current]{color:var(--platine-100);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.lang a:hover{color:var(--platine-100)}
.call{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--platine-100);border:1px solid var(--line)}
.call svg{width:20px;height:20px}
/* mobile : le lockup v3 (624,7 × 100) est plus large que l’ancien → hauteur bornée par la largeur disponible
   (logo + FR/EN/DE + appel tiennent toujours sur une ligne, sans se toucher) */
@media (max-width:899px){.site{gap:12px}.lang a{min-width:36px}.site-logo img{height:min(28px,calc((100vw - 204px) / 6.25))}}
@media (min-width:400px) and (max-width:899px){.lang a{min-width:44px}}
/* < 360 px : palier icône (≤ 64 px) au lieu d’un lockup rétréci sous 28 px ; le nom reste donné par l’aria-label */
@media (max-width:359px){.site{gap:8px}.lang a{min-width:36px}.site-logo img{height:32px;width:32px}}
@media (min-width:900px){
  .site{height:64px}
  .site-logo img{height:34px}
  .site-brands{display:flex;gap:4px;position:absolute;left:50%;translate:-50% 0}
  .call{display:none}
}
/* 900–1023 px : les marques centrées se rapprochent du lockup v3 (plus large) → lockup un peu plus bas */
@media (min-width:900px) and (max-width:1023px){.site-logo img{height:30px}}

/* ---------- 5. Rail des chapitres (≥ 1024, mise en page film) ---------- */
.rail{position:fixed;z-index:40;right:max(8px,calc(var(--gutter) - 44px));top:50%;translate:0 -50%}
.rail[hidden]{display:none}
.rail ol{display:flex;flex-direction:column;gap:2px}
.rail a{display:flex;flex-direction:row-reverse;align-items:center;gap:10px;min-height:32px;min-width:44px;text-decoration:none;color:var(--platine-500)}
.rail .dot{position:relative;width:20px;height:20px;flex:none;display:grid;place-items:center}
.rail .dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--platine-700);transition:background var(--dur-1),transform var(--dur-1)}
.rail .dot svg{position:absolute;inset:0;width:20px;height:20px;rotate:-90deg}
.rail .arc{fill:none;stroke:var(--brand);stroke-width:1.2;stroke-dasharray:53.41;stroke-dashoffset:calc(53.41 * (1 - var(--rp,0)));opacity:0;transition:opacity var(--dur-1)}
.rail a[aria-current] .dot::before{background:var(--brand);transform:scale(1.15)}
.rail a[aria-current] .arc{opacity:1}
.rail a:not([data-brand]){--brand:var(--platine-100)}
.rail .lbl{font-family:var(--mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--platine-200);background:rgba(10,13,18,.82);padding:4px 8px;border-radius:var(--r-1);opacity:0;translate:8px 0;transition:opacity .3s var(--ease-out),translate .3s var(--ease-out)}
/* au-dessus du papier (contact) : le rail passe à l’encre */
.light-zone .rail a{color:var(--paper-muted)}
.light-zone .rail a:not([data-brand]){--brand:var(--paper-ink)}
.light-zone .rail .dot::before{background:var(--platine-600)}
.rail .lbl .n{font-family:var(--display);letter-spacing:-.01em;color:var(--platine-500)}
.rail a:hover .lbl,.rail a:focus-visible .lbl{opacity:1;translate:0 0}

/* ---------- 6. Bouton mouvement ---------- */
.motion{position:fixed;z-index:60;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:10px 16px;border-radius:var(--r-pill);background:rgba(17,22,30,.88);border:1px solid var(--line);color:var(--platine-100);font-family:var(--mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color var(--dur-1),opacity var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out)}
.motion:hover{border-color:var(--platine-500)}
.motion[hidden]{display:none}
/* pictogramme pause / lecture (dessiné en CSS) ; le libellé reste le nom accessible */
.motion .mi{position:relative;width:10px;height:12px;flex:none;display:none}
.motion[data-paused] .mi{display:block}
.motion[data-paused=false] .mi{border-left:3px solid currentColor;border-right:3px solid currentColor}
.motion[data-paused=true] .mi{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
/* mobile : pastille ronde (le libellé passe en texte masqué), elle ne recouvre plus le contenu */
@media (max-width:639px){
  .motion[data-paused]{padding:0;width:44px;justify-content:center}
  .motion[data-paused] .ml{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* au-dessus du contact et du générique (rien n’y bouge), le bouton s’efface — sauf s’il a le focus
   (pas de visibility:hidden : le bouton reste dans l’ordre de tabulation et réapparaît au focus clavier) */
.light-zone .motion:not(:focus-visible){opacity:0;translate:0 12px;pointer-events:none}
.light-zone .grain{animation:none!important}

/* ---------- 7. #ouverture (héros) ---------- */
#ouverture{min-height:max(100svh,640px);background:radial-gradient(ellipse 70% 60% at 50% calc(var(--emb-top) + var(--emb) * .45),rgba(201,207,214,.07),transparent 70%)}
#ouverture::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(201,207,214,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(201,207,214,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000 15%,transparent 75%)}
.hero{position:relative;min-height:inherit;display:flex;flex-direction:column;align-items:center;padding:calc(var(--emb-top) + var(--emb) + 20px) var(--gutter) 32px;max-width:var(--maxw);margin:0 auto}
.hero-emblem{position:absolute;margin:0;left:50%;top:var(--emb-top);width:var(--emb);aspect-ratio:1;translate:-50% 0}
/* <picture> (palier réduit / complet) sans boîte : l’<img> reste l’élément mis en page ; <source> (display:block chez Chrome) jamais un élément flex */
.hero-emblem picture,.chap .stick picture,#ensemble picture{display:contents}
.hero-emblem source,.chap .stick source,#ensemble source{display:none}
.hero-emblem img{width:100%;height:100%;position:relative;z-index:1}
.hero-emblem::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,207,214,.10),rgba(201,207,214,.03) 60%,transparent 72%);pointer-events:none}
.hero-text{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;z-index:2}
.h1{font-size:var(--fs-display);font-weight:620;letter-spacing:-.04em;line-height:1.02;color:var(--platine-100);text-shadow:0 0 30px var(--void);max-width:16ch}
.h1 .line{white-space:nowrap}
.h1-l{display:block}
.h1 .char{font-weight:var(--w,620)}
.lead{font-size:var(--fs-small);line-height:1.45;color:var(--platine-500);max-width:60ch;text-wrap:balance}
.index{position:relative;z-index:2;width:100%;margin-top:40px;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line-soft)}
.index li{border-bottom:1px solid var(--line-soft)}
.index a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;min-height:56px;padding:10px 4px;text-decoration:none;transition:background var(--dur-1)}
.index .n{grid-row:1/3;font-family:var(--display);font-size:var(--fs-label);letter-spacing:-.01em;color:var(--platine-500);display:flex;align-items:center;gap:10px}
.index .n::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);transition:box-shadow var(--dur-2)}
.index .nm{font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--platine-100)}
.index .mt{font-family:var(--mono);font-size:var(--fs-label);color:var(--platine-500);letter-spacing:.02em}
.index a:hover,.index a:focus-visible,.index li.on a{background:rgba(201,207,214,.05)}
.index a:hover .n::before,.index a:focus-visible .n::before,.index li.on .n::before{box-shadow:0 0 0 4px rgba(201,207,214,.08),0 0 14px var(--brand)}
.index a:hover .mt,.index a:focus-visible .mt,.index li.on .mt{color:var(--brand-hi)}
.hint{display:none}
@media (min-width:640px){.lead{font-size:var(--fs-lead)}}
@media (min-width:1024px){
  #ouverture{height:max(100svh,640px)}
  .hero{height:100%;padding-top:calc(var(--emb-top) + var(--emb) + 2svh);padding-bottom:72px}
  .hero-text{gap:10px}
  .h1{max-width:none}
  .index{margin-top:auto;grid-template-columns:repeat(3,1fr);border-top:0}
  .index li{border-bottom:0;border-left:1px solid var(--line-soft)}
  .index li:first-child{border-left:0}
  .index a{padding:8px 24px}
  .hint{display:flex;position:absolute;right:var(--gutter);bottom:96px;flex-direction:row;align-items:center;gap:12px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--platine-500);writing-mode:vertical-rl;text-orientation:sideways}
  .hint i{display:block;width:1px;height:48px;inline-size:48px;block-size:1px;background:linear-gradient(var(--platine-300),transparent);transform-origin:top}
}
[data-motion=full] .hint i{animation:hintline 2.4s cubic-bezier(.37,0,.63,1) infinite}
@keyframes hintline{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
[data-motion=calm] .hint{display:none}

/* ---------- 8. #principe ---------- */
#principe{padding:var(--section-y) var(--gutter);background:linear-gradient(var(--void),var(--ink) 30%,var(--ink))}
.principe-text{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:24px;position:relative}
.principe-text .h2{max-width:18ch}
.principe-p{font-size:var(--fs-lead);line-height:1.45;color:var(--platine-200);max-width:44ch}
.same{position:relative}
.same::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:2px;background:var(--grad-metal);transform-origin:left;transform:scaleX(var(--same,1))}
.k{color:var(--brand-hi);transition:color .4s var(--ease-out)}
/* mot coloré + ponctuation : jamais de virgule ou de point seuls en début de ligne (découpage SplitText) */
.nw{white-space:nowrap}
.js[data-motion=full]:not(.js-repli) .principe-p:not(.is-lit) .k{color:var(--platine-200)}
.principe-p .line,.chap-p .line,.lead .line{display:block}
.principe-text .pl{white-space:nowrap}
.principe-text .w{font-weight:calc(300 + var(--k,1) * 300);color:color-mix(in srgb,var(--platine-100) calc(var(--k,1) * 100%),var(--platine-600))}

/* ---------- 9. Chapitres ---------- */
.chap{background:var(--brand-bg);padding:var(--section-y) var(--gutter);overflow:clip}
.chap .stick{position:relative;max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:40px}
.chap .stick::before{content:"";position:absolute;pointer-events:none;width:min(120vw,900px);aspect-ratio:1;left:50%;top:0;translate:-50% -20%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 14%,transparent),transparent 72%)}
.chap-emblem{order:-1;width:min(70vw,420px);height:auto;aspect-ratio:1;align-self:center;position:relative}
.chap-text{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;max-width:46rem}
.chap-meta{display:flex;gap:16px;align-items:baseline;font-size:var(--fs-label);color:var(--brand-hi)}
.chap-meta .num{font-family:var(--display);letter-spacing:-.01em;color:var(--platine-300)}
.chap-meta .dom{font-family:var(--mono);font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.chap h2{font-size:var(--fs-brand);font-weight:640;letter-spacing:-.035em;line-height:1;color:var(--platine-100)}
.chap h2 .line{white-space:nowrap}
.metier{font-family:var(--mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-hi)}
.chap-p{font-size:var(--fs-lead);line-height:1.45;color:var(--platine-200);max-width:44ch}
.presta{max-width:36rem}
/* filet du haut porté par le premier élément : il se dessine avec les autres (jamais un trait orphelin avant la révélation) */
.presta li:first-child::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-soft);transform-origin:left;transform:scaleX(var(--ln,1))}
.presta li{position:relative;display:flex;align-items:center;gap:16px;min-height:48px;padding:10px 0;font-weight:500;font-size:1.0625rem;color:var(--platine-100)}
.presta li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-soft);transform-origin:left;transform:scaleX(var(--ln,1))}
.presta .pn{font-family:var(--mono);font-size:var(--fs-label);color:var(--brand-hi);min-width:2ch}
.cta{margin-top:8px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:var(--r-pill);background:var(--brand-hi);color:var(--ink);font-family:var(--mono);font-weight:500;font-size:var(--fs-small);letter-spacing:.06em;text-decoration:none;border:0;position:relative}
.pill-in{display:inline-flex;align-items:center;gap:10px}
.pill .arr{display:inline-block;transition:transform var(--dur-1) var(--ease-out)}
.pill:hover .arr,.pill:focus-visible .arr{transform:translate(4px,-4px)}
.pill:focus-visible{outline-color:var(--brand-hi)}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:var(--fs-small);color:var(--platine-500)}
.mail a{font-family:var(--mono);font-weight:500;color:var(--platine-100);text-decoration:underline;text-decoration-color:rgba(238,241,244,.35);text-underline-offset:4px;padding:10px 0}
.mail a:hover{text-decoration-color:currentColor}
.copy{min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--platine-200);font-family:var(--mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color var(--dur-1),color var(--dur-1)}
.copy:hover{border-color:var(--platine-500);color:var(--platine-100)}
.copy[hidden]{display:none}
.ghost{display:none}
@media (max-width:639px){.cta .pill{display:flex;width:100%}}
@media (min-width:1024px){
  .chap .stick{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center;min-height:min(80svh,760px)}
  .chap .stick::before{left:auto;right:0;top:50%;translate:15% -50%;width:min(60vw,920px)}
  .chap-text{grid-column:1/7;grid-row:1}
  .chap-emblem{order:0;grid-column:8/13;grid-row:1;width:min(40vw,60svh);justify-self:center}
}

/* ---------- 10. #ensemble (finale) ---------- */
#ensemble{padding:var(--section-y) var(--gutter);background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(201,207,214,.06),transparent 70%),var(--void)}
#ensemble .stick{display:grid;place-items:center}
.finale-emblem{width:var(--emb);height:auto;aspect-ratio:1;-webkit-mask-image:conic-gradient(#000 var(--a,360deg),transparent 0);mask-image:conic-gradient(#000 var(--a,360deg),transparent 0)}
.lumiere{display:none}

/* ---------- 11. #contact (Lumière) ---------- */
#contact{background:var(--paper);color:var(--paper-ink);padding:var(--section-y) var(--gutter);z-index:2}
.contact-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:56px}
.contact-a{display:flex;flex-direction:column;gap:20px}
#contact .eyebrow{color:var(--paper-muted)}
#contact .h2{max-width:16ch}
.phones{display:flex;flex-direction:column;gap:28px;margin-top:12px}
.phones li{display:flex;flex-direction:column;gap:4px}
.phone{display:inline-block;align-self:flex-start;font-family:var(--display);font-synthesis:none;letter-spacing:-.01em;font-size:clamp(1.5rem,7.6vw,2.2rem);line-height:1.25;color:var(--paper-ink);text-decoration:none;white-space:nowrap;position:relative;min-height:48px;padding:4px 0}
.phone::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.phone:hover::after,.phone:focus-visible::after{transform:scaleX(1)}
.phone-in{display:inline-block}
.phone-in.intl{font-size:.82em}
.city{font-family:var(--mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-muted)}
.phones address{font-size:.9375rem;color:var(--paper-muted)}
.mails{border-top:1px solid var(--paper-line);align-self:stretch}
.mails li{display:grid;grid-template-columns:10px 1fr auto;column-gap:14px;row-gap:2px;align-items:center;min-height:64px;padding:10px 0;border-bottom:1px solid var(--paper-line)}
.mails i{width:8px;height:8px;border-radius:50%;background:var(--brand-ink)}
.mails span{color:var(--paper-muted);font-size:.9375rem}
.mails a{grid-column:2;font-family:var(--mono);font-weight:500;color:var(--paper-ink);text-decoration:underline;text-decoration-color:rgba(10,13,18,.35);text-underline-offset:4px;padding:8px 0;justify-self:start;overflow-wrap:anywhere}
.mails a:hover{text-decoration-color:currentColor}
.mails .copy{grid-column:3;grid-row:1/3;border-color:var(--paper-line);color:var(--paper-ink)}
.mails .copy:hover{border-color:var(--paper-muted);color:var(--paper-ink)}
@media (min-width:1024px){
  .contact-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .contact-a{grid-column:1/8}
  .mails{grid-column:8/13}
  .phone{font-size:var(--fs-phone)}
}

/* ---------- 12. Pied de page « générique » ---------- */
.generique{position:relative;z-index:2;background:var(--ink);color:var(--platine-500);text-align:center;padding:72px var(--gutter) 88px;font-family:var(--mono);font-size:var(--fs-label);line-height:2;letter-spacing:.04em;display:flex;flex-direction:column;align-items:center}
.generique a{color:var(--platine-300);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;display:inline-block;padding:6px 2px}
.generique a:hover{color:var(--platine-100);text-decoration-color:currentColor}
.generique .lang{margin:12px 0 4px}
.generique .lang a{padding:0}
.generique .lang a:not([aria-current]){text-decoration:none}
.generique .top{margin-top:8px}

/* ---------- 13. Canvas, réticule, grain, étiquette 3D ---------- */
.gl-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;opacity:0;transition:opacity .6s linear}
.gl .gl-canvas{opacity:var(--gl-o,1)}
.gl-hover,.gl-hover body{cursor:pointer}
.reticle{position:fixed;left:0;top:0;z-index:70;pointer-events:none;width:28px;height:28px;margin:-14px 0 0 -14px;opacity:0;transition:opacity var(--dur-1)}
.reticle.is-on{opacity:1}
.reticle .ring{position:absolute;inset:0;border:1px solid var(--rc,var(--platine-300));border-radius:50%;transition:inset var(--dur-2) var(--ease-out),border-color var(--dur-1)}
.reticle .ring i{position:absolute;background:var(--rc,var(--platine-300))}
.reticle .ring i:nth-child(1){left:50%;top:-5px;width:1px;height:4px}
.reticle .ring i:nth-child(2){left:50%;bottom:-5px;width:1px;height:4px}
.reticle .ring i:nth-child(3){top:50%;left:-5px;height:1px;width:4px}
.reticle .ring i:nth-child(4){top:50%;right:-5px;height:1px;width:4px}
.reticle.is-big .ring{inset:-14px}
.reticle .rl{position:absolute;left:calc(100% + 14px);top:50%;translate:0 -50%;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--platine-100);white-space:nowrap;opacity:0;transition:opacity var(--dur-1)}
.reticle.has-label .rl{opacity:1}
.reticle.is-diff{mix-blend-mode:difference}
.grain{position:fixed;inset:-64px;z-index:65;pointer-events:none;background:url(../img/grain-128.png?v=2610) repeat;opacity:.05;mix-blend-mode:soft-light}
.gl-fallback .grain{animation:grain .5s steps(4) infinite}
.light-zone .grain{opacity:.025}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-32px,16px)}50%{transform:translate(24px,-40px)}75%{transform:translate(-8px,48px)}100%{transform:translate(0,0)}}
.e-label{position:fixed;left:0;top:0;z-index:30;pointer-events:none;opacity:0;translate:-50% 0;transition:opacity var(--dur-1);text-align:center;white-space:nowrap;text-shadow:0 1px 12px var(--void)}
.e-label.is-on{opacity:1}
.e-label b{display:block;font-weight:600;font-size:15px;color:var(--platine-100)}
.e-label span{display:block;font-family:var(--mono);font-size:12px;color:var(--brand-hi)}

/* ---------- 14. États de départ (masqués seulement sous .js[data-motion=full]) ---------- */
.js[data-motion=full]:not(.js-repli) .site,
.js[data-motion=full]:not(.js-repli) .kicker,
.js[data-motion=full]:not(.js-repli) .lead,
.js[data-motion=full]:not(.js-repli) .index,
.js[data-motion=full]:not(.js-repli) .hint{opacity:0}
/* le H1 (élément LCP sur mobile) n’est JAMAIS masqué : il est peint dès la première image dans son état
   « éteint » (trait fin, platine 300), puis reveal.js l’« allume » lettre par lettre (graisse 200 → 620) */
.js[data-motion=full]:not(.js-repli) .h1:not(.is-lit){font-weight:200;color:var(--platine-300)}
/* sécurité : si app.js ne prend pas la main, tout s’affiche (et le titre s’allume) après 2,5 s */
.reveal-pending .site,.reveal-pending .kicker,.reveal-pending .lead,.reveal-pending .index,.reveal-pending .hint{animation:secours 0s 2.5s forwards}
.reveal-pending .h1{animation:allume .6s 2.5s forwards}
@keyframes secours{to{opacity:1}}
@keyframes allume{to{font-weight:620;color:#eef1f4}}
.hero.is-mute{pointer-events:none}
.hero:focus-within{opacity:1!important;transform:none!important;pointer-events:auto}
.reveal:focus-within,.reveal:focus-within *,.reveal-l:focus-within,.reveal-l:focus-within *{opacity:1!important;transform:none!important}
/* mode calme : révélations simples (≤ 200 ms) */
.js[data-motion=calm] .reveal-c{opacity:0;transition:opacity .2s linear}
.js[data-motion=calm] .reveal-c.is-in,.js-repli .reveal-c{opacity:1}
.js[data-motion=full] .hero-emblem::before{animation:respire 6s ease-in-out infinite}
@keyframes respire{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ---------- 15. Mise en page « film » (≥ 1024 × 640, JS, mouvement complet) ---------- */
@media (min-width:1024px) and (min-height:640px){
  .js[data-motion=full]:not(.js-repli) #ouverture{background:transparent}
  .js[data-motion=full]:not(.js-repli) .film-sec .stick{position:sticky;top:0;height:100vh;height:100svh;pointer-events:none}
  .js[data-motion=full]:not(.js-repli) .film-sec .stick a,
  .js[data-motion=full]:not(.js-repli) .film-sec .stick button,
  .js[data-motion=full]:not(.js-repli) .film-sec .stick .chap-text,
  .js[data-motion=full]:not(.js-repli) .film-sec .stick .principe-text{pointer-events:auto}
  .js[data-motion=full]:not(.js-repli) .film-sec .stick .is-mute,
  .js[data-motion=full]:not(.js-repli) .film-sec .stick .is-mute *{pointer-events:none}
  .js[data-motion=full]:not(.js-repli) #principe{height:200vh;height:200svh;padding:0 var(--gutter);background:transparent}
  .js[data-motion=full]:not(.js-repli) #principe .stick{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center;max-width:var(--maxw);margin:0 auto}
  .js[data-motion=full]:not(.js-repli) .principe-text{grid-column:2/8;margin:0}
  /* chevauchement d’un écran : la section suivante s’épingle quand la précédente se libère (aucune zone morte).
     Même unité (svh) que la hauteur des .stick, sinon décalage sur tablette (barre d’outils) ; vh en repli. */
  .js[data-motion=full]:not(.js-repli) .chap{height:270vh;margin-top:-100vh;height:270svh;margin-top:-100svh;padding:0 var(--gutter);background:transparent;overflow:visible}
  .js[data-motion=full]:not(.js-repli) #ensemble{height:250vh;margin-top:-100vh;height:250svh;margin-top:-100svh;padding:0 var(--gutter);background:transparent}
  /* le contact remonte sous l’iris de papier : il apparaît avec la « montée en lumière » (--cf = flash),
     sans écran vide entre la finale et le contact */
  .js[data-motion=full]:not(.js-repli) #contact{position:relative;margin-top:-100vh;margin-top:-100svh;background:transparent}
  .js[data-motion=full]:not(.js-repli) #contact .contact-in{opacity:calc((var(--cf,0) - .62) * 2.7)}
  .js[data-motion=full]:not(.js-repli) #contact.is-mute{pointer-events:none}
  .js[data-motion=full]:not(.js-repli) .chap .stick{min-height:0;max-width:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter)}
  .js[data-motion=full]:not(.js-repli) .chap .stick::before{opacity:var(--vis,0)}
  .js[data-motion=full]:not(.js-repli) .chap .stick::after{content:"";position:absolute;inset:0 42% 0 0;z-index:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--brand-bg) 92%,transparent) 0%,color-mix(in srgb,var(--brand-bg) 80%,transparent) 70%,transparent);opacity:var(--vis,0)}
  .js[data-motion=full]:not(.js-repli) .chap-text{grid-column:2/7}
  .js[data-motion=full]:not(.js-repli) .chap-emblem{grid-column:8/12;opacity:var(--vis,0)}
  .js[data-motion=full]:not(.js-repli) .ghost{display:block;position:absolute;z-index:1;left:var(--gutter);bottom:8%;font-family:var(--display);font-synthesis:none;font-size:var(--fs-ghost);line-height:.8;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--brand) 25%,transparent);opacity:var(--vis,0);translate:var(--gx,0) 0;pointer-events:none;user-select:none}
  .js[data-motion=full]:not(.js-repli) #ensemble .stick{display:block}
  .js[data-motion=full]:not(.js-repli) .finale-emblem{position:absolute;left:50%;top:calc(50% - var(--emb) * .5);width:var(--emb);translate:-50% 0;opacity:var(--fo,1)}
  /* montée en lumière : un iris de papier platine s’ouvre depuis le noyau (pas un fondu gris uniforme) */
  .js[data-motion=full]:not(.js-repli) .lumiere{display:block;position:absolute;inset:0 calc(var(--gutter) * -1);z-index:3;pointer-events:none;
    --f:var(--flash,0);
    background:radial-gradient(circle at 50% calc(50% - var(--emb) * var(--nuc,.125)),var(--paper) calc(var(--f) * 135% - 34%),rgba(238,241,244,.55) calc(var(--f) * 135% - 14%),rgba(238,241,244,.08) calc(var(--f) * 135% - 2%),transparent calc(var(--f) * 135%));
    opacity:min(1,calc(var(--f) * 6))}
}

/* 1024–1199 px : à pleine taille, « Communication » (Tehran La) dépasse la colonne 2/7 et serait rogné par
   le masque de ligne → titre borné à 5,2vw (≈ 53 px à 1024) ; la colonne ne s’élargit pas (pas de chevauchement
   avec le sceau 3D). Au-delà de 1200 px, --fs-brand est déjà le plus petit des deux. */
@media (min-width:1024px) and (min-height:640px){
  .js[data-motion=full]:not(.js-repli) .chap h2{font-size:min(var(--fs-brand),5.2vw)}
}

/* ---------- 16. Rendu WebGL (html.gl) ---------- */
.gl .hero-emblem::before,.gl #ouverture::before{display:none}
.gl #ouverture{background:transparent}
.gl .chap-emblem,.js[data-motion=full]:not(.gl-fallback):not(.js-repli) .chap-emblem{display:none}
.gl .finale-emblem{opacity:var(--fo,0)}
.gl .chap,.gl #ensemble{background:transparent}
@media (max-width:1023px),(max-height:639px){
  .gl #principe{background:transparent;padding-top:45svh;padding-bottom:0}
  .gl .principe-text{background:color-mix(in srgb,var(--void) 90%,transparent);padding:32px var(--gutter) 64px;margin:0 calc(var(--gutter) * -1)}
  .gl .principe-text::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:64px;background:linear-gradient(transparent,color-mix(in srgb,var(--void) 90%,transparent));pointer-events:none}
  .gl .chap{padding-top:56svh;padding-bottom:0}
  .gl .chap .stick::before{display:none}
  .gl .chap-text{background:color-mix(in srgb,var(--brand-bg) 94%,transparent);padding:32px var(--gutter) 64px;margin:0 calc(var(--gutter) * -1);max-width:none}
  .gl #ensemble{min-height:100svh}
  .gl .lumiere{display:block;position:absolute;inset:0;background:var(--paper);opacity:var(--flash,0);pointer-events:none}
}

/* ---------- 17. Repli sans WebGL (.gl-fallback) ---------- */
.gl-fallback .hero-emblem{perspective:1500px}
.gl-fallback .hero-emblem img{will-change:transform}
.onde{position:absolute;left:50%;top:37.5%;width:17%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(201,207,214,.55);translate:-50% -50%;pointer-events:none;opacity:0;z-index:2;animation:onde 5s cubic-bezier(.2,.6,.3,1) infinite}
.onde.o2{animation-delay:2.5s}
@media (max-width:297px),(max-width:1023px) and (max-height:520px),(min-width:1024px) and (max-height:657px){.onde{top:34.25%;width:16.5%}}
@keyframes onde{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}
.gl-fallback .chap .stick{perspective:1400px}
/* finale sans WebGL : l’emblème grandit pendant le recul et son anneau se dessine (au lieu d’un écran vide) */
.gl-fallback.js[data-motion=full]:not(.js-repli) .finale-emblem{opacity:var(--fb-o,1);scale:var(--fb-s,1);-webkit-mask-image:conic-gradient(from -90deg,#000 var(--fb-a,360deg),rgba(0,0,0,.18) 0);mask-image:conic-gradient(from -90deg,#000 var(--fb-a,360deg),rgba(0,0,0,.18) 0)}
.gl-fallback .chap-emblem{will-change:transform;backface-visibility:hidden}
.is-paused .onde,.is-paused .hero-emblem::before,.is-paused .grain,.is-paused .hint i{animation-play-state:paused}

/* ---------- 18. Préférences système ---------- */
@media (prefers-contrast:more){
  .grain{display:none}
  :root{--line-soft:rgba(201,207,214,.4)}
  .gl .chap-text,.gl .principe-text{background:var(--brand-bg,var(--void))}
  .site::before{background:var(--ink)}
  .chap .stick::after{opacity:1!important;background:color-mix(in srgb,var(--brand-bg) 96%,transparent)!important}
}
@media (forced-colors:active){
  .gl-canvas,.grain,.reticle,.e-label,.lumiere,.ghost{display:none!important}
  .chap-emblem,.finale-emblem,.hero-emblem img{display:block!important;opacity:1!important}
  .same::after{background:CanvasText}
  .h1{text-shadow:none}
  .principe-text .w{color:CanvasText}
}
@media (prefers-reduced-motion:reduce){
  .onde,.hint i,.hero-emblem::before{animation:none!important}
  .onde{display:none}
}
@media print{
  .gl-canvas,.grain,.reticle,.motion,.rail,.lumiere,.e-label,.hint,.skip,.ghost,.copy,.call{display:none!important}
  *{color:#000!important;background:#fff!important;text-shadow:none!important;-webkit-text-stroke:0!important;box-shadow:none!important}
  .site{position:static;translate:none}
  /* papier = fond clair : lockup « clair » du kit (pas d’inversion). <source media="print"> pour Firefox ;
     Chrome ne re-sélectionne pas la source à l’impression → content:url() */
  .site-logo img{filter:none;background:transparent!important;content:url(../logo/v3/sehatpour-logo-horizontal-clair.svg?v=2610)}
  .hero-emblem,.chap-emblem,.finale-emblem{opacity:1!important;display:block!important;position:static!important;transform:none!important;translate:none!important;margin:16px auto;width:250px!important;-webkit-mask-image:none!important;mask-image:none!important}
  .hero{padding-top:0}
  section{break-inside:avoid;height:auto!important;margin:0!important;padding:24px 0!important}
  .stick{position:static!important;height:auto!important}
  .site,.kicker,.h1,.lead,.index,.hero,.reveal,.reveal *,.reveal-l,.reveal-c{opacity:1!important;transform:none!important}
}

/* =====================================================================
   19. Pages annexes : 404 et mentions légales (sans JavaScript)
   ===================================================================== */
.page-404{min-height:100svh;display:grid;place-items:center;padding:96px var(--gutter) 64px;position:relative;overflow:clip;background:radial-gradient(ellipse 50% 40% at 50% 36%,rgba(201,207,214,.10),transparent 70%),var(--void)}
.page-404::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(201,207,214,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(201,207,214,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 55% 50% at 50% 40%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 55% 50% at 50% 40%,#000 10%,transparent 75%)}
.e404{position:relative;max-width:640px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.e404-art{position:relative;display:grid;place-items:center;margin-bottom:12px}
.e404-num{position:absolute;font-family:var(--display);font-synthesis:none;letter-spacing:-.01em;font-size:clamp(4rem,14vw,9rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(201,207,214,.25);user-select:none}
.e404-art picture,.e404-art img{position:relative;width:min(240px,56vw);height:auto}
.e404 h1{font-size:clamp(1.6rem,4.4vw,2.5rem);font-weight:620;letter-spacing:-.03em;line-height:1.1;color:var(--platine-100)}
.e404 p.txt{color:var(--platine-500);max-width:46ch}
.act{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--r-pill);font-family:var(--mono);font-weight:500;font-size:var(--fs-small);letter-spacing:.06em;text-decoration:none;border:1px solid var(--line);color:var(--platine-100)}
.btn:hover{border-color:var(--platine-500)}
.btn-main{background:var(--platine-100);color:var(--ink);border-color:var(--platine-100)}
.btn-main:hover{background:var(--platine-50)}
.doms{display:flex;gap:6px 18px;flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;margin-top:8px}
.doms a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--platine-300);text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.3)}
.doms a i{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.site-static{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gutter);background:rgba(10,13,18,.92);border-bottom:1px solid var(--line-soft)}
.site-static .back{font-family:var(--mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--platine-300);display:inline-grid;place-items:center;min-height:44px;padding:0 4px}
.site-static .back:hover{color:var(--platine-100)}
.legal-page{background:var(--paper);color:var(--paper-ink);padding:clamp(56px,8vw,112px) var(--gutter) var(--section-y)}
.legal-wrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr;gap:40px}
.legal-head .eyebrow{color:var(--paper-muted)}
.legal-head h1{font-size:var(--fs-h2);font-weight:620;letter-spacing:-.03em;line-height:1.08;margin-top:12px}
.legal-toc{display:none}
.legal-body{max-width:68ch;font-size:1.0625rem;line-height:1.7}
.legal-body h2{display:flex;align-items:baseline;gap:14px;font-size:var(--fs-h3);letter-spacing:-.015em;margin:48px 0 12px;scroll-margin-top:88px}
.legal-body h2 .ix{font-family:var(--mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.1em;color:var(--paper-muted)}
.legal-body p{margin:0 0 12px}
.legal-body a{color:var(--sdi-700);text-decoration:underline;text-underline-offset:3px}
.legal-body a:hover{color:var(--paper-ink)}
.legal-body .muted{color:var(--paper-muted);font-size:.9375rem}
.legal-body .maj{margin-top:32px}
@media (min-width:1024px){
  .legal-wrap{grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
  .legal-head{grid-column:4/13}
  .legal-toc{display:block;grid-column:1/4;grid-row:1/3;align-self:start;position:sticky;top:112px}
  .legal-toc ol{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--paper-line)}
  .legal-toc a{display:flex;gap:10px;align-items:baseline;min-height:36px;padding:6px 14px;text-decoration:none;color:var(--paper-muted);font-size:.9375rem}
  .legal-toc a span{font-family:var(--mono);font-size:var(--fs-label)}
  .legal-toc a:hover{color:var(--paper-ink)}
  .legal-body{grid-column:4/12}
}