/* ════════════════════════════════════════════════════════════════
   MASTOK — site vitrine
   Concept : « la page est un bloc de 8 semaines » (moteur Mastok :
   Accumulation ×3, Décharge, Intensification ×3, Pic & tests).
   Identité reprise de l'app V1.1 : fond quasi noir, accent volt,
   une couleur par discipline, Barlow Condensed + Inter.
   ════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  /* Couleur — jetons de l'app Mastok V1.1 (mastok/styles.css) */
  --bg:#0a0a0b; --card:#151517; --card2:#1d1d20; --line:rgba(255,255,255,.09);
  --text:#f4f4f2; --text2:#a3a3a8;
  --volt:#d4ff3a;
  --muscu:#8e9bff; --hyrox:#ffb53a; --crossfit:#ff6a5a;
  /* Thème clair de l'app, utilisé pour les chapitres de lecture */
  --paper:#f3f3ef; --paper-line:rgba(10,10,11,.12); --ink:#0c0c0d; --ink2:#5d5d63;
  --volt-ink:#4f7300; --muscu-ink:#4b5be0;
  /* Disques : codes couleur officiels, comme dans l'app */
  --p25:#e53935; --p20:#2f6fe4; --p15:#f2c21b; --p10:#23a35a; --p5:#f1f1ee; --p2:#c62f2c; --p1:#9aa0a6;
  /* Type */
  --disp:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --step--1:clamp(.8rem,.77rem + .15vw,.875rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.0625rem);
  --step-1:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  --step-2:clamp(1.6rem,1.25rem + 1.5vw,2.5rem);
  --step-3:clamp(2.4rem,1.6rem + 3.6vw,5rem);
  --step-4:clamp(3.2rem,1.8rem + 7vw,9rem);
  --step-5:clamp(4rem,1.6rem + 11vw,13.5rem);
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --wrap:1320px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
main{overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--volt);outline-offset:3px;border-radius:4px}
.paper :focus-visible{outline-color:var(--ink)}
::selection{background:var(--volt);color:var(--bg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-80px;z-index:100;background:var(--volt);color:var(--bg);padding:12px 16px;font-weight:700;text-decoration:none;border-radius:10px}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}

/* ── Typo ── */
.eyebrow{font-family:var(--disp);font-weight:700;font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text2)}
.eyebrow b{color:var(--volt);font-weight:700}
.paper .eyebrow{color:var(--ink2)}
.paper .eyebrow b{color:var(--volt-ink)}
.display{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.005em;text-wrap:balance}
.lede{font-size:var(--step-1);line-height:1.5;max-width:36ch}
.note{font-size:var(--step--1);color:var(--text2);max-width:64ch}
.paper .note{color:var(--ink2)}
.num{font-family:var(--disp);font-weight:800;font-variant-numeric:tabular-nums}
.tag{display:inline-block;justify-self:start;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;color:var(--bg)}
.tag--muscu{background:var(--muscu)}.tag--hyrox{background:var(--hyrox)}.tag--crossfit{background:var(--crossfit)}.tag--volt{background:var(--volt)}

