/* ============================================================
   LA FORGE — atelier 47
   Brutalisme d'atelier : goudron, os, braise.
   ============================================================ */

/* ---------- 1. Fondations ---------- */

:root{
  /* encres — noirs tirés vers le rouge, jamais du #000 */
  --ink:      oklch(0.145 0.018 25);
  --ink-2:    oklch(0.205 0.024 26);
  --ink-3:    oklch(0.285 0.032 28);
  --bone:     oklch(0.945 0.011 85);
  --bone-2:   oklch(0.755 0.018 72);
  --bone-3:   oklch(0.575 0.020 60);
  --blood:    oklch(0.535 0.213 27);
  --ember:    oklch(0.700 0.185 48);
  --sweat:    oklch(0.900 0.045 225);

  --display: "Anton", "Haettenschweiler", "Arial Narrow Bold", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* courbes */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* rythme spatial */
  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --stack-s: clamp(1rem, 2vw, 1.75rem);
  --stack-m: clamp(2.5rem, 6vw, 6rem);
  --stack-l: clamp(6rem, 14vw, 14rem);

  /* pilotés par le scroll (app.js) */
  --heat: 0;
  --progress: 0;
  --beat: 1.1s;

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  line-height:1.55;
  font-variation-settings:"wdth" 100;
  overflow-x:hidden;
  overscroll-behavior-y:none;          /* pas de rebond élastique sous les couches fixes */
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; font-family:var(--display); font-weight:400; letter-spacing:-0.012em; line-height:0.86; text-transform:uppercase; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
img,svg{ max-width:100%; display:block; }
::selection{ background:var(--blood); color:var(--bone); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.skip{
  position:fixed; top:0; left:0; z-index:200;
  background:var(--blood); color:var(--bone);
  padding:.75rem 1.25rem; font-weight:700; text-decoration:none;
  transform:translateY(-120%);
  transition:transform .18s var(--ease-out);
}
.skip:focus-visible{ transform:translateY(0); }

:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

.tag{
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--bone-3); font-weight:600; margin:0 0 var(--stack-s);
  font-variation-settings:"wdth" 92;
}
.tag--light{ color:oklch(0.62 0.09 30); }

/* ---------- 2. Couches d'ambiance ---------- */

#sweat{
  position:fixed; inset:0; z-index:70;
  width:100%; height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
}

.grain{
  position:fixed; inset:-150%; z-index:75;
  pointer-events:none; opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode:overlay;
  animation:grain-jitter .7s steps(1) infinite;
  will-change:transform;
}
@keyframes grain-jitter{
  0%  { transform:translate3d(0,0,0) }
  20% { transform:translate3d(-3%,2%,0) }
  40% { transform:translate3d(2%,-4%,0) }
  60% { transform:translate3d(-2%,-2%,0) }
  80% { transform:translate3d(4%,1%,0) }
  100%{ transform:translate3d(0,0,0) }
}

/* la chaleur monte avec l'effort : dégradé de braise piloté par --heat */
.heat{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(125% 78% at 50% 110%, oklch(0.55 0.21 30 / .72), transparent 64%),
    radial-gradient(85% 55% at 12% -8%, oklch(0.45 0.16 35 / .55), transparent 70%);
  opacity:var(--heat);
  transition:opacity .25s linear;
}

.reticle{ display:none; }
@media (hover:hover) and (pointer:fine){
  .reticle{
    display:block; position:fixed; top:0; left:0; z-index:150;
    width:34px; height:34px; margin:-17px 0 0 -17px;
    pointer-events:none;
    border:1px solid oklch(0.7 0.2 30 / .8);
    border-radius:50%;
    transform:translate3d(-100px,-100px,0);
    mix-blend-mode:exclusion;
  }
  .reticle i{
    position:absolute; inset:0; margin:auto;
    width:3px; height:3px; background:var(--ember); border-radius:50%;
  }
}

/* ---------- 3. HUD ---------- */

.hud{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem;
  padding:clamp(.85rem,1.6vw,1.4rem) var(--gut);
  background:linear-gradient(to bottom, oklch(0.145 0.018 25 / .95) 0 62%, transparent);
  pointer-events:none;
}
.hud > *{ pointer-events:auto; }

