/* ==========================================================================
   ESPACE CARDIO — Saint-Étienne
   Direction : « Chaud / Froid » — le site passe du carbone (l'effort)
   à l'immersion bleue (la récupération). La ligne d'eau est la signature.
   ========================================================================== */

:root{
  /* --- Zone effort (carbone) --- */
  --noir:        #0C1113;
  --carbone:     #141B1E;
  --carbone-2:   #1E282C;
  --turquoise:   #4FD6CE;
  --turquoise-d: #2BA39C;

  /* --- Zone eau (immersion) --- */
  --abysse:      #04121C;
  --abysse-2:    #082436;
  --aqua:        #7FE3F0;
  --bleu:        #1B7A9B;
  /* Palette « planning » : une couleur franche par cours, réutilisée entre
     les 4 thèmes (un seul panneau visible à la fois, donc pas d'ambiguïté).
     Choisies pour rester bien distinctes les unes des autres, jamais des
     nuances trop proches. */
  --azur:        #3FA9F5;
  --mauve:       #C9A6F0;
  --lagon:       #3FD9B0;
  --cerise:      #E4463A;
  --corail:      #F4738E;

  /* --- Accent chaud, réservé sauna / hammam --- */
  --braise:      #E8734A;
  --braise-pale: #F2A98C;

  /* --- Neutres --- */
  --or:     #F2B45C;   /* étoiles Google — la seule touche dorée */

  --craie:  #F1F5F4;
  --gris:   #AAB8BA;
  --gris-d: #7B8A8C;
  --ligne:  rgba(255,255,255,.15);

  /* --- Typo --- */
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body:    'Manrope', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- Rythme --- */
  --gutter: 6vw;
  --max:    1280px;
  --ease:   cubic-bezier(.22,1,.36,1);

  /* piloté par le JS */
  --scroll-progress: 0;
  --water: 0;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--noir);color:var(--craie);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
@media (hover:none){*{-webkit-tap-highlight-color:transparent}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--turquoise);color:var(--noir)}
:focus-visible{outline:2px solid var(--turquoise);outline-offset:4px;border-radius:4px}

/* Smooth scroll natif si Lenis n'est pas chargé */
html:not(.lenis){scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* ==========================================================================
   1. TYPOGRAPHIE
   ========================================================================== */
h1,h2,h3,.disp{font-family:var(--display);text-transform:uppercase;line-height:.9;letter-spacing:.005em;font-weight:800}
.data{font-family:var(--mono);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--turquoise);
  margin-bottom:22px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}

.title{font-size:clamp(2.7rem,7vw,5.4rem);margin-bottom:20px}
.title .thin{font-weight:500;color:var(--gris)}
.lede{color:var(--gris);max-width:56ch;font-size:1.06rem}

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */
.wrap{max-width:var(--max);margin:0 auto;width:100%}
.section{padding:clamp(80px,11vw,150px) var(--gutter);position:relative;
  /* Nappes de couleur : le fond respire au lieu d'être un noir plat */
  background:
    radial-gradient(58% 46% at 88% 2%,rgba(79,214,206,.13),transparent 62%),
    radial-gradient(54% 46% at 2% 98%,rgba(27,122,155,.19),transparent 62%)}
#avis{background:
  radial-gradient(52% 44% at 6% 4%,rgba(232,115,74,.13),transparent 62%),
  radial-gradient(58% 50% at 96% 92%,rgba(79,214,206,.15),transparent 62%)}
#infos{background:
  radial-gradient(56% 48% at 92% 6%,rgba(127,227,240,.13),transparent 62%),
  radial-gradient(54% 46% at 4% 96%,rgba(43,163,156,.17),transparent 62%)}
.section + .section{padding-top:0}

/* ==========================================================================
   3. GRAIN + VIGNETTE (atmosphère)
   ========================================================================== */
.grain{
  position:fixed;inset:-50%;z-index:9990;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-2%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}
}

@media (hover:none){.grain{animation:none;opacity:.03}}

/* ==========================================================================
   4. CURSEUR SUR-MESURE
   ========================================================================== */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9995;pointer-events:none;border-radius:50%;
  transform:translate3d(-100px,-100px,0);opacity:0;transition:opacity .3s}
.cursor{width:36px;height:36px;border:1px solid rgba(79,214,206,.55);margin:-18px 0 0 -18px;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),
             background .35s var(--ease),border-color .35s var(--ease),opacity .3s}
.cursor-dot{width:5px;height:5px;background:var(--turquoise);margin:-2.5px 0 0 -2.5px}
.cursor .lbl{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--noir);opacity:0;transition:opacity .2s}
body.cursor-on .cursor,body.cursor-on .cursor-dot{opacity:1}
body.cursor-grow .cursor{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--turquoise);border-color:var(--turquoise)}
body.cursor-grow .cursor .lbl{opacity:1}
body.cursor-grow .cursor-dot{opacity:0}
body.in-water .cursor{border-color:rgba(127,227,240,.6)}
body.in-water .cursor-dot{background:var(--aqua)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ==========================================================================
   5. PRÉLOADER — tracé cardio
   ========================================================================== */
.loader{position:fixed;inset:0;z-index:9999;background:var(--noir);
  display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
.loader.done{opacity:0;visibility:hidden}
.loader-in{width:min(440px,72vw);text-align:center}
.loader svg{width:100%;height:70px;overflow:visible}
.loader path{fill:none;stroke:var(--turquoise);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:trace 2.2s var(--ease) forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.loader-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-d)}
.loader-meta b{font-weight:500;color:var(--turquoise);font-size:.95rem}

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;height:70px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.hdr.stuck{background:rgba(12,17,19,.66);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--ligne)}
body.in-water .hdr.stuck{background:rgba(4,18,28,.72)}
.hdr-bar{position:absolute;left:0;bottom:-1px;height:1px;background:var(--turquoise);
  width:100%;transform:scaleX(var(--scroll-progress));transform-origin:0 50%;opacity:.85}
body.in-water .hdr-bar{background:var(--aqua)}

.logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;
  font-size:1.3rem;text-transform:uppercase;letter-spacing:.03em;line-height:1}
.logo svg{width:32px;height:32px;flex:none}
.logo em{font-style:normal;color:var(--turquoise);transition:color .5s}
body.in-water .logo em{color:var(--aqua)}

.nav{display:flex;gap:28px;font-size:.86rem;font-weight:600}
.nav a{color:var(--gris);position:relative;padding:4px 0;transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--turquoise);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease)}
.nav a:hover{color:var(--craie)}
.nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
/* Lien actif : section courante pendant le scroll */
.nav a.active{color:var(--craie)}
.nav a.active::after{transform:scaleX(1);transform-origin:0 50%}
body.in-water .nav a.active::after{background:var(--aqua)}

.btn{display:inline-flex;align-items:center;gap:10px;position:relative;overflow:hidden;
  background:var(--turquoise);color:var(--noir);font-weight:800;font-size:.88rem;
  padding:13px 26px;border-radius:100px;isolation:isolate;
  transition:color .4s var(--ease),box-shadow .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--craie);
  transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{box-shadow:0 14px 40px -10px rgba(79,214,206,.5)}
.btn.ghost{background:transparent;color:var(--craie);border:1px solid rgba(255,255,255,.24)}
.btn.ghost::before{background:var(--craie)}
.btn.ghost:hover{color:var(--noir);box-shadow:none}
.btn.lg{padding:18px 38px;font-size:.95rem}

.nav-foot{display:none}
.burger{display:none;width:40px;height:40px;position:relative}
.burger i{position:absolute;left:9px;width:22px;height:1.5px;background:var(--craie);transition:.35s var(--ease)}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:23px}
.nav.open ~ .burger i:nth-child(1),.burger.open i:nth-child(1){top:19px;transform:rotate(45deg)}
.burger.open i:nth-child(2){top:19px;transform:rotate(-45deg)}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:130px var(--gutter) 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg .media{position:absolute;inset:-8%;border:0;border-radius:0;
  transform:scale(calc(1 + var(--hero-zoom,0) * .18)) translateY(calc(var(--hero-zoom,0) * 4vh));
  will-change:transform}
