/* =============================================================
   bourse.monexpansion.com · design system CREAM + PROFONDEUR
   4 plans, une seule source de lumière en haut.
   ============================================================= */

/* ---------- JOUR · palette relevée sur elevenlabs.io ----------
   Gris CHAUDS (teinte ~45°, chroma quasi nulle) + encre NOIRE.
   Règle structurante d'ElevenLabs : le texte n'est jamais coloré.
   La couleur ne vit que sur de petites surfaces (aplats, courbes, états).
   Les 4 valeurs sont leurs valeurs exactes, réordonnées pour que le plan
   le plus clair reste le plus proche (gate profondeur monExpansion). */
:root{
  --mx-bg-sunk : #EBE8E4;   /* creusé · champs, pistes, tableaux */
  --mx-bg-deep : #F5F3F1;   /* LA PAGE */
  --mx-bg      : #FDFCFC;   /* les cartes */
  --mx-bg-high : #FFFFFF;   /* l'actif */

  --mx-ink     : #000000;   /* noir pur · c'est le geste ElevenLabs */
  --mx-ink-mut : #44403B;
  --mx-ink-fnt : #777169;
  --mx-ink-faint:#A59F97;

  --mx-hl-1:#fff; --mx-hl-2:#fff; --mx-hl-3:#fff;
  --mx-sh-a: rgba(41,35,28,.10);
  --mx-sh-b: rgba(41,35,28,.05);
  --mx-highlight:#fff;
  --mx-gradient      : var(--mx-bg);
  --mx-gradient-high : var(--mx-bg-high);
  --mx-hairline: rgba(0,0,0,.075);

  /* accents · petites surfaces uniquement, jamais le corps de texte */
  --mx-corail    : #FF6B5C;   /* la marque monExpansion */
  --mx-corail-txt: #000000;   /* les titres restent noirs */
  --mx-corail-ink: #C7402E;   /* seul cas coloré : micro-label sur fond pêche */
  --mx-peche     : #FBEFEC;
  --mx-ambre     : #C98A2B;
  --mx-or        : #A8823B;
  --mx-vert      : #2F7D5B;
  --mx-bleu      : #0A59D2;   /* bleu ElevenLabs */
  --mx-rouge     : #F41A2F;   /* rouge ElevenLabs */

  --mx-r-sm: 6px; --mx-r-md: 12px; --mx-r-lg: 20px; --mx-r-pill: 9999px;
}

/* ---------- NUIT · le noir cinématique d'ElevenLabs ---------- */
:root[data-theme="dark"]{
  --mx-bg-sunk : #000000;
  --mx-bg-deep : #0A0A09;
  --mx-bg      : #161512;
  --mx-bg-high : #22201C;

  --mx-ink     : #FFFFFF;
  --mx-ink-mut : #B5AFA6;
  --mx-ink-fnt : #8A847B;
  --mx-ink-faint:#6A645C;

  --mx-hl-1: rgba(255,255,255,.05);
  --mx-hl-2: rgba(255,255,255,.08);
  --mx-hl-3: rgba(255,255,255,.12);
  --mx-sh-a: rgba(0,0,0,.55);
  --mx-sh-b: rgba(0,0,0,.32);
  --mx-highlight: rgba(255,255,255,.10);
  --mx-gradient      : var(--mx-bg);
  --mx-gradient-high : var(--mx-bg-high);
  --mx-hairline: rgba(255,255,255,.10);

  --mx-corail-txt: #FFFFFF;
  --mx-corail-ink: #FF9384;
  --mx-peche : rgba(255,107,92,.13);
  --mx-ambre : #E0A94F;
  --mx-or    : #C9A05A;
  --mx-vert  : #4FBF8B;
  --mx-bleu  : #6D9BF0;
  --mx-rouge : #FF5364;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --mx-bg-sunk : #000000;
    --mx-bg-deep : #0A0A09;
    --mx-bg      : #161512;
    --mx-bg-high : #22201C;
    --mx-ink     : #FFFFFF;
    --mx-ink-mut : #B5AFA6;
    --mx-ink-fnt : #8A847B;
    --mx-ink-faint:#6A645C;
    --mx-hl-1: rgba(255,255,255,.05);
    --mx-hl-2: rgba(255,255,255,.08);
    --mx-hl-3: rgba(255,255,255,.12);
    --mx-sh-a: rgba(0,0,0,.55);
    --mx-sh-b: rgba(0,0,0,.32);
    --mx-highlight: rgba(255,255,255,.10);
    --mx-gradient      : var(--mx-bg);
    --mx-gradient-high : var(--mx-bg-high);
    --mx-hairline: rgba(255,255,255,.10);
    --mx-corail-txt: #FFFFFF;
    --mx-corail-ink: #FF9384;
    --mx-peche : rgba(255,107,92,.13);
    --mx-ambre : #E0A94F;
    --mx-or    : #C9A05A;
    --mx-vert  : #4FBF8B;
    --mx-bleu  : #6D9BF0;
    --mx-rouge : #FF5364;
  }
}

/* ---------- élévation ---------- */
:root, :root[data-theme="dark"]{
  --mx-shadow-1: inset 0 1px 2px var(--mx-hl-1), 0 1px 2px var(--mx-sh-a), 0 2px 4px  var(--mx-sh-b);
  --mx-shadow-2: inset 0 1px 2px var(--mx-hl-2), 0 2px 4px var(--mx-sh-a), 0 4px 8px  var(--mx-sh-b);
  --mx-shadow-3: inset 0 1px 2px var(--mx-hl-3), 0 4px 6px var(--mx-sh-a), 0 6px 10px var(--mx-sh-b);
  --mx-shadow-sunk: inset 0 2px 4px var(--mx-sh-a), inset 0 -1px 1px var(--mx-hl-1);
}