.hud__mark{ text-decoration:none; display:flex; flex-direction:column; line-height:1; }
.hud__forge{ font-family:var(--display); font-size:1.35rem; letter-spacing:.02em; }
.hud__sub{ font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--bone-3); margin-top:.35rem; }

.hud__vitals{ display:flex; align-items:center; gap:.6rem; }
.ecg{ width:88px; height:26px; }
.ecg polyline{
  fill:none; stroke:var(--blood); stroke-width:2;
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:180; stroke-dashoffset:180;
  animation:ecg-run var(--beat) linear infinite;
}
@keyframes ecg-run{ to{ stroke-dashoffset:-180 } }
.hud__bpm{ display:flex; align-items:baseline; gap:.2rem; font-variant-numeric:tabular-nums; }
.hud__bpm b{ font-family:var(--display); font-size:1.1rem; color:var(--bone); min-width:2.4ch; display:inline-block; }
.hud__bpm i{ font-style:normal; font-size:.6rem; letter-spacing:.2em; color:var(--bone-3); text-transform:uppercase; }

.hud__nav{ display:flex; justify-content:flex-end; align-items:center; gap:clamp(.9rem,2vw,2rem); }
.hud__nav a{
  text-decoration:none; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--bone-2);
  transition:color .18s ease;
}
.hud__nav a:hover{ color:var(--bone); }
.hud__cta{
  color:var(--bone) !important; background:var(--blood);
  padding:.55rem 1rem;
}

/* jauge d'effort latérale */
.gauge{
  position:fixed; left:clamp(.5rem,1.4vw,1.1rem); top:50%; z-index:100;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  pointer-events:none;
}
.gauge::before{
  content:""; width:2px; height:min(38vh,320px);
  background:oklch(0.945 0.011 85 / .18);
  position:relative;
}
.gauge__fill{
  position:absolute; top:0; left:50%; width:2px;
  height:min(38vh,320px);
  background:linear-gradient(to bottom, var(--ember), var(--blood));
  transform:translateX(-50%) scaleY(var(--progress));
  transform-origin:top;
}
.gauge__label{
  writing-mode:vertical-rl; font-size:.58rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--bone-3);
}
@media (max-width:900px){ .gauge{ display:none } }

/* ---------- 4. Boutons ---------- */

.btn{
  --pad:1.05rem 2rem;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:var(--pad);
  font-family:var(--body); font-weight:700; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s var(--ease-out);
}
.btn--solid{ background:var(--blood); color:var(--bone); }
.btn--ghost{ border-color:oklch(0.945 0.011 85 / .3); color:var(--bone); }
@media (hover:hover) and (pointer:fine){
  .btn--solid:hover{ background:var(--ember); color:var(--ink); }
  .btn--ghost:hover{ border-color:var(--bone); background:oklch(0.945 0.011 85 / .07); }
}
.btn:active{ transform:translateY(1px); }

/* ---------- 5. Hero ---------- */

.hero{
  position:relative; z-index:2;
  min-height:100svh;
  padding:clamp(7rem,14vh,11rem) var(--gut) clamp(2rem,5vh,4rem);
  display:grid; grid-template-rows:auto 1fr auto; gap:clamp(1.5rem,4vh,3rem);
}

.hero__kicker{
  display:flex; align-items:center; gap:.9rem; margin:0;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--bone-2);
}
.hero__kicker .dot{ width:5px; height:5px; background:var(--blood); border-radius:50%; animation:pulse var(--beat) var(--ease-out) infinite; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:1 } 45%{ transform:scale(1.9); opacity:.35 } 100%{ transform:scale(1); opacity:1 } }

.hero__title{
  align-self:center;
  margin:0; padding:0;
  animation:breathe 4.8s var(--ease-in-out) infinite alternate;
  will-change:transform;
}
@keyframes breathe{ from{ transform:scale(1) } to{ transform:scale(1.012) } }

.hero__title .line{
  display:block; overflow:hidden;
  font-size:clamp(4.2rem,19.5vw,17rem);
  line-height:.84;
  padding-bottom:.04em;
}
.hero__title .line--blood{
  color:var(--blood);
  font-size:clamp(5.4rem,25vw,22rem);
  margin-left:-.012em;
}
.hero__title .ch{
  display:inline-block;
  transform:translate3d(0,110%,0) rotate(4deg);
  transition:transform 1s var(--ease-out);
  will-change:transform;
}
.is-ready .hero__title .ch{ transform:translate3d(0,0,0) rotate(0); }

