/* ============ TOKENS ============ */
:root{
  --ground:#11171E; --ground-2:#19222C; --panel:#1E2A36; --panel-2:#243341;
  --text:#F2ECDD; --muted:#A7B0BC; --steel:#5C6B7A;
  --kuhn:#E10E2B; --kuhn-soft:#F2455F; --gold:#E8B23A; --green:#7BA23C; --bad:#E76A4B;
  --l-ground:#FAF8F3; --l-panel:#FFFFFF; --l-ink:#1A1E24; --l-muted:#5C6470;
  --l-line:#E5E0D3; --l-kuhn:#C20A2A; --l-gold:#C28A1E; --l-green:#5E8A28;
  --disp:"Bahnschrift","DIN Alternate","DIN Condensed","Oswald","Segoe UI",system-ui,sans-serif;
  --body:Georgia,"Times New Roman",serif;
  --ui:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
.kuhn-resultats{margin:0;background:var(--ground);color:var(--text);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:700;letter-spacing:.01em;line-height:1.02}
.num{font-family:var(--disp);font-variant-numeric:tabular-nums;letter-spacing:.01em}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px}
button{font-family:var(--ui);cursor:pointer}

/* ============ HEADER ============ */
header.bar{position:sticky;top:0;width:100%;z-index:120;display:flex;align-items:center;
  gap:18px;padding:10px 18px;background:rgba(13,18,24,.78);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);transition:background .4s,color .4s,border-color .4s}