/* La photo doit se voir. Le voile est donc concentré là où il sert — sous le
   titre et le paragraphe — et lâche complètement dans la moitié haute, où il
   n'y a rien à protéger. L'ancien réglage assombrissait toute l'image pour
   sécuriser un texte qui n'occupe que le bas de l'écran. */
.hero-bg .media img{filter:brightness(1.2) contrast(1.02) saturate(1.06)}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,
    var(--noir) 0%,
    rgba(12,17,19,.88) 16%,
    rgba(12,17,19,.52) 34%,
    rgba(12,17,19,.14) 58%,
    rgba(12,17,19,.06) 82%,
    rgba(12,17,19,.3) 100%)}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(115% 75% at 50% 100%,transparent 55%,rgba(12,17,19,.34) 100%)}

.hero-in{position:relative;z-index:3;max-width:var(--max);margin:0 auto;width:100%;padding-bottom:46px}
.kicker{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:.72rem;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--turquoise);margin-bottom:26px}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--turquoise);
  box-shadow:0 0 0 0 rgba(79,214,206,.6);animation:beat 1.8s infinite}
@keyframes beat{
  0%{box-shadow:0 0 0 0 rgba(79,214,206,.55)}
  14%{transform:scale(1.35)}28%{transform:scale(1)}
  70%{box-shadow:0 0 0 14px rgba(79,214,206,0)}100%{box-shadow:0 0 0 0 rgba(79,214,206,0)}
}

.hero h1{font-size:clamp(3.2rem,11.5vw,9.5rem);font-weight:900;line-height:.84}
.hero h1 .tq{color:var(--turquoise)}
/* « RELÂCHER » se remplit d'eau au scroll — signature du concept */
.hero h1 .flood{
  color:transparent;-webkit-text-stroke:1.4px rgba(237,242,241,.85);
  background-image:linear-gradient(to top,var(--aqua) 0%,var(--turquoise) 100%);
  background-repeat:no-repeat;
  background-size:100% calc(var(--flood,0) * 118%);
  background-position:0 100%;
  -webkit-background-clip:text;background-clip:text;
}
@supports not (-webkit-text-stroke:1px red){.hero h1 .flood{color:var(--gris)}}

.hero p{max-width:52ch;color:#D6E0E1;font-size:1.08rem;margin:26px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

.scroll-cue{position:absolute;right:var(--gutter);bottom:120px;z-index:3;display:flex;align-items:center;gap:12px;
  writing-mode:vertical-rl;font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gris-d)}
.scroll-cue span{display:block;width:1px;height:64px;background:linear-gradient(var(--turquoise),transparent);
  animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:0 0}50%{transform:scaleY(1);transform-origin:0 0}
  51%{transform:scaleY(1);transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}

/* ==========================================================================
   8. MARQUEE (vitesse pilotée par le scroll)
   ========================================================================== */
.marquee{position:relative;z-index:3;overflow:hidden;padding:20px 0;
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  background:linear-gradient(90deg,rgba(12,17,19,.72),rgba(20,34,39,.66) 50%,rgba(12,17,19,.72))}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-track span{font-family:var(--display);font-weight:700;font-size:1.5rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--gris);display:flex;align-items:center;gap:40px;padding-right:40px;white-space:nowrap}
.marquee-track span::after{content:"";width:6px;height:6px;background:var(--turquoise);
  transform:rotate(45deg);flex:none}

/* ==========================================================================
   9. CHIFFRES
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.stat{background:var(--carbone);padding:38px 30px;position:relative;overflow:hidden}
/* Chaque chiffre porte sa propre teinte : c'est ce qui casse le bloc noir */
.stat:nth-child(1){background:linear-gradient(160deg,rgba(79,214,206,.14),transparent 60%),var(--carbone)}
.stat:nth-child(2){background:linear-gradient(160deg,rgba(127,227,240,.13),transparent 60%),var(--carbone)}
.stat:nth-child(3){background:linear-gradient(160deg,rgba(27,122,155,.24),transparent 60%),var(--carbone)}
.stat:nth-child(4){background:linear-gradient(160deg,rgba(232,115,74,.14),transparent 60%),var(--carbone)}
.stat:nth-child(2)::after{background:var(--aqua)}
.stat:nth-child(3)::after{background:var(--bleu)}
.stat:nth-child(4)::after{background:var(--braise)}
.stat:nth-child(2) b .u{color:var(--aqua)}
.stat:nth-child(3) b .u{color:var(--aqua)}
.stat:nth-child(4) b .u{color:var(--braise)}
.stat::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--turquoise);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease) .2s}
.stat.is-in::after{transform:scaleX(1)}
.stat b{font-family:var(--display);font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:800;color:var(--craie);
  display:block;line-height:1;letter-spacing:-.01em}
.stat b .u{color:var(--turquoise);font-size:.55em;margin-left:2px}
.stat small{display:block;margin-top:10px;color:var(--gris-d);font-family:var(--mono);font-size:.7rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}

/* ==========================================================================
   10. MÉDIAS / PLACEHOLDERS INTELLIGENTS
   Si la photo n'existe pas encore, le cadre affiche le brief de shooting.
   ========================================================================== */
.media{position:relative;overflow:hidden;border-radius:2px;background:var(--carbone);isolation:isolate}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter 1.2s var(--ease)}
/* Les intérieurs de la salle sont shootés en lumière basse : un léger coup de
   clair sur tous les cadres, sinon la grille bento vire au noir sur noir. */
.bento .media img,.section .media img{filter:brightness(1.12) contrast(1.02) saturate(1.05)}
.bento .media:hover img,.section .media:hover img{filter:brightness(1.2) contrast(1.03) saturate(1.08)}
.media figcaption{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;
  padding:22px;font-family:var(--mono);font-size:.74rem;line-height:1.7;color:rgba(237,242,241,.5);
  background:repeating-linear-gradient(45deg,var(--carbone),var(--carbone) 12px,var(--carbone-2) 12px,var(--carbone-2) 24px);
  border:1px dashed rgba(79,214,206,.35);
}
.media figcaption b{display:block;color:var(--turquoise);font-family:var(--display);font-size:1.05rem;
  letter-spacing:.14em;margin-bottom:8px;text-transform:uppercase}
.media.is-empty img{opacity:0}
.media.is-empty figcaption{display:flex}
.media.zoom:hover img{transform:scale(1.05)}
/* Cadres purement décoratifs : le brief reste lisible sans polluer le titre */
.hero-bg .media figcaption,.balneo-bg .media figcaption{opacity:.32;border-color:rgba(79,214,206,.15)}

/* Rideau de révélation */
.media.veil::after{content:"";position:absolute;inset:0;background:var(--noir);z-index:2;
  transform:scaleY(1);transform-origin:0 100%;transition:transform 1.1s var(--ease)}
.media.veil.is-in::after{transform:scaleY(0)}

/* ==========================================================================
   11. LA SALLE — grille bento
   ========================================================================== */
.bento{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:repeat(2,minmax(180px,32vh));
  gap:12px;margin:56px 0 0;perspective:1400px}
.bento .media:nth-child(1){grid-row:span 2}
.bento .media{min-height:180px}
/* Tilt 3D léger au survol (souris fine uniquement, piloté en JS via --rx/--ry) */
.bento .media{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease)}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);
  margin-top:12px;border:1px solid var(--ligne)}
.feature{background:var(--carbone);padding:32px 26px 34px;position:relative;overflow:hidden;
  transition:background .45s var(--ease)}
.feature:hover{background:var(--carbone-2)}
/* Halo qui suit le curseur — la trace « produit premium », pas juste un survol plat */
.feature::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(79,214,206,.16),transparent 72%);
  transition:opacity .45s var(--ease)}