.hero__foot{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:end;
}
.hero__claim{ max-width:46ch; color:var(--bone-2); margin:0; font-size:clamp(1rem,1.15vw,1.2rem); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:flex-end; }

.hero__scroll{
  position:absolute; left:var(--gut); bottom:clamp(2rem,5vh,4rem);
  display:flex; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--bone-3);
}
.hero__scroll svg{ width:10px; height:34px; }
.hero__scroll path{ fill:none; stroke:var(--blood); stroke-width:1.5; animation:drop 2.2s var(--ease-in-out) infinite; }
@keyframes drop{ 0%,100%{ transform:translateY(-4px); opacity:.4 } 55%{ transform:translateY(4px); opacity:1 } }

.hero__stack{
  position:absolute; right:var(--gut); top:38%;
  display:flex; flex-direction:column; align-items:flex-end; line-height:.8;
  font-family:var(--display);
  color:transparent; -webkit-text-stroke:1px oklch(0.945 0.011 85 / .22);
  pointer-events:none;
}
.hero__stack span:first-child{ font-size:clamp(3rem,7vw,6rem); }
.hero__stack span:last-child{ font-size:clamp(1.2rem,2.4vw,2rem); }
@media (max-width:860px){ .hero__stack{ display:none } .hero__foot{ grid-template-columns:1fr } .hero__actions{ justify-content:flex-start } }

/* ---------- 6. Manifeste ---------- */

.manifeste{
  position:relative; z-index:2;
  padding:var(--stack-l) var(--gut);
  max-width:1500px; margin-inline:auto;
}
.manifeste__text{
  font-size:clamp(1.75rem,4.9vw,4.3rem);
  line-height:1.06; font-weight:800; font-variation-settings:"wdth" 86;
  letter-spacing:-.015em; max-width:19ch;
  margin:0 0 var(--stack-m);
}
.manifeste__text [data-word]{
  color:oklch(0.945 0.011 85 / .14);
  transition:color .45s var(--ease-out);
}
.manifeste__text [data-word].lit{ color:var(--bone); }
.manifeste__text [data-word].hot.lit{ color:var(--ember); }

.manifeste__note{
  margin-left:auto; max-width:38ch;
  border-top:1px solid oklch(0.945 0.011 85 / .22);
  padding-top:1.1rem;
  font-size:.95rem; color:var(--bone-2);
}
.manifeste__note b{ display:block; color:var(--bone); font-size:1.05rem; margin-bottom:.35rem; }

/* ---------- 7. La série : douze répétitions ---------- */

.serie{ position:relative; z-index:2; height:460vh; }

.serie__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(5rem,11vh,8rem) var(--gut) clamp(1.5rem,4vh,3rem);
}

.serie__hud .serie__lift{
  font-size:clamp(1.6rem,4vw,3.4rem);
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.serie__lift b{ color:var(--ember); font-weight:400; }
.serie__lift i{ font-style:normal; font-size:.4em; }

.serie__stage{
  position:relative;
  display:grid; place-items:center;
  transform:translate3d(var(--shx,0px),var(--shy,0px),0);
  will-change:transform;
}

.serie__count{
  position:relative; z-index:3; text-align:center;
  mix-blend-mode:normal;
}
.serie__count b{
  display:block;
  font-family:var(--display); font-weight:400;
  font-size:clamp(9rem,27vw,23rem); line-height:.78;
  font-variant-numeric:tabular-nums;
  color:color-mix(in oklab, var(--bone), var(--ember) calc(var(--heat) * 22%));
  text-shadow:0 0 clamp(14px,5vw,80px) oklch(0.58 0.22 30 / calc(var(--heat) * .8));
}
.serie__count em{
  display:block; font-style:normal;
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--bone-2); margin-top:.4rem;
}