body.show-analysis header.bar{background:rgba(255,255,255,.86);border-bottom:1px solid var(--l-line);color:var(--l-ink)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-size:19px;font-weight:700;white-space:nowrap}
.brand .mk{background:var(--kuhn);color:#fff;padding:2px 8px 1px;border-radius:3px;letter-spacing:.06em}
.brand small{font-family:var(--ui);font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.03em}
body.show-analysis .brand small{color:var(--l-muted)}
.bar-spacer{flex:1}
.yearwrap{display:flex;align-items:center;gap:8px}
.yearwrap .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
body.show-analysis .yearwrap .lbl{color:var(--l-muted)}
.years{display:flex;gap:3px}
header.bar.compact .years{display:none}
header.bar.compact select.yearsel{display:inline-block}
.years button{background:transparent;border:1px solid rgba(255,255,255,.16);color:var(--text);
  font-family:var(--disp);font-size:14px;padding:5px 9px;border-radius:5px;line-height:1;transition:.15s}
.years button:hover{border-color:var(--gold)}
.years button[aria-pressed="true"]{background:var(--kuhn);border-color:var(--kuhn);color:#fff}
body.show-analysis .years button{color:var(--l-ink);border-color:var(--l-line)}
body.show-analysis .years button[aria-pressed="true"]{background:var(--l-kuhn);border-color:var(--l-kuhn);color:#fff}
select.yearsel{display:none;background:var(--panel);color:var(--text);border:1px solid rgba(255,255,255,.2);
  border-radius:6px;padding:7px 10px;font-family:var(--disp);font-size:15px}
.modetog{display:flex;border:1px solid rgba(255,255,255,.18);border-radius:7px;overflow:hidden}
.modetog.alone{margin-inline:auto}  /* seul sur sa ligne -> centré ; sinon position normale */
.modetog button{background:transparent;border:0;color:var(--text);padding:7px 13px;font-size:12.5px;
  font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.modetog button[aria-pressed="true"]{background:var(--gold);color:#1a1206}
body.show-analysis .modetog{border-color:var(--l-line)}
body.show-analysis .modetog button{color:var(--l-ink)}
body.show-analysis .modetog button[aria-pressed="true"]{background:var(--l-gold);color:#fff}

/* ============ PROGRESS RAIL ============ */
.rail{position:fixed;top:0;bottom:0;width:2px;z-index:90;
  left:max(calc(var(--full-width-post-chrome-left,0px) + 16px),calc(var(--full-width-post-chrome-left,0px) + var(--full-width-post-chrome-width,100vw)/2 - var(--maxw)/2 - 40px));
  opacity:0;transition:opacity .4s var(--full-width-post-ease,cubic-bezier(.22,1,.36,1)) .45s;
  pointer-events:none}
html.full-width-post-expanded .rail{opacity:1;pointer-events:none}
html.full-width-post-expanded .rail .hit{pointer-events:auto}
.rail .track{position:absolute;top:14vh;bottom:14vh;left:0;width:2px;background:rgba(255,255,255,.13)}
.rail .hit{position:absolute;left:-13px;width:28px;top:14vh;bottom:14vh;pointer-events:auto;cursor:pointer;z-index:4;border-radius:14px;touch-action:none}
.rail .grain{position:absolute;left:-10px;width:22px;height:22px;border-radius:50%;pointer-events:none;z-index:3;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--gold));box-shadow:0 0 16px var(--gold);
  top:14vh;transition:top .12s linear}
.rail.dragging .grain{transition:none}
.rail .grain::after{content:"€";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--disp);font-size:13px;color:#5a3c05;font-weight:700}
.rail .mark{position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3);z-index:1;
  transform:translateY(-50%);transition:top .12s linear,background .3s;box-shadow:0 0 0 2px rgba(13,18,24,.7)}
.rail .mark.passed{background:var(--gold)}
.rail .rail-label{position:absolute;right:18px;left:auto;white-space:nowrap;top:14vh;transform:translateY(-50%);text-align:right;
  font-family:var(--disp);font-size:13.5px;letter-spacing:.06em;color:var(--gold);transition:top .12s linear;
  background:rgba(13,18,24,.72);border:1px solid rgba(232,178,58,.28);padding:5px 12px;border-radius:7px;
  backdrop-filter:blur(5px);pointer-events:none;opacity:0;display:none}
body.railmode .rail.live .rail-label{display:block;opacity:1}
body.experience-hidden .rail{display:none}
/* barre d'étape collante (haut) — affichée quand le titre ne tient pas dans la marge */
.mobstep{display:none;align-items:center;gap:10px;position:sticky;top:var(--bar-h,53px);z-index:80;
  width:100%;
  padding:8px 16px;background:rgba(13,18,24,.92);border-bottom:1px solid rgba(232,178,58,.22);
  font-family:var(--disp);font-size:13.5px;letter-spacing:.05em;color:var(--gold);backdrop-filter:blur(8px)}
.mobstep .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);flex:none}
.mobstep .prog{margin-left:auto;font-family:var(--ui);font-size:11px;color:var(--muted)}
body.topbarmode .mobstep{display:flex}
body.show-analysis .mobstep,body.experience-hidden .mobstep{display:none}

/* ============ EXPERIENCE ============ */
#experience{position:relative}
.scene{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:90px 20px 60px;overflow:hidden}
.scene .inner{position:relative;width:100%;max-width:var(--maxw);z-index:5}
.stage{position:relative;width:100%;max-width:760px;margin:0 auto;aspect-ratio:16/10;
  overflow:hidden;border-radius:14px}
.stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
/* usine : viewBox recadré (toit ~y120, sol ~y475) — moins de vide sous le tip */
#stageFactory{aspect-ratio:760/363;max-width:760px}
/* scène "exercice comptable" : viewBox recadré sur le contenu -> dessin plus grand, sans marges vides */
#stageDir{aspect-ratio:6/5;max-width:620px}
.eyebrow{font-family:var(--ui);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.scene-step{display:none}
.lead{font-size:18px;line-height:1.5;color:var(--muted);max-width:52ch}
.perim{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.3em .55em;max-width:100%;
  font-family:var(--ui);font-size:12.5px;color:var(--muted);
  border:1px solid rgba(232,178,58,.32);border-radius:20px;padding:5px 13px;align-self:flex-start;margin:2px 0}
.perim-chunk--head{white-space:nowrap}
.perim b{color:var(--gold);font-weight:600}
.lead b{color:var(--text);font-weight:600}
.huge{font-size:clamp(40px,9vw,104px);line-height:.92;color:var(--text)}
.huge .u{font-size:.34em;color:var(--gold);margin-left:.18em;font-family:var(--ui);font-weight:600;letter-spacing:.02em}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.in-view .rv{opacity:1;transform:none}
.in-view .rv.d1{transition-delay:.12s}.in-view .rv.d2{transition-delay:.24s}
.in-view .rv.d3{transition-delay:.36s}.in-view .rv.d4{transition-delay:.48s}

/* parallax layers */
.player{will-change:transform}

/* HERO */
#s0{background:
   radial-gradient(120% 80% at 50% 8%,rgba(225,14,43,.12),transparent 55%),
   linear-gradient(180deg,#0c1116,#11171E 60%,#0e141a);text-align:center}
#s0 .inner{display:flex;flex-direction:column;align-items:center;gap:18px}
#s0 .kicker{font-family:var(--disp);font-size:clamp(13px,2.4vw,16px);letter-spacing:.34em;color:var(--gold);text-transform:uppercase}
#s0 h1{font-size:clamp(46px,11vw,132px);margin:0}
#s0 h1 .red{color:var(--kuhn)}
#s0 .sub{max-width:60ch}
.scrollcue{margin-top:14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
  display:flex;flex-direction:column;align-items:center;gap:7px}
.scrollcue .arr{width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:cue 1.8s infinite}
@keyframes cue{0%{transform:scaleY(.2);opacity:.2;transform-origin:top}50%{opacity:1}100%{transform:scaleY(1);opacity:.1;transform-origin:top}}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.hero-tags span{font-size:11.5px;letter-spacing:.04em;color:var(--muted);border:1px solid rgba(255,255,255,.14);
  padding:5px 11px;border-radius:20px}

/* SCENE LAYOUTS */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.copy{display:flex;flex-direction:column;gap:14px}

/* stat chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.chip{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:11px 14px;min-width:138px;position:relative}
.chip.op{padding-left:30px}
.chip .opsign{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-family:var(--disp);font-size:22px;color:var(--gold);line-height:1}
.chip .k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chip .v{font-size:25px;margin-top:3px;color:var(--text)}
.chip .v.gold{color:var(--gold)}.chip .v.red{color:var(--kuhn-soft)}.chip .v.green{color:var(--green)}
.chip .d{font-size:11px;color:var(--steel);margin-top:2px}

/* bulles : posées AU-DESSUS du SVG (jamais par-dessus les formes), via un conteneur flex */
.stagebox{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;max-width:760px;margin:0 auto}
.stagebox .stage{margin:0}
.stagebox>.tip{margin-top:1em;margin-bottom:.5em}
.tip{position:relative;background:#fff;color:#1a1e24;border-radius:12px;padding:9px 14px;
  font-family:var(--ui);font-size:14px;line-height:1.45;max-width:min(560px,94%);text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.4)}
.tip b{color:var(--l-kuhn)}
.tip::after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  border:9px solid transparent;border-top-color:#fff;border-bottom:0}

/* filiales grid */
.fil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:8px}
.fil-card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:13px 14px;
  position:relative;overflow:hidden}
