/* ==========================================================================
   CORTEX IMPACT — Design system « Dossier d'exécution »
   Montserrat (structure) · Spectral (autorité éditoriale)
   ========================================================================== */

/* ----------  FONTS (auto-hébergées)  ---------- */
@font-face{
  font-family:"Montserrat";
  src:url("/fonts/montserrat.woff2") format("woff2");
  font-weight:500 700;            /* fichier variable */
  font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("/fonts/spectral-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("/fonts/spectral-400-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("/fonts/spectral-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

/* ----------  TOKENS  ---------- */
:root{
  /* charte */
  --navy:#101B2B; --navy-deep:#0B1420; --navy-raise:#16253A;
  --orange:#FF9E1B; --orange-deep:#E98A05;
  --orange-ink:#9E5A06;          /* orange lisible en texte sur fond clair (AA) */
  --silver:#CDD8E4; --white:#FFFFFF;

  /* neutres dérivés */
  --paper:#F4F6F9; --paper-2:#EAEEF3;
  --ink:#101B2B; --ink-soft:#3B4A5C; --ink-mute:#556472;
  --steel:#3E5C7E;

  /* sémantiques discrètes */
  --green:#1B7D5C; --red:#BE3B2E;

  /* filets */
  --rule-d:rgba(205,216,228,.14);
  --rule-d-2:rgba(205,216,228,.24);
  --rule-l:rgba(16,27,43,.12);
  --rule-l-2:rgba(16,27,43,.20);

  /* type */
  --sans:"Montserrat",system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:"Spectral",Georgia,"Times New Roman",serif;

  /* échelle modulaire ~1.25 */
  --t-13:.8125rem; --t-14:.875rem; --t-15:.9375rem; --t-16:1rem;
  --t-18:1.125rem; --t-20:1.25rem;

  /* rythme */
  --gutter:clamp(20px,5vw,72px);
  --band:clamp(64px,8vw,120px);
  --maxw:1180px; --maxw-md:960px; --maxw-sm:760px;
  --prose:66ch;

  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ----------  RESET / BASE  ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--navy);color:var(--silver);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(16.5px,.55vw + 15px,18px);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--orange);color:var(--navy)}

/* ----------  LAYOUT  ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-md{max-width:var(--maxw-md);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-sm{max-width:var(--maxw-sm);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band)}

/* zones claires / sombres */
.light{background:var(--paper);color:var(--ink-soft)}
.light-2{background:var(--paper-2);color:var(--ink-soft)}
.deep{background:var(--navy-deep)}

/* ----------  TYPO  ---------- */
h1,h2,h3,h4{font-family:var(--sans);color:var(--white);text-wrap:balance;font-weight:700}
h1{font-size:clamp(2.15rem,1.2rem + 3.6vw,3.6rem);line-height:1.06;letter-spacing:-.02em;font-weight:700;max-width:15ch}
h2{font-size:clamp(1.7rem,1.15rem + 2.1vw,2.6rem);line-height:1.1;letter-spacing:-.018em;max-width:20ch}
h3{font-size:var(--t-18);letter-spacing:-.01em;line-height:1.25;font-weight:600}
.light h1,.light h2,.light h3,.light h4,.light-2 h1,.light-2 h2,.light-2 h3{color:var(--ink)}
p{max-width:var(--prose)}
strong,b{font-weight:600}
.accent{color:var(--orange)}
.hl{color:var(--orange-ink)}
.light .accent,.light-2 .accent{color:var(--orange-ink)}

/* lede / phrases d'autorité en Spectral */
.lede{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.15rem,.9rem + 1vw,1.45rem);line-height:1.5;max-width:54ch;color:var(--silver)}
.light .lede{color:var(--ink-soft)}

/* eyebrow : label structurel */
.eyebrow{font-family:var(--sans);font-weight:600;font-size:var(--t-13);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);
  display:flex;align-items:center;gap:.8em;margin-bottom:1.8em}
.eyebrow .num{color:var(--orange-ink);font-variant-numeric:tabular-nums}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.28;max-width:200px}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{content:"";flex:1;height:1px;background:currentColor;opacity:.28;max-width:120px}
.deep .eyebrow,.dark .eyebrow{color:rgba(205,216,228,.55)}

/* motif signature triangle */
.tri{width:0;height:0;flex:none;
  border-left:7px solid var(--orange);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ----------  ICONS  ---------- */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:none;
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ----------  BUTTONS  ---------- */
.btn{font-family:var(--sans);font-weight:600;font-size:var(--t-15);letter-spacing:.01em;
  padding:1em 1.7em;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  max-width:100%;min-width:0;text-align:center;
  border:1.5px solid var(--orange);background:var(--orange);color:var(--navy);
  transition:background .18s var(--ease),border-color .18s,color .18s,transform .18s}
.btn .ar{width:0;height:0;flex:none;
  border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .18s var(--ease)}
.btn:hover{background:var(--orange-deep);border-color:var(--orange-deep);transform:translateY(-1px)}
.btn:hover .ar{transform:translateX(3px)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--rule-d-2)}
.btn-ghost:hover{background:transparent;border-color:var(--orange);color:var(--orange)}
.light .btn-ghost,.light-2 .btn-ghost{color:var(--ink);border-color:var(--rule-l-2)}
.light .btn-ghost:hover,.light-2 .btn-ghost:hover{color:var(--orange-ink);border-color:var(--orange)}
.btn-dark{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-dark:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:14px}

/* focus visible global */
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:1px}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(16,27,43,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule-d);transition:background .3s,box-shadow .3s,border-color .3s}
.nav.scrolled{background:rgba(11,20,32,.92);box-shadow:0 10px 30px -22px rgba(0,0,0,.9)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:.5em;text-decoration:none;font-family:var(--sans)}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
/* barre separatrice argent — nouveau mot-symbole CORTEX IMPACT (2026-09-04).
   Proportions reprises du SVG fourni : le filet y fait 6px de large pour un
   corps de 120 (soit 5 %) et 130px de haut (108 %). A 13,12px de corps cela
   donnerait 0,66px de large — arrondi a 1px, un filet sous-pixel se rendant en
   gris sale et non en argent. Le mot-symbole reste du TEXTE, pas le SVG :
   il reste net a toute taille, herite de la couleur et garde l'ecartement de
   lettres au survol que le fichier image ne saurait pas rendre. */
.brand .bar{width:1px;height:15px;background:var(--silver);flex:none;opacity:.85;
  transition:opacity .18s}