/* le rack : deux poteaux, une barre, quatre disques */
.rack{ position:absolute; inset:6% 8%; z-index:1; }
.rack__post{
  position:absolute; top:0; bottom:0; width:10px;
  background:linear-gradient(to bottom, var(--ink-3), oklch(0.22 0.02 28));
  border-left:1px solid oklch(0.945 0.011 85 / .12);
}
.rack__post--l{ left:6%; }
.rack__post--r{ right:6%; }
.rack__floor{
  position:absolute; left:-6%; right:-6%; bottom:0; height:2px;
  background:oklch(0.945 0.011 85 / .18);
}
.rack__bar{
  position:absolute; left:2%; right:2%; top:14%;
  height:11px;
  background:linear-gradient(to bottom, var(--bone-2), var(--bone-3) 55%, oklch(0.4 0.02 60));
  transform:translate3d(0,var(--bar-y,0px),0);
  will-change:transform;
}
.rack__bar .plate{
  position:absolute; top:50%; width:22px; height:clamp(90px,16vh,170px);
  transform:translateY(-50%);
  background:linear-gradient(to right, var(--ink-2), var(--ink-3));
  border:1px solid oklch(0.945 0.011 85 / .3);
}
.rack__bar .plate--s{ height:clamp(60px,11vh,120px); width:16px; }
.rack__bar .plate:nth-child(1){ left:5%; }
.rack__bar .plate:nth-child(2){ left:calc(5% + 26px); }
.rack__bar .plate--r:nth-child(3){ right:calc(5% + 26px); left:auto; }
.rack__bar .plate--r:nth-child(4){ right:5%; left:auto; }

.serie__log{
  position:absolute; right:0; bottom:6%; z-index:3;
  display:flex; flex-direction:column; gap:.5rem; text-align:right;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
}
.serie__log li{
  color:oklch(0.945 0.011 85 / .18);
  transition:color .3s ease, transform .3s var(--ease-out);
  transform:translateX(8px);
}
.serie__log li.lit{ color:var(--bone-2); transform:translateX(0); }
.serie__log li.lit:last-child{ color:var(--ember); }

.serie__caption{
  margin:0; max-width:44ch; color:var(--bone-3); font-size:.9rem;
}

@media (max-width:760px){
  .serie{ height:400vh; }
  .serie__log{ position:static; text-align:left; align-items:flex-start; margin-top:1rem; }
  .rack{ inset:4% 2%; }
}

/* ---------- 8. Phases : quatre temps à l'horizontale ---------- */

.phases{ position:relative; z-index:2; height:360vh; }

.phases__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1.5rem,4vh,3.5rem);
  padding-top:4rem;
}
.phases__head{ padding-inline:var(--gut); }
.phases__head h2{ font-size:clamp(2.2rem,6vw,5rem); }

.phases__track{
  display:flex; align-items:flex-start;
  gap:clamp(1.25rem,3.4vw,3.5rem);
  padding-inline:var(--gut);
  transform:translate3d(var(--x,0px),0,0);
  will-change:transform;
}
.panel{
  flex:0 0 clamp(255px,33vw,440px);
  border-top:2px solid oklch(0.945 0.011 85 / .3);
  /* padding identique dans les deux états : l'étape active ne doit rien décaler */
  padding:1.25rem clamp(1rem,1.6vw,1.6rem) 2rem;
  background-color:transparent;
  transition:background-color .4s var(--ease-out), border-top-color .4s var(--ease-out);
}
.panel:nth-child(even){ margin-top:clamp(2rem,7vh,5.5rem); }
.panel__num{
  font-family:var(--display); font-size:clamp(2.5rem,5vw,4.5rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--bone-3);
  display:block; margin-bottom:.4rem;
}
.panel h3{ font-size:clamp(1.9rem,3.6vw,3.2rem); margin-bottom:.8rem; }
.panel p{ color:var(--bone-2); font-size:.95rem; }
.panel ul{ display:flex; flex-direction:column; gap:.3rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3); }
/* l'étape en cours : le cadre rouge suit la progression du rail */
.panel.is-active{ background-color:var(--blood); border-top-color:var(--ember); }
.panel.is-active p{ color:oklch(0.94 0.03 30); }
.panel.is-active ul{ color:oklch(0.86 0.06 35); }
.panel.is-active .panel__num{ -webkit-text-stroke-color:oklch(0.88 0.08 35); }
.panel p, .panel ul{ transition:color .4s var(--ease-out); }
.panel__num{ transition:-webkit-text-stroke-color .4s var(--ease-out); }