/* =============================================================
   BASE
   ============================================================= */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:76px }
body{
  font-family:"Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size:17px; line-height:1.62;
  background:var(--mx-bg-deep); color:var(--mx-ink);
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease;
}
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px }

h1,h2,h3,h4{ font-stretch:75%; font-weight:700; letter-spacing:-.02em; line-height:1.1 }
h2{ font-size:clamp(28px,4.4vw,42px) }
h3{ font-size:clamp(20px,2.6vw,25px) }
.serif{ font-family:"Newsreader", Georgia, serif }
.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mx-ink-fnt); font-stretch:100%;
}
.mut{ color:var(--mx-ink-mut) }
a{ color:var(--mx-corail-ink); text-decoration-thickness:1px; text-underline-offset:3px }

/* surfaces */
.surface{
  position:relative; background:var(--mx-gradient); box-shadow:var(--mx-shadow-1);
  border:none; border-radius:var(--mx-r-lg);
  transition:box-shadow .22s ease, transform .22s ease, background .3s ease;
}
.surface::before{
  content:""; position:absolute; inset:0 0 auto; height:1px; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg, transparent, var(--mx-highlight) 30%, var(--mx-highlight) 70%, transparent);
  opacity:.55;
}
.raised{ background:var(--mx-gradient-high); box-shadow:var(--mx-shadow-3) }
.quiet{ background:var(--mx-bg); box-shadow:none }
.quiet::before{ opacity:.22 }
.sunk{ background:var(--mx-bg-sunk); box-shadow:var(--mx-shadow-sunk); border-radius:var(--mx-r-md) }
.hover:hover{ box-shadow:var(--mx-shadow-3); transform:translateY(-2px) }
.quiet.hover:hover{ background:var(--mx-gradient) }

/* =============================================================
   NAV
   ============================================================= */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in oklab, var(--mx-bg-deep) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 var(--mx-hairline);
}
.nav-in{ max-width:1080px; margin:0 auto; padding:11px 24px; display:flex; align-items:center; gap:18px }
.nav-logo{ font-stretch:75%; font-weight:700; font-size:17px; letter-spacing:-.02em; white-space:nowrap }
.nav-logo b{ color:var(--mx-corail-txt) }
.nav-links{ display:flex; gap:4px; margin-left:auto; min-width:0; overflow-x:auto; scrollbar-width:none }
.nav-links::-webkit-scrollbar{ display:none }
.nav-links a{
  font-size:13.5px; font-weight:600; padding:6px 11px; border-radius:var(--mx-r-sm);
  color:var(--mx-ink-mut); text-decoration:none; white-space:nowrap;
  transition:background .18s, color .18s;
}
.nav-links a:hover{ background:var(--mx-bg); color:var(--mx-ink) }
.icon-btn{
  width:34px; height:34px; flex:none; border-radius:var(--mx-r-sm); cursor:pointer;
  background:var(--mx-gradient); box-shadow:var(--mx-shadow-1); border:none;
  color:var(--mx-ink); display:grid; place-items:center; font-size:15px;
  transition:box-shadow .2s, transform .2s;
}
.icon-btn:hover{ box-shadow:var(--mx-shadow-3); transform:translateY(-1px) }

/* =============================================================
   HERO
   ============================================================= */
.hero{ padding:64px 0 40px }
.hero h1{ font-size:clamp(40px,7.4vw,74px); margin:14px 0 18px }
.hero h1 em{ font-family:"Newsreader",serif; font-style:italic; font-weight:400; font-stretch:100%; color:var(--mx-corail-txt) }
.hero-sub{ font-size:clamp(17px,2.2vw,20px); color:var(--mx-ink-mut); max-width:60ch }
.hero-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px }
.pill{
  font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:6px 13px; border-radius:var(--mx-r-pill); background:var(--mx-bg-high);
  box-shadow:none; color:var(--mx-ink-mut); border:1px solid var(--mx-hairline);
}

/* progression des leçons · élément creusé */
.prog{ margin-top:30px; padding:16px 18px; border-radius:var(--mx-r-lg) }
.prog-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px }
.prog-bar{ height:8px; border-radius:99px; background:var(--mx-bg-sunk); box-shadow:var(--mx-shadow-sunk); overflow:hidden }
.prog-fill{ height:100%; border-radius:99px; background:var(--mx-corail); box-shadow:var(--mx-shadow-2) }
.prog-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px }
.prog-chip{
  font-size:12px; font-weight:600; padding:5px 10px; border-radius:var(--mx-r-sm);
  background:var(--mx-bg-sunk); color:var(--mx-ink-fnt); box-shadow:var(--mx-shadow-sunk);
}
.prog-chip.ok{ background:var(--mx-gradient-high); box-shadow:var(--mx-shadow-2); color:var(--mx-ink) }
.prog-chip.ok::before{ content:"✓ "; color:var(--mx-vert); font-weight:700 }

/* =============================================================
   SECTIONS
   ============================================================= */
section{ padding:56px 0; scroll-margin-top:70px }
.sec-head{ margin-bottom:30px; max-width:64ch }
.sec-head p{ color:var(--mx-ink-mut); margin-top:10px }

/* =============================================================
   FRISE
   ============================================================= */
.frise-ctl{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px }
.tag-btn{
  font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:var(--mx-r-pill); cursor:pointer;
  border:none; background:var(--mx-bg); color:var(--mx-ink-mut);
  box-shadow:var(--mx-shadow-1); transition:all .18s;
}
.tag-btn:hover{ transform:translateY(-1px); box-shadow:var(--mx-shadow-2) }
.tag-btn.on{ background:var(--mx-ink); box-shadow:none; color:var(--mx-bg-high) }

