/* =========================================================
   Yoan Lesport — Coach sportif
   Feuille de style principale
   ========================================================= */

@font-face{font-family:'Anton';src:url(../fonts/anton-latin.woff2) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* le jeu « latin-ext » est déclaré AVANT le jeu « latin » : les deux se
   chevauchent sur quelques signes (dont le « œ »), et c'est le dernier
   déclaré qui gagne. Dans l'autre ordre, un seul « œ » suffisait à faire
   télécharger les 83 Ko de latin-ext pour rien. */
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-ext.woff2) format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';src:url(../fonts/inter-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- thème sombre (par défaut) ---------- */
:root{
  --bg:#050506;
  --bg2:#0c0c0f;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.58);
  --faint:rgba(255,255,255,.36);
  --line:rgba(255,255,255,.13);
  --hair:rgba(255,255,255,.07);
  --onacc:#0a0a0b;
  --veil1:rgba(5,5,6,.96);
  --veil2:rgba(5,5,6,.55);
  --shade:rgba(255,255,255,.05);
  --acc:#F5333F;
  --acc-rgb:245,51,63;
  --pad:clamp(20px,5vw,88px);
  --ease:cubic-bezier(.22,1,.36,1);
  /* échelle typographique (entiers → net) */
  --fs-micro:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:19px;
  /* arrondis & ombres */
  --r-sm:10px; --r-md:16px; --r-pill:999px;
  --shadow-soft:0 2px 8px rgba(0,0,0,.06),0 12px 32px -12px rgba(0,0,0,.16);
  --shadow-lift:0 40px 90px -32px rgba(0,0,0,.6);
  color-scheme:dark;
}
/* ---------- thème clair ---------- */
:root[data-theme="light"]{
  --bg:#F7F7F5;
  --bg2:#ffffff;
  --fg:#0B0B0C;
  --muted:rgba(11,11,12,.62);
  --faint:rgba(11,11,12,.42);
  --line:rgba(11,11,12,.14);
  --hair:rgba(11,11,12,.07);
  --onacc:#ffffff;
  --veil1:rgba(247,247,245,.97);
  --veil2:rgba(247,247,245,.6);
  --shade:rgba(11,11,12,.04);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* =========================================================
   CURSEUR PERSONNALISÉ (réticule « sport » — desktop uniquement)
   ========================================================= */
@media (pointer:fine){
  body.has-cursor,
  body.has-cursor a,body.has-cursor button,body.has-cursor label,
  body.has-cursor summary,body.has-cursor input,body.has-cursor select,
  body.has-cursor textarea,body.has-cursor .pick-drag{cursor:none}
}
.cur-ring,.cur-dot{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;will-change:transform;opacity:0;transition:opacity .3s ease}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--acc);border-radius:50%;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s ease,background .3s ease}
.cur-ring .tick{position:absolute;inset:-1px;animation:curSpin 5s linear infinite}
.cur-ring .tick::before{content:'';position:absolute;top:-3px;left:50%;width:2px;height:6px;margin-left:-1px;background:var(--acc);border-radius:1px}
@keyframes curSpin{to{transform:rotate(360deg)}}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--acc);z-index:9999}
.cur-ring.hover{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(var(--acc-rgb),.10)}
.cur-ring.grab{width:64px;height:64px;margin:-32px 0 0 -32px}
body.has-cursor.no-scroll .cur-ring,body.has-cursor.no-scroll .cur-dot{opacity:0}

body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;letter-spacing:-.005em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease;
}
body.is-loading{overflow:hidden;height:100vh}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acc);color:var(--onacc)}

/* ---------- utilitaires ---------- */
.display{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  text-transform:uppercase;line-height:.93;letter-spacing:.005em;
  transform:skewX(-7deg);transform-origin:left bottom;margin:0;
}
.display em{font-style:normal;color:var(--acc);text-transform:none;font-size:.82em;line-height:1}
.display .w{display:inline-block;will-change:transform}   /* titres révélés mot par mot */
.lbl{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.sec-head{padding:0 var(--pad);margin-bottom:clamp(38px,5vw,70px)}
.sec-head .lbl{margin-bottom:20px}
.sec-head h2{font-size:clamp(42px,8vw,110px)}

.btn-solid,.btn-ghost,.btn-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;font-weight:600;font-size:14px;letter-spacing:.01em;
  padding:15px 30px;transition:.45s var(--ease);white-space:nowrap;cursor:pointer;
}
.btn-solid{background:var(--acc);color:var(--onacc)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(var(--acc-rgb),.6)}
.btn-solid.sm{padding:12px 24px;font-size:13px}
.btn-solid.lg{padding:19px 42px;font-size:15px}
.btn-solid.full{width:100%;padding:17px 30px}
.btn-ghost{border:1px solid var(--line);color:var(--fg)}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
.btn-pill{background:var(--fg);color:var(--bg);padding:12px 26px;font-size:12px;letter-spacing:.06em}
.btn-pill:hover{background:var(--acc);color:var(--onacc)}

/* =========================================================
   LOADER
   ========================================================= */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
#loader.done{transform:translateY(-101%);transition:transform 1.05s var(--ease)}