/* ── Boutons (pilules, comme dans l'app) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 24px;border-radius:99px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)}
.btn:active{transform:scale(.97)}
.btn--volt{background:var(--volt);color:var(--bg)}
.btn--volt:hover{background:#e6ff86}
.btn--line{border-color:rgba(255,255,255,.28);color:var(--text)}
.btn--line:hover{border-color:var(--text)}
.btn .arrow{width:18px;height:18px;flex:none}

/* ── Navigation ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .35s var(--ease)}
.nav__in{display:flex;align-items:center;gap:24px;min-height:64px}
.nav.is-solid{background:var(--bg);border-bottom:1px solid var(--line)}
.wordmark{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:1.45rem;letter-spacing:.06em;text-decoration:none;line-height:1}
.wordmark svg{width:22px;height:22px;color:var(--volt)}
.nav__links{display:none;gap:26px;margin-left:auto;font-weight:600;font-size:.9rem}
.nav__links a{text-decoration:none;color:var(--text2);padding:8px 0;transition:color .2s}
.nav__links a:hover{color:var(--text)}
.nav .btn{min-height:42px;padding:0 18px;font-size:.9rem}
@media (min-width:1080px){.nav__links{display:flex}}

/* ── Rail de charge : les 8 semaines du bloc ── */
.hud{display:flex;align-items:center;gap:10px;margin-left:auto;pointer-events:none;opacity:0;transition:opacity .4s var(--ease)}
.nav__links+.hud{margin-left:0}
@media (max-width:1079px){.nav__links+.hud{margin-left:auto}}
.hud.is-on{opacity:1}
.hud__bars{display:flex;align-items:flex-end;gap:3px;height:26px}
.hud__bars i{display:block;width:5px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .3s}
.hud__bars i.is-past{background:rgba(255,255,255,.5)}
.hud__bars i.is-now{background:var(--volt)}
.hud__label{font-size:.72rem;line-height:1.2;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);min-width:14ch}
.hud__label b{display:block;color:var(--volt);font-family:var(--disp);font-size:.95rem;letter-spacing:.04em}
@media (max-width:767px){
  .hud{position:absolute;left:0;right:0;top:100%;gap:0;margin:0}
  .nav__links+.hud{margin:0}
  .hud__label{display:none}
  .hud__bars{height:3px;width:100%;gap:2px}
  .hud__bars i{flex:1;width:auto;height:3px!important;border-radius:0}
}

/* ════════ HERO ════════ */
.hero{position:relative;min-height:max(620px,100svh);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__media,.hero__media picture,.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media{z-index:-2}
.hero__media img{object-position:70% 40%}
.hero__media video{opacity:0;transition:opacity 1.2s var(--ease)}
.hero__media video.is-ready{opacity:1}
.hero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,0) 26%,rgba(10,10,11,0) 44%,rgba(10,10,11,.94) 88%),linear-gradient(90deg,rgba(10,10,11,.72) 0%,rgba(10,10,11,0) 62%)}
.hero__in{position:relative;width:100%;padding-block:104px 56px}
.hero__title{font-size:min(var(--step-5),13svh);margin-top:16px;display:flex;flex-direction:column}
.hero__title .w{display:block;overflow:hidden;padding-top:.1em;margin-top:-.1em}
.hero__title .w>span{display:inline-block}
.hero__title .w.v>span{color:var(--volt)}
.hero .eyebrow{color:var(--text)}
.hero__lede{margin-top:22px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-size:.88rem;color:var(--text2)}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--volt)}
@media (max-width:767px){
  .hero__media img{object-position:50% 30%}
  .hero__shade{background:linear-gradient(180deg,rgba(10,10,11,.82) 0%,rgba(10,10,11,.35) 24%,rgba(10,10,11,.2) 38%,rgba(10,10,11,.96) 72%)}
  .hero__in{padding-block:96px 48px}
  .hero .btn{flex:1 1 auto}
}

/* ════════ Chapitres clairs (thème clair de l'app) ════════ */
.paper{background:var(--paper);color:var(--ink)}
.sec{padding-block:clamp(96px,12vw,180px)}
.sec__title{font-size:var(--step-4);margin-top:16px;max-width:14ch}
.sec__intro{margin-top:24px;max-width:58ch;font-size:var(--step-1);line-height:1.5}