.feature:hover::before{opacity:1}
.feature .ico,.feature b,.feature p{position:relative;z-index:1}
.feature .ico{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(79,214,206,.3);
  border-radius:50%;color:var(--turquoise);margin-bottom:22px}
/* Les quatre atouts ne parlent pas de la même chose : ils ne portent pas la
   même couleur non plus (effort → eau → chaleur). */
.feature:nth-child(2) .ico{color:var(--aqua);border-color:rgba(127,227,240,.34)}
.feature:nth-child(3) .ico{color:var(--braise);border-color:rgba(232,115,74,.34)}
.feature:nth-child(4) .ico{color:var(--aqua);border-color:rgba(127,227,240,.34)}
.feature:nth-child(2)::before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(127,227,240,.16),transparent 72%)}
.feature:nth-child(3)::before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(232,115,74,.15),transparent 72%)}
.feature:nth-child(4)::before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(127,227,240,.16),transparent 72%)}
.feature b{font-family:var(--display);font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase;display:block;margin-bottom:8px}
.feature p{color:var(--gris);font-size:.92rem;line-height:1.6}

/* ==========================================================================
   12. COURS COLLECTIFS — défilement horizontal épinglé
   ========================================================================== */
.cours{position:relative;background:
  radial-gradient(62% 55% at 6% 10%,rgba(79,214,206,.14),transparent 62%),
  radial-gradient(62% 58% at 94% 90%,rgba(27,122,155,.26),transparent 62%),
  var(--carbone)}
.cours-stage{height:560vh;position:relative} /* 12 cartes désormais (contre 8) : plus de distance à parcourir pour garder le même rythme de défilement */
.cours-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding:90px 0 60px}
.cours-head{padding:0 var(--gutter);max-width:var(--max);margin:0 auto 40px;width:100%}
.cours-rail{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cours-rail::-webkit-scrollbar{display:none}
html.js .cours-rail{overflow:hidden}
.cours-track{display:flex;gap:14px;padding:0 var(--gutter);width:max-content;will-change:transform}

.cours-card{width:min(320px,74vw);flex:none;border:1px solid var(--ligne);
  background:linear-gradient(168deg,var(--carbone-2),var(--carbone) 62%);
  padding:28px 26px 30px;display:flex;flex-direction:column;min-height:340px;position:relative;overflow:hidden;
  transform:translateY(0) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:border-color .45s var(--ease),transform .5s var(--ease)}
.cours-card::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--turquoise);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.cours-card:hover{border-color:rgba(79,214,206,.4);
  transform:translateY(-5px) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.cours-card:hover::before{transform:scaleX(1)}
.cours-card .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--turquoise);border:1px solid rgba(79,214,206,.3);padding:5px 11px;border-radius:100px;align-self:flex-start}
.cours-card h3{font-size:2.3rem;margin:auto 0 10px;letter-spacing:.01em}
.cours-card p{color:var(--gris);font-size:.9rem;line-height:1.6}
.cours-card .dur{font-family:var(--mono);font-size:.72rem;color:var(--gris-d);letter-spacing:.1em;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--ligne)}
/* Les cours aquatiques basculent dans la palette eau : le concept tient jusqu'aux détails */
.cours-card.aqua{background:linear-gradient(168deg,#0D3348,#08202F)}
.cours-card.aqua .tag{color:var(--aqua);border-color:rgba(127,227,240,.35)}
.cours-card.aqua::before{background:var(--aqua)}
.cours-card.aqua:hover{border-color:rgba(127,227,240,.45)}
/* Même code couleur que le planning juste en dessous : détente (gris) et
   danse (or) reprennent leur teinte pour que le repérage reste cohérent
   entre la vitrine et le planning pratique */
.cours-card.detente .tag{color:var(--gris);border-color:rgba(170,184,186,.35)}
.cours-card.detente::before{background:var(--gris)}
.cours-card.detente:hover{border-color:rgba(170,184,186,.45)}
.cours-card.danse .tag{color:var(--or);border-color:rgba(242,180,92,.35)}
.cours-card.danse::before{background:var(--or)}
.cours-card.danse:hover{border-color:rgba(242,180,92,.45)}

.cours-note{display:flex;align-items:center;gap:14px;color:var(--gris);font-size:.92rem;
  padding:0 var(--gutter);max-width:var(--max);margin:34px auto 0;width:100%}
.cours-note svg{color:var(--turquoise);flex:none}
.cours-note b{color:var(--craie)}
.cours-dots{display:none;justify-content:center;gap:7px;margin-top:22px;padding:0 var(--gutter)}
.cours-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:width .4s var(--ease),background .4s var(--ease)}
.cours-dots i.on{width:22px;border-radius:4px;background:var(--turquoise)}
.cours-dots i.on.aqua{background:var(--aqua)}
.cours-dots i.on.detente{background:var(--gris)}
.cours-dots i.on.danse{background:var(--or)}

.cours-progress{height:1px;background:var(--ligne);margin:26px var(--gutter) 0;position:relative}
.cours-progress i{position:absolute;inset:0;background:var(--turquoise);transform-origin:0 50%;
  transform:scaleX(var(--cours-p,0))}

.cours-note a.cours-link{color:var(--turquoise);text-decoration:underline;text-underline-offset:3px;font-weight:700;
  transition:color .3s var(--ease)}
.cours-note a.cours-link:hover{color:var(--craie)}

/* ==========================================================================
   12b. PLANNING DES COURS — sélecteur famille de cours + jour
   Cinq familles, chacune nommée pour ce qu'elle contient (pas pour le lieu) :
   Renforcement & Cardio, Détente & Bien-être, Danse & Rythme, RPM & Cycling,
   Cours aquatiques. Chaque carte porte un aperçu des cours inclus, visible
   avant même de cliquer — aucune image, tout est du texte structuré, lisible
   et accessible au lecteur d'écran comme au zoom.
   ========================================================================== */
#planning{position:relative;transition:background 1.1s var(--ease);
  background:
    radial-gradient(56% 48% at 90% 4%,rgba(79,214,206,.13),transparent 62%),
    radial-gradient(54% 46% at 6% 96%,rgba(27,122,155,.2),transparent 62%)}
/* Sélectionner l'onglet « Cours aquatiques » fait glisser le fond vers la
   palette eau : le même dispositif chaud/froid que le reste du site, jusque
   dans un simple sélecteur d'horaires. */
#planning.aqua-active{
  background:
    radial-gradient(60% 50% at 88% 6%,rgba(127,227,240,.17),transparent 62%),
    radial-gradient(62% 56% at 6% 98%,rgba(8,60,90,.45),transparent 64%),
    linear-gradient(180deg,rgba(4,18,28,.35),transparent 42%)}

/* Cartes de famille : icône + nom + aperçu des cours, toujours visibles.
   On ne clique plus sur une étiquette floue, on choisit entre cinq
   descriptions concrètes de ce qu'on va faire. */
.plan-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:10px;margin-top:46px}
.plan-tab{display:flex;align-items:flex-start;gap:14px;text-align:left;padding:20px 20px 22px;
  border:1px solid var(--ligne);border-radius:4px;background:linear-gradient(168deg,var(--carbone-2),var(--carbone) 64%);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)}
.plan-tab:hover{border-color:rgba(79,214,206,.4);transform:translateY(-2px)}
.plan-tab .ico{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(79,214,206,.3);color:var(--turquoise);transition:.35s var(--ease)}
.plan-tab .txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.plan-tab .lbl{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.01em;
  text-transform:uppercase;color:var(--craie);line-height:1.15}
.plan-tab .sub{font-size:.79rem;line-height:1.5;color:var(--gris-d)}
/* État sélectionné : le contour s'allume, l'icône se remplit — le texte
   reste lisible dans les mêmes couleurs qu'au repos (pas d'inversion totale,
   les phrases d'aperçu resteraient illisibles sur un fond plein) */
.plan-tab[aria-selected="true"]{border-color:var(--turquoise);
  background:linear-gradient(168deg,rgba(79,214,206,.16),var(--carbone) 72%);
  box-shadow:0 22px 48px -30px rgba(79,214,206,.5)}