.brand:hover .bar{opacity:1}
.brand .dia{width:8px;height:8px;background:var(--orange);transform:rotate(45deg);flex:none}
.brand .tri{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
.brand .wm{font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.2em;color:var(--silver);transition:color .18s}
.brand:hover .wm{color:var(--white)}
.nav-right{display:flex;align-items:center;gap:1.7em}
/* ---- CASSE DE LA BARRE DU HAUT (2026-09-02) ------------------------------
   Les entrees passent en casse de phrase ; SEUL le nom du cabinet reste en
   capitales (`.brand .wm`, .82rem/700/.2em) — c'est desormais la seule chose
   qui crie dans la barre, donc la seule qu'on lit d'abord.
   Deux reglages suivent la casse, ils ne sont pas cosmetiques :
   1. INTERLETTRAGE .14em -> .005em. L'interlettrage large est une correction
      optique propre aux CAPITALES, qui n'ont ni jambages ni approches
      naturelles. Applique a des bas-de-casse il defait les paires cerclees
      par le dessinateur et le mot cesse de se lire comme un mot.
   2. CORPS 13 -> 14px. A corps egal, une capitale montre sa hauteur d'oeil
      (~0,70 em) la ou une minuscule ne montre que son oeil (~0,53 em) : la
      barre aurait perdu un quart de sa presence sans toucher au nombre.
      14px reste sous le mot-symbole en masse, la hierarchie tient. */
.nav-link{font-family:var(--sans);font-weight:600;font-size:var(--t-14);letter-spacing:.005em;
  color:var(--silver);text-decoration:none;transition:color .18s}
.nav-link:hover{color:var(--orange)}
.nav-cta{font-family:var(--sans);font-weight:600;font-size:var(--t-14);letter-spacing:.01em;
  padding:.72em 1.15em;background:var(--orange);color:var(--navy);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5em;transition:background .18s}
.nav-cta:hover{background:var(--orange-deep)}
.nav-cta .ar{width:0;height:0;border-left:5px solid currentColor;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
@media(max-width:620px){
  .nav-cta{display:none}
  .nav .wrap{height:60px}
  .brand .wm{font-size:.74rem;letter-spacing:.16em}
  .brand .bar{height:13px}
  .brand img{height:30px}
  /* La nav porte deux liens depuis l'ajout d'« Analyses » (2026-08-25) : sans
     resserrage elle debordait de 50px a 320px et le second lien devenait
     inatteignable. Gouttiere et interlettrage reduits, taille inchangee — on ne
     descend pas sous le plancher de 11px. */
  .nav-right{gap:1.05em}
  /* le resserrage d'interlettrage de la barre etroite est tombe avec les
     capitales : la base est a .005em, l'ancien .07em l'aurait ELARGIE. */
}
@media(max-width:400px){
  /* Sous 400px il n'y a plus la place pour le mot-symbole ET deux liens. Les
     trois signes de la marque (point, losange, triangle) restent, et restent
     le lien vers l'accueil : l'identite tient, la navigation redevient
     atteignable. */
  .brand .wm{display:none}
  /* le filet SEPARE le point du mot : sans le mot, il ne separe plus rien */
  .brand .bar{display:none}
  .brand{gap:.34em}
  .nav-right{gap:.85em}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;
  padding-top:clamp(118px,16vh,180px);padding-bottom:clamp(64px,9vw,116px)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 520px at 82% 12%,rgba(255,158,27,.10),transparent 62%),
    radial-gradient(700px 600px at 12% 108%,rgba(62,92,126,.16),transparent 60%)}
.hero-grid{position:relative;z-index:2;display:grid;gap:48px;align-items:center;grid-template-columns:1fr}
@media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr) 300px;gap:64px}}
.kicker{font-family:var(--sans);font-weight:600;font-size:var(--t-13);letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);margin-bottom:1.6em;display:flex;align-items:center;gap:.7em}
.hero h1{margin-bottom:.55em}
.hero .lede{border-left:2px solid var(--orange);padding-left:1.15em;margin-bottom:2.2em}
.hero .ctas{margin-bottom:0}
.reassure{display:flex;gap:1.5em;flex-wrap:wrap;margin-top:1.9em;
  font-family:var(--sans);font-weight:500;font-size:var(--t-13);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(205,216,228,.6)}
.reassure span{display:flex;align-items:center;gap:.5em}
.reassure .ic{color:var(--orange);font-size:1.05rem}
.hero-visual{display:none}
@media(min-width:1000px){
  .hero-visual{display:grid;place-items:center;position:relative}
  .hero-visual img{width:min(300px,100%);height:auto;border-radius:50%;
    filter:drop-shadow(0 28px 60px rgba(0,0,0,.5))}
}

/* ==========================================================================
   STAT BAND (ex-ticker → statique, contenu inchangé)
   ========================================================================== */
.stats{background:var(--navy-deep);border-block:1px solid var(--rule-d-2)}
.stats .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.2em 0;padding-block:1.15em}
.stat{display:flex;align-items:baseline;gap:.55em;padding:.5em clamp(1em,2.4vw,2em);white-space:nowrap}
.stat .n{font-family:var(--sans);font-weight:700;font-size:clamp(1.1rem,.9rem + .8vw,1.55rem);
  letter-spacing:-.02em;color:var(--orange);font-variant-numeric:tabular-nums}
.stat .k{font-family:var(--sans);font-weight:500;font-size:var(--t-13);letter-spacing:.08em;text-transform:uppercase;color:var(--silver)}
.stat .tl{font-family:var(--sans);font-weight:600;font-size:var(--t-14);letter-spacing:.09em;text-transform:uppercase;color:var(--silver)}
.stat-sep{width:6px;height:6px;background:var(--orange);transform:rotate(45deg);flex:none;opacity:.9}
@media(max-width:720px){.stat-sep{display:none}.stats .wrap{gap:.4em 0}.stat{flex:1 1 44%;justify-content:center}}

/* ==========================================================================
   MARQUEE — bandeau réassurance défilant
   ========================================================================== */
.marquee{background:var(--navy-deep);overflow:hidden;position:relative;
  border-top:1px solid var(--orange);border-bottom:1px solid var(--orange)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--navy-deep),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--navy-deep),transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.marquee-group{display:flex;align-items:center;flex-shrink:0}
.marquee-item{display:flex;align-items:center;gap:.55em;padding:.9em clamp(1.3em,2.6vw,2.2em);white-space:nowrap;
  font-family:var(--sans);font-weight:500;font-size:var(--t-13);letter-spacing:.14em;text-transform:uppercase;color:rgba(205,216,228,.72)}
.marquee-item .ic{color:var(--orange);font-size:1.05rem}
.marquee-item .mn{color:var(--orange);font-weight:700;font-size:1.15em;letter-spacing:0;text-transform:none}
.marquee-sep{width:6px;height:6px;background:var(--orange);transform:rotate(45deg);flex:none;opacity:.85}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .marquee::before,.marquee::after{display:none}
  .marquee-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .marquee-group:nth-child(2){display:none}
  .marquee-group:first-child .marquee-item:nth-child(n+7){display:none}
}

/* ==========================================================================
   SECTION HEADER helpers
   ========================================================================== */
.sec-lead{max-width:var(--prose)}
.sec-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.sec-head h2{margin-inline:auto}
.sec-head .sub{margin:.8em auto 0;max-width:50ch}

/* ==========================================================================
   PAIN — matrice sur filets (au lieu de cartes flottantes)
   ========================================================================== */
.pain-grid{margin-top:2.6em;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.pain-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.pain-grid{grid-template-columns:repeat(3,1fr)}}
.pain-card{position:relative;background:var(--white);border:1px solid var(--rule-l);border-top:3px solid var(--orange);
  padding:1.7em 1.6em;transition:transform .22s var(--ease),box-shadow .22s}
.pain-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(16,27,43,.45)}
.pain-card .idx{font-family:var(--sans);font-weight:600;font-size:var(--t-13);letter-spacing:.16em;
  color:var(--orange-ink);display:block;margin-bottom:.9em;font-variant-numeric:tabular-nums}
.pain-card h3{color:var(--ink);font-size:var(--t-20);font-weight:700;letter-spacing:-.01em;margin-bottom:.4em}
.pain-card p{font-size:var(--t-15);line-height:1.55;color:var(--ink-soft);max-width:34ch}
.pain-card--bridge{background:transparent;border:1px dashed var(--rule-l-2);border-top:3px solid var(--ink);
  display:flex;flex-direction:column;justify-content:center}
.pain-card--bridge p{font-family:var(--serif);font-size:var(--t-18);color:var(--ink);max-width:32ch;margin:0;line-height:1.4}

/* ==========================================================================
   COÛT CACHÉ — gap viz + barres
   ========================================================================== */
.gap{max-width:820px;margin:2.4em 0 3.4em}
.gap-bar{position:relative;height:clamp(78px,9vw,96px);overflow:hidden;
  background:var(--navy);border:1px solid var(--rule-l);display:flex;align-items:center;padding-inline:1.6em}
.gap-bar::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:14px 14px}
.gap-kept{position:relative;z-index:2}
.gap-kept .k{font-family:var(--sans);font-weight:500;font-size:var(--t-13);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(205,216,228,.7);display:block;margin-bottom:.12em}
.gap-kept .v{font-family:var(--sans);font-weight:700;font-size:clamp(1.4rem,1rem + 1.4vw,1.9rem);color:var(--white);font-variant-numeric:tabular-nums}
.gap-loss{position:absolute;right:0;top:0;bottom:0;width:0;background:var(--orange);z-index:2;
  transition:width 1.4s var(--ease) .15s}
.gap.in .gap-loss{width:11%}
.gap-callout{position:absolute;top:0;right:0;transform:translateY(-115%);z-index:3;
  background:var(--orange);color:var(--navy);font-family:var(--sans);font-weight:700;font-size:1rem;
  padding:.3em .6em;white-space:nowrap;opacity:0;transition:opacity .5s ease 1.05s;font-variant-numeric:tabular-nums}
.gap-callout::after{content:"";position:absolute;bottom:-5px;right:14px;width:0;height:0;
  border-top:6px solid var(--orange);border-left:5px solid transparent;border-right:5px solid transparent}