/* =============================================================
   FRISE HORIZONTALE · un rail + un panneau de détail
   ============================================================= */
.frise-rail{
  position:relative; overflow-x:auto; overflow-y:hidden; padding:6px 0 16px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.frise-rail::-webkit-scrollbar{ height:7px }
.frise-rail::-webkit-scrollbar-thumb{ background:var(--mx-bg-sunk); border-radius:99px }
.frise-piste{ display:flex; gap:0; min-width:max-content; position:relative; padding:0 2px }
/* l'axe du temps, derrière les repères */
.frise-piste::before{
  content:""; position:absolute; left:0; right:0; top:47px; height:2px; border-radius:2px;
  background:var(--mx-ink-faint); opacity:.4;
}
.jal{
  position:relative; flex:none; width:132px; cursor:pointer; border:none; background:none;
  font:inherit; color:inherit; padding:0 8px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.jal-an{
  font-stretch:75%; font-weight:700; font-size:14.5px; letter-spacing:-.01em;
  color:var(--mx-ink-mut); white-space:nowrap; height:26px; transition:color .18s;
}
.jal-pt{
  width:11px; height:11px; border-radius:50%; margin:15px 0 13px; flex:none;
  background:var(--mx-bg-high); box-shadow:0 0 0 2px var(--mx-bg-sunk);
  transition:all .2s;
}
.jal[data-tag="crise"]   .jal-pt{ background:var(--mx-rouge) }
.jal[data-tag="bechade"] .jal-pt{ background:var(--mx-corail) }
.jal[data-tag="macro"]   .jal-pt{ background:var(--mx-ambre) }
.jal[data-tag="france"]  .jal-pt{ background:var(--mx-bleu) }
.jal[data-tag="marche"]  .jal-pt{ background:var(--mx-vert) }
.jal-t{
  font-size:12.5px; line-height:1.35; color:var(--mx-ink-fnt); font-weight:600;
  transition:color .18s;
}
.jal:hover .jal-an, .jal:hover .jal-t{ color:var(--mx-ink) }
.jal:hover .jal-pt{ transform:scale(1.25) }
.jal.on .jal-an{ color:var(--mx-ink) }
.jal.on .jal-t{ color:var(--mx-ink); font-weight:700 }
.jal.on .jal-pt{
  transform:scale(1.5);
  box-shadow:0 0 0 3px var(--mx-bg-high), 0 0 0 5px var(--mx-ink);
}

.frise-detail{ padding:24px 26px; margin-top:4px }
.fd-head{ display:flex; gap:16px; align-items:baseline; margin-bottom:20px }
.fd-an{
  font-stretch:75%; font-weight:700; font-size:26px; letter-spacing:-.02em;
  color:var(--mx-corail); flex:none; font-variant-numeric:tabular-nums;
}
.fd-head h3{ font-size:22px; margin-bottom:2px }
.fd-cols{ display:grid; gap:22px }
@media (min-width:760px){ .fd-cols{ grid-template-columns:1fr 1fr; gap:32px } }
.fd-cols h4{
  font-size:11px; font-stretch:100%; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--mx-ink-fnt); margin-bottom:10px;
}
.fd-cols ul{ list-style:none; display:grid; gap:7px }
.fd-cols li{
  position:relative; padding-left:19px; font-size:15.5px; line-height:1.55; color:var(--mx-ink-mut);
}
.fd-cols li::before{
  content:""; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%;
  background:var(--mx-ink-faint);
}
.fd-cols ul.meca li{ color:var(--mx-ink) }
.jalon-cit{
  margin-top:20px; padding:13px 16px; border-radius:var(--mx-r-md);
  font-family:"Newsreader",serif; font-style:italic; font-size:16.5px; line-height:1.55;
  color:var(--mx-ink-mut);
}
.terme-links{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px }
.terme-link{
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--mx-r-pill); cursor:pointer;
  border:none; font-family:inherit; background:var(--mx-bg-sunk); color:var(--mx-ink-mut);
  transition:all .18s;
}
.terme-link:hover{ background:var(--mx-ink); color:var(--mx-bg-high) }

/* liens secondaires du hero */
.hero-aussi{ margin-top:18px; font-size:14px; color:var(--mx-ink-mut) }
.hero-aussi a{ color:var(--mx-ink-mut); text-decoration-color:var(--mx-hairline) }
.hero-aussi a:hover{ color:var(--mx-ink) }
.hero-aussi kbd{
  font-family:inherit; font-size:11px; font-weight:700; padding:1px 6px; border-radius:5px;
  background:var(--mx-bg-sunk); box-shadow:inset 0 0 0 1px var(--mx-hairline);
}

@keyframes fade{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }

/* =============================================================
   GLOSSAIRE
   ============================================================= */
.glo-ctl{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; align-items:center }
.search{
  flex:1; min-width:220px; padding:11px 15px; border-radius:var(--mx-r-md); border:none; font:inherit; font-size:15px;
  background:var(--mx-bg-sunk); box-shadow:var(--mx-shadow-sunk); color:var(--mx-ink);
}
.search::placeholder{ color:var(--mx-ink-fnt) }
.search:focus{ outline:2px solid var(--mx-corail); outline-offset:1px }
.glo-count{ font-size:13px; color:var(--mx-ink-fnt); font-weight:600; white-space:nowrap }
.glo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px }
.gterme{ padding:18px 19px; cursor:pointer; border-radius:var(--mx-r-lg) }
.gterme h3{ font-size:17.5px; margin-bottom:7px }
.gterme .def{ font-size:15px; color:var(--mx-ink-mut); line-height:1.55 }
.gterme .exemple{
  display:none; margin-top:14px; padding-top:14px; font-size:15px; line-height:1.6;
  box-shadow:inset 0 1px 0 var(--mx-hairline);
}
.gterme.open .exemple{ display:block; animation:fade .25s ease }
.gterme .exemple b{ display:block; font-size:11px; font-stretch:100%; letter-spacing:.11em;
  text-transform:uppercase; color:var(--mx-ink-fnt); margin-bottom:6px }