.plan-tab[aria-selected="true"] .ico{background:var(--turquoise);color:var(--noir);border-color:var(--turquoise)}
/* Chaque famille porte la couleur de son créneau dans le planning : le
   repérage reste cohérent du sélecteur jusqu'à la liste des horaires */
.plan-tab[data-cat="detente"] .ico{color:var(--gris);border-color:rgba(170,184,186,.32)}
.plan-tab[data-cat="detente"][aria-selected="true"]{border-color:var(--gris)}
.plan-tab[data-cat="detente"][aria-selected="true"] .ico{background:var(--gris);color:var(--noir);border-color:var(--gris)}
.plan-tab[data-cat="danse"] .ico{color:var(--or);border-color:rgba(242,180,92,.32)}
.plan-tab[data-cat="danse"][aria-selected="true"]{border-color:var(--or)}
.plan-tab[data-cat="danse"][aria-selected="true"] .ico{background:var(--or);color:var(--noir);border-color:var(--or)}
.plan-tab[data-cat="aqua"] .ico{color:var(--aqua);border-color:rgba(127,227,240,.32)}
.plan-tab[data-cat="aqua"][aria-selected="true"]{border-color:var(--aqua);box-shadow:0 22px 48px -30px rgba(127,227,240,.5)}
.plan-tab[data-cat="aqua"][aria-selected="true"] .ico{background:var(--aqua);color:var(--noir);border-color:var(--aqua)}

.plan-days{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;padding:20px 0 0;border-top:1px solid var(--ligne)}
.plan-day{position:relative;font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:.01em;
  text-transform:uppercase;padding:11px 20px;border:1px solid var(--ligne);border-radius:9px;
  color:var(--gris-d);background:transparent;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.plan-day:hover{color:var(--craie);border-color:rgba(79,214,206,.4)}
.plan-day[aria-selected="true"]{color:var(--turquoise);border-color:var(--turquoise);background:rgba(79,214,206,.1)}
.plan-day.is-today::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;
  background:var(--braise)}
#planning.aqua-active .plan-day[aria-selected="true"]{color:var(--aqua);border-color:var(--aqua);background:rgba(127,227,240,.14)}

.plan-panels{margin-top:34px}
.plan-panel[hidden]{display:none}
/* Plancher de hauteur : évite que le bas de page « saute » quand on passe
   d'une famille à l'autre (danse n'a qu'un créneau certains jours, la salle
   de renfo jusqu'à cinq) */
.plan-panel{min-height:170px}

.plan-legend{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--ligne)}
.plan-legend span{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gris-d)}
.plan-legend i{width:9px;height:9px;border-radius:50%;flex:none}
/* Une couleur par cours (et non plus par grande catégorie) : même principe
   que les cours aquatiques, appliqué aux 3 autres thèmes. Les teintes sont
   réutilisées d'un thème à l'autre sans problème puisqu'un seul panneau est
   jamais visible à la fois. */
.plan-legend .renfo-mobilite i{background:var(--turquoise)}
.plan-legend .renfo-cuisses i{background:var(--or)}
.plan-legend .renfo-abdos i{background:var(--braise)}
.plan-legend .renfo-sculpt i{background:var(--azur)}
.plan-legend .renfo-pump i{background:var(--mauve)}
.plan-legend .renfo-cross i{background:var(--lagon)}
.plan-legend .renfo-hyrox i{background:var(--corail)}
.plan-legend .renfo-combat i{background:var(--cerise)}
.plan-legend .detente-stretching i{background:var(--azur)}
.plan-legend .detente-balance i{background:var(--lagon)}
.plan-legend .detente-pilates i{background:var(--mauve)}
.plan-legend .detente-yoga i{background:var(--or)}
.plan-legend .danse-jam i{background:var(--braise)}
.plan-legend .danse-salsa i{background:var(--corail)}
.plan-legend .aqua-bike i{background:var(--aqua)}
.plan-legend .aqua-gym i{background:var(--azur)}
.plan-legend .aqua-boxing i{background:var(--braise)}
.plan-legend .aqua-training i{background:var(--mauve)}

.plan-day-content[hidden]{display:none}
.creneaux{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:10px}
.creneau{display:flex;align-items:center;gap:16px;padding:17px 20px;border:1px solid var(--ligne);
  border-left:3px solid var(--turquoise);background:linear-gradient(168deg,var(--carbone-2),var(--carbone) 62%);
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.creneau:hover{border-color:rgba(79,214,206,.45);transform:translateX(3px)}

.creneau.renfo-mobilite{border-left-color:var(--turquoise)}
.creneau.renfo-cuisses{border-left-color:var(--or)}
.creneau.renfo-cuisses:hover{border-color:rgba(242,180,92,.55)}
.creneau.renfo-abdos{border-left-color:var(--braise)}
.creneau.renfo-abdos:hover{border-color:rgba(232,115,74,.5)}
.creneau.renfo-sculpt{border-left-color:var(--azur)}
.creneau.renfo-sculpt:hover{border-color:rgba(63,169,245,.55)}
.creneau.renfo-pump{border-left-color:var(--mauve)}
.creneau.renfo-pump:hover{border-color:rgba(201,166,240,.55)}
.creneau.renfo-cross{border-left-color:var(--lagon)}
.creneau.renfo-cross:hover{border-color:rgba(63,217,176,.5)}
.creneau.renfo-hyrox{border-left-color:var(--corail)}
.creneau.renfo-hyrox:hover{border-color:rgba(244,115,142,.5)}
.creneau.renfo-combat{border-left-color:var(--cerise)}
.creneau.renfo-combat:hover{border-color:rgba(228,70,58,.5)}

.creneau.detente-stretching{border-left-color:var(--azur)}
.creneau.detente-stretching:hover{border-color:rgba(63,169,245,.55)}
.creneau.detente-balance{border-left-color:var(--lagon)}
.creneau.detente-balance:hover{border-color:rgba(63,217,176,.5)}
.creneau.detente-pilates{border-left-color:var(--mauve)}
.creneau.detente-pilates:hover{border-color:rgba(201,166,240,.55)}
.creneau.detente-yoga{border-left-color:var(--or)}
.creneau.detente-yoga:hover{border-color:rgba(242,180,92,.55)}

.creneau.danse-jam{border-left-color:var(--braise)}
.creneau.danse-jam:hover{border-color:rgba(232,115,74,.5)}
.creneau.danse-salsa{border-left-color:var(--corail)}
.creneau.danse-salsa:hover{border-color:rgba(244,115,142,.5)}

.creneau.aqua-bike{border-left-color:var(--aqua)}
.creneau.aqua-bike:hover{border-color:rgba(127,227,240,.5)}
.creneau.aqua-gym{border-left-color:var(--azur)}
.creneau.aqua-gym:hover{border-color:rgba(63,169,245,.55)}
.creneau.aqua-boxing{border-left-color:var(--braise)}
.creneau.aqua-boxing:hover{border-color:rgba(232,115,74,.5)}
.creneau.aqua-training{border-left-color:var(--mauve)}
.creneau.aqua-training:hover{border-color:rgba(201,166,240,.55)}
.cr-heure{font-family:var(--mono);font-size:.85rem;color:var(--gris);white-space:nowrap;letter-spacing:-.01em;
  flex:none;min-width:112px}
.cr-nom{font-family:var(--display);font-size:1.14rem;letter-spacing:.01em;text-transform:uppercase;color:var(--craie)}

/* Jour sans créneau pour la famille choisie (ex. pas de danse le mardi) */
.plan-empty{color:var(--gris-d);font-size:.92rem;padding:22px 2px;border:1px dashed var(--ligne)}

.plan-note{display:flex;align-items:flex-start;gap:14px;color:var(--gris);font-size:.9rem;margin-top:36px}
.plan-note svg{color:var(--turquoise);flex:none;margin-top:2px}
.plan-note a{color:var(--turquoise);text-decoration:underline;text-underline-offset:3px}
.plan-note a:hover{color:var(--craie)}

@media (max-width:900px){
  .plan-tabs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .plan-tabs{grid-template-columns:1fr;gap:8px}
  .plan-tab{padding:16px 16px 18px}
  .plan-days{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .plan-days::-webkit-scrollbar{display:none}
  .plan-day{flex:none}
  .creneaux{grid-template-columns:1fr}
  .plan-legend{gap:14px 20px}
}

/* ==========================================================================
   13. BALNÉO — L'IMMERSION (signature)
   ========================================================================== */
.balneo{position:relative;background:var(--abysse)}
.balneo-stage{height:460vh;position:relative}
.balneo-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}

/* Le fond passe du carbone à l'abysse selon --water */
.balneo-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(180deg,var(--abysse-2) 0%,var(--abysse) 60%,#020A11 100%)}
.balneo-bg .media{position:absolute;inset:0;opacity:1;
  transform:scale(calc(1.1 - var(--water) * .1));transition:none}

/* ÉTALONNAGE — v4 : PHOTO NATURE.
   Le duotone bleu (calque soft-light) est supprimé : il tirait toute la photo
   vers le gris-bleu. La piscine s'affiche dans ses couleurs d'origine, à peine
   rehaussée. Toute la lisibilité du texte passe par les panneaux verre dépoli
   (.balneo-lead / .echelle), jamais par un voile sur l'image. */
.balneo-bg .media img{filter:brightness(1.06) contrast(1.02) saturate(1.06)}

/* Vignette très légère : elle assoit les bords, sans grisailler le bassin */
.balneo-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(140% 100% at 50% 100%,transparent 62%,rgba(2,10,17,.28) 100%)}

/* Caustiques : nappes de lumière diffuses, sans arêtes.
   (La version en dégradé conique produisait des rayons nets — c'est ça qui
   faisait « bizarre » sur la droite de l'écran.) */
.caustics{position:absolute;inset:-25%;will-change:transform;z-index:1;pointer-events:none;
  opacity:calc(var(--water) * .34);mix-blend-mode:screen;filter:blur(46px)}
.caustics i{position:absolute;inset:0;
  background:
    radial-gradient(34% 22% at 20% 26%,rgba(127,227,240,.42),transparent 62%),
    radial-gradient(26% 16% at 62% 14%,rgba(214,247,252,.26),transparent 64%),
    radial-gradient(40% 24% at 80% 66%,rgba(127,227,240,.30),transparent 62%),
    radial-gradient(22% 15% at 38% 80%,rgba(214,247,252,.20),transparent 64%);
  animation:caustA 28s ease-in-out infinite alternate}
.caustics i:nth-child(2){opacity:.7;
  background:
    radial-gradient(30% 20% at 72% 34%,rgba(127,227,240,.34),transparent 62%),
    radial-gradient(24% 14% at 30% 58%,rgba(214,247,252,.22),transparent 64%),
    radial-gradient(36% 22% at 12% 78%,rgba(127,227,240,.26),transparent 62%);
  animation:caustB 41s ease-in-out infinite alternate}
@keyframes caustA{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.14)}}
@keyframes caustB{from{transform:translate3d(3%,2%,0) scale(1.1)}to{transform:translate3d(-4%,-3%,0) scale(1)}}