/* lignes guides fines qui s'étirent en croix (façon plan technique) */
.ld-guides{position:absolute;inset:0;pointer-events:none}
.ld-guides i{position:absolute;background:var(--line)}
.ld-guides i:nth-child(1){left:0;right:0;top:50%;height:1px;transform:scaleX(0);animation:ldLineX 1.4s var(--ease) .1s forwards}
.ld-guides i:nth-child(2){top:0;bottom:0;left:50%;width:1px;transform:scaleY(0);animation:ldLineY 1.4s var(--ease) .2s forwards}
.ld-guides i:nth-child(3){left:0;right:0;top:calc(50% - 120px);height:1px;opacity:.5;transform:scaleX(0);animation:ldLineX 1.6s var(--ease) .35s forwards}
.ld-guides i:nth-child(4){left:0;right:0;top:calc(50% + 120px);height:1px;opacity:.5;transform:scaleX(0);animation:ldLineX 1.6s var(--ease) .35s forwards}
@keyframes ldLineX{to{transform:scaleX(1)}}
@keyframes ldLineY{to{transform:scaleY(1)}}

/* cercles concentriques + jauge + poignées */
.ld-core{position:relative;width:240px;height:240px}
.ld-rings{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ld-ring{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 5}
.ld-ring.r1{animation:ldSpin 26s linear infinite}
.ld-ring.r2{animation:ldSpin 20s linear infinite reverse}
.ld-ring.r3{animation:ldSpin 14s linear infinite}
@keyframes ldSpin{to{transform:rotate(360deg)}}
.ld-prog{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:703.7;stroke-dashoffset:703.7;transition:stroke-dashoffset .25s linear}
.ld-h{position:absolute;width:7px;height:7px;background:var(--acc)}
.ld-h.tl{top:4px;left:50%;margin-left:-3.5px}
.ld-h.tr{top:50%;right:4px;margin-top:-3.5px}
.ld-h.bl{bottom:4px;left:50%;margin-left:-3.5px}
.ld-h.br{top:50%;left:4px;margin-top:-3.5px}
.ld-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.ld-center b{font-family:'Anton',sans-serif;font-size:46px;transform:skewX(-7deg);line-height:1}
.ld-center i{font-style:normal;font-size:13px;color:var(--muted);margin-left:4px;align-self:flex-start;margin-top:8px}

.loader-mark{margin-top:34px;font-family:'Anton',sans-serif;text-transform:uppercase;transform:skewX(-7deg);line-height:.9;text-align:center;font-size:clamp(22px,3vw,32px)}
.loader-mark b{font-weight:400;color:var(--acc)}
.loader-sub{margin-top:12px;font-size:10px;letter-spacing:.4em;color:var(--faint);text-align:center}
.loader-bar{position:absolute;top:0;left:0;right:0;height:2px;background:var(--hair)}
.loader-bar i{display:block;height:100%;width:0;background:var(--acc)}

/* =========================================================
   SCÈNE 3D
   ========================================================= */
/* le canvas reste toujours affiché (il est transparent quand rien n'est dessiné) :
   le disque QUITTE l'écran, il ne s'efface jamais en fondu */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:11;pointer-events:none;opacity:1}
body.is-loading #scene{opacity:0}
#sceneGlow{
  position:fixed;inset:0;z-index:9;pointer-events:none;opacity:0;
  background:radial-gradient(52% 44% at 50% 46%,rgba(var(--acc-rgb),.20),transparent 72%);
  transition:opacity .9s ease,background .7s ease;
}
:root[data-theme="light"] #sceneGlow{background:radial-gradient(52% 44% at 50% 46%,rgba(var(--acc-rgb),.13),transparent 72%)}
body.scene-on #sceneGlow{opacity:1}

/* ---------- REPLI sans 3D ----------
   Si le navigateur ne sait pas faire de WebGL, js/scene.js pose la classe
   « no-3d ». On dessine alors, à la place du disque en relief, un disque plat
   aux mêmes couleurs : la page garde son allure et ne reste jamais vide. */
:root.no-3d #scene{display:none}
:root.no-3d #sceneGlow{opacity:1}
:root.no-3d #pick .pick-drag::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(46vh,44vw);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 50% 50%,var(--bg) 0 12%,transparent 12.5%),
    conic-gradient(from 210deg,#8f959e,#e6e9ee 12%,#9aa0a8 26%,#f2f4f7 40%,#8b9199 55%,#dfe3e9 70%,#93989f 84%,#e8ebf0 100%);
  box-shadow:0 26px 70px rgba(0,0,0,.45);
}
:root.no-3d #pick .pick-drag::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(46vh,44vw);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;
  border:3px solid rgba(var(--acc-rgb),.85);
}

/* =========================================================
   HEADER
   ========================================================= */
#header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad);
  transition:transform .5s var(--ease),background .4s ease,padding .4s ease;
  will-change:transform;
}
#header.hide{transform:translateY(-130%)}
#header.solid{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);padding-top:13px;padding-bottom:13px}
.hd-logo{font-family:'Anton',sans-serif;text-transform:uppercase;line-height:.82;font-size:17px;transform:skewX(-7deg)}
.hd-logo b{display:block;font-weight:400;color:var(--acc)}
.hd-right{display:flex;align-items:center;gap:20px}

.hd-theme{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.18em;color:var(--muted)}
.th-track{position:relative;width:34px;height:18px;border-radius:99px;border:1px solid var(--line);background:var(--shade);display:block}
.th-track i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--fg);transition:.45s var(--ease)}
:root[data-theme="light"] .th-track i{left:18px;background:var(--acc)}
.hd-theme:hover{color:var(--fg)}