.gterme-top{ display:flex; gap:10px; align-items:baseline; justify-content:space-between }
.mini{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mx-ink-fnt); flex:none; padding-top:3px }
.gterme.flash{ animation:flash 1.5s ease }
@keyframes flash{ 0%,100%{ box-shadow:var(--mx-shadow-1) } 20%{ box-shadow:0 0 0 3px var(--mx-corail), var(--mx-shadow-3) } }

/* =============================================================
   MÉCANIQUES
   ============================================================= */
.meca-grid{ display:grid; gap:20px }
.meca-card{ padding:26px; border-radius:var(--mx-r-lg) }
.meca-card h3{ margin-bottom:6px }
.meca-card > p.mut{ margin-bottom:20px; max-width:62ch }

/* étapes cliquables */
.steps{ display:grid; gap:9px }
.step{
  display:flex; gap:15px; align-items:flex-start; padding:14px 16px; border-radius:var(--mx-r-md);
  cursor:pointer; background:var(--mx-bg); transition:all .2s; border:none; text-align:left;
  font:inherit; color:inherit; width:100%;
}
.step:hover{ background:var(--mx-gradient); box-shadow:var(--mx-shadow-2) }
.step.on{ background:var(--mx-gradient-high); box-shadow:var(--mx-shadow-3) }
.step-n{
  width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:12.5px; font-weight:700; background:var(--mx-bg-sunk); box-shadow:var(--mx-shadow-sunk);
  color:var(--mx-ink-mut);
}
.step.on .step-n{ background:var(--mx-ink); color:var(--mx-bg-high); box-shadow:none }
.step-t{ display:block; font-weight:700; font-size:15.5px; margin-bottom:2px }
.step-d{ font-size:14.5px; color:var(--mx-ink-mut); line-height:1.5; display:none }
.step.on .step-d{ display:block }

/* simulateurs */
.sim{ display:grid; gap:18px; grid-template-columns:1fr; align-items:start }
@media(min-width:760px){ .sim{ grid-template-columns:1fr 1.1fr } }
.sim-ctl{ display:grid; gap:16px }
.slider-row label{ display:flex; justify-content:space-between; font-size:13.5px; font-weight:600; margin-bottom:8px }
.slider-row label span{ color:var(--mx-corail-txt); font-variant-numeric:tabular-nums }
input[type=range]{
  width:100%; height:8px; border-radius:99px; -webkit-appearance:none; appearance:none;
  background:var(--mx-bg-sunk); box-shadow:var(--mx-shadow-sunk); cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--mx-bg-high);
  box-shadow:0 1px 2px var(--mx-sh-a), 0 3px 6px var(--mx-sh-b); border:none; cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--mx-bg-high); border:none;
  box-shadow:0 1px 2px var(--mx-sh-a), 0 3px 6px var(--mx-sh-b); cursor:grab;
}
.seg{ display:flex; gap:6px }
.seg button{
  flex:1; padding:9px; border-radius:var(--mx-r-pill); border:none; font:inherit; font-size:13.5px; font-weight:600;
  cursor:pointer; background:var(--mx-bg-sunk); box-shadow:var(--mx-shadow-sunk); color:var(--mx-ink-mut);
  transition:all .18s;
}
.seg button.on{ background:var(--mx-ink); box-shadow:none; color:var(--mx-bg-high) }
.sim-out{ padding:18px; border-radius:var(--mx-r-md) }
.sim-num{ font-stretch:75%; font-weight:700; font-size:34px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1 }
.sim-num.pos{ color:var(--mx-vert) } .sim-num.neg{ color:var(--mx-rouge) }
.sim-lab{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mx-ink-fnt); margin-bottom:4px }
.sim-note{ font-size:14.5px; color:var(--mx-ink-mut); margin-top:12px; line-height:1.55 }
svg.chart{ width:100%; height:auto; display:block; border-radius:var(--mx-r-md) }

/* balance taux/actions */
.balance{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px }
.bal-side{ padding:16px; border-radius:var(--mx-r-md); text-align:center; transition:all .25s }
.bal-side .sim-num{ font-size:29px }
.bal-side.win{ background:var(--mx-gradient-high); box-shadow:var(--mx-shadow-3) }
.bal-side.lose{ background:var(--mx-bg); box-shadow:none; opacity:.62 }

/* empilement dérivés */
.stack{ display:grid; gap:8px }
.layer{
  padding:13px 16px; border-radius:var(--mx-r-md); cursor:pointer; transition:all .22s; border:none;
  font:inherit; color:inherit; text-align:left; width:100%; background:var(--mx-bg);
}
.layer:hover{ transform:translateX(3px) }
.layer.on{ background:var(--mx-gradient-high); box-shadow:var(--mx-shadow-3) }
.layer-t{ display:block; font-weight:700; font-size:15px }
.layer-d{ display:block; font-size:14px; color:var(--mx-ink-mut); margin-top:3px; line-height:1.5 }
.layer-dist{ display:block; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mx-ink-fnt); margin-bottom:3px }

/* =============================================================
   PERSONNAGES
   ============================================================= */