.phases__rail{
  margin-inline:var(--gut); height:2px;
  background:
    repeating-linear-gradient(90deg, oklch(0.945 0.011 85 / .45) 0 1px, transparent 1px 25%),
    oklch(0.945 0.011 85 / .16);
}
.phases__rail span{
  display:block; height:100%; background:var(--ember);
  transform:scaleX(var(--rail,0)); transform-origin:left;
}

@media (max-width:760px){
  .phases{ height:auto; }
  .phases__pin{ position:static; height:auto; padding:var(--stack-l) 0 var(--stack-m); }
  .phases__track{ flex-direction:column; transform:none !important; }
  .panel{ flex:auto; }
  .panel:nth-child(even){ margin-top:0; }
  .phases__rail{ display:none; }
}

/* ---------- 9. Révélations au scroll ---------- */

[data-reveal]{
  opacity:0; transform:translate3d(0,28px,0);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- 10. Preuves ---------- */

.preuves{
  position:relative; z-index:2;
  padding:var(--stack-l) var(--gut);
  border-top:1px solid oklch(0.945 0.011 85 / .14);
}
.preuves__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,3vw,3rem) clamp(1rem,2.5vw,2.5rem);
  align-items:end;
}
.stat{ grid-column:span 4; }
.stat--big{ grid-column:span 12; }
.stat .num{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(3.2rem,8vw,7.5rem); line-height:.82;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.stat--big .num{ font-size:clamp(5rem,17vw,15rem); color:var(--ember); }
.stat span{ display:block; margin-top:.6rem; color:var(--bone-2); font-size:.86rem; max-width:26ch; }
.preuves__foot{ margin:var(--stack-m) 0 0; color:var(--bone-3); font-size:.8rem; max-width:60ch; }
@media (max-width:760px){ .stat{ grid-column:span 6 } }

/* ---------- 11. Le coach ---------- */

.coach{
  position:relative; z-index:2;
  padding:var(--stack-l) var(--gut);
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,5rem);
  align-items:start;
}
.coach__portrait{ margin:0; position:sticky; top:22vh; }
.coach__portrait svg{ width:100%; height:auto; filter:contrast(1.1); }
.coach__portrait figcaption{
  margin-top:.7rem; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-3);
}
.coach__body h2{ font-size:clamp(3rem,9vw,8rem); margin-bottom:var(--stack-s); }
.coach__body .lede{ font-size:clamp(1.1rem,1.7vw,1.5rem); color:var(--bone); max-width:44ch; font-weight:600; }
.coach__body p{ color:var(--bone-2); max-width:56ch; }
.coach__facts{ margin:var(--stack-m) 0 0; display:grid; gap:1px; background:oklch(0.945 0.011 85 / .16); border-block:1px solid oklch(0.945 0.011 85 / .16); }
.coach__facts div{ background:var(--ink); display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,1fr); gap:1rem; padding:.9rem .2rem; }
.coach__facts dt{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-3); }
.coach__facts dd{ margin:0; font-size:.92rem; }
@media (max-width:860px){
  .coach{ grid-template-columns:1fr; }
  .coach__portrait{ position:static; max-width:280px; }
}

/* ---------- 12. Voix ---------- */

.voix{ position:relative; z-index:2; padding-block:var(--stack-m); }

.marquee{
  overflow:hidden; padding-block:clamp(.8rem,1.6vh,1.3rem);
  border-block:1px solid oklch(0.945 0.011 85 / .16);
  transform:translate3d(var(--nudge,0px),0,0);
}
.marquee__row{
  display:flex; align-items:center; gap:clamp(1.2rem,3vw,3rem);
  width:max-content; white-space:nowrap;
  animation:slide 34s linear infinite;
  will-change:transform;
}
.marquee[data-dir="-1"] .marquee__row{ animation-direction:reverse; }
.marquee span{
  font-family:var(--display); font-size:clamp(1.4rem,3.4vw,2.8rem);
  text-transform:uppercase; color:var(--bone);
}
.marquee i{ color:var(--blood); font-style:normal; font-size:.8rem; }
@keyframes slide{ to{ transform:translate3d(-50%,0,0) } }