/* ════════ AU KILO : la barre se charge ════════ */
.kilo__grid{display:grid;gap:32px;margin-top:48px;grid-template-columns:minmax(0,1fr)}
.kilo__stage{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:2;background:var(--paper);padding-block:14px;border-bottom:1px solid var(--paper-line)}
.load{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.load__kg{font-size:clamp(3.6rem,2.2rem + 8vw,9rem);line-height:.82}
.load__kg small{font-size:.32em;margin-left:.06em;color:var(--ink2)}
.load__rx{font-weight:600;color:var(--ink2);font-size:.95rem}
.bar{position:relative;height:clamp(90px,15vw,180px);margin-top:14px}
.bar__shaft{position:absolute;left:0;right:0;top:50%;height:clamp(8px,1vw,12px);transform:translateY(-50%);background:linear-gradient(180deg,#c4c4bf,#7d7d78);border-radius:3px}
.bar__collar{position:absolute;left:30%;top:50%;width:clamp(10px,1.3vw,16px);height:clamp(28px,4vw,44px);transform:translate(-100%,-50%);background:#55554f;border-radius:3px}
.bar__plates{position:absolute;left:30%;top:0;bottom:0;display:flex;align-items:center;gap:3px}
.plate{display:block;flex:none;width:clamp(14px,1.9vw,24px);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);transition:transform .55s var(--ease),opacity .4s var(--ease)}
.plate.p25,.plate.p20{height:100%}.plate.p25{background:var(--p25)}.plate.p20{background:var(--p20)}
.plate.p15{height:86%;background:var(--p15)}.plate.p10{height:72%;background:var(--p10)}.plate.p5{height:52%;background:var(--p5)}
.plate.p2{height:40%;width:clamp(10px,1.2vw,14px);background:var(--p2)}.plate.p1{height:34%;width:clamp(8px,1vw,12px);background:var(--p1)}
html.motion .plate.is-new{transform:translateX(200%);opacity:0}
.bar__side{position:absolute;right:0;bottom:0;font-weight:700;font-size:.92rem}
.ramp{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:34px}
.ramp span{font-weight:700;font-size:.85rem;padding:6px 11px;border-radius:99px;background:#e4e4de;font-variant-numeric:tabular-nums}
.ramp span.lab{background:none;padding-left:0;color:var(--ink2);font-weight:600}
.kilo__steps{display:grid}
.kstep{min-height:56vh;display:flex;flex-direction:column;justify-content:center;gap:12px;border-top:1px solid var(--paper-line);padding-block:28px;color:var(--ink2);transition:color .4s var(--ease)}
.kstep.is-active{color:var(--ink)}
.kstep .num{font-size:1rem;color:var(--volt-ink)}
.kstep h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:var(--step-3);line-height:.92}
.kstep p{max-width:44ch;font-size:var(--step-1);line-height:1.5}
.calc{display:grid;gap:14px;margin-top:40px;padding:22px;border-radius:24px;background:var(--bg);color:var(--text)}
.calc h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:var(--step-2);line-height:.95}
.calc__row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.field{display:grid;gap:6px;font-size:.8rem;color:var(--text2);font-weight:600}
.field input,.field select{font-size:16px;background:var(--card2);color:var(--text);border:1px solid var(--line);border-radius:12px;min-height:48px;padding:0 12px;width:9.5ch}
.field select{width:auto;max-width:100%}
.calc__out{font-family:var(--disp);font-weight:800;font-size:var(--step-2);color:var(--volt);line-height:1.05}
.calc .note{color:var(--text2)}
@media (min-width:1024px){
  .kilo__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:start}
  .kilo__stage{order:2;top:calc(50svh - 170px);border:0;padding:0;background:none}
  .kilo__steps{order:1}
}

/* ════════ DISCIPLINES ════════ */
.disc__head{padding-block:clamp(96px,12vw,160px) 48px}
.disc__head h2{font-size:var(--step-4);margin-top:16px}
.disc__head .lede{margin-top:22px;max-width:46ch;color:var(--text2)}
.disc__track{display:grid}
.panel{position:relative;display:grid;min-height:88svh;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.panel__media{position:absolute;inset:0;z-index:-2}
.panel__media img,.panel__media video{width:100%;height:100%;object-fit:cover}
.panel__media video{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.panel__media video.is-ready{opacity:1}
.panel__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,11,.25),rgba(10,10,11,.12) 35%,rgba(10,10,11,.94) 85%)}
.panel__in{align-self:end;padding-block:120px 56px;display:grid;gap:20px}
.panel__name{font-size:min(var(--step-5),19vw);line-height:.88}
.panel[data-d="muscu"] .panel__name{color:var(--muscu)}
.panel[data-d="hyrox"] .panel__name{color:var(--hyrox)}
.panel[data-d="crossfit"] .panel__name{color:var(--crossfit)}
.panel[data-d="hybride"] .panel__name{color:var(--volt)}
.panel__line{font-size:var(--step-1);max-width:32ch}
.goals{display:grid;max-width:560px;border-top:1px solid rgba(255,255,255,.22)}
.goals li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.goals b{font-weight:700}
.goals span{color:#c6c6c1;font-size:.9rem;text-align:right}
.panel__fact{font-size:.95rem;max-width:52ch;padding-left:14px;border-left:3px solid var(--volt)}
.kb{animation:kb 18s ease-in-out infinite alternate;transform-origin:65% 55%}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1) translateX(-2%)}}
@media (prefers-reduced-motion:reduce){.kb{animation:none}}
@media (min-width:1024px){
  html.motion .disc--h .disc__track{display:flex;width:max-content;height:100svh}
  html.motion .disc--h .panel{width:min(86vw,1280px);min-height:100svh;height:100svh;border-top:0;border-left:1px solid var(--line)}
  .panel__in{grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:end;column-gap:56px}
  .panel__in>.tag,.panel__in>.panel__name,.panel__in>.panel__line{grid-column:1}
  .panel__in>.goals,.panel__in>.panel__fact{grid-column:2}
  .panel__in>.goals{grid-row:2 / span 2;align-self:end}
  .panel__in>.panel__fact{grid-row:4}
}