.pers-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px }
.pers{ padding:19px; border-radius:var(--mx-r-lg) }
.pers h3{ font-size:17px; margin-bottom:2px }
.pers .role{ font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mx-corail-ink); margin-bottom:10px }
.pers p{ font-size:14.5px; color:var(--mx-ink-mut); line-height:1.55 }
.pers .cle{
  margin-top:12px; padding-top:12px; box-shadow:inset 0 1px 0 var(--mx-hairline);
  font-family:"Newsreader",serif; font-style:italic; font-size:15px; color:var(--mx-ink);
}

/* =============================================================
   NOTEPAD
   ============================================================= */
.pad{ padding:26px; border-radius:var(--mx-r-lg) }
.pad-head{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px }
.pad textarea{
  width:100%; min-height:230px; padding:17px; border-radius:var(--mx-r-md); border:none; resize:vertical;
  font-family:"Instrument Sans",system-ui,sans-serif; font-size:15.5px; line-height:1.65;
  background:var(--mx-bg-sunk); box-shadow:var(--mx-shadow-sunk); color:var(--mx-ink);
}
.pad textarea:focus{ outline:2px solid var(--mx-corail); outline-offset:1px }
.btn{
  padding:10px 17px; border-radius:10px; border:none; cursor:pointer; font:inherit;
  font-size:13.5px; font-weight:700; background:var(--mx-gradient-high); box-shadow:var(--mx-shadow-2);
  color:var(--mx-ink); transition:all .2s;
}
.btn:hover{ box-shadow:var(--mx-shadow-3); transform:translateY(-1px) }
.btn.corail{ background:var(--mx-ink); color:var(--mx-bg-high); box-shadow:none }
.pad-note{ font-size:13px; color:var(--mx-ink-fnt); margin-top:12px }
.pad-status{ font-size:12.5px; color:var(--mx-vert); font-weight:600; opacity:0; transition:opacity .3s }
.pad-status.on{ opacity:1 }

/* =============================================================
   FOOTER
   ============================================================= */
footer{ padding:44px 0 60px; box-shadow:inset 0 1px 0 var(--mx-hairline); margin-top:36px }
footer p{ font-size:13.5px; color:var(--mx-ink-fnt); max-width:66ch }
footer p + p{ margin-top:9px }

/* =============================================================
   MÉTAPHORE · l'image avant la définition
   ============================================================= */
/* la fiche ouverte prend deux colonnes : un schéma dans une colonne
   étroite serait illisible, or c'est lui qui porte l'explication. */
.gterme.open{ grid-column:span 2 }
.meta-box{
  display:none; margin-top:15px; padding:15px 16px 13px; border-radius:var(--mx-r-md);
  background:var(--mx-peche); box-shadow:var(--mx-shadow-sunk);
}
@media (min-width:860px){
  .gterme.open .meta-box{ grid-template-columns:330px 1fr; gap:4px 20px; align-items:start }
  .gterme.open .meta-box b{ grid-column:1 / -1 }
  .gterme.open .meta-svg{ grid-row:2 / span 2; margin-bottom:0 }
  .gterme.open .meta-t{ align-self:end }
}
.gterme.open .meta-box{ display:grid; animation:fade .25s ease }
.meta-box b{
  display:block; font-size:11px; font-stretch:100%; letter-spacing:.11em; text-transform:uppercase;
  color:var(--mx-corail-ink); margin-bottom:9px; font-weight:700;
}
.meta-svg{ width:100%; height:auto; display:block; margin-bottom:11px; border-radius:var(--mx-r-sm) }
.meta-t{ font-family:"Newsreader",serif; font-style:italic; font-size:17px; line-height:1.4; margin-bottom:6px }
.meta-d{ font-size:14.5px; line-height:1.58; color:var(--mx-ink-mut) }

/* =============================================================
   CARTE DES LIENS
   ============================================================= */
.carte-wrap{ padding:22px; border-radius:var(--mx-r-lg) }
.carte-scroll{ overflow-x:auto; border-radius:var(--mx-r-md); -webkit-overflow-scrolling:touch }
svg#carte{ width:100%; min-width:860px; height:auto; display:block }
svg#carte-svg .noeud{ cursor:pointer }
svg#carte-svg .n-box{
  fill:var(--mx-bg-high); stroke:var(--mx-hairline); stroke-width:1;
  filter:drop-shadow(0 1px 2px var(--mx-sh-a)); transition:all .2s;
}
svg#carte-svg .n-lab{ font-size:12.5px; font-weight:700; fill:var(--mx-ink); pointer-events:none }
svg#carte-svg .noeud:hover .n-box{ filter:drop-shadow(0 3px 6px var(--mx-sh-a)) }
svg#carte-svg .lien{ fill:none; stroke:var(--mx-ink-faint); stroke-width:1.4; opacity:.45; transition:all .22s }
/* au repos on ne montre QUE la structure · les phrases se chevaucheraient.
   Elles apparaissent à la sélection, où il n'en reste qu'une poignée. */
svg#carte-svg .l-lab{ font-size:10px; font-weight:600; fill:var(--mx-ink-fnt); pointer-events:none; opacity:0; transition:opacity .2s }
svg#carte-svg .col-lab{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; fill:var(--mx-ink-fnt);
  text-transform:uppercase; pointer-events:none;
}
svg#carte-svg.actif .noeud:not(.on) .n-box{ opacity:.3 }
svg#carte-svg.actif .noeud:not(.on) .n-lab{ opacity:.3 }
svg#carte-svg.actif .lien:not(.on){ opacity:.12 }
svg#carte-svg.actif .l-lab:not(.on){ opacity:0 }
svg#carte-svg .lien.on{ stroke:var(--mx-corail); stroke-width:2.6; opacity:1 }
svg#carte-svg .l-lab.on{ fill:var(--mx-ink); opacity:1; font-size:10.5px; paint-order:stroke;
  stroke:var(--mx-bg); stroke-width:3.5px; stroke-linejoin:round }