.gap.in .gap-callout{opacity:1}
.gap-ends{display:flex;justify-content:space-between;margin-top:.85em;
  font-family:var(--sans);font-weight:600;font-size:var(--t-13);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.gap-note{margin-top:1.9em;display:flex;gap:.9em;align-items:flex-start}
.gap-note .ic{font-size:1.4rem;color:var(--orange-deep);flex:none;margin-top:.15em}
.gap-note .big{font-family:var(--serif);font-size:clamp(1.15rem,1rem + .7vw,1.4rem);line-height:1.4;color:var(--ink);margin-bottom:.35em;max-width:52ch}
.gap-note .big b{font-family:var(--sans);font-weight:600}
.gap-note .src{font-family:var(--sans);font-weight:500;font-size:var(--t-13);letter-spacing:.02em;color:var(--ink-mute);max-width:60ch}

.chart{margin-top:1.2em;border-top:1px solid var(--rule-l);padding-top:2.6em;
  display:grid;gap:clamp(1.4em,3vw,2.6em);grid-template-columns:1fr}
@media(min-width:720px){.chart{grid-template-columns:repeat(3,1fr)}}
.col{display:flex;flex-direction:column}
.bar-wrap{height:180px;display:flex;align-items:flex-end;border-bottom:2px solid var(--rule-l-2);margin-bottom:1.2em}
.bar{width:100%;height:0;position:relative;transition:height 1.15s var(--ease) .1s}
.chart.in .b1{height:38%}.chart.in .b2{height:64%}.chart.in .b3{height:100%}
.b1{background:var(--steel)}
.b2{background:var(--orange)}
.b3{background:var(--red)}
.bar .tag{position:absolute;top:.8em;left:50%;transform:translateX(-50%);width:calc(100% - 1.4em);text-align:center;
  font-family:var(--sans);font-weight:700;font-size:var(--t-13);letter-spacing:.04em;line-height:1.2;text-transform:uppercase;
  color:#fff;opacity:0;transition:opacity .4s ease .85s}
.b2 .tag{color:var(--navy)}
.chart.in .bar .tag{opacity:1}
.col .ic-lab{display:flex;align-items:center;gap:.55em;margin-bottom:.3em}
.col .ic-lab .ic{font-size:1.1rem}
.col.c1 .ic-lab .ic{color:var(--steel)}.col.c2 .ic-lab .ic{color:var(--orange-deep)}.col.c3 .ic-lab .ic{color:var(--red)}
.col h3{color:var(--ink);font-size:var(--t-16)}
.col.c3 h3{color:var(--red)}
.col p{color:var(--ink-soft);font-size:var(--t-15);margin-top:.25em;line-height:1.5}
.transition{margin-top:2.8em;font-family:var(--serif);font-size:clamp(1.2rem,1rem + 1vw,1.55rem);
  line-height:1.4;color:var(--ink);max-width:46ch}

/* ==========================================================================
   CAUSE RACINE + flow
   ========================================================================== */
.root-sub{font-family:var(--sans);font-weight:600;font-size:clamp(1.1rem,1rem + .7vw,1.35rem);color:var(--ink);margin:1.1em 0 .6em}
.root-def{font-size:var(--t-18);color:var(--ink-soft);max-width:62ch}
/* flow origine = fiche « exécution » horizontale (traitement éditorial) */
.rootflow{background:var(--white);border:1px solid var(--rule-l);border-top:3px solid var(--orange);
  border-radius:16px;box-shadow:0 18px 44px rgba(16,27,43,.06);
  padding:clamp(28px,3.4vw,44px) clamp(22px,3vw,40px);margin:clamp(38px,5vw,56px) 0;
  display:grid;gap:clamp(28px,4vw,54px);grid-template-columns:1fr}
@media(min-width:820px){.rootflow{grid-template-columns:repeat(3,1fr)}}
.rfstep{position:relative;display:flex;flex-direction:column;min-width:0}
.rfstep .rflab{font-family:var(--sans);font-weight:600;font-size:var(--t-13);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.35;display:flex;align-items:flex-start;gap:.5em;
  min-height:calc(2 * 1.35em + .2em)}
.rfstep .rflab .ic{margin-top:.06em}
.rfstep .rflab .ic{font-size:1rem}
.rfstep.a .rflab{color:var(--green)}
.rfstep.e .rflab{color:var(--orange-ink)}
.rfstep.r .rflab{color:var(--red)}
.rfrule{height:1px;margin:.85em 0 1em}
.rfstep.a .rfrule{background:rgba(27,125,92,.35)}
.rfstep.e .rfrule{background:var(--orange)}
.rfstep.r .rfrule{background:rgba(190,59,46,.30)}
.rfval{font-family:var(--sans);font-weight:600;font-size:var(--t-18);letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.rfval.clause{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:0;
  font-size:clamp(1.15rem,1rem + .5vw,1.35rem);line-height:1.38}
.rfstamp{align-self:flex-start;margin-top:.8em;font-family:var(--sans);font-weight:700;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red);border:1.5px solid var(--red);
  border-radius:5px;padding:.28em .6em;transform:rotate(-3deg)}
.rfstep::after{content:"";position:absolute;color:var(--orange);width:0;height:0;
  border-left:12px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.rfstep:last-child::after{display:none}
@media(min-width:820px){.rfstep:not(:last-child)::after{top:6px;right:calc(-1*clamp(28px,4vw,54px)/2 - 7px)}}
@media(max-width:819px){.rfstep:not(:last-child)::after{left:50%;bottom:calc(-1*clamp(28px,4vw,54px)/2 - 6px);transform:translateX(-50%) rotate(90deg)}}
.root-summary{margin:clamp(34px,4vw,50px) auto 0;text-align:center;font-family:var(--serif);
  font-size:clamp(1.25rem,1rem + 1.3vw,1.7rem);line-height:1.32;color:var(--ink);max-width:min(52ch,66%)}
@media(max-width:640px){.root-summary{max-width:38ch}}

/* ==========================================================================
   SOLUTION (deep navy) + chaîne
   ========================================================================== */
.sol .glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(820px 640px at 50% 30%,rgba(255,158,27,.07),transparent 66%)}
.sol{position:relative;overflow:hidden}
.sol .inner{position:relative;z-index:2}
.sol-kicker{font-family:var(--sans);font-weight:600;font-size:var(--t-13);letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);margin-bottom:1em;text-align:center}
.bridge{font-family:var(--sans);font-weight:700;font-size:clamp(1.9rem,1.2rem + 2.6vw,2.9rem);
  line-height:1.1;letter-spacing:-.02em;color:var(--white);margin:0 auto .7em;max-width:20ch;text-align:center}
.bridge em{color:var(--orange);font-style:normal}
.sol .position{max-width:58ch;color:rgba(205,216,228,.85);margin:0 auto;text-align:center;font-family:var(--serif);
  font-size:clamp(1.1rem,1rem + .6vw,1.3rem)}
/* variante alignée à gauche (nom de section + titre alignés) */
.sol-head-left .sol-kicker{text-align:left}
.sol-head-left .bridge{text-align:left;margin-inline:0;max-width:24ch}
.sol-head-left .position{text-align:left;margin-inline:0}
.chain{list-style:none;display:grid;gap:16px;margin-top:clamp(48px,6vw,76px);grid-template-columns:1fr}
@media(min-width:640px){.chain{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.chain{grid-template-columns:repeat(4,1fr)}}
.chain li{position:relative;background:var(--navy-raise);border:1px solid var(--rule-d);border-top:3px solid var(--orange);
  padding:1.8em 1.5em 1.7em;transition:background .2s,border-color .2s}
.chain li:hover{background:#1b2c44;border-color:var(--rule-d-2)}
.chain .step-n{position:absolute;top:.06em;right:.26em;z-index:1;pointer-events:none;
  font-family:var(--sans);font-weight:800;font-size:3.7rem;line-height:1;letter-spacing:-.03em;
  color:var(--orange);opacity:.14;font-variant-numeric:tabular-nums}
.chain .ic-top{position:relative;z-index:2;color:var(--orange);font-size:1.5rem;stroke-width:1.5;margin-bottom:.7em;display:block}
.chain h3{position:relative;z-index:2;color:var(--white);margin-bottom:.1em;font-size:var(--t-18);padding-right:1.2em}
.chain .chain-sub{position:relative;z-index:2;display:block;font-family:var(--sans);font-weight:600;
  font-size:var(--t-14);color:var(--orange);margin-bottom:.7em}
.chain p{position:relative;z-index:2;color:rgba(205,216,228,.76);font-size:var(--t-15);line-height:1.5}
.chain li:not(:last-child)::after{content:"";position:absolute;z-index:3;color:var(--orange);
  width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
@media(min-width:1024px){.chain li:not(:last-child)::after{right:-16px;top:50%;transform:translateY(-50%)}}
@media(max-width:1023px){.chain li:not(:last-child)::after{display:none}}

/* ==========================================================================
   IMPACT — comparatif
   ========================================================================== */
.compare{border:1px solid var(--rule-l);overflow:hidden;background:var(--white);margin-top:2.4em;border-radius:16px}
.compare-head{display:none}
@media(min-width:760px){
  .compare-head{display:grid;grid-template-columns:1fr 1fr}
  .compare-head .h{padding:1.15em clamp(1.2em,2vw,1.8em);
    font-family:var(--sans);font-weight:600;font-size:var(--t-13);letter-spacing:.14em;text-transform:uppercase;
    display:flex;align-items:center;gap:.6em}
  .compare-head .h.wo{color:var(--ink-mute);background:var(--paper-2)}
  .compare-head .h.w{color:var(--orange);background:var(--navy)}
}
.compare-row{display:grid;grid-template-columns:1fr}
@media(min-width:760px){.compare-row{grid-template-columns:1fr 1fr}}
.cell{padding:1.3em clamp(1.2em,2vw,1.8em);font-size:var(--t-16);display:flex;flex-direction:column;line-height:1.5;border-top:1px solid var(--rule-l)}
.cell.w{border-top-color:rgba(205,216,228,.12)}
.compare-head + .compare-row .cell{border-top:0}
.cell.wo{color:var(--ink-soft);background:var(--white)}
.cell.w{color:var(--silver);background:var(--navy)}
@media(min-width:760px){.cell.wo{border-right:1px solid var(--rule-l)}}
.mlab{display:flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:var(--t-13);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5em}
.cell.wo .mlab{color:var(--ink-mute)}
.cell.w .mlab{color:var(--orange)}
@media(min-width:760px){.mlab{display:none}}
.cell .ic{font-size:1.05em}
.cell.wo .ic{color:var(--ink-mute)}
.cell.w .ic{color:#37B98C}
/* L'effet Cortex Impact — grande ligne orange */
.effect-line{font-family:var(--sans);font-weight:700;font-size:clamp(1.7rem,1.15rem + 2.1vw,2.6rem);
  line-height:1.1;letter-spacing:-.018em;color:var(--orange-ink);margin:.15em auto 0;max-width:24ch}

/* ==========================================================================
   OFFRES
   ========================================================================== */
.offers{display:grid;gap:22px;margin-top:2.6em;grid-template-columns:1fr;max-width:1000px;margin-inline:auto}
@media(min-width:840px){.offers{grid-template-columns:1fr 1fr}}
.offer{background:var(--white);border:1px solid var(--rule-l);border-radius:16px;padding:clamp(1.8em,3vw,2.5em);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s}
.offer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:transparent}
.offer--primary::before{background:var(--navy)}
.offer--secondary::before{background:var(--orange)}
/* Offre 2 sur fond navy (spécificité renforcée pour battre les règles .offer .x) */
.offer.offer--secondary{background:var(--navy);border-color:var(--rule-d)}
.offer.offer--secondary .wm-ic{color:#fff;opacity:.07}
.offer.offer--secondary .tag{color:rgba(205,216,228,.66)}
.offer.offer--secondary h3{color:#fff}
.offer.offer--secondary .pain-line{color:rgba(205,216,228,.64)}
.offer.offer--secondary .promise{color:var(--orange)}
.offer.offer--secondary li{color:rgba(205,216,228,.82);border-bottom-color:var(--rule-d)}
.offer:hover{transform:translateY(-3px);box-shadow:0 22px 50px -30px rgba(11,20,32,.45)}
.offer .wm-ic{position:absolute;top:.9em;right:.9em;font-size:4.6rem;opacity:.05;color:var(--ink);pointer-events:none;stroke-width:1.1}
.offer .tag{font-family:var(--sans);font-weight:600;font-size:var(--t-13);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:.9em}
.offer h3{font-size:clamp(1.4rem,1.1rem + 1.1vw,1.85rem);font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-bottom:.6em;max-width:16ch}
.offer .pain-line{font-family:var(--serif);font-style:italic;font-size:var(--t-16);color:var(--ink-mute);margin-bottom:.7em}
.offer .promise{font-family:var(--sans);font-weight:500;color:var(--orange-ink);font-size:var(--t-16);line-height:1.45;margin-bottom:1.5em}
.offer ul{list-style:none;margin-bottom:1.8em;flex:1}
.offer li{padding:.6em 0 .6em 1.5em;position:relative;color:var(--ink-soft);font-size:var(--t-15);border-bottom:1px solid var(--rule-l)}
.offer li::before{content:"";position:absolute;left:0;top:1em;width:0;height:0;
  border-left:6px solid var(--orange);border-top:4px solid transparent;border-bottom:4px solid transparent}
.offer--secondary li::before{border-left-color:var(--orange)}
.offer .btn{width:100%}

/* ==========================================================================
   CABINET
   ========================================================================== */
.cab{list-style:none;display:grid;gap:1.8em;margin-top:2.6em;grid-template-columns:1fr}
@media(min-width:820px){.cab{grid-template-columns:repeat(3,1fr);gap:2.4em}}
.cab li{padding-top:1.1em;border-top:2px solid var(--orange)}
.cab h3{color:var(--ink);margin-bottom:.4em;font-size:var(--t-18)}
.cab p{color:var(--ink-soft);font-size:var(--t-15);line-height:1.55}
.founder{margin-top:clamp(46px,6vw,76px);border-top:1px solid var(--rule-l);padding-top:clamp(34px,4vw,52px);
  display:grid;gap:1.5em}
@media(min-width:760px){.founder{grid-template-columns:auto 1fr;gap:2.2em;align-items:start}}
.founder img{width:74px;height:74px;flex:none;border-radius:50%}
.founder .who{font-family:var(--sans);font-weight:600;color:var(--ink);margin-bottom:.6em;font-size:var(--t-16)}
.founder .who span{color:var(--ink-mute);font-weight:500;font-size:var(--t-14);margin-left:.4em}
.founder p{max-width:68ch;color:var(--ink-soft)}
.verbatims{display:grid;gap:1.8em;margin-top:clamp(38px,5vw,60px);grid-template-columns:1fr}
@media(min-width:760px){.verbatims{grid-template-columns:1fr 1fr;gap:2.2em}}
.verbatims blockquote{border-left:2px solid var(--orange);padding-left:1.3em}
.verbatims p{font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:var(--t-18);margin-bottom:.7em;line-height:1.5}
.verbatims cite{font-family:var(--sans);font-weight:600;font-size:var(--t-13);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);font-style:normal}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.final{position:relative;overflow:hidden;text-align:center}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 420px at 50% -6%,rgba(233,138,5,.16),transparent 58%)}
.final .inner{position:relative;z-index:2;max-width:720px;margin-inline:auto}
.final .eyebrow{justify-content:center;color:rgba(205,216,228,.55)}
.final .eyebrow::before{content:"";flex:1;height:1px;background:currentColor;opacity:.28;max-width:120px}
.final h2{color:var(--white);max-width:22ch;margin:0 auto .6em}
.final .sub{font-family:var(--serif);color:rgba(205,216,228,.86);max-width:46ch;margin:0 auto 2em;
  font-size:clamp(1.1rem,1rem + .6vw,1.3rem)}
.final .ctas{justify-content:center}
.final .reassure{justify-content:center;margin-top:1.9em}

/* ==========================================================================
   FOOTER — premium, blocs aux extrémités
   ========================================================================== */
.foot{background:var(--navy-deep);border-top:2px solid var(--orange)}
.foot-top{display:flex;justify-content:space-between;gap:2.4em 3.5em;flex-wrap:wrap;padding-block:2.7em 2.2em}
.foot-brand .brand{margin-bottom:1.05em}
.foot-brand .brand .wm{font-size:.8rem}
.foot-manifesto{font-family:var(--serif);font-size:1.05rem;line-height:1.5;color:rgba(205,216,228,.72);max-width:30ch}
.foot-nav{display:flex;gap:clamp(2.4em,5vw,4em)}
.foot-col .foot-col-h{display:block;font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(205,216,228,.9);margin-bottom:1.1em}
.foot-col a{display:block;font-family:var(--sans);font-weight:500;font-size:.84rem;letter-spacing:.01em;
  color:rgba(205,216,228,.62);text-decoration:none;margin-bottom:.6em;transition:color .16s;line-height:1.4}
.foot-col a:hover{color:var(--orange)}
.foot-bottom{border-top:1px solid var(--rule-d);padding-block:1.25em;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.4em 1.6em;
  font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.04em;color:rgba(205,216,228,.56)}
.foot-bottom a{color:rgba(205,216,228,.66);text-decoration:none;transition:color .16s}
.foot-bottom a:hover{color:var(--orange)}
@media(max-width:560px){.foot-nav{gap:2.4em;flex-wrap:wrap}}

/* ==========================================================================
   COÛT CACHÉ v2 — écran scindé (liste à gauche · 11 % à droite)
   ========================================================================== */
.cost-split{display:grid;grid-template-columns:1fr;gap:clamp(2.6em,5vw,3.4em);margin-top:2.6em}
@media(min-width:900px){.cost-split{grid-template-columns:1.25fr .85fr;gap:clamp(3em,6vw,5.5em);align-items:start}}
.clist{list-style:none;border-top:1px solid var(--rule-l)}
.clist li{display:flex;gap:1.2em;align-items:flex-start;padding:1.5em 0;border-bottom:1px solid var(--rule-l)}
.clist-ic{flex:none;width:1.9em;color:var(--orange-ink);font-size:1.5rem;display:flex;align-items:center;padding-top:.05em}
.clist-ic .ic{stroke-width:1.6}
.clist h3{color:var(--ink);font-size:var(--t-20);font-weight:700;margin-bottom:.25em}
.clist p{color:var(--ink-soft);font-size:var(--t-16);line-height:1.5;max-width:52ch}
.cost-stat{position:relative}
@media(min-width:900px){.cost-stat{padding-left:clamp(2.2em,3vw,3.4em);border-left:1px solid var(--rule-l)}}
.cstat-num{font-family:var(--sans);font-weight:800;font-size:clamp(4.6rem,11vw,8rem);line-height:.82;letter-spacing:-.05em;color:var(--orange-ink)}
.cstat-num span{font-size:.42em;vertical-align:.5em;margin-left:.04em}
.cost-title{max-width:none}
.cstat-lede{font-family:var(--serif);font-size:clamp(1.15rem,1rem + .8vw,1.5rem);line-height:1.4;color:var(--ink);margin:.4em 0 .6em;max-width:26ch}
.cstat-src{font-family:var(--sans);font-weight:500;font-size:.8rem;color:var(--ink-mute);max-width:40ch;line-height:1.5}

/* ==========================================================================
   REVEAL / MOTION
   ========================================================================== */
/* reveal only hides when JS is available (no-JS = fully visible) */
html.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  html.js .reveal,.reveal{opacity:1;transform:none}
  .gap-loss,.gap-callout,.bar,.bar .tag{opacity:1}
  .chart.in .b1{height:38%}.chart.in .b2{height:64%}.chart.in .b3{height:100%}
  .gap.in .gap-loss{width:11%}
}

/* ==========================================================================
   CABINET (hub) — pagination latérale (scrollspy) + Vision flow
   ========================================================================== */
/* --- pagination en marge : discrète, s'adapte fond clair / navy --- */
.cabrail{position:fixed;z-index:50;right:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%);
  display:none;
  --rail-tick:rgba(16,27,43,.34);--rail-active:var(--orange);--rail-label:var(--ink)}
.cabrail.rail-dark{--rail-tick:rgba(205,216,228,.4);--rail-active:var(--orange);--rail-label:var(--white)}
@media(min-width:1160px){.cabrail{display:block}}
.cabrail ol{list-style:none;display:flex;flex-direction:column;gap:.1em}
.cabrail a{display:flex;align-items:center;justify-content:flex-end;gap:.85em;flex-direction:row-reverse;
  text-decoration:none;padding:.4em 0}
.cabrail .cr-tick{width:22px;height:2px;background:var(--rail-tick);flex:none;
  transition:width .2s var(--ease),background .2s}
.cabrail .cr-t{font-family:var(--sans);font-weight:600;font-size:var(--t-13);letter-spacing:.02em;
  color:var(--rail-label);white-space:nowrap;opacity:0;transform:translateX(6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.cabrail a:hover .cr-t,.cabrail a:focus-visible .cr-t{opacity:1;transform:none}
.cabrail a:hover .cr-tick{width:30px}
.cabrail a[aria-current="true"] .cr-tick{background:var(--rail-active);width:34px}
.cabrail a[aria-current="true"] .cr-t{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cabrail *{transition:none!important}}

/* --- Vision : flux « valeur négociée → engagement → exécution → valeur captée » --- */
.vflow{list-style:none;display:grid;grid-template-columns:1fr;gap:1.5em;
  margin-top:clamp(34px,5vw,56px);max-width:820px}
@media(min-width:760px){.vflow{grid-template-columns:repeat(4,1fr);gap:1.15em}}
.vf-node{position:relative;background:var(--navy-raise);border:1px solid var(--rule-d);
  border-top:2px solid var(--orange);padding:1.05em 1.1em 1.15em;
  display:flex;flex-direction:column;gap:.55em;min-width:0}
.vf-node .vf-k{font-family:var(--sans);font-weight:700;font-size:var(--t-13);letter-spacing:.1em;
  color:var(--orange);opacity:.62;font-variant-numeric:tabular-nums}
.vf-node .vf-t{font-family:var(--sans);font-weight:600;font-size:var(--t-15);line-height:1.28;color:var(--white)}
.vf-node.vf-end{border-top-width:3px}
.vf-node.vf-end .vf-t{color:var(--orange)}
.vf-node:not(:last-child)::after{content:"";position:absolute;color:var(--orange);width:0;height:0;
  border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
@media(min-width:760px){.vf-node:not(:last-child)::after{top:50%;right:calc(-1.15em/2 - 6px);transform:translateY(-50%)}}
@media(max-width:759px){.vf-node:not(:last-child)::after{left:50%;bottom:calc(-1.5em/2 - 5px);transform:translateX(-50%) rotate(90deg)}}

/* --- Section 2 · Savoir-faire : 3 piliers, chaque savoir-faire = lien --- */
.pillars{display:grid;gap:1.6em;margin-top:clamp(2.4em,4vw,3em);grid-template-columns:1fr}
@media(min-width:900px){.pillars{grid-template-columns:repeat(3,1fr);gap:1.5em}}
.pillar{background:var(--white);border:1px solid var(--rule-l);border-top:3px solid var(--orange);
  padding:1.9em 1.7em;display:flex;flex-direction:column}
.pillar .p-ic{color:var(--orange-deep);font-size:1.7rem;margin-bottom:.75em;stroke-width:1.5}
.pillar h3{color:var(--ink);font-size:var(--t-20);font-weight:700;letter-spacing:-.01em;margin-bottom:.4em}
.pillar .p-intro{color:var(--ink-soft);font-size:var(--t-15);line-height:1.5;margin-bottom:1.2em;max-width:34ch}
.pillar ul{list-style:none;margin-top:auto;border-top:1px solid var(--rule-l)}
.pillar li{border-bottom:1px solid var(--rule-l)}
.pillar li a{display:flex;align-items:center;gap:.7em;padding:.72em 0;text-decoration:none;color:var(--ink);
  font-family:var(--sans);font-weight:600;font-size:var(--t-15);line-height:1.3;
  transition:color .16s,padding-left .16s var(--ease)}
.pillar li a::before{content:"";flex:none;width:0;height:0;
  border-left:6px solid var(--orange);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .16s}
.pillar li a:hover{color:var(--orange-ink);padding-left:.35em}
.pillar li a:hover::before{transform:translateX(2px)}

/* --- Section 3 · Différenciation : convergence + 4 cartes (navy) --- */
.conv{margin:clamp(2.4em,4vw,3.2em) auto clamp(38px,5vw,58px);max-width:720px}
.conv-svg{display:none;width:100%;height:auto}
.conv-list{display:flex;flex-direction:column;align-items:center;gap:.9em}
@media(min-width:640px){.conv-svg{display:block}.conv-list{display:none}}
.conv-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em}
.conv-chip{border:1px solid var(--rule-d-2);color:var(--silver);font-family:var(--sans);font-weight:600;
  font-size:var(--t-13);letter-spacing:.02em;padding:.5em .95em;border-radius:100px}
.conv-arrow{color:var(--orange);font-size:1.2rem;line-height:1}
.conv-core{background:var(--navy-deep);border:1.5px solid var(--orange);color:var(--white);
  font-family:var(--sans);font-weight:700;font-size:var(--t-16);padding:.7em 1.2em;border-radius:8px;text-align:center}
.diff-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.diff-grid{grid-template-columns:1fr 1fr}}
.dcard{background:var(--navy-raise);border:1px solid var(--rule-d);border-top:3px solid var(--orange);
  padding:1.7em 1.6em;transition:background .2s,border-color .2s}
.dcard:hover{background:#1b2c44;border-color:var(--rule-d-2)}
.dcard .d-ic{color:var(--orange);font-size:1.5rem;margin-bottom:.7em;stroke-width:1.5}
.dcard h3{color:var(--white);font-size:var(--t-18);margin-bottom:.4em}
.dcard p{color:rgba(205,216,228,.78);font-size:var(--t-15);line-height:1.55}

/* --- Section 4 · Bénéfices : 5 cartes, sans pourcentage --- */
.benefits{display:grid;gap:16px;margin-top:clamp(2.4em,4vw,3em);grid-template-columns:1fr}
@media(min-width:620px){.benefits{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.benefits{grid-template-columns:repeat(3,1fr)}}
.bcard{background:var(--white);border:1px solid var(--rule-l);border-left:3px solid var(--orange);
  padding:1.6em 1.6em;display:flex;flex-direction:column;
  transition:transform .22s var(--ease),box-shadow .22s}
.bcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(16,27,43,.4)}
.bcard .b-ic{color:var(--orange-deep);font-size:1.5rem;margin-bottom:.6em;stroke-width:1.5}
.bcard h3{color:var(--ink);font-size:var(--t-18);margin-bottom:.4em;max-width:22ch}
.bcard p{color:var(--ink-soft);font-size:var(--t-15);line-height:1.5}

/* --- Section 5 · Secteurs : 3 cartes-liens --- */
.sectors{display:grid;gap:18px;margin-top:clamp(2.4em,4vw,3em);grid-template-columns:1fr}
@media(min-width:820px){.sectors{grid-template-columns:repeat(3,1fr)}}
.sector{background:var(--white);border:1px solid var(--rule-l);border-top:3px solid var(--orange);
  padding:1.9em 1.7em;display:flex;flex-direction:column;text-decoration:none;
  transition:transform .22s var(--ease),box-shadow .22s}
.sector:hover{transform:translateY(-3px);box-shadow:0 20px 46px -28px rgba(16,27,43,.45)}
.sector .s-ic{color:var(--orange-deep);font-size:1.6rem;margin-bottom:.75em;stroke-width:1.5}
.sector h3{color:var(--ink);font-size:var(--t-20);letter-spacing:-.01em;margin-bottom:.5em}
.sector p{color:var(--ink-soft);font-size:var(--t-15);line-height:1.55;flex:1;margin-bottom:1.2em}
.sector .s-go{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);font-weight:600;
  font-size:var(--t-14);letter-spacing:.02em;color:var(--orange-ink)}
.sector .s-go .ar{width:0;height:0;flex:none;
  border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .16s}
.sector:hover .s-go .ar{transform:translateX(3px)}

/* --- Section 6 · Fondateur : preuves --- */
.proofs{list-style:none;margin-top:1.5em;display:grid;gap:.7em;max-width:64ch}
.proofs li{position:relative;padding-left:1.6em;color:var(--ink-soft);font-size:var(--t-15);line-height:1.5}
.proofs li::before{content:"";position:absolute;left:0;top:.55em;width:0;height:0;
  border-left:6px solid var(--orange);border-top:4px solid transparent;border-bottom:4px solid transparent}
.proofs strong{color:var(--ink);font-weight:600}
.back-link .ar-r{transition:transform .16s var(--ease)}
.back-link:hover .ar-r{transform:translateX(3px)}

/* --- Section 7 · ADN : triptyque typographique --- */
.triptych{display:grid;gap:1.6em;margin-top:clamp(2.4em,4vw,3em);grid-template-columns:1fr}
@media(min-width:820px){.triptych{grid-template-columns:repeat(3,1fr);gap:2.2em}}
.tri-col{border-top:2px solid var(--orange);padding-top:1.1em}
.tri-col .t-n{display:block;font-family:var(--sans);font-weight:700;font-size:var(--t-13);letter-spacing:.14em;
  color:var(--orange-ink);font-variant-numeric:tabular-nums;margin-bottom:.5em}
.tri-col h3{color:var(--ink);font-size:clamp(1.5rem,1.1rem + 1.5vw,2.05rem);font-weight:700;letter-spacing:-.015em;margin-bottom:.5em}
.tri-col p{color:var(--ink-soft);font-size:var(--t-15);line-height:1.55;max-width:38ch}
/* Section 7 · Nos principes (sous le triptyque) */
.principles{margin-top:clamp(2.6em,4vw,3.4em);border-top:1px solid var(--rule-l);padding-top:clamp(1.8em,3vw,2.4em)}
.principles h3{color:var(--ink);font-family:var(--sans);font-weight:700;font-size:var(--t-18);letter-spacing:-.01em;margin-bottom:.2em}
.principles .proofs{margin-top:1.1em;max-width:70ch}

/* --- Section 5 · Entrée transversale (Maîtrise d'ouvrage publique) --- */
.cross-entry{margin-top:clamp(1.8em,3vw,2.4em);background:var(--white);border:1px solid var(--rule-l);
  border-left:3px solid var(--orange);border-radius:14px;padding:clamp(1.4em,2.6vw,2em) clamp(1.5em,3vw,2.2em)}
.cross-entry .ce-tag{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);font-weight:600;
  font-size:var(--t-13);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:.7em}
.cross-entry h3{color:var(--ink);font-size:var(--t-20);letter-spacing:-.01em;margin-bottom:.4em}
.cross-entry p{color:var(--ink-soft);font-size:var(--t-15);line-height:1.6;max-width:80ch}

/* --- Stubs sous-pages « en préparation » --- */
.wip-badge{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:600;
  font-size:var(--t-13);letter-spacing:.12em;text-transform:uppercase;color:var(--orange);
  border:1px solid var(--rule-d-2);padding:.45em .9em;border-radius:100px;margin-bottom:1.6em}
.wip-badge .dotp{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
.stub-note{text-align:left;max-width:60ch}
.stub-note h2{color:var(--ink);font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem);margin-bottom:.6em}
.stub-note p{color:var(--ink-soft);margin-bottom:1.6em}
.stub-note .ctas{margin-top:.4em}
/* un groupe de boutons suivi d'un paragraphe : sans cette regle le texte
   venait se coller sous le dernier bouton — la seule combinaison que le
   composant n'avait jamais rencontree (2026-09-02, page /profils/). */
.stub-note .ctas + p{margin-top:1.6em}

/* ==========================================================================
   PAGES INTÉRIEURES (cabinet / légal)
   ========================================================================== */
.page-hero{padding-top:clamp(120px,15vh,170px);padding-bottom:clamp(40px,5vw,64px);
  position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(620px 460px at 84% 8%,rgba(255,158,27,.09),transparent 62%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{max-width:20ch}
.page-hero .lede{margin-top:1.1em}
.prose h2{color:var(--ink);margin:1.8em 0 .6em;font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem)}
.prose h3{color:var(--ink);margin:1.4em 0 .4em;font-size:var(--t-18)}
.prose p,.prose li{color:var(--ink-soft);max-width:70ch;margin-bottom:.9em}
.prose ul{margin:0 0 .9em 1.2em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--orange-ink);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink)}
.legal-meta{font-family:var(--sans);font-size:var(--t-14);color:var(--ink-mute);
  border:1px solid var(--rule-l);padding:1.2em 1.4em;margin-bottom:2em;background:var(--white)}