.hd-menu{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.2em}
.hd-grid{display:grid;grid-template-columns:repeat(2,3px);gap:3px}
.hd-grid i{width:3px;height:3px;background:var(--fg);border-radius:1px;transition:.4s var(--ease)}
.hd-menu:hover .hd-grid i{background:var(--acc);transform:scale(1.5)}

.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:130}
.scroll-progress i{display:block;height:100%;width:0;background:var(--acc)}

/* =========================================================
   MENU OVERLAY
   ========================================================= */
#overlay{
  position:fixed;inset:0;z-index:200;background:var(--bg2);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--ease);
}
#overlay.open{clip-path:inset(0 0 0% 0)}
.ov-close{position:absolute;top:22px;right:var(--pad);font-size:11px;letter-spacing:.22em;display:flex;gap:10px;align-items:center}
.ov-close span{font-size:20px;line-height:1}
.ov-links{list-style:none;margin:0;padding:0}
.ov-links li{overflow:hidden;border-bottom:1px solid var(--line)}
.ov-links a{
  display:flex;align-items:baseline;gap:22px;padding:clamp(8px,1.2vw,16px) 0;
  font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(26px,4.6vw,56px);line-height:1.02;
  transform:translateY(105%) skewX(-7deg);transform-origin:left bottom;transition:color .4s ease;
}
#overlay.open .ov-links a{transform:translateY(0) skewX(-7deg);transition:transform .9s var(--ease)}
.ov-links li:nth-child(1) a{transition-delay:.08s}
.ov-links li:nth-child(2) a{transition-delay:.14s}
.ov-links li:nth-child(3) a{transition-delay:.2s}
.ov-links li:nth-child(4) a{transition-delay:.26s}
.ov-links li:nth-child(5) a{transition-delay:.32s}
.ov-links a i{font-family:'Inter',sans-serif;font-style:normal;font-size:12px;color:var(--faint);letter-spacing:.1em}
.ov-links a:hover{color:var(--acc)}
.ov-foot{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,70px);margin-top:clamp(30px,5vw,60px);opacity:0;transition:opacity .6s ease .5s}
#overlay.open .ov-foot{opacity:1}
.ov-foot .lbl{display:block;margin-bottom:5px}
.ov-foot a:hover{color:var(--acc)}

/* =========================================================
   01 · LE CHOIX
   ========================================================= */
#pick{
  position:relative;z-index:12;height:100svh;min-height:640px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:88px var(--pad) 26px;overflow:hidden;
}
.hud{position:absolute;inset:0;pointer-events:none;z-index:1}
.hud .c{position:absolute;width:16px;height:16px;border:1px solid var(--line)}
.hud .tlc{top:88px;left:calc(var(--pad) - 14px);border-right:0;border-bottom:0}
.hud .trc{top:88px;right:calc(var(--pad) - 14px);border-left:0;border-bottom:0}
.hud .blc{bottom:22px;left:calc(var(--pad) - 14px);border-right:0;border-top:0}
.hud .brc{bottom:22px;right:calc(var(--pad) - 14px);border-left:0;border-top:0}
.hud-letters{position:absolute;inset:0}
.hud-letters span{position:absolute;font-size:11px;letter-spacing:.2em;color:var(--faint);opacity:.5;transform:translate(-50%,-50%)}

.pick-top{position:relative;z-index:12;pointer-events:none}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.24em;color:var(--muted);margin:0 0 12px}
.eyebrow span{width:34px;height:1px;background:var(--acc)}
#pick h1{font-size:clamp(30px,4.4vw,60px)}

/* surface de glissement, au-dessus du canvas */
.pick-drag{
  position:absolute;left:0;right:0;top:20%;height:56%;z-index:13;
  cursor:grab;touch-action:pan-y;
}
.pick-drag.grabbing{cursor:grabbing}
.pick-drag:focus-visible{outline:2px solid rgba(var(--acc-rgb),.6);outline-offset:-10px;border-radius:var(--r-md)}
.pick-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:24px;line-height:1;color:var(--muted);
  background:color-mix(in srgb,var(--bg) 40%,transparent);backdrop-filter:blur(6px);
  transition:.4s var(--ease);
}
.pick-arrow:hover{color:var(--fg);border-color:var(--acc);transform:translateY(-50%) scale(1.06)}
.pick-arrow.prev{left:calc(var(--pad) - 6px)}
.pick-arrow.next{right:calc(var(--pad) - 6px)}