svg#carte-svg .noeud.on .n-box{ fill:var(--mx-peche); stroke:var(--mx-corail); stroke-width:2 }
svg#carte-svg .noeud.src .n-box{ fill:var(--mx-corail); stroke:var(--mx-corail) }
svg#carte-svg .noeud.src .n-lab{ fill:#fff }
.carte-panneau{ margin-top:16px; padding:17px 18px; border-radius:var(--mx-r-md) }
.carte-panneau h4{ font-size:18px; margin-bottom:4px }
.carte-rel{ display:grid; gap:8px; margin-top:13px }
.carte-rel-item{ display:flex; gap:11px; align-items:baseline; font-size:14.5px; line-height:1.5 }
.carte-rel-fl{ flex:none; font-weight:700; color:var(--mx-corail-ink); font-size:13px; min-width:104px }
.carte-legende{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; font-size:12.5px; color:var(--mx-ink-fnt) }
.carte-legende span{ display:flex; align-items:center; gap:6px }
.carte-legende i{ width:11px; height:11px; border-radius:3px; display:block }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:680px){
  body{ font-size:16px }
  .wrap{ padding:0 17px }
  .nav-in{ padding:10px 17px; gap:10px }
  .nav-links{ gap:0 }
  .nav-links a{ padding:6px 8px; font-size:12.5px }
  .hero{ padding:40px 0 30px }
  section{ padding:42px 0 }
  .jal{ width:118px }
  .frise-detail{ padding:19px }
  .fd-an{ font-size:22px }
  .glo-grid{ grid-template-columns:1fr }
  .meca-card{ padding:19px }
  .pad{ padding:19px }
  .balance{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}

/* =============================================================
   LES LEÇONS
   ============================================================= */
.lecons{ display:grid; gap:10px }
.lecon{ position:relative; background:var(--mx-bg); border-radius:var(--mx-r-lg); transition:box-shadow .22s ease }
.lecon.open{ background:var(--mx-bg-high); box-shadow:var(--mx-shadow-2) }
.lec-btn{
  width:100%; display:flex; gap:18px; align-items:center; text-align:left; cursor:pointer;
  border:none; background:none; font:inherit; color:inherit; padding:18px 22px; border-radius:var(--mx-r-lg);
  transition:background .2s;
}
.lec-btn:hover{ background:var(--mx-bg-high) }
.lec-n{
  font-stretch:75%; font-weight:700; font-size:20px; flex:none; width:34px;
  color:var(--mx-ink-faint); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.lecon.open .lec-n{ color:var(--mx-corail) }
.lec-head{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.lec-t{ font-stretch:75%; font-weight:700; font-size:20px; letter-spacing:-.02em; line-height:1.15 }
.lec-st{ font-size:14.5px; color:var(--mx-ink-mut) }
.lec-duree{ margin-left:auto; flex:none }
.lec-body{ display:none; padding:0 22px 26px }
.lecon.open .lec-body{ display:block; animation:fade .3s ease }

.lec-accroche{
  font-family:"Newsreader",serif; font-style:italic; font-size:clamp(19px,2.4vw,23px); line-height:1.4;
  margin:2px 0 22px; padding-left:52px; max-width:60ch;
}
.lec-blocs{ display:grid; gap:22px; padding-left:52px; max-width:78ch }
.lec-bloc h4{
  font-size:15px; font-stretch:75%; font-weight:700; letter-spacing:-.01em;
  margin-bottom:10px; color:var(--mx-ink);
}
.lec-bloc ul{ list-style:none; display:grid; gap:7px }
.lec-bloc li{
  position:relative; padding-left:19px; font-size:15.5px; line-height:1.55; color:var(--mx-ink-mut);
}
.lec-bloc li::before{
  content:""; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%;
  background:var(--mx-ink-faint);
}
svg.sch{ width:100%; height:auto; display:block; margin:4px 0 13px; border-radius:var(--mx-r-md) }
.lec-h{
  font-size:11.5px; font-stretch:100%; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  color:var(--mx-ink-fnt); margin:30px 0 13px; padding-left:52px;
  box-shadow:inset 0 1px 0 var(--mx-hairline); padding-top:22px;
}
.lec-ex-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:11px; padding-left:52px }
.lec-ex{ padding:14px 16px; border-radius:var(--mx-r-md); background:var(--mx-bg-sunk) }
.lec-ex b{ display:block; font-size:14.5px; margin-bottom:4px }
.lec-ex span{ font-size:14px; color:var(--mx-ink-mut); line-height:1.55 }

.lec-termes{ display:grid; gap:9px; padding-left:52px }
.lec-terme{
  display:grid; grid-template-columns:168px 1fr auto; gap:16px; align-items:baseline;
  padding:12px 16px; border-radius:var(--mx-r-md); background:var(--mx-bg-sunk);
}
.lec-terme b{ font-size:14.5px }
.lec-terme span{ font-size:14.5px; color:var(--mx-ink-mut); line-height:1.55 }
.lec-terme .terme-link{ background:var(--mx-bg-high); box-shadow:none; color:var(--mx-ink-mut); white-space:nowrap }
.lec-terme .terme-link:hover{ color:var(--mx-ink); box-shadow:var(--mx-shadow-1) }

.lec-metas{ display:grid; gap:13px; padding-left:52px }
.lec-meta{ padding:17px 19px; border-radius:var(--mx-r-md); background:var(--mx-peche) }
.lec-meta .meta-svg{ max-width:330px; margin-bottom:12px }
.lec-meta .meta-t{ font-family:"Newsreader",serif; font-style:italic; font-size:18px; margin-bottom:6px }
.lec-meta .meta-d{ font-size:15px; line-height:1.6; color:var(--mx-ink-mut); max-width:74ch }

@media (max-width:680px){
  .lec-btn{ padding:15px 16px; gap:12px }
  .lec-n{ width:26px; font-size:17px }
  .lec-t{ font-size:17px }
  .lec-duree{ display:none }
  .lec-body{ padding:0 16px 20px }
  .lec-accroche, .lec-blocs, .lec-h, .lec-ex-grid, .lec-termes, .lec-metas{ padding-left:0 }
  .lec-terme{ grid-template-columns:1fr; gap:5px }
}

/* =============================================================
   PAGE DES 15 MÉCANISMES
   ============================================================= */
.mec-grid{ display:grid; gap:18px; padding-bottom:20px }
.mec{ padding:24px 26px }
.mec-top{ display:flex; gap:16px; align-items:baseline; margin-bottom:16px }
.mec-n{
  font-stretch:75%; font-weight:700; font-size:22px; color:var(--mx-ink-faint);
  font-variant-numeric:tabular-nums; flex:none;
}
.mec h3{ font-size:21px; margin-bottom:3px }
.mec-lec{ font-size:12.5px; color:var(--mx-ink-fnt); font-weight:600 }
.mec-clair{ padding:16px 18px; margin-top:16px }
.mec-clair b, .mec-quoi b{
  display:block; font-size:11px; font-stretch:100%; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; margin-bottom:7px;
}
.mec-clair b{ color:var(--mx-corail-ink) }
.mec-quoi b{ color:var(--mx-ink-fnt) }
.mec-clair p{ font-size:16px; line-height:1.6 }
.mec-quoi{ margin-top:18px; padding-top:16px; box-shadow:inset 0 1px 0 var(--mx-hairline) }
.mec-quoi p{ font-size:15px; line-height:1.6; color:var(--mx-ink-mut) }
.mec-lien{
  display:inline-block; margin-top:16px; font-size:13.5px; font-weight:600;
  color:var(--mx-ink-mut); text-decoration:none;
}
.mec-lien:hover{ color:var(--mx-ink) }
.nav-links a.on{ background:var(--mx-ink); color:var(--mx-bg-high) }
@media (min-width:900px){ .mec-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:680px){ .mec{ padding:19px } }

/* --- « en clair » dans les blocs de leçon --- */
.lec-clair{
  display:flex; gap:11px; align-items:baseline;
  padding:12px 15px; margin-bottom:12px; border-radius:var(--mx-r-md);
  background:var(--mx-peche);
}
.lec-clair b{
  flex:none; font-size:10.5px; font-stretch:100%; letter-spacing:.11em; text-transform:uppercase;
  font-weight:700; color:var(--mx-corail-ink);
}
.lec-clair span{ font-size:15px; line-height:1.55 }
@media (max-width:680px){ .lec-clair{ flex-direction:column; gap:5px } }

/* =============================================================
   RECHERCHE · bouton + palette
   ============================================================= */
.rech-btn{
  display:flex; align-items:center; gap:8px; flex:none; cursor:pointer; border:none;
  padding:7px 12px; border-radius:var(--mx-r-pill); font:inherit; font-size:13px; font-weight:600;
  background:var(--mx-bg-sunk); color:var(--mx-ink-mut); transition:all .18s;
}
.rech-btn:hover{ background:var(--mx-bg-high); color:var(--mx-ink); box-shadow:var(--mx-shadow-1) }
.rech-btn span[aria-hidden]{ font-size:15px; line-height:1 }
.rech-btn kbd, .rech-haut kbd{
  font-family:inherit; font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:5px;
  background:var(--mx-bg-high); color:var(--mx-ink-fnt); box-shadow:inset 0 0 0 1px var(--mx-hairline);
}
@media (max-width:760px){ .rech-btn-t, .rech-btn kbd{ display:none } .rech-btn{ padding:7px 10px } }

.rech-overlay{
  position:fixed; inset:0; z-index:200; display:none;
  background:color-mix(in oklab, var(--mx-bg-sunk) 62%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:14vh 20px 20px;
}
.rech-overlay.on{ display:block; animation:fade .18s ease }
.rech-box{
  max-width:660px; margin:0 auto; border-radius:var(--mx-r-lg); overflow:hidden;
  background:var(--mx-bg-high); box-shadow:var(--mx-shadow-3);
}
.rech-haut{ display:flex; align-items:center; gap:12px; padding:15px 18px; box-shadow:inset 0 -1px 0 var(--mx-hairline) }
.rech-loupe{ font-size:19px; color:var(--mx-ink-fnt); line-height:1 }
.rech-haut input{
  flex:1; min-width:0; border:none; background:none; font:inherit; font-size:17px; color:var(--mx-ink);
}
.rech-haut input:focus{ outline:none }
.rech-haut input::placeholder{ color:var(--mx-ink-faint) }
.rech-res{ max-height:min(62vh,560px); overflow-y:auto; padding:8px }
.rech-item{
  display:block; width:100%; text-align:left; border:none; cursor:pointer; font:inherit;
  background:none; color:inherit; padding:13px 14px; border-radius:var(--mx-r-md); transition:background .14s;
}
.rech-item:hover, .rech-item.on{ background:var(--mx-bg-deep) }
.rech-item-top{ display:flex; gap:12px; align-items:baseline; justify-content:space-between; margin-bottom:5px }
.rech-t{ font-weight:700; font-size:16px }
.rech-cat{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mx-ink-fnt); flex:none }
.rech-def{ font-size:14.5px; line-height:1.55; color:var(--mx-ink-mut) }
.rech-plus{ font-size:13.5px; line-height:1.5; color:var(--mx-ink-fnt); margin-top:6px }
.rech-plus b{ font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--mx-corail-ink); margin-right:6px }
.rech-vide{ padding:26px 18px; text-align:center }
.rech-vide b{ display:block; font-size:15px; margin-bottom:7px }
.rech-vide p{ font-size:14px; color:var(--mx-ink-mut); line-height:1.6 }
@media (max-width:680px){ .rech-overlay{ padding:8vh 12px 12px } .rech-haut input{ font-size:16px } }

/* =============================================================
   FONDU AUX BORDS DES RAILS · dire qu'il y a une suite
   ============================================================= */
.frise-rail{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}
.rail-wrap{ position:relative }
.rail-wrap::before, .rail-wrap::after{
  content:""; position:absolute; top:0; bottom:14px; width:46px; pointer-events:none; z-index:2;
  opacity:0; transition:opacity .25s;
}
.rail-wrap::before{ left:0;  background:linear-gradient(90deg, var(--mx-bg-deep), transparent) }
.rail-wrap::after { right:0; background:linear-gradient(270deg, var(--mx-bg-deep), transparent) }
.rail-wrap.plus-g::before{ opacity:1 }
.rail-wrap.plus-d::after { opacity:1 }

/* =============================================================
   OVERVIEW · par où entrer
   ============================================================= */
#overview{ padding:14px 0 30px }
.ov-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)) }
.ov-head{ grid-column:1/-1; margin-bottom:2px }
.ov-head p{ font-size:15px; color:var(--mx-ink-mut); margin-top:6px }
.ov-head kbd{
  font-family:inherit; font-size:11px; font-weight:700; padding:1px 6px; border-radius:5px;
  background:var(--mx-bg-sunk); box-shadow:inset 0 0 0 1px var(--mx-hairline);
}
.ov-t{ display:block; padding:17px 18px; text-decoration:none; color:inherit }
.ov-t.fort{ background:var(--mx-ink); box-shadow:none }
.ov-t.fort .ov-ti, .ov-t.fort .ov-n{ color:var(--mx-bg-high) }
.ov-t.fort .ov-d, .ov-t.fort .ov-l{ color:color-mix(in oklab, var(--mx-bg-high) 70%, transparent) }
.ov-t.fort::before{ opacity:0 }
.ov-k{ display:flex; align-items:baseline; gap:6px; margin-bottom:9px }
.ov-n{ font-stretch:75%; font-weight:700; font-size:23px; letter-spacing:-.02em; color:var(--mx-corail) }
.ov-l{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mx-ink-fnt) }
.ov-ti{ font-stretch:75%; font-weight:700; font-size:17px; letter-spacing:-.015em; margin-bottom:3px }
.ov-d{ font-size:13.5px; color:var(--mx-ink-mut); line-height:1.45 }