/* La ligne d'eau : une vague qui monte et remplit l'écran */
.waterline{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  height:calc(var(--water) * 118%);transition:none}
.waterline .wave{position:absolute;top:-1px;left:0;width:200%;height:70px;transform:translateY(-99%)}
.waterline .wave svg{width:50%;height:100%;float:left}
.waterline .wave path{fill:rgba(96,200,230,.3)}
.waterline .wave.b{opacity:.55;height:92px;animation:swell 9s ease-in-out infinite alternate}
.waterline .wave.b path{fill:rgba(180,240,250,.24)}
/* Voile d'eau : un glacis translucide, pas un rideau. On doit continuer à
   voir le bassin à travers, même quand la ligne d'eau est au plus haut. */
.waterline .body{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(96,200,230,.16) 0%,rgba(30,130,170,.2) 30%,rgba(8,60,90,.3) 100%)}
.waterline .wave.a{animation:drift 14s linear infinite}
.waterline .wave.b{animation:drift 22s linear infinite reverse,swell 9s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-50%,-99%)}}
@keyframes swell{to{height:64px}}

.balneo-in{position:relative;z-index:3;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr .95fr;gap:60px;align-items:center}
/* Panneau verre dépoli sous le titre — même logique que .echelle */
.balneo-lead{padding:30px 34px;border-radius:18px;
  background:linear-gradient(100deg,rgba(2,10,17,.74) 0%,rgba(2,10,17,.58) 70%,rgba(2,10,17,.42) 100%);
  -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  border:1px solid rgba(127,227,240,.14);
  box-shadow:0 40px 90px -40px rgba(2,10,17,.8)}
/* Taille réduite par rapport à un h2 plein écran : le texte vit maintenant
   dans un panneau plus étroit, "le réconfort" doit tenir sur une ligne */