.pick-bottom{position:relative;z-index:12;display:grid;gap:18px;max-width:min(560px,60vw)}
.pick-name{pointer-events:none}
.pick-idx{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.pick-idx b{font-family:'Anton',sans-serif;font-size:15px;color:var(--acc);transform:skewX(-7deg);display:inline-block}
.pick-idx i{font-style:normal;font-size:11px;letter-spacing:.18em;color:var(--faint)}
#pickTitle{font-size:clamp(40px,5.6vw,80px);text-transform:none;line-height:.95}
#pickTag{margin:10px 0 0;color:var(--muted);font-size:clamp(15px,1.3vw,18px);max-width:480px}
.pick-desc{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.55;max-width:480px}
.pick-apport{display:block;margin:16px 0 0;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
.pick-points{list-style:none;margin:9px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;max-width:520px}
.pick-points li{position:relative;padding-left:16px;font-size:13px;color:var(--fg);opacity:.88;line-height:1.35}
.pick-points li::before{content:'';position:absolute;left:0;top:6px;width:6px;height:6px;background:var(--acc);border-radius:1px;transform:rotate(45deg)}
.pick-price{display:inline-block;margin-top:16px;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:19px;transform:skewX(-7deg);letter-spacing:.02em}
.pick-price i{font-family:'Inter',sans-serif;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--faint);transform:skewX(7deg);display:inline-block;margin-left:4px}

.pick-dots{display:flex;flex-wrap:wrap;gap:8px}
.pick-dots button{
  display:flex;align-items:center;gap:9px;padding:9px 18px;border:1px solid var(--line);
  border-radius:999px;font-size:12px;color:var(--muted);transition:.45s var(--ease);
}
.pick-dots button span{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;transition:.4s var(--ease)}
.pick-dots button:hover{color:var(--fg);border-color:var(--faint)}
.pick-dots button.on{background:var(--acc);border-color:var(--acc);color:var(--onacc)}
.pick-dots button.on span{opacity:1}

.pick-hint{display:flex;align-items:center;gap:10px;margin:0;font-size:10px;letter-spacing:.26em;color:var(--muted)}
.pick-hint .drag{
  width:26px;height:12px;border:1px solid var(--line);border-radius:99px;position:relative;flex:0 0 auto;
}
.pick-hint .drag::after{
  content:'';position:absolute;top:2px;left:2px;width:6px;height:6px;border-radius:50%;background:var(--acc);
  animation:slide 2.6s var(--ease) infinite;
}
@keyframes slide{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}

/* =========================================================
   02 · LA FICHE — les infos montent sur le disque
   Le disque occupe le bas de l'écran, très gros : on voit son arrondi barrer
   la page et le haut de son trou au ras du bord bas. Les blocs défilent de
   bas en haut, plusieurs à la fois, et sont INCLINÉS exactement comme lui
   (--dsk, recopié du rendu 3D) : ils semblent posés dessus et tourner avec.
   ========================================================= */
#dtVeil{
  position:fixed;inset:0;z-index:11;pointer-events:none;opacity:0;
  transition:opacity .7s var(--ease);
  background:radial-gradient(84% 56% at 50% 30%,var(--veil1) 0%,var(--veil2) 62%,transparent 100%);
}
body.in-detail #dtVeil{opacity:.55}

#detail{position:relative;z-index:12;height:calc(100svh + 6 * 76svh)}
.dt-pin{position:sticky;top:0;height:100svh;overflow:hidden}
/* centre de la roue = centre du disque 3D, tout en bas de l'écran */
.dt-wheel{
  position:absolute;left:50%;top:104%;width:0;height:0;
  transform:rotate(var(--phi,0rad));will-change:transform;
}
.dt-panels{position:absolute;left:0;top:0;width:0;height:0}
.dt-panel{position:absolute;left:0;top:0;width:0;height:0;opacity:0;visibility:hidden;transition:opacity .5s ease}
.dt-panel.on{opacity:1;visibility:visible}
.dt-copy{position:absolute;left:0;top:0;width:0;height:0}
.dt-media{display:none}          /* le visuel, c'est le disque */

/* Chaque bloc est COLLÉ au disque comme un rayon : il apparaît couché en bas
   à droite (+90°), remonte en tournant avec le disque, se redresse au sommet,
   puis redescend et s'en va en bas à gauche (−90°).
   🔴 transform-origin:0 0 — sinon CSS tourne autour du centre du bloc et tout
   le placement est faux. */
.dt-block{
  position:absolute;left:0;top:0;
  width:min(500px,44vw);
  transform-origin:0 0;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r,62vh))) translate(-50%,-50%);
  text-align:center;opacity:0;will-change:transform,opacity;
  text-shadow:0 2px 20px var(--bg),0 1px 6px var(--bg),0 0 44px var(--bg);
}
.dt-num{display:block;font-family:'Anton',sans-serif;font-size:13px;letter-spacing:.2em;color:var(--acc);margin-bottom:14px;transform:skewX(-7deg)}
.dt-sub{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:16px}
.dt-panel h2{font-size:clamp(30px,3.4vw,50px);transform-origin:center bottom}
.dt-tag{margin:18px 0 14px;font-size:clamp(17px,1.5vw,21px);font-weight:600}
.dt-txt{color:var(--muted);margin:0 auto 18px;font-size:16.5px;line-height:1.6;max-width:none}

.dt-list,.dt-check{list-style:none;margin:0;padding:0}
.dt-list li,.dt-check li{margin:0 0 11px;font-size:16px;line-height:1.5;color:var(--fg);opacity:.92}
.dt-list li::before,.dt-check li::before{content:'';display:inline-block;vertical-align:middle;margin:-2px 9px 0 0}
.dt-list li::before{width:6px;height:6px;background:var(--acc);border-radius:1px;transform:rotate(45deg)}
.dt-check li::before{width:10px;height:5px;border-left:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);transform:rotate(-45deg)}
.dt-cols{display:grid;grid-template-columns:1fr;gap:22px;text-align:center}
.dt-cols .dt-sub{text-align:center}

