:root{
  color-scheme:dark;
  --paper:#0C1013;
  --surface:#141A1E;
  --ink:#F1F5F4;
  --ink-soft:#B3BEC2;
  --steel:#7D8B91;
  --line:#253037;
  --teal:#22D3C5;
  --teal-tint:#0F2A29;
  --amber:#FFB020;
  --amber-tint:#2B2210;
  --red:#FF4D4D;
  --head:"Archivo",system-ui,sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --wrap:1180px;
  --text:70ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--body)}
img{max-width:100%;height:auto}
a{color:var(--teal);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--head);line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:750;margin-top:2.2em}
h3{font-size:1.2rem;font-weight:700;margin-top:1.6em}
p,ul,ol{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.prose{max-width:var(--text)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--surface);padding:8px 12px;z-index:9}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--paper)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.logo{font-family:var(--head);font-weight:800;font-size:1.2rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.logo svg{flex:none}
.nav{display:flex;gap:4px 18px;flex-wrap:wrap;font-family:var(--head);font-size:.95rem}
.nav a{color:var(--ink-soft);text-decoration:none;padding:6px 0}
.nav a:hover,.nav a[aria-current]{color:var(--ink);text-decoration:underline}

/* hero */
.hero{padding-top:56px;padding-bottom:40px}
.hero p.lead{font-size:1.25rem;color:var(--ink-soft);max-width:58ch}
.hero .verified{font-family:var(--head);font-size:.9rem;color:var(--steel)}

/* gauges : the signature element */
.bench{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;margin:28px 0}
.bench h2,.bench h3{margin-top:0}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--head);font-size:.85rem;color:var(--ink-soft);margin-bottom:14px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.k-target{background:var(--teal)}.k-daily{background:var(--amber)}.k-max{background:var(--red)}
.firm{display:grid;grid-template-columns:150px 1fr;gap:6px 18px;padding:14px 0;border-top:1px solid var(--line);align-items:center}
.firm:first-of-type{border-top:0}
.firm .name{font-family:var(--head);font-weight:700}
.firm .name small{display:block;font-weight:400;color:var(--steel);font-size:.82rem}
.bars{display:grid;gap:5px}
.bar{display:grid;grid-template-columns:1fr 52px;gap:10px;align-items:center;font-family:var(--head);font-size:.85rem}
.bar span{height:10px;border-radius:5px;background:var(--line);position:relative;overflow:hidden}
.bar span b{position:absolute;inset:0 auto 0 0;border-radius:5px}
.bar.t b{background:var(--teal)}.bar.d b{background:var(--amber)}.bar.m b{background:var(--red)}
.bar em{font-style:normal;text-align:right;color:var(--ink-soft)}
.bench .note{font-size:.88rem;color:var(--steel);margin:12px 0 0}
@media (max-width:560px){.firm{grid-template-columns:1fr}}

/* tables */
.tablewrap{overflow-x:auto;margin:20px 0 28px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;font-family:var(--head);font-size:.92rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--teal-tint);font-weight:700}
tbody tr:last-child td{border-bottom:0}
td.yes{color:var(--teal);font-weight:700}td.no{color:var(--red);font-weight:700}