.legal-meta dt{font-weight:600;color:var(--ink);letter-spacing:.02em}
.legal-meta dd{margin:0 0 .7em}
.legal-meta dd:last-child{margin-bottom:0}
.back-link{font-family:var(--sans);font-weight:600;font-size:var(--t-14);letter-spacing:.02em;
  color:var(--orange-ink);text-decoration:none;display:inline-flex;align-items:center;gap:.5em;margin-top:2.4em}
.back-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   MENU MOBILE (2026-08-30). La barre est passee de 2 a 4 entrees : elle
   rognait alors EN SILENCE — 70px perdus a 320, 16 a 375, 45 a 500, 21 a 768,
   le dernier lien inatteignable a chacune de ces largeurs, sans que la page
   deborde jamais. Aucun audit global ne voit ce defaut.

   PARTI PRIS : le panneau mobile N'EST PAS un second menu. C'est `.nav-right`
   lui-meme qui se transforme — donc une seule liste de liens a maintenir, et
   aucune divergence possible entre les deux affichages.

   REGLE 8 (lisible sans JavaScript) : la transformation en tiroir n'est posee
   que sous `html.js`. Sans JS, le bouton disparait et la barre se replie sur
   deux lignes : tous les liens restent atteignables. La classe `js` est posee
   par un script en tete de document, AVANT les feuilles — pas de clignotement.
   ========================================================================== */