.dt-steps{list-style:none;margin:0;padding:0}
.dt-steps li{margin:0 0 20px}
.dt-steps i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--acc);display:block}
.dt-steps b{display:block;font-size:20px;margin:6px 0}
.dt-steps p{margin:0 auto;color:var(--muted);font-size:15.5px;line-height:1.5;max-width:none}

.dt-stats{list-style:none;margin:24px 0 0;padding:0}
.dt-stats li{display:inline-block;vertical-align:middle;margin:0 5px 8px;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 18px;background:var(--shade)}
.dt-stats b{display:block;font-family:'Anton',sans-serif;font-size:22px;line-height:1;transform:skewX(-7deg);color:var(--acc)}
.dt-stats span{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.dt-tags{list-style:none;margin:0;padding:0}
.dt-tags li{display:inline-block;margin:0 4px 8px;border:1px solid var(--line);border-radius:999px;padding:8px 17px;font-size:14px;color:var(--muted)}
.dt-figures ul{list-style:none;margin:0;padding:0}
.dt-figures li{margin:0 0 18px}
.dt-figures b{display:block;font-family:'Anton',sans-serif;font-size:clamp(24px,2.4vw,34px);line-height:1;transform:skewX(-7deg);color:var(--acc)}
.dt-figures span{display:block;margin-top:6px;font-size:14px;color:var(--muted)}
.dt-src{margin:14px 0 0;font-size:11px;color:var(--faint)}
.dt-foot{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.price{font-family:'Anton',sans-serif;font-size:24px;transform:skewX(-7deg);display:inline-block;text-transform:uppercase}
.price i{display:block;font-family:'Inter',sans-serif;font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin-top:4px}

/* =========================================================
   APPROCHE
   ========================================================= */
#approche{
  position:relative;z-index:12;background:var(--bg);
  display:grid;grid-template-columns:.85fr 1fr;gap:clamp(30px,5vw,80px);
  padding:clamp(90px,12vw,170px) var(--pad);align-items:center;
}
.ap-media{position:relative}
.ap-img{aspect-ratio:4/5;background-size:cover;background-position:center 22%;border-radius:var(--r-sm);filter:grayscale(1) contrast(1.08)}
/* ---------- carte du coach : s'agrandit au survol et donne le numéro ---------- */
.ap-badge{
  position:absolute;right:-14px;bottom:-24px;display:flex;align-items:center;gap:13px;
  background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:9px 22px 9px 9px;
  box-shadow:var(--shadow-soft);max-width:calc(100% + 14px);
  transition:border-radius .55s var(--ease),padding .55s var(--ease),
             border-color .45s ease,box-shadow .55s var(--ease),transform .55s var(--ease);
}
.apb-photo{display:block;flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;
  transition:width .55s var(--ease),height .55s var(--ease),border-radius .55s var(--ease)}
.ap-badge img{width:100%;height:100%;border-radius:0;object-fit:cover;object-position:center 22%;
  filter:grayscale(1) contrast(1.06);transition:filter .55s ease,transform .8s var(--ease)}
.apb-txt{display:flex;flex-direction:column;min-width:0}
.ap-badge b{display:block;font-size:14px;transition:font-size .5s var(--ease)}
.apb-role{font-size:11px;color:var(--faint);line-height:1.35}
.apb-tel{
  display:flex;align-items:center;gap:8px;font-family:'Anton',sans-serif;font-size:22px;color:var(--acc);
  letter-spacing:.02em;transform:skewX(-7deg) translateY(6px);white-space:nowrap;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease),opacity .4s ease,transform .55s var(--ease),margin .55s var(--ease);
}
.apb-tel i{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(var(--acc-rgb),.7);animation:apbPulse 2.4s infinite}
@keyframes apbPulse{70%{box-shadow:0 0 0 9px rgba(var(--acc-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),0)}}
.apb-cta{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease) .05s,opacity .4s ease .05s,margin .5s var(--ease)
}
@media (hover:hover) and (pointer:fine){
  .ap-badge:hover{
    border-radius:var(--r-md);padding:14px 26px 14px 14px;
    border-color:rgba(var(--acc-rgb),.45);box-shadow:var(--shadow-lift);transform:translateY(-4px);
  }
  .ap-badge:hover .apb-photo{width:132px;height:168px;border-radius:12px}
  .ap-badge:hover img{filter:grayscale(0) contrast(1.02);transform:scale(1.04)}
  .ap-badge:hover b{font-size:19px}
  .ap-badge:hover .apb-tel{max-height:44px;opacity:1;transform:skewX(-7deg) translateY(0);margin-top:12px}
  .ap-badge:hover .apb-cta{max-height:24px;opacity:1;margin-top:6px}
}
/* écrans tactiles : le numéro est visible en permanence */
@media (hover:none){
  .apb-tel{max-height:44px;opacity:1;transform:skewX(-7deg);margin-top:8px;font-size:19px}
}
.ap-badge:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.ap-copy .lbl{margin-bottom:20px}
.ap-copy h2{font-size:clamp(34px,5.2vw,78px)}
.ap-copy>p{color:var(--muted);max-width:560px;margin:26px 0 44px}
.ap-pillars{display:grid;gap:26px}
.ap-pillars div{padding-left:22px;border-left:1px solid var(--line)}
.ap-pillars i{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--acc);display:block;margin-bottom:6px}
.ap-pillars b{font-size:17px;display:block;margin-bottom:5px}
.ap-pillars p{margin:0;color:var(--muted);font-size:14px;max-width:460px}