/* verdict + CTA */
.verdict{border-left:4px solid var(--teal);background:var(--teal-tint);padding:16px 20px;border-radius:0 6px 6px 0;margin:24px 0}
.verdict p:last-child{margin:0}
.cta{display:inline-block;font-family:var(--head);font-weight:700;background:var(--teal);color:#fff;text-decoration:none;padding:12px 20px;border-radius:5px;margin:4px 8px 8px 0}
.cta:hover{filter:brightness(1.08)}
.cta.ghost{background:transparent;color:var(--teal);border:2px solid var(--teal)}
.aff{font-size:.85rem;color:var(--steel);font-family:var(--head)}
.risk{background:var(--amber-tint);border:1px solid var(--amber);border-radius:6px;padding:14px 18px;font-size:.95rem;margin:24px 0}
.risk p:last-child{margin:0}

/* guide list */
.guides{list-style:none;padding:0;margin:20px 0;border-top:1px solid var(--line)}
.guides li{border-bottom:1px solid var(--line)}
.guides a{display:block;padding:16px 0;text-decoration:none;color:var(--ink)}
.guides a strong{font-family:var(--head);font-size:1.15rem;display:block}
.guides a span{color:var(--ink-soft)}
.guides a:hover strong{color:var(--teal);text-decoration:underline}

.meta{font-family:var(--head);font-size:.88rem;color:var(--steel);margin-bottom:24px}
main{padding-bottom:48px}
article{padding-top:36px}
.crumbs{font-family:var(--head);font-size:.85rem;color:var(--steel);padding-top:20px}
.crumbs a{color:var(--steel)}

footer{border-top:1px solid var(--line);padding:32px 0 40px;font-family:var(--head);font-size:.88rem;color:var(--ink-soft)}
footer .cols{display:flex;flex-wrap:wrap;gap:12px 28px;margin-bottom:16px}
footer a{color:var(--ink-soft)}
footer p{max-width:80ch}

/* ===== Hero band ===== */
.band{background:#1D2429;color:#E9EEED;overflow:hidden;position:relative}
.band::before{content:"";position:absolute;inset:0;background:
  linear-gradient(transparent 0 calc(100% - 1px),rgba(255,255,255,.05) 0) 0 0/100% 40px,
  linear-gradient(90deg,transparent 0 calc(100% - 1px),rgba(255,255,255,.05) 0) 0 0/40px 100%;pointer-events:none}
.band .wrap{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center;padding-top:56px;padding-bottom:56px}
.band h1{color:#fff}
.band .lead{font-size:1.2rem;color:#B9C4C6;max-width:52ch}
.band .verified{font-family:var(--head);font-size:.9rem;color:#8FA0A4}
.band .cta{background:#2BA39B}
.band .cta.ghost{background:transparent;color:#7FD1CA;border-color:#2BA39B}
@media (max-width:820px){.band .wrap{grid-template-columns:1fr;padding-top:36px;padding-bottom:36px}}

/* animated challenge chart */
.chart{width:100%;height:auto;display:block}
.chart .grid line{stroke:rgba(255,255,255,.08)}
.chart .lim{stroke-width:1.5;stroke-dasharray:5 5}
.chart .lim.target{stroke:#2BA39B}.chart .lim.daily{stroke:#D9A24A}.chart .lim.max{stroke:#E07B6F}
.chart text{font-family:var(--head);font-size:14px}
.chart .equity{fill:none;stroke:#fff;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:url(#eqfill);opacity:.9}
.chart .dot{fill:#2BA39B}
.chart .badge rect{fill:#2BA39B}.chart .badge text{fill:#fff;font-weight:700;font-size:13px}
.js .chart .equity{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 3.2s .3s cubic-bezier(.45,.05,.3,1) forwards}
.js .chart .area{opacity:0;animation:fadein .8s 3.2s forwards}
.js .chart .dot,.js .chart .badge{opacity:0;animation:pop .5s 3.4s forwards}
.chart .pulse{fill:none;stroke:#2BA39B;stroke-width:2;opacity:0}
.js .chart .pulse{animation:ring 1.8s 3.6s ease-out 3}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:.9}}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ring{0%{opacity:.9;r:6}100%{opacity:0;r:22}}

/* gauges fill on scroll */
.js .bench .bar b{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .bench.in .bar b{transform:none}
.js .bench.in .bar.d b{transition-delay:.15s}.js .bench.in .bar.m b{transition-delay:.3s}

/* calculator */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;margin:28px 0}
.calc h2{margin-top:0}
.sizes{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.sizes button{font:700 .95rem var(--head);padding:9px 14px;border-radius:5px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.sizes button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.calc table{min-width:520px}
.calc td.num{font-variant-numeric:tabular-nums;font-weight:700}
.calc td.num.t{color:var(--teal)}.calc td.num.d{color:var(--amber)}.calc td.num.m{color:var(--red)}
.flash{animation:flash .5s}
@keyframes flash{from{background:var(--teal-tint)}to{background:transparent}}

/* guide icons */
.guides a{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center}
.guides .ico{width:56px;height:56px;border-radius:10px;background:var(--teal-tint);display:grid;place-items:center;color:var(--teal);transition:transform .25s}
.guides a:hover .ico{transform:rotate(-4deg) scale(1.06)}

/* article illustration */
.art-head{display:grid;grid-template-columns:1fr 200px;gap:24px;align-items:center}
.art-head svg{width:100%;height:auto;color:var(--teal)}
@media (max-width:700px){.art-head{grid-template-columns:1fr}.art-head svg{max-width:150px;order:-1}}
.art-head .led{animation:blink 1.6s infinite}
.art-head .led:nth-of-type(2n){animation-delay:.5s}
@keyframes blink{50%{opacity:.25}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .chart .equity{stroke-dashoffset:0}.js .chart .area,.js .chart .dot,.js .chart .badge{opacity:1}
  .js .bench .bar b{transform:none}
}

/* ===================== MODE ÉNERVÉ ===================== */
body{font-size:1.05rem;line-height:1.6}
h1,h2,h3{font-stretch:125%;font-weight:900;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6.4vw,5.4rem);line-height:.98}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.top{background:rgba(12,16,19,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.logo{font-stretch:125%;font-weight:900}
.nav a{font-weight:600}

/* hero */
.band{background:radial-gradient(1200px 600px at var(--mx,70%) var(--my,30%),rgba(34,211,197,.16),transparent 60%),#0C1013}
.band::before{background:
  linear-gradient(transparent 0 calc(100% - 1px),rgba(34,211,197,.07) 0) 0 0/100% 36px,
  linear-gradient(90deg,transparent 0 calc(100% - 1px),rgba(34,211,197,.07) 0) 0 0/36px 100%;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
.band .wrap{padding-top:64px;padding-bottom:40px;grid-template-columns:1.1fr 1fr}
.band h1{text-wrap:balance}
.band h1 .hot{display:block;color:var(--teal);text-shadow:0 0 28px rgba(34,211,197,.45)}
.band .lead{color:var(--ink-soft);font-size:1.18rem}
.band .cta{background:var(--teal);color:#05201E;box-shadow:0 0 0 0 rgba(34,211,197,.5);animation:glow 2.4s infinite}
.band .cta.ghost{animation:none;box-shadow:none;color:var(--teal);border-color:var(--teal);background:transparent}
@keyframes glow{70%{box-shadow:0 0 0 14px rgba(34,211,197,0)}100%{box-shadow:0 0 0 0 rgba(34,211,197,0)}}
.cta{border-radius:4px;font-weight:800;font-stretch:110%;transition:transform .15s}
.cta:hover{transform:translateY(-2px) skewX(-4deg)}
.cta:not(.ghost){color:#05201E}

/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#080B0D;overflow:hidden;white-space:nowrap;font-family:var(--head);font-weight:700;font-size:.95rem}
.ticker .track{display:inline-flex;gap:40px;padding:12px 0;animation:tick 38s linear infinite}
.ticker span{display:inline-flex;gap:10px;align-items:center}
.ticker .up{color:var(--teal)}.ticker .dn{color:var(--red)}.ticker .am{color:var(--amber)}
@keyframes tick{to{transform:translateX(-50%)}}

/* chart: boucle échec puis réussite */
.chart .equity{stroke:#fff}
.js .chart .equity,.js .chart .area,.js .chart .dot,.js .chart .badge,.js .chart .pulse{animation:none}
.js .chart .run{stroke-dasharray:900;stroke-dashoffset:900}
.js .chart .fail{animation:failDraw 12s infinite}
.js .chart .pass{animation:passDraw 12s infinite}
.js .chart .area{opacity:0;animation:areaShow 12s infinite}
.js .chart .boom{opacity:0;animation:boom 12s infinite}
.js .chart .badge,.js .chart .dot{opacity:0;animation:badge 12s infinite}
.js .chart .flash{opacity:0;animation:flash2 12s infinite}
.js .chart .daily{animation:dailyHit 12s infinite}
@keyframes failDraw{0%{stroke-dashoffset:900;opacity:1}22%{stroke-dashoffset:0;opacity:1}38%{stroke-dashoffset:0;opacity:1}42%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes boom{0%,21%{opacity:0;transform:translate(0)}23%{opacity:1;transform:translate(-3px,1px)}25%{transform:translate(3px,-1px)}27%{transform:translate(-2px,0)}29%,38%{opacity:1;transform:none}42%,100%{opacity:0}}
@keyframes flash2{0%,21%{opacity:0}23%{opacity:.35}30%,100%{opacity:0}}
@keyframes dailyHit{0%,21%{stroke-width:1.5}23%,38%{stroke-width:3.5}42%,100%{stroke-width:1.5}}
@keyframes passDraw{0%,44%{stroke-dashoffset:900;opacity:1}78%{stroke-dashoffset:0}96%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes areaShow{0%,76%{opacity:0}82%,94%{opacity:.9}100%{opacity:0}}
@keyframes badge{0%,78%{opacity:0;transform:translateY(8px)}82%,95%{opacity:1;transform:none}100%{opacity:0}}
.chart .fail{stroke:var(--red)}
.chart .boom text{fill:#fff;font-weight:900;font-size:15px}
.chart .boom rect{fill:var(--red)}
.chart .flash{fill:var(--red)}

/* sections */
.bench,.calc{background:linear-gradient(180deg,#151C21,#11171B);border-color:#26323A;box-shadow:0 20px 60px -30px rgba(0,0,0,.8)}
.bar span{background:#222C33;height:12px}
.bar b{box-shadow:0 0 14px currentColor}
.bar.t b{color:var(--teal)}.bar.d b{color:var(--amber)}.bar.m b{color:var(--red)}
thead th{background:#0F2A29;color:var(--ink)}
.tablewrap{border-color:#26323A}
.verdict{background:#0F2A29;border-left-color:var(--teal)}
.risk{background:#2B2210;border-color:#5C4415;color:var(--ink)}
.guides .ico{background:#0F2A29;box-shadow:inset 0 0 0 1px #1E4A47}
.guides a:hover .ico{box-shadow:0 0 24px rgba(34,211,197,.35),inset 0 0 0 1px var(--teal)}
.sizes button{background:#0C1013;border-color:#2B3740;color:var(--ink)}
.sizes button[aria-pressed="true"]{color:#05201E;box-shadow:0 0 18px rgba(34,211,197,.4)}
.count{font-variant-numeric:tabular-nums}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:36px 0}
.stats div{border:1px solid #26323A;border-radius:6px;padding:20px;background:#11171B}
.stats b{display:block;font-family:var(--head);font-stretch:125%;font-weight:900;font-size:clamp(2rem,4vw,3rem);color:var(--teal);line-height:1}
.stats span{color:var(--ink-soft);font-size:.95rem}
@media (max-width:700px){.stats{grid-template-columns:1fr}}

/* révélation au scroll, une seule fois */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ticker .track{animation:none}.js .reveal{opacity:1;transform:none}
  .js .chart .fail,.js .chart .boom,.js .chart .flash{display:none}
  .js .chart .run.pass{stroke-dashoffset:0}.js .chart .area,.js .chart .badge,.js .chart .dot{opacity:1}
}
@media (max-width:820px){.band .wrap{grid-template-columns:1fr;padding-top:36px}.band .chart{margin-top:-8px}}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.pc>div{border:1px solid #26323A;border-radius:6px;padding:16px 20px;background:#11171B}
.pc h3{margin-top:0;font-size:1.05rem}
.pc>div:first-child h3{color:var(--teal)}.pc>div:last-child h3{color:var(--red)}
.pc ul{margin:0;padding-left:1.1em}
@media (max-width:640px){.pc{grid-template-columns:1fr}}
/* titre du hero : plus compact avec la vraie police */
.band h1{font-size:clamp(2.2rem,4.6vw,4rem);font-stretch:112%;line-height:1.02}
h1{font-stretch:112%}