/* ════════ LE BLOC ════════ */
.chart{margin-top:clamp(48px,7vw,96px);border-top:2px solid var(--ink);padding-top:28px}
.chart__bars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;align-items:end;height:clamp(200px,30vw,360px)}
.wk{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;background:none;border:0;padding:0;cursor:pointer}
.wk__bar{display:block;height:calc(var(--h) * 1%);border-radius:8px 8px 3px 3px;background:var(--c);transform-origin:50% 100%}
.wk__pct{position:absolute;left:0;right:0;bottom:calc(var(--h) * 1% + 6px);font-family:var(--disp);font-weight:700;font-size:1rem;text-align:center;color:var(--ink2)}
.wk[aria-pressed="true"] .wk__bar{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink)}
.wk[aria-pressed="true"] .wk__pct{color:var(--ink)}
.ph-acc{--c:#5b6be8}.ph-dech{--c:#b4b4ad}.ph-int{--c:#8a5cf0}.ph-real{--c:#e0533f}.ph-pic,.ph-aff{--c:var(--volt)}
.chart__weeks{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-top:10px;text-align:center}
.chart__weeks span{font-family:var(--disp);font-weight:800;font-size:1.05rem;line-height:1.1}
.chart__weeks small{display:block;font-family:var(--body);font-weight:600;font-size:.66rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart__detail{margin-top:24px;display:grid;gap:12px;padding:22px;border-radius:24px;background:#fff}
.chart__detail h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:var(--step-2);line-height:.95}
.chart__detail p{color:var(--ink2);max-width:60ch}
.rx{display:flex;flex-wrap:wrap;gap:8px}
.rx span{font-weight:700;font-size:.9rem;padding:7px 12px;border-radius:99px;background:var(--paper);font-variant-numeric:tabular-nums}
.compete{display:grid;gap:16px;margin-top:clamp(56px,7vw,96px);padding-top:28px;border-top:1px solid var(--paper-line)}
.compete h3{font-size:var(--step-3)}
.compete p{max-width:60ch;color:var(--ink2)}
.compete__row{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.compete .field{color:var(--ink2)}
.compete .field input{background:#fff;color:var(--ink);border-color:var(--paper-line);width:auto}
.phases{display:flex;gap:4px;flex-wrap:wrap}
.phases span{flex:1 0 58px;min-width:0;text-align:center;padding:10px 4px;border-radius:12px;font-weight:700;font-size:.72rem;line-height:1.2;background:#fff;color:var(--ink)}
.phases span b{display:block;font-family:var(--disp);font-size:1.15rem}
.phases .ph-acc{background:#e1e4ff}.phases .ph-int{background:#ebe1ff}.phases .ph-dech{background:#e4e4de}.phases .ph-real{background:#ffdcd5}.phases .ph-pic,.phases .ph-aff{background:var(--volt)}
@media (min-width:900px){.chart__detail{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;gap:32px}}
@media (max-width:600px){.wk__pct{font-size:.8rem}.chart__bars,.chart__weeks{gap:4px}}

/* ════════ CONFIGURATEUR (vrai moteur) ════════ */
.cfg{display:grid;gap:40px;margin-top:48px;grid-template-columns:minmax(0,1fr)}
.cfg form{display:grid;gap:22px;align-content:start}
.cfg fieldset{border:0;margin:0;padding:0;min-inline-size:0}
.cfg legend{font-family:var(--disp);font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);margin-bottom:10px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label{position:relative}
.chips input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.chips span{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:.9rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chips input:checked+span{background:var(--text);color:var(--bg);border-color:var(--text)}
.chips input:focus-visible+span{outline:3px solid var(--volt);outline-offset:2px}
.chips .dot{width:8px;height:8px;border-radius:50%}
.cfg select{font-size:16px;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:12px;min-height:48px;padding:0 12px;max-width:100%}
.out{display:grid;gap:14px;align-content:start}
.out__head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-end;justify-content:space-between}
.out__head h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:var(--step-2);line-height:.95}
.out__stats{display:flex;gap:18px;color:var(--text2);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.out__stats b{display:block;font-family:var(--disp);font-size:1.7rem;color:var(--text);line-height:1;letter-spacing:0}
.sess{display:grid;gap:8px}
.sess li{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.sess .day{font-family:var(--disp);font-weight:800;font-size:1.1rem;line-height:1;text-transform:uppercase;color:var(--text2)}
.sess .t{font-weight:700;display:flex;align-items:center;gap:8px;min-width:0}
.sess .t i{width:8px;height:8px;border-radius:50%;flex:none}
.sess .m{color:var(--text2);font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.sess .lift{grid-column:2 / span 2;color:var(--text2);font-size:.86rem;font-variant-numeric:tabular-nums}
.sess .lift b{color:var(--text);font-weight:600}
@media (min-width:1024px){.cfg{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}.out{position:sticky;top:96px}}

/* ════════ L'APP ════════ */
.app__head h2{font-size:var(--step-4);margin-top:16px}
.app__head .lede{margin-top:22px;color:var(--text2)}
.app__stage{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;margin-top:56px}
.phone{--w:min(300px,72vw);position:relative;width:var(--w);aspect-ratio:600/1298;border-radius:calc(var(--w) * .14);padding:calc(var(--w) * .035);background:#050506;box-shadow:0 0 0 1px #2c2c30,0 0 0 calc(var(--w) * .012) #0f0f11,0 40px 80px -30px rgba(0,0,0,.85);flex:none;max-width:100%}
.phone::before{content:"";position:absolute;top:calc(var(--w) * .055);left:50%;transform:translateX(-50%);width:28%;height:calc(var(--w) * .075);background:#050506;border-radius:99px;z-index:3}
.phone__screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w) * .11);overflow:hidden;background:#0a0a0b}
.phone__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.shots{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;margin-inline:calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));padding-left:var(--gutter);padding-right:var(--gutter-r);scrollbar-width:thin}
.shot{scroll-snap-align:center;display:grid;gap:14px;flex:none;width:min(300px,72vw)}
.shot h3{font-family:var(--disp);font-weight:800;font-size:1.4rem;text-transform:uppercase}
.shot p{color:var(--text2);font-size:.95rem}
.app__desk{display:none}
@media (min-width:1024px){
  .shots{display:none}
  .app__desk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:64px;align-items:start}
  .step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:12px;padding-block:24px;border-top:1px solid var(--line);color:var(--text2);transition:color .4s var(--ease)}
  .step.is-active{color:var(--text)}
  .step .num{font-size:1rem}
  .step.is-active .num{color:var(--volt)}
  .step h3{font-family:var(--disp);font-weight:800;font-size:var(--step-3);text-transform:uppercase;line-height:.92}
  .step p{color:var(--text2);max-width:42ch;font-size:var(--step-1);line-height:1.45}
  .app__pin{position:sticky;top:calc(50svh - 290px);display:grid;justify-items:center}
  .app__pin .phone{--w:272px}
  .phone__screen img{opacity:0;transition:opacity .5s var(--ease),transform .7s var(--ease);transform:translateY(3%)}
  .phone__screen img.is-on{opacity:1;transform:none}
}

/* ════════ HYROX ════════ */
.hx{display:grid;gap:40px;margin-top:48px;grid-template-columns:minmax(0,1fr)}
.hx__card{display:grid;gap:16px;padding:24px;border-radius:24px;background:var(--bg);color:var(--text);align-content:start}
.hx__card .eyebrow{color:var(--hyrox)}
.paper .hx__card .note,.paper .calc .note{color:var(--text2)}
.hx__total{font-size:clamp(3.6rem,2.2rem + 6vw,7rem);line-height:.85}
.hx__split{display:flex;height:12px;border-radius:99px;overflow:hidden;gap:3px}
.hx__split i{display:block;height:100%;transition:flex-grow .5s var(--ease)}
.hx__legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;color:var(--text2)}
.hx__legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;background:var(--c)}
.hx__inputs{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.stations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stations li{padding:12px 14px;border-radius:14px;background:#fff;font-weight:700;line-height:1.2}
.stations li span{display:block;font-weight:500;font-size:.82rem;color:var(--ink2);margin-top:3px;font-variant-numeric:tabular-nums}
@media (min-width:1024px){.hx{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start}}

/* ════════ GRATUIT ════════ */
.free{position:relative;min-height:90svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.free__media{position:absolute;inset:0;z-index:-2}
.free__media img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.free__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,11,.3),rgba(10,10,11,.65) 45%,rgba(10,10,11,.97) 86%)}
.free__in{padding-block:160px 72px}
.free h2{font-size:var(--step-4);margin-top:16px;max-width:12ch}
.free__list{display:grid;margin-top:40px;border-top:1px solid rgba(255,255,255,.24)}
.free__list li{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.24)}
.free__list b{font-family:var(--disp);font-weight:800;font-size:1.25rem;text-transform:uppercase;letter-spacing:.02em}
.free__list span{color:#d2d2cd;max-width:62ch}
@media (min-width:900px){.free__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}.free__list li{grid-template-columns:minmax(0,11ch) minmax(0,1fr);gap:20px;align-items:baseline}}

/* ════════ FINAL ════════ */
.final{background:var(--volt);color:var(--bg);padding-block:clamp(96px,14vw,200px);overflow:hidden}
.final .eyebrow{color:var(--bg)}
.final__title{font-size:min(var(--step-5),17vw);margin-top:16px}
.final__title span{display:block}
.final p{margin-top:26px;max-width:44ch;font-size:var(--step-1);line-height:1.45}
.final .btn--dark{background:var(--bg);color:var(--volt)}
.final .btn--dark:hover{background:#26262a}
.final .btn--line{border-color:rgba(10,10,11,.45);color:var(--bg)}
.final .btn--line:hover{border-color:var(--bg)}
.final :focus-visible{outline-color:var(--bg)}

/* ════════ FOOTER ════════ */
.foot{padding-block:56px calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.foot__in{display:grid;gap:32px}
.foot nav ul{display:flex;flex-wrap:wrap;gap:12px 28px}
.foot nav a{color:var(--text2);text-decoration:none;font-size:.92rem;padding:6px 0;display:inline-block}
.foot nav a:hover{color:var(--text);text-decoration:underline}
.foot__legal{font-size:.82rem;color:var(--text2);max-width:72ch;display:grid;gap:8px}
@media (min-width:900px){.foot__in{grid-template-columns:auto 1fr;gap:64px}}

/* ════════ Pages légales ════════ */
.legal{padding-block:120px 80px}
.legal h1{font-size:var(--step-3)}
.legal h2{font-family:var(--disp);font-weight:800;font-size:var(--step-1);text-transform:uppercase;margin-top:40px}
.legal p,.legal li{max-width:68ch;margin-top:12px;color:#d2d2cd}
.legal ul{list-style:square;padding-left:20px}
.legal .todo{background:var(--volt);color:var(--bg);padding:1px 6px;border-radius:4px;font-weight:600}

/* ════════ Mouvement : états initiaux seulement sous html.motion ════════ */
html.motion .reveal{opacity:0;transform:translateY(24px)}
html.motion .reveal.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.motion .hero__title .w>span{transform:translateY(105%)}
html.motion .hero .eyebrow{opacity:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}