/* =========================================================
   CHIFFRES
   ========================================================= */
#chiffres{position:relative;z-index:12;background:var(--bg);padding:0 var(--pad) clamp(70px,9vw,120px)}
#chiffres ul{
  list-style:none;margin:0;padding:clamp(38px,5vw,60px) 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:30px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
#chiffres li{text-align:center}
#chiffres b{font-family:'Anton',sans-serif;font-size:clamp(38px,5.5vw,76px);transform:skewX(-7deg);display:inline-block;line-height:1}
#chiffres .plus{font-family:'Anton',sans-serif;font-size:clamp(24px,3.2vw,44px);line-height:1;color:var(--acc);transform:skewX(-7deg);display:inline-block;margin-left:3px}
#chiffres em{display:block;font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:12px}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{position:relative;z-index:12;background:var(--acc);color:var(--onacc);overflow:hidden;padding:16px 0}
.mq-track{display:flex;width:max-content;animation:mq 42s linear infinite}
.mq-track span{font-family:'Anton',sans-serif;font-size:clamp(22px,2.6vw,38px);text-transform:uppercase;white-space:nowrap;padding-right:26px;transform:skewX(-7deg)}
@keyframes mq{to{transform:translateX(-50%)}}
/* second bandeau : sens inverse, fond neutre et texte accentué */
.marquee.rev{background:transparent;color:var(--fg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.marquee.rev .mq-track{animation:mqRev 52s linear infinite}
.marquee.rev .mq-track span{font-size:clamp(20px,2.2vw,32px);color:transparent;-webkit-text-stroke:1px var(--faint);transition:color .5s ease}
.marquee.rev:hover .mq-track span{color:var(--acc);-webkit-text-stroke-color:transparent}
@keyframes mqRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* =========================================================
   EXPERTISE
   ========================================================= */
#expertise{position:relative;z-index:12;background:var(--bg);padding:clamp(90px,12vw,160px) 0}
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ex-grid article{background:var(--bg);padding:clamp(28px,3vw,48px);transition:background .5s ease}
.ex-grid article:hover{background:var(--shade)}
.ex-grid i{font-style:normal;font-size:18px;color:var(--acc);display:block;margin-bottom:26px;transition:transform .5s var(--ease)}
.ex-grid article:hover i{transform:translate(4px,-4px)}
.ex-grid h3{font-size:19px;margin:0 0 12px;font-weight:600;line-height:1.25}
.ex-grid p{margin:0;color:var(--muted);font-size:14px}

/* =========================================================
   COMMENT ÇA SE PASSE
   ========================================================= */
#process{position:relative;z-index:12;background:var(--bg);padding:0 0 clamp(80px,10vw,140px);overflow:hidden}
.pr-wrap{position:relative;padding:0 var(--pad)}
.pr-line{position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--line)}
.pr-line i{display:block;height:100%;width:0;background:var(--acc);transform-origin:left center}
.pr-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.pr-steps li{
  position:relative;background:var(--bg);padding:clamp(26px,2.6vw,42px) clamp(20px,2vw,34px) clamp(34px,4vw,54px);
  transition:background .5s ease;
}
.pr-steps li::after{
  content:'';position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--acc);
  transition:width .7s var(--ease);
}
.pr-steps li:hover{background:var(--shade)}
.pr-steps li:hover::after{width:100%}
.pr-num{
  display:block;font-family:'Anton',sans-serif;font-size:clamp(40px,4.6vw,68px);line-height:.9;
  transform:skewX(-7deg);color:transparent;-webkit-text-stroke:1px var(--faint);margin-bottom:22px;
  transition:color .5s ease,-webkit-text-stroke-color .5s ease;
}
.pr-steps li:hover .pr-num{color:var(--acc);-webkit-text-stroke-color:transparent}
.pr-steps h3{margin:0 0 10px;font-size:19px;font-weight:600;line-height:1.25}
.pr-steps p{margin:0 0 18px;color:var(--muted);font-size:14px}
.pr-when{
  display:inline-block;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc);border:1px solid rgba(var(--acc-rgb),.35);border-radius:999px;padding:5px 12px;
}

/* =========================================================
   PARCOURS
   ========================================================= */
#parcours{position:relative;z-index:12;background:var(--bg);padding:0 0 clamp(80px,10vw,140px)}
.timeline{list-style:none;margin:0;padding:0 var(--pad)}
.timeline li{display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,4vw,60px);padding:30px 0;border-top:1px solid var(--line)}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline .yr{font-family:'Anton',sans-serif;font-size:26px;transform:skewX(-7deg);display:block;color:var(--faint);transition:color .4s ease}
.timeline .yr i{display:block;font-family:'Inter',sans-serif;font-style:normal;font-size:11px;letter-spacing:.16em;margin-top:4px}
.timeline li:hover .yr,.timeline li.now .yr{color:var(--acc)}
.timeline h3{margin:0 0 8px;font-size:19px;font-weight:600}
.timeline p{margin:0;color:var(--muted);font-size:14.5px;max-width:760px}
.timeline li.now h3::after{content:'EN POSTE';margin-left:12px;font-size:10px;letter-spacing:.16em;color:var(--onacc);background:var(--acc);padding:3px 8px;border-radius:99px;vertical-align:middle}