.balneo h2{font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:.92}
.balneo h2 em{font-style:normal;color:var(--aqua);white-space:nowrap}
.balneo .lede{color:#CFE1EA;margin-top:20px}
.balneo .eyebrow{color:var(--aqua)}

/* Échelle de température — le dispositif structurel du site.
   Ce n'est pas 01/02/03 : c'est une vraie donnée (l'eau et la chaleur).
   Panneau verre dépoli : la lisibilité ne dépend plus de la luminosité de la
   photo en dessous — utile quel que soit le cadrage ou l'exposition fournis. */
.echelle{position:relative;padding:26px 30px 26px 92px;border-radius:18px;
  background:linear-gradient(100deg,rgba(2,10,17,.44) 0%,rgba(2,10,17,.66) 45%,rgba(2,10,17,.74) 100%);
  -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  border:1px solid rgba(127,227,240,.12);
  box-shadow:0 40px 90px -40px rgba(2,10,17,.8)}
.echelle::before{content:"";position:absolute;left:62px;top:10px;bottom:10px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--aqua),var(--bleu) 45%,var(--braise));opacity:.55}
.pal{position:relative;padding:16px 0 22px;opacity:.45;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pal.on{opacity:1;transform:none}
.pal::before{content:"";position:absolute;left:-35px;top:26px;width:11px;height:11px;border-radius:50%;
  background:var(--abysse);border:1.5px solid var(--aqua);transition:.5s var(--ease)}
.pal.on::before{background:var(--aqua);box-shadow:0 0 0 6px rgba(127,227,240,.15)}
.pal .deg{position:absolute;left:-92px;top:23px;width:48px;text-align:right;
  font-family:var(--mono);font-size:.76rem;font-weight:500;color:var(--aqua);
  letter-spacing:-.02em;text-shadow:0 1px 6px rgba(2,10,17,.95),0 3px 14px rgba(2,10,17,.8)}
.pal h3{font-size:1.95rem;color:var(--craie);margin-bottom:6px;
  text-shadow:0 1px 8px rgba(2,10,17,.85),0 4px 18px rgba(2,10,17,.6)}
.pal p{color:#C2D6E1;font-size:.92rem;line-height:1.62;max-width:38ch;
  text-shadow:0 1px 10px rgba(2,10,17,.8)}
/* Sauna + hammam : la chaleur reprend la main */
.pal.chaud::before{border-color:var(--braise)}
.pal.chaud.on::before{background:var(--braise);box-shadow:0 0 0 6px rgba(232,115,74,.15)}
.pal.chaud .deg{color:var(--braise-pale)}

.balneo-note{position:absolute;left:var(--gutter);bottom:34px;z-index:3;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(224,238,244,.82);
  text-shadow:0 1px 6px rgba(2,10,17,.95),0 3px 14px rgba(2,10,17,.8)}

/* ==========================================================================
   14. AVIS
   ========================================================================== */
.avis-head{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;flex-wrap:wrap;margin-bottom:44px}
.gnote{display:flex;align-items:center;gap:16px;border:1px solid var(--ligne);padding:16px 24px;
  background:linear-gradient(150deg,rgba(242,180,92,.10),transparent 55%),var(--carbone)}
.gnote b{font-family:var(--display);font-size:2.9rem;color:var(--turquoise);line-height:1}
.gnote small{display:block;color:var(--gris-d);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.6;margin-top:4px}
.stars{color:var(--or);letter-spacing:.22em;font-size:.9rem}
.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.avis-card{background:linear-gradient(168deg,var(--carbone-2),var(--carbone) 60%);
  border:1px solid var(--ligne);padding:32px 28px;display:flex;
  flex-direction:column;gap:18px;
  transform:translateY(0) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.avis-card:hover{border-color:rgba(79,214,206,.3);
  transform:translateY(-6px) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.avis-card p{color:#C0CBCC;font-size:.96rem;line-height:1.72;flex:1}
.avis-card footer{display:flex;align-items:center;gap:13px;padding-top:16px;border-top:1px solid var(--ligne)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--turquoise);color:var(--noir);
  display:grid;place-items:center;font-family:var(--display);font-size:1.2rem;font-weight:800}
.avis-card:nth-child(2) .avatar{background:var(--aqua)}
.avis-card:nth-child(3) .avatar{background:var(--braise)}
.avis-card footer b{display:block;font-size:.92rem}
.avis-card footer small{color:var(--gris-d);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}

/* ==========================================================================
   15. BANDE CTA
   ========================================================================== */
.cta{padding:clamp(90px,13vw,170px) var(--gutter);text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(72% 112% at 50% 116%,rgba(43,163,156,.32),transparent 62%),
    radial-gradient(48% 78% at 6% 0%,rgba(27,122,155,.22),transparent 64%),
    radial-gradient(44% 70% at 94% 4%,rgba(232,115,74,.13),transparent 66%),
    var(--noir);
  border-top:1px solid var(--ligne)}
.cta h2{font-size:clamp(2.8rem,8vw,6.4rem);margin-bottom:20px}
.cta h2 em{font-style:normal;color:var(--turquoise)}
.cta p{color:var(--gris);max-width:52ch;margin:0 auto 38px;font-size:1.05rem}

/* ==========================================================================
   16. INFOS PRATIQUES
   ========================================================================== */
.infos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:52px}
.card{background:linear-gradient(168deg,var(--carbone-2),var(--carbone) 60%);
  border:1px solid var(--ligne);padding:36px 32px}
.card h3{font-size:1.7rem;margin-bottom:26px;color:var(--craie)}
.line{display:flex;gap:15px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--ligne)}
.line:last-of-type{border-bottom:0}
.line svg{color:var(--turquoise);flex:none;margin-top:3px}
.line b{display:block;font-size:1rem;font-weight:700}
.line span{color:var(--gris-d);font-size:.85rem;font-family:var(--mono);letter-spacing:.02em}
.line a:hover{color:var(--turquoise)}
.maplink{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--turquoise);
  border-bottom:1px solid rgba(79,214,206,.35);padding-bottom:4px}
.socials{display:flex;gap:11px;margin-top:28px}
.socials a{width:44px;height:44px;border:1px solid var(--ligne);border-radius:50%;display:grid;
  place-items:center;color:var(--gris);transition:.3s var(--ease)}
.socials a:hover{color:var(--noir);background:var(--turquoise);border-color:var(--turquoise)}
.horaires{display:grid;grid-template-columns:1fr auto;gap:0}
.horaires dt,.horaires dd{padding:15px 0;border-bottom:1px solid var(--ligne)}
.horaires dt{color:var(--gris);font-size:.94rem}
.horaires dd{font-family:var(--mono);font-size:.9rem;text-align:right;color:var(--craie)}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.foot{padding:56px var(--gutter) 40px;border-top:1px solid var(--ligne);
  background:radial-gradient(60% 130% at 50% 0%,rgba(43,163,156,.13),transparent 64%),var(--noir)}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
  max-width:var(--max);margin:0 auto;color:var(--gris-d);font-size:.86rem}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot nav a:hover{color:var(--turquoise)}
.mentions{max-width:var(--max);margin:30px auto 0;border-top:1px solid var(--ligne);padding-top:22px}
.mentions summary{cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris-d);list-style:none}
.mentions summary::-webkit-details-marker{display:none}
.mentions summary::before{content:"+ ";color:var(--turquoise)}
.mentions[open] summary::before{content:"− "}
.mentions div{color:var(--gris-d);font-size:.82rem;line-height:1.8;margin-top:18px;max-width:80ch}
.mentions div p + p{margin-top:14px}
.mentions b{color:var(--gris)}
.mentions a{border-bottom:1px solid rgba(147,162,164,.35)}
.mentions a:hover{color:var(--turquoise);border-bottom-color:var(--turquoise)}

/* ==========================================================================
   18. RÉVÉLATIONS AU SCROLL
   ========================================================================== */
html.js [data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
html.js [data-reveal].is-in{opacity:1;transform:none}

/* Titres révélés mot à mot */
.word{display:inline-block;overflow:hidden;vertical-align:top;padding:.02em .06em .1em;margin:-.02em -.06em -.1em}
.word i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .95s var(--ease);transition-delay:var(--d,0ms)}
.is-in .word i,.word.is-in i{transform:none}
html:not(.js) .word i{transform:none}

/* ==========================================================================
   18b. BARRE CTA MOBILE (sticky, apparaît après le hero)
   ========================================================================== */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:850;display:none;gap:10px;align-items:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(12,17,19,.86);backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--ligne);
  transform:translateY(100%);transition:transform .5s var(--ease),background .5s var(--ease)}
.mobile-cta.show{transform:none}
.mobile-cta::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--turquoise),transparent);opacity:.55}
body.in-water .mobile-cta::before{background:linear-gradient(90deg,transparent,var(--aqua),transparent)}
.mobile-cta .mcta-tel{width:50px;height:50px;flex:none;border:1px solid rgba(79,214,206,.35);border-radius:50%;
  display:grid;place-items:center;color:var(--turquoise);transition:border-color .3s var(--ease)}
.mobile-cta .mcta-tel:hover{border-color:var(--turquoise);color:var(--turquoise)}
.mobile-cta .btn{flex:1;justify-content:center;padding:15px 20px}
body.in-water .mobile-cta{background:rgba(4,18,28,.9)}

/* ==========================================================================
   19. RESPONSIVE
   Le mobile est traité comme une version à part entière, pas comme un
   rabotage du bureau : la séquence balnéo reste épinglée, les cours et les
   avis deviennent des carrousels à aimant, le menu passe en plein écran.
   ========================================================================== */