.fil-card .nm{font-family:var(--disp);font-size:15px;color:var(--text)}
.fil-card .ca{font-size:24px;color:var(--gold);margin-top:5px}
.fil-card .meta{font-size:12.5px;color:var(--muted);margin-top:7px;display:flex;flex-direction:column;gap:3px}
.fil-card .rn-pos{color:var(--green)}.fil-card .rn-neg{color:var(--bad)}
.fil-card .roof{position:absolute;top:0;left:0;right:0;height:4px;background:var(--kuhn);opacity:.7}
.cumul{margin-top:20px;text-align:center;background:linear-gradient(180deg,rgba(232,178,58,.08),transparent);
  border:1px dashed rgba(232,178,58,.4);border-radius:14px;padding:18px}
.cumul .v{font-size:clamp(36px,7vw,64px);color:var(--gold)}
.cumul .lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.caveat{font-size:13.5px;color:var(--muted);font-style:italic;margin-top:14px;line-height:1.55}

/* lever rows (direction) */
.levers{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.lever{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;background:var(--panel);
  border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:11px 14px}
.lever .ic{font-size:20px;text-align:center}
.lever .t{font-size:13.5px;color:var(--text);font-weight:600}
.lever .t small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:2px;font-family:var(--ui)}
.lever .val{font-family:var(--disp);font-size:21px;text-align:right;white-space:nowrap}
.val.gold{color:var(--gold)}.val.red{color:var(--kuhn-soft)}.val.green{color:var(--green)}.val.steel{color:var(--muted)}

/* divergence bars : les deux barres partagent une base commune (bas de .col, hauteur fixe),
   indépendante du nombre de lignes du libellé .nm → plus de décalage entre EBITDA et résultat net */