/* =========================================================
   GALERIE
   ========================================================= */
#galerie{position:relative;z-index:12;background:var(--bg);overflow:hidden;padding-bottom:clamp(80px,10vw,140px)}
.gl-head{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;padding:0 var(--pad) 26px}
.gl-head p{margin:0;color:var(--muted);font-size:14px}
.gl-track{display:flex;padding:0;width:max-content}
.gl-track+.gl-track{margin-top:14px}
.gl-track.auto{animation:glscroll 60s linear infinite;will-change:transform}
.gl-track.rev.auto{animation:glscrollRev 74s linear infinite}
.gl-track.auto:hover{animation-play-state:paused}
@keyframes glscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes glscrollRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.gl-track figure{
  position:relative;flex:0 0 clamp(230px,26vw,380px);aspect-ratio:3/4;margin:0 14px 0 0;border-radius:var(--r-sm);
  background-size:cover;background-position:center;filter:grayscale(.5);
  transition:filter .6s ease,transform .6s var(--ease);
}
.gl-track.rev figure{aspect-ratio:4/3;flex:0 0 clamp(240px,24vw,340px)}
.gl-track figure:hover{filter:grayscale(0);transform:scale(1.03)}
.gl-track figcaption{
  position:absolute;left:14px;bottom:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(5,5,6,.62);backdrop-filter:blur(6px);padding:6px 12px;border-radius:99px;
}

/* =========================================================
   FAQ
   ========================================================= */
#faq{position:relative;z-index:12;background:var(--bg);padding:0 0 clamp(80px,10vw,140px)}
.faq-list{padding:0 var(--pad)}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-of-type{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;padding:26px 46px 26px 0;position:relative;font-size:clamp(16px,1.7vw,21px);font-weight:500;transition:color .35s ease}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--acc)}
.faq-list summary i{position:absolute;right:2px;top:50%;width:14px;height:14px;margin-top:-7px}
.faq-list summary i::before,.faq-list summary i::after{content:'';position:absolute;background:currentColor;transition:.4s var(--ease)}
.faq-list summary i::before{left:0;top:6px;width:14px;height:1.5px}
.faq-list summary i::after{left:6px;top:0;width:1.5px;height:14px}
.faq-list details[open] summary i::after{transform:rotate(90deg);opacity:0}
.faq-list details[open] summary{color:var(--acc)}
.faq-list p{margin:0 0 28px;color:var(--muted);max-width:820px;font-size:15px}

/* =========================================================
   APPEL FINAL
   ========================================================= */
#cta{position:relative;z-index:12;background:var(--bg);text-align:center;padding:clamp(70px,9vw,120px) var(--pad) clamp(80px,10vw,140px);border-top:1px solid var(--line);overflow:hidden}
#cta h2{position:relative;z-index:2;font-size:clamp(40px,7vw,100px);display:inline-block;transform-origin:center bottom}
#cta p{position:relative;z-index:2;color:var(--muted);margin:24px 0 34px}
/* ondes concentriques qui pulsent derrière l'appel final */
.cta-rings{position:absolute;left:50%;top:50%;width:min(760px,88vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.cta-rings i{
  position:absolute;inset:0;border:1px solid rgba(var(--acc-rgb),.30);border-radius:50%;
  transform:scale(.35);opacity:0;animation:ctaWave 6s var(--ease) infinite;
}
.cta-rings i:nth-child(2){animation-delay:2s}
.cta-rings i:nth-child(3){animation-delay:4s}
@keyframes ctaWave{0%{transform:scale(.32);opacity:0}12%{opacity:.85}100%{transform:scale(1);opacity:0}}
.cta-btns{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.magnet{display:inline-block;will-change:transform}
.cta-tel{
  display:inline-flex;align-items:center;gap:11px;font-family:'Anton',sans-serif;
  font-size:clamp(22px,2.4vw,30px);transform:skewX(-7deg);letter-spacing:.02em;transition:color .4s ease;
}
.cta-tel i{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(var(--acc-rgb),.7);animation:apbPulse 2.4s infinite}
.cta-tel:hover{color:var(--acc)}

/* =========================================================
   FOOTER
   ========================================================= */
footer{position:relative;z-index:12;background:var(--bg);border-top:1px solid var(--line);padding:clamp(46px,6vw,72px) var(--pad) 32px}
.ft-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:34px;padding-bottom:44px}
.ft-mark{position:relative;display:inline-block;font-family:'Anton',sans-serif;text-transform:uppercase;line-height:.82;font-size:clamp(30px,5vw,58px);transform:skewX(-7deg)}
.ft-mark b{display:block;font-weight:400;color:var(--acc)}
/* le nom se « remplit » de gauche à droite au fil du scroll */
.ft-mark.ft-outline>span,.ft-mark.ft-outline>b{color:transparent;-webkit-text-stroke:1px var(--faint)}
.ft-fill{position:absolute;left:0;top:0;width:100%;pointer-events:none;clip-path:inset(0 100% 0 0);will-change:clip-path}
.ft-fill>span{color:var(--fg)}
.ft-fill>b{display:block;font-weight:400;color:var(--acc)}
.ft-info{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:34px}
.ft-info .lbl{display:block;margin-bottom:5px}
.ft-info a{font-size:16px}
.ft-info a:hover{color:var(--acc)}
.ft-info li>span:not(.lbl){font-size:14px;color:var(--muted)}
.ft-bot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:24px;font-size:12px;color:var(--faint)}
.ft-bot nav{display:flex;gap:24px;flex-wrap:wrap}
.ft-bot button:hover,.ft-bot a:hover{color:var(--acc)}

/* =========================================================
   PANNEAU CONTACT
   ========================================================= */
.panel[hidden]{display:none}
.panel{position:fixed;inset:0;z-index:300;background:rgba(2,2,3,.6);backdrop-filter:blur(6px);display:flex;justify-content:flex-end}
.panel-box{
  width:min(560px,100%);background:var(--bg2);height:100%;overflow:auto;
  padding:clamp(28px,4vw,54px);border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .6s var(--ease);
  box-shadow:var(--shadow-lift);will-change:transform;
}
.panel.open .panel-box{transform:translateX(0)}
.panel-close{position:absolute;top:18px;right:20px;font-size:30px;line-height:1;color:var(--faint);z-index:2}
.panel-close:hover{color:var(--fg)}
.panel-box h3{font-size:clamp(34px,4vw,54px);margin:16px 0 0}
.ct-intro{color:var(--muted);margin:20px 0 28px;font-size:15px}
.ct-info{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:16px}
.ct-info li{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line);padding-left:18px}
.ct-info a{font-size:19px;transition:color .3s ease}
.ct-info a:hover{color:var(--acc)}