.voix__cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(1.5rem,3vw,3.5rem);
  padding:var(--stack-m) var(--gut);
}
.voix__cards blockquote{ margin:0; }
.voix__cards blockquote:nth-child(2){ margin-top:clamp(1.5rem,5vh,4rem); }
.voix__cards blockquote:nth-child(3){ margin-top:clamp(3rem,10vh,8rem); }
.voix__cards p{
  font-size:clamp(1.05rem,1.6vw,1.35rem); font-weight:600; line-height:1.35;
  border-top:2px solid var(--blood); padding-top:1.1rem;
}
.voix__cards footer{ display:flex; flex-direction:column; gap:.15rem; }
.voix__cards footer b{ font-size:.9rem; }
.voix__cards footer span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3); }

/* ---------- 13. Offres ---------- */

.offres{ position:relative; z-index:2; padding:var(--stack-l) var(--gut); }
.offres__head{ margin-bottom:var(--stack-m); }
.offres__head h2{ font-size:clamp(2.6rem,8vw,7rem); }

.offres__list{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) minmax(0,1fr);
  gap:clamp(1rem,2.4vw,2.5rem); align-items:start;
}
.offre{
  border-top:2px solid oklch(0.945 0.011 85 / .28);
  padding-top:1.4rem;
  display:flex; flex-direction:column; gap:1rem;
}
.offre header h3{ font-size:clamp(1.5rem,2.6vw,2.3rem); }
.offre__price{ display:flex; align-items:baseline; gap:.35rem; margin:.5rem 0 0; }
.offre__price b{ font-family:var(--display); font-weight:400; font-size:clamp(2.4rem,5vw,4rem); line-height:1; }
.offre__price i{ font-style:normal; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3); }
.offre p{ color:var(--bone-2); font-size:.92rem; margin:0; }
.offre ul{ display:flex; flex-direction:column; gap:.45rem; font-size:.82rem; color:var(--bone-2); }
.offre li{ padding-left:1.1rem; position:relative; }
.offre li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:2px; background:var(--blood); }
.offre .btn{ align-self:flex-start; margin-top:auto; }

.offre--star{
  background:var(--blood); border-top-color:var(--ember);
  padding:1.4rem clamp(1.2rem,2vw,2.2rem) clamp(1.4rem,2vw,2.2rem);
  transform:translateY(clamp(-3.5rem,-4vw,-1.5rem));
  position:relative;
}
.offre--star p, .offre--star ul{ color:oklch(0.93 0.035 30); }
.offre--star li::before{ background:oklch(0.93 0.035 30); }
.offre--star .offre__price i{ color:oklch(0.88 0.06 32); }
.offre--star .btn--solid{ background:var(--bone); color:var(--ink); }
.offre__base{
  margin:.45rem 0 0; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:oklch(0.88 0.06 34);
}
.offre__tune{
  display:flex; flex-direction:column; gap:.6rem;
  border-top:1px solid oklch(0.94 0.03 30 / .35); padding-top:1rem;
}
.offre__tune label{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:oklch(0.9 0.05 32);
}
.offre__tune-row{ display:flex; align-items:center; gap:.9rem; }
.offre__tune input[type=range]{
  flex:1; min-width:0; accent-color:var(--bone); cursor:pointer;
}
.offre__tune output{
  font-family:var(--display); font-size:2rem; line-height:1;
  min-width:1.2ch; text-align:right; font-variant-numeric:tabular-nums;
}
.offre__tune-unit{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.25;
  color:oklch(0.88 0.06 34);
}
.offre__detail{
  margin:0; font-size:.76rem; letter-spacing:.04em;
  color:oklch(0.9 0.05 33); font-variant-numeric:tabular-nums;
}
.offre__flag{
  position:absolute; top:-1.9rem; left:0;
  background:var(--ember); color:var(--ink);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  padding:.35rem .7rem;
}
@media (max-width:860px){
  .offres__list{ grid-template-columns:1fr; }
  .offre--star{ transform:none; margin-top:2rem; }
}

/* ---------- 14. Engagement : la lumière revient ---------- */