.diverge{display:flex;gap:30px;justify-content:center;align-items:flex-start;margin-top:34px;padding-top:8px}
.dbar{display:flex;flex-direction:column;align-items:center;gap:8px;width:120px}
.dbar .col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:206px}
.dbar .bar{width:58px;border-radius:7px 7px 0 0;transition:height .9s cubic-bezier(.2,.7,.2,1);background:var(--steel)}
.dbar.ebitda .bar{background:linear-gradient(180deg,var(--bad),#9c3b27)}
.dbar.net .bar{background:linear-gradient(180deg,var(--green),#3e6018)}
.dbar .pv{font-family:var(--disp);font-size:24px}
.dbar .nm{font-size:12.5px;color:var(--muted);text-align:center;letter-spacing:.04em;line-height:1.3}

/* benefit split */
.split-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:13px;margin-top:10px}
.dest{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:15px;text-align:center;position:relative}
.dest .ic{font-size:26px}.dest .v{font-size:27px;margin-top:6px}.dest .nm{font-size:12px;color:var(--muted);margin-top:4px}
.dest.div{border-color:rgba(232,178,58,.5);background:linear-gradient(180deg,rgba(232,178,58,.1),transparent)}
.dest.div .v{color:var(--gold)}

/* CTA */
.ctaband{text-align:center;margin-top:52px}
.bigbtn{display:inline-flex;align-items:center;gap:11px;background:var(--kuhn);color:#fff;border:0;border-radius:40px;
  padding:16px 30px;font-family:var(--disp);font-size:19px;letter-spacing:.02em;box-shadow:0 12px 34px rgba(225,14,43,.34);transition:.2s}
.bigbtn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(225,14,43,.46)}
.bigbtn .ar{font-size:22px}

/* cycle wave */
.wave-note{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;margin-top:44px}
.wave-note div{max-width:30ch;font-size:13.5px;color:var(--muted)}
.wave-note b{color:var(--gold)}

/* ============ ANALYSIS ============ */
#analysis{display:none;background:var(--l-ground);color:var(--l-ink);font-family:var(--body)}
body.show-analysis #analysis{display:block}
body.show-analysis #experience,body.show-analysis .rail{display:none}
#analysis .wrap{max-width:var(--maxw);margin:0 auto;padding:118px 22px 90px}
#analysis h2{font-size:clamp(26px,4.4vw,40px);color:var(--l-ink);margin:0 0 6px;letter-spacing:0}
#analysis .sec-eyebrow{font-family:var(--ui);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--l-kuhn);font-weight:700;display:flex;align-items:center;gap:10px;margin:0 0 18px}
#analysis .sec-eyebrow .n{font-family:var(--disp);font-size:30px;color:var(--l-line);line-height:1}
#analysis section{padding:40px 0;border-top:1px solid var(--l-line)}
#analysis section:first-of-type{border-top:0;padding-top:6px}
#analysis p{font-size:16.5px;line-height:1.62;color:#33383f;max-width:none;text-wrap:pretty}
#analysis p.intro{font-size:19px;line-height:1.6}
#analysis h3{font-family:var(--disp);font-size:22px;margin:26px 0 8px;color:var(--l-ink)}
#analysis strong{color:var(--l-ink)}
.callout{background:#fff;border-left:4px solid var(--l-kuhn);border-radius:0 12px 12px 0;padding:16px 20px;
  margin:20px 0;box-shadow:0 4px 18px rgba(20,25,32,.05);font-size:15.5px;line-height:1.55;text-wrap:pretty}
.callout.gold{border-left-color:var(--l-gold)}
/* note "épinglée" : épingle géante au-dessus, conteneur légèrement incliné comme un post-it */
.callout.pinned{position:relative;border-left:0;border-top:3px solid var(--l-gold);border-radius:12px;
  margin:48px 0 26px;max-width:none;width:100%;padding:26px 24px 20px;text-align:center;text-wrap:balance;
  background:linear-gradient(180deg,#fffdf6,#fff);box-shadow:0 10px 30px rgba(20,25,32,.12);
  transform:rotate(-.7deg)}
.callout.pinned .pin{position:absolute;top:-26px;left:50%;transform:translateX(-50%) rotate(8deg);
  font-size:46px;line-height:1;filter:drop-shadow(0 6px 6px rgba(0,0,0,.28))}
.callout.pinned strong{display:block;margin-bottom:4px;font-size:1.05em}
.three-perim{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.three-perim .pc{background:#fff;border:1px solid var(--l-line);border-radius:13px;padding:16px}
.three-perim .pc h4{font-family:var(--disp);margin:0 0 6px;font-size:17px;display:flex;flex-wrap:wrap;align-items:baseline;gap:.25em .4em}
.three-perim .pc .big{font-family:var(--disp);font-size:30px;color:var(--l-kuhn)}
.three-perim .pc .big.nd{color:var(--l-muted);font-size:18px}
.three-perim .pc p{font-size:13px;color:var(--l-muted);margin:6px 0 0;line-height:1.45}

/* structure diagram */
.orgchart{background:#fff;border:1px solid var(--l-line);border-radius:14px;padding:22px;margin:20px 0;text-align:center;font-family:var(--ui)}
.orgnode{display:inline-block;border:1.5px solid var(--l-ink);border-radius:9px;padding:9px 15px;margin:6px;font-size:14px;background:#fff}
.orgnode.bucher{border-color:var(--l-gold);background:#fdf6e6}
.orgnode.group{border-color:var(--l-kuhn)}
.orgnode.sas{border-color:var(--l-kuhn);background:var(--l-kuhn);color:#fff;font-weight:700}
.orgnode b{font-family:var(--disp);font-size:15px;display:block}
.orgnode small{color:var(--l-muted);font-size:11px}
.orgnode.sas small{color:#ffd9df}
.orgconn{color:var(--l-muted);font-size:20px;line-height:1}
.fil-row{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.fil-row .orgnode{font-size:12px;padding:6px 10px;margin:3px}

/* dashboard */
.filterbar{position:sticky;top:calc(var(--bar-h,53px) + 4px);z-index:40;background:rgba(250,248,243,.92);backdrop-filter:blur(6px);
  border:1px solid var(--l-line);border-radius:12px;padding:12px 14px;margin:8px 0 24px;display:flex;
  flex-wrap:wrap;gap:16px;align-items:center;font-family:var(--ui);
  scroll-margin-top:calc(var(--bar-h,53px) + 8px)}
#filTableWrap{scroll-margin-top:var(--fil-table-scroll-margin, calc(var(--bar-h,53px) + 72px))}
.filterbar .grp{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filterbar .glab{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--l-muted);font-weight:700}
.chipbtn{border:1px solid var(--l-line);background:#fff;color:var(--l-ink);font-family:var(--ui);font-size:13px;
  padding:5px 11px;border-radius:18px;transition:.15s}
.chipbtn:hover{border-color:var(--l-kuhn)}
.chipbtn[aria-pressed="true"]{background:var(--l-ink);color:#fff;border-color:var(--l-ink)}
.chartgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--l-line);border-radius:15px;padding:18px 18px 14px;font-family:var(--ui)}
.card h4{font-family:var(--disp);font-size:18px;margin:0 0 2px;color:var(--l-ink)}
.card .cap{font-size:12.5px;color:var(--l-muted);margin:0 0 12px;line-height:1.4;font-family:var(--ui)}
.card.full{grid-column:1/-1}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--l-muted);margin-top:8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend span[title]{cursor:help;border-bottom:1px dotted #c9c2b0;-webkit-tap-highlight-color:transparent}
.legend i{width:13px;height:13px;border-radius:3px;display:inline-block}
/* bulle tactile : affiche le title= au clic (légendes, segments…) là où le survol n'existe pas */
#anaTip{position:fixed;z-index:210;max-width:min(300px,90vw);background:var(--l-ink);color:#fff;
  font-family:var(--ui);font-size:13px;line-height:1.45;padding:10px 13px;border-radius:10px;
  box-shadow:0 12px 30px rgba(20,25,32,.32);opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .18s ease,transform .2s cubic-bezier(.2,.7,.2,1)}
#anaTip.show{opacity:1;transform:none}
/* ligne discrète "définition · source" commune sous chaque graphe */
.srcnote{font-family:var(--ui);font-size:11px;color:#a39a85;line-height:1.45;margin-top:9px;
  border-top:1px dotted var(--l-line);padding-top:7px}
.srcnote b{color:#7c745f;font-weight:600}
.svgchart{width:100%;height:auto;display:block;font-family:var(--ui)}
.svgchart text{font-family:var(--ui)}
/* graphes larges (flux annuels, CA indexé) : sur petit écran, on défile horizontalement
   plutôt que d'écraser le dessin → libellés et flèches restent lisibles */
.chart-scroll{width:100%}

/* interactive tools */
.tool{background:#fff;border:1px solid var(--l-line);border-radius:15px;padding:20px;margin:16px 0;font-family:var(--ui)}
.tool h4{font-family:var(--disp);font-size:19px;margin:0 0 4px}
.tool .cap{font-size:13px;color:var(--l-muted);margin:0 0 14px}
.toggle-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;font-weight:600}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .sl{width:46px;height:25px;background:#cfcabb;border-radius:25px;position:relative;transition:.2s}
.switch .sl::after{content:"";position:absolute;width:19px;height:19px;background:#fff;border-radius:50%;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .sl{background:var(--l-kuhn)}
.switch input:checked + .sl::after{left:24px}
.euro-decomp{display:flex;height:54px;border-radius:9px;overflow:hidden;border:1px solid var(--l-line)}
.euro-decomp .seg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;
  transition:width .6s cubic-bezier(.2,.7,.2,1);min-width:0;overflow:hidden;white-space:nowrap}
.euro-legend{display:flex;flex-direction:column;gap:7px;margin-top:14px;font-size:13.5px}
.euro-legend div{display:flex;align-items:center;gap:9px;line-height:1.35;padding-bottom:6px;border-bottom:1px dotted var(--l-line)}
.euro-legend div:last-child{border-bottom:0;padding-bottom:0}
.euro-legend i{width:12px;height:12px;border-radius:3px;flex:none}
.euro-legend .nm{color:var(--l-ink)}
.euro-legend .val{margin-left:auto;white-space:nowrap;font-family:var(--disp);font-variant-numeric:tabular-nums;color:var(--l-ink)}
.euro-legend .val .pct{color:var(--l-muted);font-family:var(--ui);font-size:.9em;margin-left:4px}
.bignum{font-family:var(--disp);font-size:34px}
.prov-out{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px}
.prov-out .po{flex:1;min-width:180px}
.prov-out .po .lab{font-size:12px;color:var(--l-muted);text-transform:uppercase;letter-spacing:.08em}
.prov-out .po .v{font-family:var(--disp);font-size:32px}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--l-line);border-radius:13px;background:#fff}
table.data{border-collapse:collapse;width:100%;font-family:var(--ui);font-size:13.5px;min-width:560px}
table.data th,table.data td{padding:9px 13px;text-align:right;border-bottom:1px solid var(--l-line);white-space:nowrap}
table.data th:first-child,table.data td:first-child{text-align:left;position:sticky;left:0;background:#fff}
table.data thead th{background:#f1eee5;font-family:var(--disp);font-weight:700;font-size:13px;color:var(--l-ink);text-align:center}
table.data thead th:first-child{text-align:center}
table.data tbody tr:hover td{background:#faf7ef}
table.data .pos{color:var(--l-green);font-weight:600}.table .neg,table.data .neg{color:#b23a1f;font-weight:600}
table.data tfoot td{font-family:var(--disp);font-weight:700;border-top:2px solid var(--l-ink);background:#f7f4ec}

/* competitor index chart legend reuse */
#analysis .src{font-size:11px;color:var(--l-muted);line-height:1.55;margin-top:16px;font-family:var(--ui);
  background:#f3f1e9;border:1px solid var(--l-line);border-radius:9px;padding:10px 14px 10px 38px;position:relative;
  max-width:none;width:100%}
#analysis .src::before{content:"ⓘ";position:absolute;left:13px;top:10px;font-size:14px;line-height:1;color:#b8b09b;font-style:normal}
#analysis .src + .src{margin-top:8px}
#analysis .src b,#analysis .src strong{color:#6f6850;font-weight:600}
#analysis .src code{background:#e7e3d6;padding:1px 5px;border-radius:4px;font-size:11.5px;color:#5c5642}
.backtop{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--l-ink);color:#fff;border:0;
  border-radius:30px;padding:12px 22px;font-family:var(--disp);font-size:16px}

footer.foot{background:var(--ground-2);color:var(--muted);font-family:var(--ui);font-size:12.5px;
  padding:30px 22px;text-align:center;line-height:1.6}
body.show-analysis footer.foot{background:#f1eee5;color:var(--l-muted);border-top:1px solid var(--l-line)}

/* ============ RESPONSIVE ============ */
/* @container full-width-post = largeur réelle de .book-page (menu hugo-book déduit automatiquement) */
@container full-width-post (max-width: 1180px) { .scene{padding-left:48px} }
@container full-width-post (max-width: 1100px) {
  header.bar{flex-wrap:wrap;row-gap:8px}
  header.bar .years{display:none}
  header.bar select.yearsel{display:inline-block}
}
@container full-width-post (max-width: 860px) {
  .split,.split.rev{grid-template-columns:1fr;gap:22px}
  /* en pile mono-colonne, le texte doit précéder l'animation même quand l'ordre DOM est inversé pour le bureau */
  .split.rev .copy{order:1}
  .split.rev .stagebox{order:2}
  .stage{max-width:none}
  .rail .rail-label{display:none!important}
  .diverge{gap:18px}
  .dbar{width:108px}
  .dbar .col{height:188px}
}
/* Mobile : 1re page (hero) et en-tête du mode analyse trop aérés → resserrer le haut, sans toucher
   aux autres scènes (espacements jugés corrects) */
@container full-width-post (max-width: 760px) {
  .chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--l-line);border-radius:10px;background:#fcfbf7}
  .chart-scroll .svgchart{min-width:680px;padding:4px}
}
@container full-width-post (max-width: 700px) {
  #s0{min-height:auto;padding-top:calc(var(--bar-h,53px) + 48px);padding-bottom:46px}
  #s0 .inner{gap:14px}
  #analysis .wrap{padding-top:calc(var(--bar-h,53px) + 30px)}
}
@container full-width-post (max-width: 640px) { .brand small{display:none} }
@container full-width-post (max-width: 560px) {
  .modetog button{padding:6px 9px;font-size:11px}
  .huge{font-size:clamp(38px,15vw,70px)}
}
/* ============ SCENE MOTION ============ */
/* cycle usine 12s — camion hors cadre → quai ; boucle 0%=100% hors cadre */
.truck-in{animation:truckIn 12s ease-in-out infinite}
@keyframes truckIn{
  0%,100%{transform:translate(-130px,332px)}
  14%,82%{transform:translate(0,332px)}
  90%{transform:translate(-130px,332px)}}
/* seeder-flow : <animateTransform> dans le SVG */
.tractor-out{animation:tractorOut 12s ease-in-out infinite;visibility:hidden}
@keyframes tractorOut{
  0%,48%{transform:translate(640px,330px);visibility:hidden;opacity:0}
  50%,62%{transform:translate(640px,330px);visibility:visible;opacity:1}
  63%{transform:translate(640px,330px);visibility:visible;opacity:1}
  88%{transform:translate(710px,330px);opacity:.5}
  97%,100%{transform:translate(760px,330px);visibility:hidden;opacity:0}}
.coinflow,.coinrise,.coinup{animation:floatUp 3s ease-in infinite}
.coinrise{animation-duration:2.6s}.coinup{animation-duration:2.2s}
@keyframes floatUp{0%{transform:translateY(14px);opacity:0}25%{opacity:1}100%{transform:translateY(-46px);opacity:0}}
.worker .arm{transform-box:fill-box;transform-origin:top center;animation:hammer 1.1s ease-in-out infinite}
.worker.w2 .arm{animation-delay:.5s;animation-name:hammer2}
@keyframes hammer{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-34deg)}}
@keyframes hammer2{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(34deg)}}
.scalebeam{transform-box:fill-box;transform-origin:center;animation:tilt 4.5s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
.conv circle{transform-box:fill-box;transform-origin:center;animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.divflow circle{animation:divrise 5s linear infinite}
@keyframes divrise{0%{transform:translateY(0);opacity:0}12%{opacity:.5}85%{opacity:.5}100%{transform:translateY(-214px);opacity:0}}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .truck-in{transform:translate(0,332px)}.seeder-flow{transform:translate(340px,290px);opacity:1}.tractor-out{transform:translate(640px,330px);visibility:visible;opacity:1}
  #stageFactory .seeder-flow animateTransform,#stageFactory .seeder-flow animate{display:none}
  .coinflow,.coinrise,.coinup{opacity:1}
  .divflow circle{opacity:.45;transform:translateY(-95px)}
}
/* ============ GLOSSAIRE INTERACTIF (mode Expérience) ============ */
/* termes-clés cliquables : une définition + une micro-animation s'ouvrent À LA DEMANDE,
   pour vulgariser sans alourdir la scène (un seul déclencheur par concept). */
.gloss{display:inline;color:inherit;background:none;border:0;padding:0 1px;margin:0;font:inherit;
  cursor:help;border-bottom:1.6px dotted var(--gold);border-radius:2px;transition:color .2s;white-space:nowrap}
.gloss::after{content:"?";font-family:var(--ui);font-size:.6em;font-weight:700;color:#1a1206;
  background:var(--gold);border-radius:50%;width:1.25em;height:1.25em;display:inline-grid;place-items:center;
  vertical-align:.32em;margin-left:.26em;line-height:1}
.gloss:hover,.gloss[aria-expanded="true"]{color:var(--gold)}
.gloss[aria-expanded="true"]::after{transform:scale(1.12)}

#glossPop{position:fixed;z-index:200;width:min(330px,92vw);background:#fff;color:#1a1e24;
  border-radius:15px;padding:15px 16px 13px;box-shadow:0 20px 54px rgba(0,0,0,.46);
  font-family:var(--ui);opacity:0;transform:translateY(8px) scale(.97);transform-origin:center bottom;
  pointer-events:none;transition:opacity .22s ease,transform .24s cubic-bezier(.2,.7,.2,1)}
#glossPop.show{opacity:1;transform:none;pointer-events:auto}
#glossPop .gp-t{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--l-kuhn);margin:0 26px 3px 0;line-height:1.1}
#glossPop .gp-d{font-size:13.5px;line-height:1.5;color:#33383f;margin:0}
#glossPop .gp-d b{color:var(--l-ink)}
#glossPop .gp-close{position:absolute;top:8px;right:9px;width:26px;height:26px;border:0;background:none;
  font-size:20px;line-height:1;color:#a79e87;cursor:pointer;border-radius:7px}
#glossPop .gp-close:hover{background:#f1ede2;color:#5c5642}
#glossPop::after{content:"";position:absolute;left:var(--arrow,50%);bottom:-9px;width:0;height:0;
  transform:translateX(-50%);border:9px solid transparent;border-top-color:#fff;border-bottom:0}
#glossPop.below{transform-origin:center top}
#glossPop.below::after{bottom:auto;top:-9px;border-top-color:transparent;border-bottom:9px solid #fff}

/* scène animée d'une définition */
.gx{position:relative;height:84px;margin:11px 0 2px;border-radius:11px;
  background:linear-gradient(180deg,#fbf9f2,#fff);border:1px solid var(--l-line);overflow:hidden}
.gx .base{position:absolute;left:8px;right:8px;bottom:10px;height:2px;background:#e7e1d2;border-radius:2px}
.gx-c{position:absolute;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffe9a8,#E8B23A);box-shadow:0 1px 4px rgba(0,0,0,.28);
  display:grid;place-items:center;font:700 11px/1 var(--disp);color:#5a3c05}
.gx-c::before{content:"€"}
.gx-ico{position:absolute;font-size:24px;line-height:1}
.gx--charges .gx-c--out{left:58px;bottom:34px;animation:gxOutR 2.1s ease-in infinite}
.gx--treso{--gx-coin-gap:36px}
.gx--treso .gx-c--pulse{bottom:14px;animation:gxPulse 1.5s ease-in-out infinite}
.gx--treso .gx-c--pulse:nth-child(3){left:calc(50% - var(--gx-coin-gap) - 10px)}
.gx--treso .gx-c--pulse:nth-child(4){left:calc(50% - 10px);animation-delay:.3s}
.gx--treso .gx-c--pulse:nth-child(5){left:calc(50% + var(--gx-coin-gap) - 10px);animation-delay:.6s}
.gx-jar{position:absolute;bottom:24px;width:54px;height:36px;border:2.5px solid #7E6BA8;border-top:0;
  border-radius:0 0 13px 13px;background:linear-gradient(180deg,rgba(126,107,168,.06),rgba(126,107,168,.24));z-index:0}
.gx-jar::after{content:"réserve";position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);
  font:600 9.5px var(--ui);color:#7E6BA8;white-space:nowrap}
/* pièce dans le pot : même ancrage bas pour dotation (entrée) et reprise (sortie) */
.gx-c--in-jar{left:50%;margin-left:-10px;bottom:29px;z-index:1}
.gx-c--in-jar.drop{animation:gxDropJar 2s ease-in infinite}
.gx-c--in-jar.rise{animation:gxRise 2.1s ease-in infinite}
.gx-bar{position:absolute;bottom:10px;width:24px;border-radius:4px 4px 0 0}
.gx-blk{position:absolute;width:64px;left:50%;margin-left:-32px;border-radius:4px;background:linear-gradient(180deg,#6f86a0,#4a6b8a)}
.gx-op{position:absolute;bottom:24px;font:700 18px var(--disp);color:#9a927d}
.gx-lab{position:absolute;bottom:2px;font:600 9px var(--ui);color:#8a8472;white-space:nowrap}
.gx-tag{position:absolute;font:700 10px var(--ui);padding:3px 8px;border-radius:20px;white-space:nowrap}
.gx-tag.pos{background:rgba(94,138,40,.15);color:#5E8A28}
.gx-tag.neg{background:rgba(231,106,75,.17);color:#c0432a}
.gx-grow{animation:gxGrow .8s cubic-bezier(.2,.7,.2,1) both}
/* valeur ajoutée : scène centrée optiquement (le libellé droit est plus large que « Ventes ») */
.gx--va{height:88px;display:flex;justify-content:center;align-items:stretch;overflow:visible;
  --va-bar-base:18px;--va-ventes:50px;--va-achats:30px;--va-va:20px;--va-ico-gap:4px}
.gx--va .gx-va-stage{position:relative;width:220px;height:88px;flex:none;transform:translateX(-18px)}
.gx--va .gx-va-ico{font-size:16px;transform:translateX(-50%)}
.gx--va .gx-va-ico--ventes{left:55px;bottom:calc(var(--va-bar-base) + var(--va-ventes) + var(--va-ico-gap))}
.gx--va .gx-va-ico--achats{left:119px;bottom:calc(var(--va-bar-base) + var(--va-achats) + var(--va-ico-gap))}
.gx--va .gx-va-ico--va{left:183px;bottom:calc(var(--va-bar-base) + var(--va-va) + var(--va-ico-gap))}
/* amortissement : axe du graphique au-dessus d'une ligne de légendes (évite le chevauchement) */
.gx--amort{height:96px;padding-bottom:2px}
.gx--amort .base{bottom:24px;z-index:0}
.gx--amort .gx-bar{bottom:24px;z-index:1}
.gx--amort .gx-amort-ico{left:16px;bottom:38px;font-size:22px;z-index:2}
.gx--amort .gx-amort-op{left:84px;bottom:36px;z-index:2}
.gx--amort .gx-lab--bar{transform:translateX(-50%);bottom:58px;color:#4a5560;z-index:3;
  padding:1px 3px;border-radius:3px;background:rgba(251,249,242,.94)}
.gx--amort .gx-lab--cap{bottom:5px;color:#4a5560;z-index:3;
  padding:1px 5px;border-radius:3px;background:rgba(251,249,242,.94)}
.gx--amort .gx-amort-buy{left:31px;transform:translateX(-50%)}
.gx--amort .gx-amort-span{left:192px;transform:translateX(-50%)}
@keyframes gxDropJar{0%{transform:translateY(-48px);opacity:0}18%{opacity:1}72%,100%{transform:translateY(0);opacity:1}}
@keyframes gxDrop{0%{transform:translateY(-42px);opacity:0}22%{opacity:1}66%,100%{transform:translateY(0);opacity:1}}
@keyframes gxRise{0%{transform:translateY(0);opacity:0}18%{opacity:1}78%{opacity:1}100%{transform:translateY(-48px);opacity:0}}
@keyframes gxOutR{0%{left:58px;opacity:0}16%{opacity:1}82%{opacity:1}100%{left:calc(100% - 38px);opacity:0}}
@keyframes gxUp{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-54px);opacity:0}}
@keyframes gxGrow{0%{height:0}100%{height:var(--h,30px)}}
@keyframes gxPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ============ INTÉGRATION HUGO-BOOK ============ */
/* Le mode Expérience est sombre : on bascule aussi le « chrome » du thème hugo-book
   (sommaire de gauche, en-tête mobile, fond de page) en sombre, via SES propres variables CSS.
   La classe est posée sur <html> en mode Expérience et retirée en mode Analyse (clair)
   ou quand on quitte la page. Sans effet hors hugo-book (page .html autonome). */
html.kuhn-resultats-dark-chrome{
  color-scheme:dark;
  background:#11171E;
  --gray-100:#1a232e; --gray-200:#243341; --gray-500:#5C6B7A;
  --color-link:#7fb0ff; --color-visited-link:#c9a6ff;
  --body-background:#11171E; --body-font-color:#F2ECDD;
  --icon-filter:invert(1);
}
/* selon la version du thème, le fond/texte peuvent être posés sur <body> : on les force aussi */
html.kuhn-resultats-dark-chrome body{background:#11171E;color:#F2ECDD}
html.kuhn-resultats-dark-chrome .book-menu,html.kuhn-resultats-dark-chrome .book-page,html.kuhn-resultats-dark-chrome .book-header{
  background:transparent;color:#F2ECDD}
/* menu latéral au-dessus du rail (z-index 90) si chevauchement transitoire au resize */
html.kuhn-resultats-dark-chrome.full-width-post-menu-in-flow .book-menu .book-menu-content{z-index:95}
/* kuhn-resultats-dark-chrome : posée par full-width-post.js (entrée) et showAnalysis() (bascule Expérience/Analyse) */