/* ---- Tablette et en dessous ---- */
@media (max-width:1080px){
  .features{grid-template-columns:repeat(2,1fr)}
  .avis-grid{grid-template-columns:1fr}

  /* Cours : plus de pilotage au scroll, on swipe — mais avec aimant et repères */
  .cours-stage{height:auto}
  .cours-pin{position:static;height:auto;overflow:visible;padding:clamp(72px,11vw,120px) 0}
  html.js .cours-rail{overflow-x:auto}
  .cours-track{transform:none!important}
  .cours-progress{display:none}
  .cours-dots{display:flex}
  .cours-rail{scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
  .cours-card{scroll-snap-align:center;width:min(320px,78vw);transform:none}
  .cours-card.is-active{border-color:rgba(79,214,206,.45)}
  .cours-card.is-active::before{transform:scaleX(1)}
  .cours-card.aqua.is-active{border-color:rgba(127,227,240,.5)}
  .cours-card.detente.is-active{border-color:rgba(170,184,186,.55)}
  .cours-card.danse.is-active{border-color:rgba(242,180,92,.55)}

  /* Balnéo : la séquence d'immersion reste épinglée. C'est la signature du
     site, la retirer sur téléphone reviendrait à livrer un autre site. */
  .balneo-stage{height:330vh}
  .balneo-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:block;padding:0}
  .balneo-in{display:flex;flex-direction:column;justify-content:center;height:100%;
    gap:clamp(16px,4vh,32px);padding:84px var(--gutter) 76px}
  .balneo-bg .media img{object-position:center 42%}
  .caustics{inset:-12%;filter:blur(30px)}
  .waterline{height:calc(var(--water) * 118%);opacity:1}
  .balneo-lead{padding:22px 24px}
  .balneo h2{font-size:clamp(2rem,7.4vw,3.2rem)}
  .balneo .lede{font-size:.95rem;margin-top:14px}
  .balneo-note{bottom:22px;font-size:.63rem}

  /* L'échelle de température passe en 2×2 : même donnée, lisible d'un coup d'œil */
  .echelle{padding:18px 18px 14px;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
  .echelle::before{display:none}
  .pal{padding:10px 0 10px 14px;opacity:.45;transform:translateY(8px);
    border-left:2px solid rgba(127,227,240,.2);
    transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .55s var(--ease)}
  .pal.on{opacity:1;transform:none;border-left-color:var(--aqua)}
  .pal::before{display:none}
  .pal .deg{position:static;display:block;width:auto;text-align:left;margin-bottom:2px;font-size:.72rem}
  .pal h3{font-size:1.4rem;margin-bottom:4px}
  .pal p{font-size:.79rem;line-height:1.5;max-width:none}
  .pal.chaud{border-left-color:rgba(232,115,74,.2)}
  .pal.chaud.on{border-left-color:var(--braise)}
}

/* ---- Téléphone ---- */
@media (max-width:860px){
  :root{--gutter:5.5vw}

  /* Menu plein écran : grosse typo, entrées en cascade, contact au pied */
  .hdr .logo,.hdr .burger{position:relative;z-index:2}
  .nav{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;
    gap:0;overflow-y:auto;
    padding:96px 8vw calc(36px + env(safe-area-inset-bottom,0px));
    background:radial-gradient(120% 70% at 100% 0,rgba(43,163,156,.17),transparent 62%),var(--noir);
    opacity:0;visibility:hidden;transform:none;
    transition:opacity .45s var(--ease),visibility .45s}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav > a{font-family:var(--display);text-transform:uppercase;font-weight:800;letter-spacing:.01em;
    font-size:clamp(1.95rem,9vw,2.9rem);line-height:1;color:var(--craie);
    padding:15px 0;border-bottom:1px solid var(--ligne);
    opacity:0;transform:translateY(20px);
    transition:opacity .5s var(--ease),transform .6s var(--ease),color .25s}
  .nav.open > a{opacity:1;transform:none;transition-delay:calc(80ms + var(--i,0) * 55ms)}
  .nav > a::after{display:none}
  .nav > a:active{color:var(--turquoise)}
  .nav-foot{display:flex;flex-direction:column;align-items:flex-start;gap:15px;margin-top:32px;
    opacity:0;transform:translateY(20px);
    transition:opacity .5s var(--ease),transform .6s var(--ease)}
  .nav.open .nav-foot{opacity:1;transform:none;transition-delay:calc(80ms + var(--i,0) * 55ms)}
  /* .nav a impose le gris aux liens du menu : on le rétablit sur le bouton,
     sinon le libellé passe en gris sur turquoise et devient illisible */
  .nav .nav-foot .btn{width:100%;justify-content:center;color:var(--noir)}
  .nav .nav-foot a::after{display:none}
  .nav-tel{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
    font-size:.95rem;color:var(--craie)}
  .nav-tel svg{color:var(--turquoise);flex:none}
  .nav-adr{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--gris-d);line-height:1.6}
  .hdr > .btn{display:none}
  .burger{display:block}
  body.nav-open{overflow:hidden}
  /* PIÈGE : un backdrop-filter sur le header en fait le bloc conteneur de ses
     enfants en position:fixed. Dès que le header devenait « stuck », l'overlay
     du menu se retrouvait enfermé dans une bande de 70 px. On coupe donc le
     flou du header pendant que le menu est ouvert — l'overlay couvre tout de
     toute façon. */
  body.nav-open .hdr,body.nav-open .hdr.stuck{
    background:transparent;border-bottom-color:transparent;transition:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}

  /* Hero */
  .hero{padding:112px var(--gutter) 0}
  .hero-in{padding-bottom:32px}
  .kicker{font-size:.62rem;letter-spacing:.13em;margin-bottom:18px;line-height:1.5}
  .hero h1{font-size:clamp(3.1rem,15.5vw,5rem);line-height:.86}
  .hero p{font-size:.99rem;max-width:40ch;margin:20px 0 26px;color:#B9C6C7}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn{justify-content:center;padding:16px 22px}
  /* En portrait, une photo 16/9 étirée sur toute la hauteur de l'écran est
     recadrée à 26 % de sa largeur : il ne reste qu'un bout de bras. On limite
     donc la zone photo à la partie haute — l'image est alors moins agrandie,
     on en voit bien plus large, et l'athlète tient entier dans le cadre. Le
     bas fond au noir, là où vit le texte. */
  .hero-bg{height:74svh;bottom:auto}
  /* On descend la photo de quelques points : sans ça, la tête de l'athlète
     arrive pile sous le logo et le bouton du menu. */
  .hero-bg .media{inset:6% -8% -20% -8%}
  .hero-bg .media img{object-position:80% center}
  .hero-bg::before{background:none}
  .hero-bg::after{background:linear-gradient(to top,
    var(--noir) 0%,
    rgba(12,17,19,.9) 12%,
    rgba(12,17,19,.58) 30%,
    rgba(12,17,19,.2) 58%,
    rgba(12,17,19,.14) 82%,
    rgba(12,17,19,.42) 100%)}
  .scroll-cue{display:none}

  /* Bandeau et chiffres — 2×2, jamais une colonne : une seule colonne de
     chiffres allonge la page pour rien et casse l'effet de tableau de bord */
  .marquee{padding:15px 0}
  .marquee-track span{font-size:1.25rem;gap:26px;padding-right:26px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:26px 18px}
  .stat b{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  .stat small{font-size:.62rem;letter-spacing:.08em;margin-top:8px}

  /* Rythme général */
  .section{padding:clamp(70px,13vw,110px) var(--gutter)}
  .title{font-size:clamp(2.5rem,11vw,3.6rem)}
  .lede{font-size:1rem}
  .eyebrow{font-size:.66rem;margin-bottom:16px}

  /* Bento : parallaxe douce sur les photos, pilotée par le scroll */
  .bento{grid-template-columns:1fr;grid-template-rows:none;gap:10px;margin-top:38px;perspective:none}
  .bento .media{grid-row:auto!important;aspect-ratio:4/3;min-height:0;transform:none}
  .bento .media img{transform:scale(1.09) translate3d(0,var(--par,0px),0);transition:none}

  /* Features : icône à gauche, texte à droite — compact et lisible */
  .features{grid-template-columns:1fr}
  .feature{display:grid;grid-template-columns:38px 1fr;column-gap:16px;row-gap:4px;padding:22px 18px}
  .feature .ico{grid-row:1 / span 2;margin-bottom:0}
  .feature b{font-size:1.2rem;align-self:center;margin-bottom:0}
  .feature p{font-size:.88rem}

  /* Balnéo : la barre de réservation collante mange le bas de l'écran, on lui
     laisse sa place plutôt que de faire passer le hammam dessous */
  .balneo-in{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .balneo-note{display:none}
  .balneo .lede{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .pal p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  /* Le chapeau du hero passe sur deux lignes : la pastille reste alignée au texte */
  .kicker{align-items:flex-start;gap:9px}
  .kicker .dot{flex:none;margin-top:7px}

  /* Cours */
  .cours-head{margin-bottom:28px}
  .cours-card{min-height:296px;padding:24px 22px 26px}
  .cours-card h3{font-size:2rem}
  .cours-note{font-size:.86rem;margin-top:26px;align-items:flex-start}
  .cours-note svg{margin-top:2px}

  /* Avis : carrousel à aimant plutôt qu'une pile de trois pavés */
  .avis-head{margin-bottom:30px;align-items:flex-start}
  .gnote{padding:12px 18px}
  .gnote b{font-size:2.2rem}
  .avis-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 4px;
    scroll-padding-inline:var(--gutter)}
  .avis-grid::-webkit-scrollbar{display:none}
  .avis-card{flex:none;width:min(330px,84vw);scroll-snap-align:center;transform:none;padding:26px 22px}
  .avis-card p{font-size:.92rem}

  /* Bande CTA */
  .cta{padding:clamp(80px,15vw,130px) var(--gutter)}
  .cta h2{font-size:clamp(2.6rem,12vw,4rem)}
  .cta p{font-size:1rem;margin-bottom:30px}
  .cta .btn.lg{width:100%;justify-content:center}

  /* Infos pratiques */
  .infos{grid-template-columns:1fr;margin-top:36px}
  .card{padding:26px 20px}
  .card h3{font-size:1.45rem;margin-bottom:18px}
  .socials a{width:46px;height:46px}

  /* Pied de page + barre de réservation collante */
  .mobile-cta{display:flex}
  .foot{padding:44px var(--gutter) calc(104px + env(safe-area-inset-bottom,0px))}
  .foot-top{font-size:.8rem;gap:18px}
  .foot nav{gap:16px}
  .mentions div{font-size:.78rem}
}
body.nav-open .mobile-cta{transform:translateY(100%)!important}

@media (max-width:520px){
  :root{--gutter:5vw}
  .hero h1{font-size:clamp(2.9rem,16vw,4.4rem)}
  .marquee-track span{font-size:1.1rem}
  .gnote{width:100%;justify-content:space-between}
  .horaires dt{font-size:.88rem}
  .horaires dd{font-size:.84rem}
  .logo{font-size:1.15rem;gap:9px}
  .logo svg{width:28px;height:28px}
}

/* Écrans peu hauts : ces règles arrivent après celles du téléphone, sinon
   elles se font écraser. Sur un petit écran, on sacrifie les descriptions
   de l'échelle plutôt que de laisser le hammam passer sous la barre de
   réservation. */
@media (max-width:1080px) and (max-height:800px){
  .balneo .lede{-webkit-line-clamp:3}
  .pal p{-webkit-line-clamp:2}
}
@media (max-width:1080px) and (max-height:700px){
  .pal p{display:none}
  .balneo .lede{-webkit-line-clamp:2}
  .balneo-in{padding-top:74px;gap:16px}
  .balneo h2{font-size:clamp(1.8rem,6.6vw,2.6rem)}
  .pal h3{font-size:1.25rem}
}

/* Filet de sécurité : petit écran, ou police display non chargée (CDN bloqué)
   et titre qui passe sur quatre lignes — on évite que le second bouton du hero
   sorte de l'écran. */
@media (max-width:860px) and (max-height:700px){
  .hero{padding-top:96px}
  .hero h1{font-size:clamp(2.6rem,13.5vw,4rem)}
  .hero p{font-size:.94rem;margin:16px 0 22px;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .hero-bg{height:70svh}
}

/* Encoche en paysage : on ne laisse rien passer sous l'arrondi de l'écran */
@media (max-width:1080px) and (orientation:landscape){
  .hdr,.hero,.section,.cta,.foot,.balneo-in,.cours-head,.cours-note{
    padding-left:max(var(--gutter),env(safe-area-inset-left));
    padding-right:max(var(--gutter),env(safe-area-inset-right));
  }
}

/* ==========================================================================
   19b. ÉCRANS PEU HAUTS EN BUREAU (zoom navigateur, portables 13")
   Un zoom à 150 % ne réduit pas seulement la largeur : il divise aussi la
   hauteur utile. Les sections épinglées, calées sur 100svh avec des tailles
   fixes, se retrouvaient à découper les cartes en deux. Tout ce qui occupe
   de la hauteur est donc exprimé en svh, et sous 700 px de haut on renonce
   à l'épinglage : les cours passent en grille, tout reste lisible.
   ========================================================================== */

/* ---- Cours : la mise en page s'adapte à la hauteur disponible ---- */
@media (min-width:1081px){
  .cours-pin{padding:clamp(74px,10svh,90px) 0 clamp(26px,5.5svh,60px)}
  .cours-head{margin-bottom:clamp(14px,4svh,40px)}
  .cours .eyebrow{margin-bottom:clamp(10px,2.4svh,22px)}
  .cours .title{font-size:clamp(2rem,min(7vw,10svh),5.4rem)}
  .cours-card{min-height:min(340px,46svh);
    padding:clamp(20px,3svh,28px) 26px clamp(22px,3.4svh,30px)}
  .cours-card h3{font-size:clamp(1.55rem,4.4svh,2.3rem)}
  .cours-card p{font-size:clamp(.8rem,1.7svh,.9rem)}
  .cours-card .dur{margin-top:clamp(10px,2svh,18px);padding-top:clamp(9px,1.6svh,14px)}
  .cours-progress{margin-top:clamp(12px,2.6svh,26px)}
  .cours-note{margin-top:clamp(12px,3svh,34px);font-size:clamp(.8rem,1.8svh,.92rem)}
}

/* ---- Sous 700 px de haut : plus d'épinglage, les 8 cours en grille ---- */
@media (min-width:1081px) and (max-height:699px){
  .cours-stage{height:auto}
  .cours-pin{position:static;height:auto;overflow:visible;padding:clamp(80px,9vw,120px) 0}
  .cours-head{margin-bottom:38px}
  .cours .title{font-size:clamp(2.4rem,5vw,3.6rem)}
  .cours-rail{overflow:visible;-webkit-mask-image:none;mask-image:none}
  html.js .cours-rail{overflow:visible}
  .cours-track{transform:none!important;display:grid;grid-template-columns:repeat(4,1fr);
    gap:12px;width:auto;max-width:calc(var(--max) + 12vw);margin:0 auto}
  .cours-card{width:auto;min-height:0;padding:24px 22px 26px}
  .cours-card h3{font-size:2rem}
  .cours-card p{font-size:.87rem}
  .cours-card .dur{margin-top:16px;padding-top:13px}
  .cours-progress{display:none}
  .cours-dots{display:none}
  .cours-note{margin-top:30px;font-size:.9rem}
}
@media (min-width:1081px) and (max-height:699px) and (max-width:1340px){
  .cours-track{grid-template-columns:repeat(3,1fr)}
}

/* ---- Balnéo : elle reste épinglée, mais elle se compacte ---- */
@media (min-width:1081px) and (max-height:830px){
  .balneo h2{font-size:clamp(1.9rem,4.8svh,4.2rem)}
  .balneo-lead{padding:24px 28px}
  .balneo .lede{font-size:.95rem;margin-top:14px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .echelle{padding-top:18px;padding-bottom:18px}
  .pal{padding:12px 0 16px}
  .pal h3{font-size:1.55rem}
  .pal p{font-size:.86rem;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media (min-width:1081px) and (max-height:680px){
  .balneo .lede{-webkit-line-clamp:2}
  .balneo-lead{padding:20px 24px}
  .pal{padding:8px 0 10px}
  .pal h3{font-size:1.3rem}
  .pal p{display:none}
  .balneo-note{bottom:22px}
}

/* ==========================================================================
   20. MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.js [data-reveal]{opacity:1;transform:none}
  .word i{transform:none}
  .cours-stage,.balneo-stage{height:auto}
  .cours-pin,.balneo-pin{position:static;height:auto;padding:90px 0}
  html.js .cours-rail{overflow-x:auto}
  .waterline{height:100%!important}
  .grain{display:none}
  .pal{opacity:1;transform:none}
}

/* Impression */
@media print{
  .loader,.grain,.cursor,.cursor-dot,.marquee,.scroll-cue{display:none}
  body{background:#fff;color:#000}
}