.engage{
  position:relative; z-index:3;
  background:var(--bone); color:var(--ink);
  padding:var(--stack-l) var(--gut);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,6vw,6rem);
}
.engage h2{ font-size:clamp(2.8rem,8vw,7rem); margin-bottom:var(--stack-s); }
.engage .tag--light{ color:oklch(0.5 0.14 28); }
.engage__lede{ font-size:clamp(1.05rem,1.5vw,1.3rem); max-width:44ch; color:oklch(0.35 0.02 40); }
.engage__contact{ display:flex; flex-direction:column; gap:.6rem; margin-top:var(--stack-m); }
.engage__contact li{ display:grid; grid-template-columns:8rem 1fr; gap:1rem; border-top:1px solid oklch(0.145 0.018 25 / .16); padding-top:.6rem; font-size:.95rem; }
.engage__contact span{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:oklch(0.48 0.02 40); padding-top:.25em; }

.engage__form{ display:flex; flex-direction:column; gap:1.4rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:oklch(0.45 0.02 40); }
.field input[type=text], .field input[type=email], .field select{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; border-bottom:1px solid oklch(0.145 0.018 25 / .3);
  padding:.6rem 0; font:inherit; font-size:1.05rem; color:var(--ink);
  border-radius:0;
  transition:border-color .2s ease;
}
.field select{ background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 14px) 1.15rem, calc(100% - 8px) 1.15rem; background-size:6px 6px; background-repeat:no-repeat; }
.field input:focus, .field select:focus{ outline:0; border-bottom-color:var(--blood); }
.field input::placeholder{ color:oklch(0.62 0.02 50); }
.field--row{ flex-direction:row; align-items:center; gap:1rem; flex-wrap:wrap; }
.field--row input[type=range]{ flex:1; accent-color:var(--blood); min-width:140px; }
.field--row output{ font-family:var(--display); font-size:1.6rem; min-width:1.5ch; }
.field.invalid input{ border-bottom-color:var(--blood); }

.hold{
  position:relative; overflow:hidden; cursor:pointer;
  border:0; padding:1.25rem 2rem; margin-top:.6rem;
  background:var(--ink); color:var(--bone);
  font-family:var(--body); font-weight:700; font-size:.85rem;
  letter-spacing:.18em; text-transform:uppercase; text-align:center;
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
}
.hold__fill{
  position:absolute; inset:0; background:var(--blood);
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s var(--ease-out);
}
.hold.is-holding .hold__fill{ transform:scaleX(1); transition:transform 2s linear; }
.hold.is-done{ background:var(--blood); }
.hold.is-done .hold__fill{ transform:scaleX(1); transition:none; }
.hold__label{ position:relative; z-index:2; }
.hold__hint{ font-size:.76rem; color:oklch(0.48 0.02 40); margin:0; }
.form__status{ margin:0; font-size:.9rem; font-weight:700; min-height:1.4em; }
.form__status.ok{ color:oklch(0.45 0.17 145); }
.form__status.ko{ color:var(--blood); }
@media (max-width:860px){ .engage{ grid-template-columns:1fr } }

/* ---------- 15. Pied ---------- */

.foot{ position:relative; z-index:2; background:var(--bone); color:var(--ink); padding:0 var(--gut) var(--stack-m); overflow:hidden; }
.foot__big{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(4rem,21vw,20rem);
  /* Anton déborde de sa ligne : sans cette marge haute, le pied de page rogne les capitales */
  line-height:.92; padding-top:.08em;
  margin:0 0 clamp(1rem,3vh,2.5rem);
  letter-spacing:-.015em;
  color:var(--ink);
}
.foot__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:1.5rem; border-top:1px solid oklch(0.145 0.018 25 / .2); padding-top:1.5rem;
  font-size:.82rem; color:oklch(0.4 0.02 40);
}
.foot__cols a{ color:var(--ink); text-underline-offset:3px; }

.foot__by{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin:clamp(1.4rem,4vh,2.4rem) 0 0; padding-top:1.2rem;
  border-top:1px solid oklch(0.145 0.018 25 / .16);
  font-size:.8rem; color:oklch(0.42 0.02 40);
}
.foot__by a{
  display:inline-flex; align-items:center; gap:.55rem;
  text-decoration:none; color:var(--ink); font-weight:700;
}
.foot__by img{
  width:34px; height:34px; object-fit:contain;
  transition:transform .16s var(--ease-out);
}
.foot__ext{ width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:1.6; opacity:.55; }
@media (hover:hover) and (pointer:fine){
  .foot__by a:hover img{ transform:scale(1.08); }
  .foot__by a:hover b{ text-decoration:underline; text-underline-offset:4px; }
}
@media (prefers-reduced-motion:reduce){ .foot__by img{ transition:none; } }