.nav-burger{display:none;background:none;border:0;padding:10px;margin:-10px -8px -10px 0;
  cursor:pointer;color:var(--silver);line-height:0;border-radius:6px}
.nav-burger:hover{color:var(--orange)}
.nav-burger-i{position:relative;display:block;width:22px;height:2px;
  background:currentColor;border-radius:2px;
  transition:background-color .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.nav-burger-i::before,.nav-burger-i::after{content:"";position:absolute;left:0;
  width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav-burger-i::before{top:-7px}
.nav-burger-i::after{top:7px}
/* ouvert : les trois barres deviennent une croix */
.nav.is-open .nav-burger-i{background:transparent}
.nav.is-open .nav-burger-i::before{transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav-burger-i::after{transform:translateY(-7px) rotate(-45deg)}

@media(max-width:899px){
  /* le bouton doit rester AU-DESSUS du tiroir : il porte la croix de fermeture,
     et sans cela il passait dessous — la croix existait mais restait invisible,
     ne laissant qu'Echap et le voile pour refermer. */
  .nav-burger{display:block;position:relative;z-index:3}
  /* le voile : `::after` de la barre, donc zero balisage en plus. Un clic
     dessus est attribue a `.nav` — c'est ce que le JS ecoute pour fermer. */
  /* meme piege que le tiroir : `inset:0` se resoudrait contre la barre. */
  .nav::after{content:"";position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;z-index:0;
    background:rgba(5,10,18,.62);opacity:0;visibility:hidden;
    transition:opacity .35s ease,visibility .35s}
  .nav.is-open::after{opacity:1;visibility:visible}
  .nav .wrap{position:relative;z-index:1}

  /* ⚠️ `.nav` porte `backdrop-filter` — ce qui en fait le BLOC CONTENEUR de ses
     descendants en `position:fixed` (comme le feraient `filter`, `transform` ou
     `perspective`). Un `inset:0` se resolvait donc contre une barre de 60px de
     haut : le tiroir sortait a 105px au lieu de la hauteur d'ecran. Mesure :
     le panneau faisait 105px pour un cadre de 740.
     La parade ne consiste PAS a sortir le panneau de la barre (il faudrait
     dupliquer la liste de liens) : `.nav` couvrant deja toute la largeur en
     haut du cadre, `top:0` et `right:0` coincident avec le cadre, et une
     hauteur en `vh` reste relative au cadre quel que soit le bloc conteneur. */
  html.js .nav-right{position:fixed;top:0;right:0;bottom:auto;left:auto;z-index:2;
    height:100vh;height:100dvh;
    width:min(86vw,360px);
    /* `flex-start` et non `center` : avec le sous-menu Expertises deplie,
       un contenu centre plus haut que le tiroir se fait rogner EN HAUT et
       la premiere entree devient inatteignable, meme avec overflow:auto. */
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:clamp(1.1em,3.2vh,1.8em);
    padding:clamp(76px,12vh,110px) clamp(24px,7vw,40px) clamp(28px,5vh,44px);
    background:rgba(11,20,32,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-left:1px solid rgba(255,255,255,.1);
    box-shadow:-30px 0 60px -30px rgba(0,0,0,.85);
    transform:translateX(100%);visibility:hidden;overflow-y:auto;
    transition:transform .42s cubic-bezier(.16,1,.3,1),visibility .42s}
  html.js .nav.is-open .nav-right{transform:none;visibility:visible}
  /* dans le tiroir les liens respirent, et l'interlettrage resserre pour la
     barre etroite n'a plus lieu d'etre */
  .nav-right .nav-link{font-size:1rem;letter-spacing:.005em}
  /* le CTA etait masque sous 620px faute de place : le tiroir la lui rend.
     Cette regle arrive APRES `@media(max-width:620px){.nav-cta{display:none}}`
     du meme fichier, a specificite egale — c'est l'ordre qui decide. */
  .nav-cta{display:inline-flex;justify-content:center;margin-top:.5em}
  /* le mot-symbole revient : avec les liens dans le tiroir, la place existe.
     Il avait ete masque sous 400px pour loger DEUX liens dans la barre. */
  .brand .wm{display:inline}
  .brand .bar{display:block}
  .brand{gap:.5em}

  /* --- sans JavaScript : pas de tiroir, la barre se replie sur deux lignes --- */
  html:not(.js) .nav-burger{display:none}
  html:not(.js) .nav .wrap{height:auto;flex-wrap:wrap;row-gap:8px;padding-block:10px}
  html:not(.js) .nav-right{flex-wrap:wrap;gap:.9em}
}
@media(prefers-reduced-motion:reduce){
  .nav-right,.nav::after,.nav-burger-i,
  .nav-burger-i::before,.nav-burger-i::after{transition:none}
}

/* ==========================================================================
   MENU EXPERTISES (porte depuis css/nav-drop.css le 2026-08-30).

   POURQUOI IL REVIENT : la nouvelle barre a quatre entrees avait fait
   disparaitre le declencheur « Expertises », et avec lui la seule voie d'acces
   directe aux 9 pages d'expertise publiees.

   OU IL SE RACCROCHE : « Nos interventions ». C'est le seul point d'accroche
   juste — les expertises SONT les interventions, et c'est l'entree destinee a
   devenir la page qui les indexera. Le lien lui-meme continue de mener a
   /#origine ; le survol (ou le focus clavier) ouvre le panneau.

   POURQUOI DANS CETTE FEUILLE ET PLUS DANS UN FICHIER A PART : nav-drop.css
   n'etait charge que par 11 pages sur 32. Le declencheur vivant desormais dans
   la barre commune, il fallait la couverture complete — soit ajouter un lien
   sur 21 pages, soit porter les regles ici. La seconde option retire en plus
   une requete bloquante aux 11 pages qui la chargeaient.
   ========================================================================== */
.navx{position:relative;display:flex;align-items:center}
.navx>.nav-link{display:inline-flex;align-items:center;gap:.5em}
/* ---- DECLENCHEURS SANS DESTINATION (2026-08-31) -------------------------
   Les trois entrees a sous-menu (« Vos enjeux », « Nos interventions »,
   « Le cabinet ») ne menent nulle part : elles OUVRENT un menu. Un <a> sans
   href n'est pas focusable et ne s'annonce pas ; un <a href="#"> mentirait.
   C'est donc un <button>, la seule semantique juste pour un declencheur.
   `.nav-link` fournit deja police, graisse, casse et couleur ; le navigateur,
   lui, impose fond, bordure et marge interne aux boutons — ce sont les seules
   proprietes a neutraliser.
   PAS d'`aria-expanded` : l'ouverture est purement CSS (`:hover` /
   `:focus-within`), aucun script ne la suit — un attribut fige a "false"
   annoncerait un etat faux. `aria-haspopup` seul dit la verite.
   Le panneau s'ouvre au focus clavier du bouton, donc la tabulation y entre
   sans script ; au doigt sous 900px le panneau est deja deplie par la feuille. */
.navx-t{background:none;border:0;padding:0;margin:0;cursor:pointer;
  line-height:inherit;text-align:left}
.navx-t:hover,.navx-t:focus-visible{color:var(--orange,#FF9E1B)}
.navx-caret{width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s cubic-bezier(.16,1,.3,1);opacity:.85}
.navx:hover .navx-caret,
.navx:focus-within .navx-caret{transform:translateY(0) rotate(-135deg)}

.navx-panel{position:absolute;top:100%;left:50%;transform:translate(-50%,-8px) scale(.99);z-index:70;
  padding-top:14px;                                   /* pont anti-flicker */
  width:max-content;min-width:min(94vw,420px);max-width:min(94vw,560px);
  opacity:0;visibility:hidden;pointer-events:none;transform-origin:top center;
  transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .28s}
/* ⚠️ PLAFOND DE LARGEUR — porte a 680px, mais SEULEMENT au-dessus de 1100px.
   Les libelles d'expertise se sont allonges le 2026-09-02 (« Contract
   Management stratégique ») : largeur naturelle mesuree a 666px contre un
   plafond a 560. Mais le panneau est CENTRE sur son declencheur : a 900px
   un panneau de 680 sortait de 39px a GAUCHE de l'ecran — coupe en silence,
   la page ne debordant pas (`overflow` de la barre). `min(94vw,…)` borne la
   largeur, jamais la POSITION : c'est le piege. Entre 900 et 1099px deux
   libelles tiennent donc sur deux lignes — lisible, non coupe, assume. */
/* Sous 1100px le plafond DESCEND a 500px. Les libelles « Vos enjeux » se
   sont allonges le 2026-09-04 : a 900px le panneau atteignait 555px et,
   centre sur le declencheur le plus a GAUCHE de la barre, il sortait de
   11px hors de l'ecran — coupe en silence, la page ne debordant pas.
   Rappel du piege : `min(94vw,…)` borne la LARGEUR, jamais la POSITION.
   Entre 900 et 1099px quelques libelles tiennent donc sur deux lignes. */
@media(min-width:900px) and (max-width:1099px){.navx-panel{max-width:min(94vw,500px)}}
@media(min-width:1100px){.navx-panel{max-width:min(94vw,680px)}}
.navx:hover .navx-panel,
.navx:focus-within .navx-panel{opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0) scale(1);
  transition:opacity .2s ease,transform .32s cubic-bezier(.16,1,.3,1),visibility 0s}

.navx-glass{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px;padding:20px 24px;
  background:rgba(13,22,35,.9);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);
  border:1px solid rgba(255,255,255,.13);border-radius:18px;
  box-shadow:0 36px 84px -34px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.07)}
/* ⚠️ le composant d'origine posait .62rem, soit 9,92px — SOUS le plancher de
   11px de ce projet. Le defaut existait deja sur les 11 pages qui chargeaient
   nav-drop.css ; le portage sur 32 pages le rendait general. Aligne sur le
   micro-label standard du site (.st-k, .hcard .k) : .72rem = 11,52px, et
   l'interlettrage passe de .18em a .14em pour compenser la largeur gagnee. */
.navx-eyebrow{font-family:var(--sans,'Montserrat',sans-serif);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange,#FF9E1B);
  padding:0 .7em;margin:.1em 0 .6em}
.navx-item{display:block;padding:.5em .7em;border-radius:9px;text-decoration:none;position:relative;
  font-family:var(--sans,'Montserrat',sans-serif);font-weight:600;font-size:.95rem;letter-spacing:.005em;
  color:#fff;line-height:1.25;
  transition:background .18s ease,transform .2s cubic-bezier(.16,1,.3,1),color .18s ease}
.navx-item:hover,.navx-item:focus-visible{background:rgba(255,158,27,.12);color:var(--orange,#FF9E1B);
  transform:translateX(3px);outline:none}
.navx-item[aria-current="page"]{background:rgba(255,158,27,.09);color:var(--orange,#FF9E1B)}
.navx-item[aria-current="page"]::before{content:"";position:absolute;left:0;top:.55em;bottom:.55em;width:2px;
  border-radius:2px;background:var(--orange,#FF9E1B)}
/* la sortie vers l'index complet : les 9 du panneau sont une selection */
.navx-all{grid-column:1 / -1;margin-top:.5em;padding-top:.7em;
  border-top:1px solid rgba(255,255,255,.1)}
.navx-all .navx-item{color:var(--orange,#FF9E1B);font-size:.86rem;letter-spacing:.04em}

/* ---- DANS LE TIROIR MOBILE : plus de survol possible, plus de panneau
   flottant. L'ancienne feuille faisait `display:none` sous 760px et le menu
   devenait inatteignable au doigt — c'est precisement le trou qu'on rebouche.
   Le panneau redevient une simple liste indentee, toujours depliee : aucun
   geste a decouvrir, et le tiroir defile deja de lui-meme. ---- */
@media(max-width:899px){
  .navx{display:block}
  .navx-caret{display:none}
  html.js .nav-right .navx-panel{position:static;opacity:1;visibility:visible;pointer-events:auto;
    transform:none;width:auto;min-width:0;max-width:none;padding-top:.5em;transition:none}
  html.js .nav-right .navx-glass{grid-template-columns:1fr;gap:0;padding:0;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;box-shadow:none}
  html.js .nav-right .navx-eyebrow{padding:0;margin:.85em 0 .3em}
  html.js .nav-right .navx-item{padding:.36em 0 .36em .9em;font-size:.86rem;border-radius:0;
    border-left:1px solid rgba(255,255,255,.16)}
  html.js .nav-right .navx-item:hover,html.js .nav-right .navx-item:focus-visible{background:none;transform:none}
  html.js .nav-right .navx-all{margin-top:.55em;padding-top:.55em}
  /* sans JS le panneau flottant n'a pas de declencheur au doigt : on le deplie
     aussi, la barre etant deja repliee sur plusieurs lignes */
  html:not(.js) .nav-right .navx-panel{position:static;opacity:1;visibility:visible;pointer-events:auto;
    transform:none;width:auto;min-width:0;transition:none}
}
/* ==========================================================================
   « Le cabinet » — PANNEAU A UNE COLONNE (2026-09-02)
   « Votre profil » a desormais une DESTINATION : /profils/. Le declencheur de
   2e niveau disparît avec sa sous-liste volante — un <button> n'etait juste que
   tant qu'il OUVRAIT quelque chose ; ici c'est un <a>, qui peut donc porter
   `aria-current` comme les autres entrees, entrer dans l'ordre de tabulation
   naturel et s'ouvrir dans un nouvel onglet.
   Consequence de composition : le panneau n'a plus que trois entrees. La grille
   `1fr 1fr` du verre laisserait une moitie vide, et le plancher de 420px du
   panneau de base le rendrait deux fois trop large pour son contenu. Donc une
   colonne, plancher abaisse. La largeur reste POSEE, jamais animee (regle 3).
   ⚠️ Specificite EGALE a `.navx-panel` (0,1,0) : c'est l'ORDRE qui tranche.
   Ces deux regles doivent rester APRES la definition de base.
   Sous 900px, `html.js .nav-right .navx-panel` (0,3,0) reprend la main et remet
   `min-width:0` : le tiroir mobile n'est pas concerne.
   ========================================================================== */
.navx-panel-solo{min-width:min(94vw,236px)}
.navx-glass-solo{grid-template-columns:1fr}

@media(prefers-reduced-motion:reduce){
  .navx-caret,.navx-panel,.navx-item{transition:none}
}

/* ================================ SURFACES NAVIGATEUR (2026-09-02) ========
   Le balayage rendait « scrollbar ✗ ». Ce sont les surfaces qu'on ne dessine
   pas et qui portent quand meme le design : elles arrivent avec les defauts du
   navigateur, qui n'appartiennent a aucune charte. C'est le signal le moins
   cher qu'une page a ete construite plutot qu'assemblee.
   ⚠️ `scrollbar-color` appartient a l'ELEMENT RACINE : pose sur `.bold`
   (c'est-a-dire sur `<body>`) il ne thematise rien. Premiere tentative ratee.
   ========================================================================== */
html{scrollbar-color:rgba(205,216,228,.30) #0B1420;scrollbar-width:thin}
::selection{background:#FF9E1B;color:#101B2B}
a{text-underline-offset:.18em}