/* =============================================================
   SECTIONS REPLIABLES
   ============================================================= */
section.pliable .sec-head{ position:relative; padding-right:118px; max-width:none }
section.pliable .sec-head p{ max-width:64ch }
.plier{
  position:absolute; right:0; top:2px; display:flex; align-items:center; gap:8px; cursor:pointer;
  border:none; font:inherit; font-size:13px; font-weight:700; padding:8px 15px;
  border-radius:var(--mx-r-pill); background:var(--mx-bg-sunk); color:var(--mx-ink-mut); transition:all .18s;
}
.plier:hover{ background:var(--mx-ink); color:var(--mx-bg-high) }
.plier-i{ font-size:15px; line-height:1 }
section.pliable > *:not(.sec-head){ display:none }
section.pliable.ouvert > *{ display:block }
section.pliable.ouvert .glo-grid{ display:grid }
section.pliable.ouvert .glo-ctl, section.pliable.ouvert .frise-ctl{ display:flex }
section.pliable.ouvert .meca-grid, section.pliable.ouvert .pers-grid{ display:grid }

/* =============================================================
   GLOSSAIRE · bascule cartes / liste compacte
   ============================================================= */
.glo-vue{ display:flex; gap:4px; flex:none }
.glo-vue button{
  border:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; padding:7px 13px;
  border-radius:var(--mx-r-pill); background:var(--mx-bg-sunk); color:var(--mx-ink-mut); transition:all .18s;
}
.glo-vue button.on{ background:var(--mx-ink); color:var(--mx-bg-high) }
/* vue compacte : on garde plusieurs colonnes (moins de scroll qu'une vraie
   liste), mais la fiche devient une ligne, définition tronquée à un trait. */
.glo-grid.liste{
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:0;
  border-radius:var(--mx-r-md); overflow:hidden; background:var(--mx-bg);
}
.glo-grid.liste .gterme{ border-right:1px solid var(--mx-hairline) }
.glo-grid.liste .gterme{
  border-radius:0; box-shadow:inset 0 -1px 0 var(--mx-hairline); background:none; padding:12px 16px;
}
.glo-grid.liste .gterme:hover{ background:var(--mx-bg-high); transform:none }
.glo-grid.liste .gterme::before{ display:none }
.glo-grid.liste .gterme h3{ font-size:15.5px }
.glo-grid.liste .def{ font-size:14px }
.glo-grid.liste .gterme:not(.open) .def{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.glo-grid.liste .gterme.open{ grid-column:1/-1; background:var(--mx-bg-high); border-right:none }
.glo-grid.liste .gterme.open .def{ -webkit-line-clamp:unset }

@media (max-width:680px){
  section.pliable .sec-head{ padding-right:0 }
  .plier{ position:static; margin-top:14px }
  .ov-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px }
  .ov-t{ padding:14px }
}