/* ---------- 16. Mouvement réduit ---------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  #sweat{ display:none; }
  .grain{ animation:none; opacity:.22; }
  .hero__title{ animation:none; }
  .hero__title .ch{ transform:none; }
  .hero__kicker .dot, .hero__scroll path, .ecg polyline{ animation:none; }
  .ecg polyline{ stroke-dashoffset:0; }
  .marquee__row{ animation:none; }
  .marquee{ transform:none !important; }
  .serie__stage{ transform:none !important; }
  .heat{ transition:none; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .hold.is-holding .hold__fill{ transition:transform 2s linear; }
}

/* ---------- 17. HUD sur fond clair ---------- */

.on-light .hud{ background:linear-gradient(to bottom, oklch(0.945 0.011 85 / .96) 0 62%, transparent); }
.on-light .hud__forge, .on-light .hud__bpm b{ color:var(--ink); }
.on-light .hud__sub, .on-light .hud__bpm i, .on-light .gauge__label{ color:oklch(0.45 0.02 45); }
.on-light .hud__nav a{ color:oklch(0.32 0.02 40); }
.on-light .hud__nav a:hover{ color:var(--ink); }
.on-light .hud__cta{ color:var(--bone) !important; background:var(--blood); }
.on-light .gauge::before{ background:oklch(0.145 0.018 25 / .2); }

/* ---------- 18. Petits écrans ---------- */

@media (max-width:700px){
  .hud{ grid-template-columns:auto 1fr auto; gap:.5rem; padding:.7rem 1rem; }
  .hud__sub{ display:none; }
  .hud__forge{ font-size:1.05rem; }
  .hud__vitals{ justify-content:center; gap:.35rem; }
  .ecg{ width:46px; height:18px; }
  .hud__bpm b{ font-size:.95rem; }
  .hud__nav a:not(.hud__cta){ display:none; }
  .hud__cta{ padding:.5rem .8rem; font-size:.68rem; letter-spacing:.1em; }

  .hero{ padding-top:6rem; }
  .hero__kicker{ font-size:.6rem; letter-spacing:.22em; }
  .hero__scroll{ display:none; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; padding:1rem 1.2rem; }

  .manifeste__text{ max-width:none; }
  .manifeste__note{ margin-left:0; }
  .serie__log{ font-size:.66rem; }
  .voix__cards blockquote:nth-child(2),
  .voix__cards blockquote:nth-child(3){ margin-top:0; }
  .coach__facts div{ grid-template-columns:1fr; gap:.2rem; }
  .engage__contact li{ grid-template-columns:1fr; gap:.1rem; }
}

/* ---------- 19. Détails de finition ---------- */

/* les ancres ne passent plus sous le HUD fixe */
section[id], main[id]{ scroll-margin-top:clamp(4.5rem,9vh,6.5rem); }

body{ -webkit-tap-highlight-color:oklch(0.535 0.213 27 / .25); }

h1,h2,h3{ text-wrap:balance; }
p, .lede, blockquote p{ text-wrap:pretty; }

/* zones sûres sur les écrans à encoche */
.hud{ padding-left:max(var(--gut), env(safe-area-inset-left)); padding-right:max(var(--gut), env(safe-area-inset-right)); }
.hero{ padding-bottom:max(clamp(2rem,5vh,4rem), env(safe-area-inset-bottom)); }
.foot{ padding-bottom:max(var(--stack-m), env(safe-area-inset-bottom)); }

/* pas de débordement dans les grilles serrées */
.hud > *, .hero__foot > *, .coach__facts div > *{ min-width:0; }

/* le select natif ne doit pas hériter d'un thème sombre */
.field select{ background-color:var(--bone); color:var(--ink); }
.field select option{ background-color:var(--bone); color:var(--ink); }

.btn, .hold, .hud__cta{ touch-action:manipulation; }

/* un défilement décoratif doit pouvoir s'arrêter */
@media (hover:hover) and (pointer:fine){
  .marquee:hover .marquee__row{ animation-play-state:paused; }
}

.field.invalid label{ color:var(--blood); }