.ct-form{display:grid;gap:16px}
.ct-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-form label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ct-form label small{text-transform:none;letter-spacing:0;opacity:.7}
.ct-form input,.ct-form select,.ct-form textarea{
  width:100%;margin-top:9px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;color:var(--fg);font:inherit;font-size:15px;letter-spacing:0;text-transform:none;
  transition:border-color .35s ease;
}
.ct-form textarea{resize:vertical;min-height:104px}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{outline:0;border-color:var(--acc)}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:var(--faint);opacity:.7}
.ct-form input.err,.ct-form textarea.err{border-color:#ff5a4d}
.ct-form .check{display:flex;align-items:flex-start;gap:11px;text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted);line-height:1.5}
.ct-form .check input{width:17px;height:17px;margin:1px 0 0;flex:0 0 17px;accent-color:var(--acc)}
.ct-note{font-size:12px;color:var(--faint);margin:0}
.ct-ok[hidden]{display:none}
.ct-ok{font-size:13px;color:var(--acc);margin:0;padding:14px 16px;border:1px solid rgba(var(--acc-rgb),.4);border-radius:var(--r-sm)}
.ct-ok a{text-decoration:underline}

/* =========================================================
   MODALES
   ========================================================= */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:310;background:rgba(2,2,3,.8);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-md);max-width:720px;width:100%;max-height:82vh;overflow:auto;padding:clamp(28px,4vw,52px);box-shadow:var(--shadow-lift)}
.modal-close{position:absolute;top:14px;right:20px;font-size:26px;line-height:1;color:var(--faint)}
.modal-close:hover{color:var(--fg)}
.modal-box h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:26px;transform:skewX(-7deg);margin:0 0 24px}
.modal-box p{color:var(--muted);font-size:14px;margin:0 0 20px}
.modal-box b{color:var(--fg);font-weight:600}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  #approche{grid-template-columns:1fr}
  .ap-badge{right:auto;left:14px}
  .ex-grid{grid-template-columns:repeat(2,1fr)}
  .pr-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  #pick{padding-top:104px;justify-content:space-between}
  #pick h1{font-size:clamp(30px,8vw,46px)}
  .pick-drag{top:22%;height:40%}
  .pick-arrow{width:44px;height:44px;font-size:22px}
  #pickTitle{font-size:clamp(34px,11vw,56px)}
  .pick-hint{font-size:9px;letter-spacing:.18em}
  .hud-letters{display:none}
  .eyebrow{font-size:9px;letter-spacing:.16em}


  /* sur petit écran : le rond doit tenir MÊME incliné (les coins débordent) */
  .pr-steps{grid-template-columns:1fr}
  .gl-track.rev figure{aspect-ratio:3/4}
  #chiffres ul{grid-template-columns:repeat(2,1fr);gap:38px 20px}
  .ex-grid{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:10px}
  .ct-form .row{grid-template-columns:1fr}
  .ft-top{flex-direction:column}
  .ap-badge{position:static;margin-top:18px;display:inline-flex}
  .panel-box{width:100%}
}
@media (max-width:820px){
  .dt-wheel{top:105%}
  .dt-block{width:82vw;--r:52vh}
  .dt-panel h2{font-size:clamp(26px,7vw,38px)}
  .dt-cols{grid-template-columns:1fr;gap:20px}
  .dt-steps b{font-size:16px}
  .dt-steps p,.dt-list li,.dt-check li{font-size:14px}
  .dt-shots{width:86vw;gap:8px}
}
@media (max-width:600px){
  .hd-menu-txt,.th-lbl{display:none}
  .hd-logo{font-size:15px}
  .btn-pill{padding:10px 20px}
  .hd-right{gap:14px}
  .pick-arrow{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}