/* Site de Floris Dissard — muay thaï, Le Puy-en-Velay.
   Fond noir. Deux accents, et seulement deux : le rouge et le bleu du drapeau
   thaïlandais (#A51931, #2D2A4A), le blanc du drapeau pour le texte (#F4F5F8).
   Inter seule, titres lourds et serrés. Le mouvement est dans site.js (GSAP). */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-var.woff2) format("woff2")}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/anton-400.woff2) format("woff2")}   /* seulement pour la bande défilante */

:root{
  --noir:#050506; --noir-2:#0d0d11; --noir-3:#15151b;
  --blanc:#F4F5F8; --gris:#9a9aa6; --gris-2:#5f5f6b;
  --rouge:#A51931; --rouge-vif:#d4213f; --rouge-texte:#f26680; --bleu:#2D2A4A; --bleu-clair:#3f3b66;
  --ligne:rgba(244,245,248,.1); --ligne-2:rgba(244,245,248,.05);
  --r:22px; --r-s:14px; --max:1210px; --gouttiere:clamp(16px,4vw,32px);
  --corps:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --lent:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Le défilement est vertical, point : pan-y interdit à iOS tout déplacement latéral de la page
   (le pincement pour zoomer reste). L'orbite des formules garde son propre glisser (pointer events). */
html{touch-action:pan-y pinch-zoom}   /* pas d'overflow clip sur html : ça casse le sticky de l'en-tête sous Safari iOS */
body{margin:0;background:var(--noir);color:var(--blanc);font:16px/1.6 var(--corps);-webkit-font-smoothing:antialiased;overflow-x:clip;touch-action:pan-y pinch-zoom}
body.menu-ouvert{overflow:hidden}
img{max-width:100%;height:auto;display:block}  /* height:auto : sinon l'attribut height= du HTML étire l'image */
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blanc);outline-offset:3px;border-radius:8px}
::selection{background:var(--rouge);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.conteneur{width:min(100% - 2*var(--gouttiere),var(--max));margin-inline:auto}

/* ── typographie ─────────────────────────────────────────────────── */
h1,h2,h3{margin:0;line-height:1.02;letter-spacing:-.045em;color:var(--blanc)}
h1{font-size:clamp(2.9rem,1.6rem+6.2vw,6.6rem);font-weight:760;letter-spacing:-.055em;line-height:.96}
h2{font-size:clamp(2.1rem,1.3rem+3.6vw,4.4rem);font-weight:700}
h3{font-size:clamp(1.25rem,1.05rem+.9vw,1.7rem);font-weight:650;letter-spacing:-.03em}
.texte{color:var(--gris);max-width:58ch;font-size:clamp(1rem,.95rem+.3vw,1.12rem)}
.texte strong{color:var(--blanc);font-weight:600}
.sourd{color:var(--gris)}
.masque{overflow:hidden;display:block}
.masque>span{display:block}

/* la bande du drapeau : cinq rayures, proportions 1-1-2-1-1 */
.drapeau{display:block;height:8px;width:100%;background:linear-gradient(to bottom,
  var(--rouge) 0 16.66%,var(--blanc) 16.66% 33.33%,var(--bleu-clair) 33.33% 66.66%,
  var(--blanc) 66.66% 83.33%,var(--rouge) 83.33% 100%)}
.drapeau--fin{height:6px;width:96px;border-radius:3px;transform-origin:left center}

/* ── boutons ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px;
  border-radius:14px;border:1px solid transparent;font-weight:650;font-size:.95rem;letter-spacing:-.01em;line-height:1.1;cursor:pointer;
  transition:transform .18s var(--lent),background .25s,border-color .25s,box-shadow .25s}
.btn--rouge{background:var(--rouge);color:#fff;box-shadow:0 12px 32px rgba(165,25,49,.3)}
.btn--rouge:hover{background:var(--rouge-vif);transform:translateY(-2px)}
.btn--blanc{background:var(--blanc);color:var(--noir)}
.btn--blanc:hover{background:#fff;transform:translateY(-2px)}
.btn--contour{border-color:var(--ligne);color:var(--blanc);background:rgba(244,245,248,.04)}
.btn--contour:hover{border-color:rgba(244,245,248,.4);background:rgba(244,245,248,.08);transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn .icon{width:18px;height:18px}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── en-tête flottant ────────────────────────────────────────────── */
.entete{position:sticky;top:14px;z-index:100;height:0}
.coque{width:min(100% - 30px,var(--max));min-height:64px;margin-inline:auto;padding:8px 9px 8px 18px;display:flex;align-items:center;gap:22px;
  border:1px solid var(--ligne);border-radius:20px;background:rgba(10,10,13,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(0,0,0,.35)}
.marque{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.marque__nom{font-weight:780;letter-spacing:-.04em;font-size:1.02rem;line-height:1}
.marque__sous{display:block;margin-top:3px;color:var(--gris);font-size:.66rem;font-weight:600;letter-spacing:.02em}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a{position:relative;padding:8px 0;color:var(--gris);font-size:.9rem;font-weight:600;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:1.5px;background:var(--rouge-vif);transition:right .22s var(--lent)}
.nav a:hover{color:var(--blanc)}
.nav a:hover::after{right:0}
.entete__actions{display:flex;align-items:center;gap:8px}
.entete__actions .btn{min-height:44px;padding:10px 16px;font-size:.88rem}
/* Bouton de la musique de fond : discret, même gabarit que le burger, visible
   partout (il vit dans l'en-tête, que la navigation ne remplace jamais). */
.son{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--ligne);border-radius:13px;background:var(--noir-3);color:var(--blanc);cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.son:hover{border-color:var(--rouge-vif);color:var(--rouge-vif)}
.son .icon{width:19px;height:19px}
.son .son__off,.son.est-coupe .son__on{display:none}
.son.est-coupe .son__off{display:block}
.son.est-coupe{color:var(--gris)}
.burger{display:none;width:46px;height:44px;padding:0;border:1px solid var(--ligne);border-radius:13px;background:var(--noir-3);color:var(--blanc);flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
/* Le menu : les trois barres sont les rayures du drapeau, rouge, blanc, bleu. */
.burger span{width:20px;height:3px;border-radius:2px;background:var(--blanc);transition:transform .3s var(--lent),opacity .2s,background .3s}
.burger span:first-child{background:var(--rouge-vif)}
.burger span:last-child{background:#5a55a0}
.burger[aria-expanded=true] span:first-child{transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:last-child{transform:translateY(-8px) rotate(-45deg)}
.panneau-mobile{display:none;width:min(100% - 30px,var(--max));margin:8px auto 0;padding:10px 20px 20px;border:1px solid var(--ligne);border-radius:20px;background:rgba(13,13,17,.96);backdrop-filter:blur(18px)}
.panneau-mobile nav{display:grid}
.panneau-mobile nav a{padding:14px 0;border-bottom:1px solid var(--ligne);font-weight:600}
.panneau-mobile .btn{width:100%;margin-top:16px}
@media (max-width:900px){
  .entete{top:9px}
  .coque{width:calc(100% - 18px);gap:12px;padding-left:14px}
  .nav{display:none}
  .entete__actions{margin-left:auto}
  .entete__actions .btn{display:none}
  .burger{display:flex}
  .panneau-mobile.est-ouvert{display:block}
}

/* ── hero ────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:68% 50%}
/* La vidéo du ring se pose par-dessus l'image, qui reste l'affiche (chargement, mouvement
   réduit, économie de données, échec de lecture). */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.04);opacity:0;transition:opacity 1.2s var(--lent);pointer-events:none}
/* Léger zoom : la source porte des logos de chaîne dans les coins, il les sort du cadre. */
.hero__video.est-visible{opacity:1}
.hero__voile{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.7) 40%,rgba(5,5,6,.12) 100%),
  linear-gradient(0deg,var(--noir) 0%,rgba(5,5,6,0) 42%)}
.hero .conteneur{padding:140px 0 60px}
.hero__sur{display:flex;align-items:center;gap:14px;margin:0 0 26px;color:var(--gris);font-size:.9rem;font-weight:600}
.hero h1{max-width:13ch}
.hero h1 .sourd{color:var(--gris);font-weight:700}
.hero__texte{margin:28px 0 0;max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__faits{display:flex;flex-wrap:wrap;gap:8px 28px;margin:52px 0 0;padding:26px 0 0;border-top:1px solid var(--ligne);list-style:none;color:var(--gris);font-size:.88rem;font-weight:600}
.hero__faits b{display:block;color:var(--rouge-vif);font-size:1.45rem;font-weight:780;letter-spacing:-.04em;line-height:1.1}
.hero__defile{position:absolute;right:var(--gouttiere);bottom:28px;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;color:var(--gris);font-size:.7rem;font-weight:600;letter-spacing:.04em}
.hero__defile i{display:block;width:1px;height:46px;background:linear-gradient(var(--rouge-vif),transparent);animation:defile-ligne 1.8s var(--lent) infinite}
@keyframes defile-ligne{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:700px){
  /* Sur téléphone le sujet est en bas de l'image (brief ChatGPT) : le texte prend le haut. */
  .hero{align-items:start}
  .hero__media img{object-position:50% 100%}
  /* Sur téléphone la source paysage, étirée plein écran, ne montrerait qu'un flou : elle occupe
     la moitié basse, presque à sa taille réelle, fondue vers le haut. */
  .hero__video{object-position:50% 50%;transform:scale(1.02)}
  .hero__voile{background:linear-gradient(180deg,rgba(5,5,6,.92) 0%,rgba(5,5,6,.78) 38%,rgba(5,5,6,.15) 68%,rgba(5,5,6,.05) 85%,var(--noir) 100%)}
  .hero .conteneur{padding:110px 0 44px}
  .hero__actions .btn{flex:1 1 100%}
  .hero__faits{gap:14px 20px}
  .hero__defile{display:none}
}

/* ── bande défilante ─────────────────────────────────────────────── */
.bande{border-block:1px solid var(--ligne);background:var(--noir-2);overflow:hidden;contain:paint;padding:10px 0}
.bande__piste{display:flex;width:max-content;animation:defile 46s linear infinite}
.bande__piste span{display:flex;align-items:center;gap:26px;padding:0 26px;white-space:nowrap;font-family:"Anton",Impact,sans-serif;font-size:clamp(2rem,1.4rem+2.6vw,3.4rem);line-height:1.1;letter-spacing:.03em;text-transform:uppercase;color:var(--blanc)}
.bande__piste span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--rouge-vif)}   /* une sur deux en contour rouge */
.bande__piste span::after{content:"";width:12px;height:12px;background:var(--rouge-vif);transform:rotate(45deg);-webkit-text-stroke:0}
@keyframes defile{to{transform:translateX(-50%)}}

/* ── sections ────────────────────────────────────────────────────── */
.section{padding:clamp(80px,10vw,136px) 0}
.section--sombre{background:var(--noir-2)}
.tete{display:grid;gap:22px;margin-bottom:clamp(40px,5vw,64px);max-width:980px}
.tete h2{max-width:16ch}
.tete--deux{grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);align-items:end;max-width:none}
.tete--deux .texte{margin:0 0 6px}
@media (max-width:860px){.tete--deux{grid-template-columns:1fr}}

/* ── le voyage : scène épinglée (accueil) ────────────────────────── */
.voyage{position:relative;background:var(--noir)}
.voyage__piste{position:relative;height:420svh}
.voyage__scene{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.voyage__images{position:absolute;inset:0;z-index:-2}
.voyage__images img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06)}
.voyage__images img:first-child{opacity:1}
.voyage__voile{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,5,6,.92) 0%,rgba(5,5,6,.55) 55%,rgba(5,5,6,.2) 100%),linear-gradient(0deg,var(--noir) 0%,transparent 30%,transparent 80%,var(--noir) 100%)}
.voyage__contenu{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:110px 0 44px}
.voyage__titre{max-width:16ch}
.voyage__etapes{position:relative;align-self:center}
.etape{position:absolute;inset:0;display:grid;align-content:center;gap:12px;max-width:52ch;opacity:0;visibility:hidden}
.etape:first-child{opacity:1;visibility:visible}
.etape__lieu{margin:0;color:var(--rouge-texte);font-weight:650;font-size:.95rem}
.etape h3{font-size:clamp(1.7rem,1.2rem+2.2vw,3rem);font-weight:720;letter-spacing:-.045em}
.etape p{margin:0;color:var(--gris);font-size:1.05rem}
.voyage__barre{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.voyage__barre span{position:relative;display:block;padding-top:14px;color:var(--gris-2);font-size:.8rem;font-weight:600;transition:color .3s}
.voyage__barre span::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ligne)}
.voyage__barre span::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--rouge-vif);transform:scaleX(0);transform-origin:left}
.voyage__barre span.est-actif{color:var(--blanc)}
.voyage__barre span.est-actif::after{transform:scaleX(var(--p,0))}
.voyage__barre span.est-fait::after{transform:scaleX(1)}
/* Téléphone : chaque étape est un panneau plein écran, photo en fond, texte par-dessus.
   Les panneaux sont collants en haut : le suivant monte et recouvre le précédent. */
@media (max-width:860px){
  .voyage__piste{height:auto}
  .voyage__scene{position:static;height:auto;overflow:visible}
  .voyage__images,.voyage__voile,.voyage__barre{display:none}
  .voyage__contenu{display:block;width:100%;padding:0}
  .voyage__titre{width:min(100% - 2*var(--gouttiere),var(--max));max-width:none;margin:0 auto;padding:clamp(70px,10vw,100px) 0 30px}
  .voyage__etapes{display:block}
  .etape{position:sticky;inset:auto;top:0;height:100svh;min-height:560px;max-width:none;display:grid;align-content:end;gap:10px;
    padding:0 var(--gouttiere) clamp(48px,9vw,80px);margin:0;border:0;border-radius:0;background:var(--noir);
    opacity:1;visibility:visible;overflow:hidden;isolation:isolate;box-shadow:0 -40px 80px rgba(0,0,0,.55)}
  .etape img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;border-radius:0;margin:0}
  .etape::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,5,6,.97) 0%,rgba(5,5,6,.62) 40%,rgba(5,5,6,.12) 72%,rgba(5,5,6,.4) 100%)}
  .etape h3{font-size:clamp(1.8rem,1.3rem+2.6vw,2.6rem);max-width:12ch}
  .etape p{max-width:40ch}
}
@media (min-width:861px){.etape img{display:none}}

/* ── entraînements ───────────────────────────────────────────────── */
.panneaux{display:grid;gap:14px}
@media (min-width:760px){.panneaux{grid-template-columns:repeat(3,1fr)}}
.panneau{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:3/4;isolation:isolate;border:1px solid var(--ligne)}
.panneau img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;z-index:-2;will-change:transform}
.panneau::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,5,6,.95) 0%,rgba(5,5,6,.3) 55%,rgba(5,5,6,.05) 100%)}
.panneau__corps{position:absolute;inset:auto 0 0 0;padding:26px 24px}
.panneau__corps h3{margin-bottom:8px}
.panneau__corps p{margin:0;color:var(--gris);font-size:.95rem;max-width:34ch}
.planning{margin-top:16px;display:grid;gap:16px;align-items:center;padding:clamp(24px,3.5vw,38px);border:1px solid var(--ligne);border-radius:var(--r);background:var(--noir-2)}
@media (min-width:860px){.planning{grid-template-columns:1fr auto}}
.planning h3{margin-bottom:8px}
.planning p{margin:0;color:var(--gris);max-width:52ch}
.planning__chiffre{display:flex;align-items:baseline;gap:14px;margin:0;font-size:clamp(3.2rem,7vw,5.6rem);font-weight:760;letter-spacing:-.06em;line-height:1}
.planning__chiffre small{font-size:.85rem;font-weight:600;letter-spacing:0;color:var(--gris);max-width:9ch;line-height:1.25}

/* ── formules : trois cartes de verre en orbite ──────────────────── */
.orbite{position:relative;isolation:isolate}
.orbite__lueur{position:absolute;inset:-10% 0;z-index:-1;pointer-events:none;background:
  radial-gradient(42% 60% at 50% 55%,rgba(63,59,102,.55),transparent 70%),
  radial-gradient(30% 40% at 18% 40%,rgba(165,25,49,.28),transparent 70%),
  radial-gradient(30% 40% at 82% 60%,rgba(63,59,102,.4),transparent 70%)}
.orbite__scene{position:relative;min-height:600px;margin:0 calc(-1*var(--gouttiere));overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.orbite__anneau{position:relative;display:grid;gap:14px}
@media (min-width:860px){.orbite__anneau{grid-template-columns:repeat(3,1fr)}}
.orbite__anneau.est-3d{display:block;height:100%;position:absolute;inset:0}
.orbite__anneau.est-3d .formule{position:absolute;left:50%;top:50%;width:min(360px,86vw);margin:0;will-change:transform,opacity;cursor:grab}
.orbite__anneau.est-3d .formule.est-devant{cursor:default}
.orbite__anneau.en-mouvement .formule.verre{backdrop-filter:none;-webkit-backdrop-filter:none}  /* pas de flou pendant le mouvement : saccades sur iPhone */
.orbite__anneau.est-3d .formule:not(.est-devant) .btn{pointer-events:none}
.orbite__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.orbite__nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--ligne);background:rgba(244,245,248,.04);color:var(--blanc);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background .2s}
.orbite__nav button:hover{border-color:rgba(244,245,248,.4);background:rgba(244,245,248,.08)}
.orbite__points{display:flex;gap:8px}
.orbite__points button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(244,245,248,.25);cursor:pointer;transition:background .2s,transform .2s}
.orbite__points button.est-actif{background:var(--rouge-vif);transform:scale(1.25)}
.orbite__nav .sr{position:absolute}

/* Le verre : fond translucide, flou de ce qui est derrière, arête lumineuse, reflet. */
.verre{background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 42%,rgba(255,255,255,.075));
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.05),inset 1px 0 0 rgba(255,255,255,.08),0 34px 70px rgba(0,0,0,.6)}
.verre::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 62%,rgba(255,255,255,.07) 100%)}

/* ── formules ────────────────────────────────────────────────────── */
.formules{display:grid;gap:14px}
@media (min-width:860px){.formules{grid-template-columns:repeat(3,1fr)}}
.formule{position:relative;display:flex;flex-direction:column;gap:18px;padding:30px 28px 28px;border:1px solid var(--ligne);border-radius:var(--r);background:var(--noir-2);overflow:hidden}
.formule.verre{background:none}
.formule.verre{background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 42%,rgba(255,255,255,.075))}
.formule--phare{border-color:rgba(140,135,200,.55)}
.formule--phare.verre{background:linear-gradient(150deg,rgba(120,112,190,.28),rgba(255,255,255,.04) 45%,rgba(165,25,49,.12))}
.formule--phare::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(to right,var(--rouge) 0 33%,var(--blanc) 33% 66%,var(--bleu-clair) 66% 100%)}
.formule__nom{display:flex;align-items:center;justify-content:space-between;margin:0;font-weight:650;font-size:1.05rem}
.formule__badge{padding:5px 10px;border-radius:999px;background:var(--rouge);color:#fff;font-size:.72rem;font-weight:700}
.formule__prix{display:flex;align-items:baseline;gap:8px;margin:0}
.formule__prix strong{font-size:3.6rem;font-weight:760;letter-spacing:-.06em;line-height:1}
.formule__prix span{color:var(--gris)}
.formule__engagement{margin:0;color:var(--gris);font-size:.92rem}
.formule ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:.95rem}
.formule li{display:flex;gap:12px;align-items:flex-start;color:var(--gris)}
.formule li .icon{width:18px;height:18px;margin-top:3px;color:var(--rouge-vif)}
.formule__eco{margin:0;padding:12px 14px;border-radius:var(--r-s);background:rgba(244,245,248,.06);font-size:.9rem;color:var(--blanc)}
.formule .btn{margin-top:auto;width:100%;position:relative;z-index:1}
.formule>*{position:relative;z-index:1}
.formule::after{z-index:2}
.formules__note{margin:24px 0 0;max-width:76ch;font-size:.9rem;color:var(--gris)}
.formules__note a{color:var(--blanc);border-bottom:1px solid var(--ligne)}

/* ── deux colonnes : cours privé, coach ──────────────────────────── */
.duo{display:grid;gap:34px;align-items:center}
@media (min-width:860px){.duo{grid-template-columns:1fr 1fr;gap:64px}.duo--inverse>:first-child{order:2}}
.duo__image{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--noir-3);border:1px solid var(--ligne)}
.duo__image--large{aspect-ratio:16/11}
.duo__image img{width:100%;height:100%;object-fit:cover}
.fiche{display:grid;margin:26px 0 0;padding:0;list-style:none;border-top:1px solid var(--ligne)}
.fiche li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--ligne);font-size:.98rem}
.fiche li span:first-child{color:var(--gris)}
.fiche li span:last-child{font-weight:650;text-align:right}
.citation{margin:28px 0 0;padding-left:20px;border-left:2px solid var(--rouge);font-size:1.08rem;line-height:1.5;color:var(--blanc)}
.citation cite{display:block;margin-top:8px;font-style:normal;font-size:.85rem;color:var(--gris)}

/* ── salle + contact ─────────────────────────────────────────────── */
.salle{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);border:1px solid var(--ligne);min-height:480px;display:grid;align-items:end}
.salle__image{position:absolute;inset:0;z-index:-2}
.salle__image img{width:100%;height:100%;object-fit:cover}
.salle__voile{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,5,6,.96) 0%,rgba(5,5,6,.5) 50%,rgba(5,5,6,.15) 100%)}
.salle__corps{padding:clamp(26px,4vw,48px)}
.salle h2{max-width:14ch}
.contact{display:grid;gap:34px;margin-top:48px}
@media (min-width:860px){.contact{grid-template-columns:1fr 1.2fr;gap:64px}}
.contact__liens{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.contact__liens a{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--ligne);border-radius:var(--r-s);font-weight:600;transition:border-color .2s,background .2s,transform .2s var(--lent)}
.contact__liens a:hover{border-color:rgba(244,245,248,.4);background:rgba(244,245,248,.04);transform:translateY(-2px)}
.contact__liens small{display:block;color:var(--gris);font-weight:400;font-size:.82rem}

/* ── formulaires ─────────────────────────────────────────────────── */
.form{display:grid;gap:16px}
.form label{display:grid;gap:8px;font-size:.88rem;font-weight:600;color:var(--gris)}
.form input,.form select,.form textarea{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--ligne);border-radius:var(--r-s);background:var(--noir-2);color:var(--blanc);font-size:1rem}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:rgba(244,245,248,.5)}
.form small{font-weight:400;color:#adadb8}
.form .deux{display:grid;gap:16px}
@media (min-width:600px){.form .deux{grid-template-columns:1fr 1fr}}
.case{display:flex!important;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--ligne);border-radius:var(--r-s);background:var(--noir-2);font-size:.94rem!important;font-weight:400!important;color:var(--blanc)!important;cursor:pointer}
.case input{width:22px;height:22px;min-height:0;margin:2px 0 0;accent-color:var(--rouge);flex:none}
.case a{border-bottom:1px solid var(--ligne)}
.erreur{margin:0;padding:14px 18px;border:1px solid rgba(212,33,63,.5);border-radius:var(--r-s);background:rgba(165,25,49,.14);color:#ffd4da;font-size:.92rem}
.ok{margin:0;padding:14px 18px;border:1px solid var(--ligne);border-radius:var(--r-s);background:rgba(244,245,248,.06)}
.choix{display:grid;gap:12px}
@media (min-width:700px){.choix{grid-template-columns:repeat(3,1fr)}}
.choix label{position:relative;display:grid;gap:6px;padding:20px 18px;border:1px solid var(--ligne);border-radius:var(--r-s);background:var(--noir-2);cursor:pointer;font-weight:400;color:var(--blanc);transition:border-color .2s}
.choix input{position:absolute;inset:0;opacity:0;width:100%;height:100%;min-height:0;margin:0;cursor:pointer}
.choix label:has(input:checked){border-color:var(--rouge-vif);box-shadow:0 0 0 1px var(--rouge-vif) inset}
.choix b{font-weight:650}
.choix strong{font-size:1.5rem;font-weight:760;letter-spacing:-.04em}
.choix small{color:#adadb8}
.recap{display:grid;gap:8px;padding:20px 22px;border:1px solid var(--ligne);border-radius:var(--r-s);background:var(--noir-2)}
.recap div{display:flex;justify-content:space-between;gap:16px;font-size:.95rem}
.recap div span:first-child{color:var(--gris)}
.recap div.total{border-top:1px solid var(--ligne);padding-top:10px;margin-top:4px;font-weight:650}

/* ── pages intérieures ───────────────────────────────────────────── */
.page-tete{padding:clamp(130px,16vw,190px) 0 clamp(30px,4vw,50px)}
.page-tete h1{font-size:clamp(2.5rem,1.6rem+4.4vw,5.4rem);max-width:15ch}
.page-tete .texte{margin-top:22px}
.page-corps{padding-bottom:clamp(80px,10vw,136px)}
.prose{max-width:72ch;color:var(--gris)}
.prose h2{font-size:clamp(1.5rem,1.2rem+1.4vw,2.2rem);margin:48px 0 14px}
.prose h3{font-size:1.1rem;margin:28px 0 10px;color:var(--blanc)}
.prose p,.prose li{line-height:1.7}
.prose ul,.prose ol{padding-left:22px}
.prose a{color:var(--blanc);border-bottom:1px solid var(--ligne)}
.prose .vide{color:var(--rouge-texte);font-weight:600}
.tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
.prose table{width:100%;min-width:560px;border-collapse:collapse;font-size:.94rem}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--ligne);vertical-align:top}
.prose th{color:var(--blanc);font-weight:650}
.etroit{width:min(760px,100% - 2*var(--gouttiere));margin-inline:auto}
.etiquette{margin:0 0 14px;color:var(--rouge-texte);font-weight:650;font-size:.9rem}

/* ── chapitres (qui suis-je) ─────────────────────────────────────── */
.chapitre{display:grid;gap:26px;padding:clamp(36px,5vw,64px) 0;border-top:1px solid var(--ligne)}
@media (min-width:860px){.chapitre{grid-template-columns:1fr 1fr;gap:72px;align-items:center}.chapitre--inverse>:first-child{order:2}}
.chapitre__image{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--noir-3);border:1px solid var(--ligne)}
.chapitre__image img{width:100%;height:100%;object-fit:cover}
.chapitre__lieu{margin:0 0 12px;color:var(--rouge-texte);font-weight:650;font-size:.95rem}
.chapitre h2{font-size:clamp(1.9rem,1.3rem+2.4vw,3.2rem);margin-bottom:16px}
.chapitre p{color:var(--gris);margin:0 0 14px;max-width:50ch;font-size:1.04rem}
/* ── « Sur le ring » : cartes sur ordinateur, panneaux plein écran qui s'empilent
      au défilement sur téléphone (même mécanique que la scène du parcours). ── */
.ring h2{font-size:clamp(1.9rem,1.3rem+2.4vw,3.2rem)}
.ring__pile{display:grid;gap:12px;margin-top:30px}
.panneau-ring{position:relative;margin:0;overflow:hidden;border-radius:var(--r-s);aspect-ratio:4/5;
  background:var(--noir-3);border:1px solid var(--ligne);isolation:isolate}
.panneau-ring img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.panneau-ring::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(5,5,6,.95) 0%,rgba(5,5,6,.45) 38%,rgba(5,5,6,0) 70%)}
.panneau-ring figcaption{position:absolute;inset:auto 0 0 0;display:grid;gap:4px;padding:22px 20px}
.panneau-ring strong{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.panneau-ring span{color:var(--gris);font-size:.9rem}
@media (min-width:861px){.ring__pile{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
  /* Pleine largeur, hors de la gouttière du conteneur. */
  .ring__pile{display:block;gap:0;margin-top:22px;width:100vw;margin-left:calc(50% - 50vw)}
  .panneau-ring{position:sticky;inset:auto;top:0;height:100svh;min-height:540px;aspect-ratio:auto;
    border:0;border-radius:0;box-shadow:0 -40px 80px rgba(0,0,0,.55)}
  .panneau-ring::after{background:linear-gradient(0deg,rgba(5,5,6,.96) 0%,rgba(5,5,6,.5) 34%,rgba(5,5,6,.05) 66%,rgba(5,5,6,.35) 100%)}
  .panneau-ring figcaption{padding:0 var(--gouttiere) clamp(44px,9vw,76px);gap:8px}
  .panneau-ring strong{font-size:clamp(1.6rem,1.2rem+2.4vw,2.2rem);line-height:1.1}
  .panneau-ring span{font-size:1rem;max-width:30ch}
}
@media (prefers-reduced-motion:reduce){
  .panneau-ring{position:relative;height:auto;aspect-ratio:4/5;box-shadow:none}
}
.galerie{display:grid;gap:12px;margin-top:30px}
@media (min-width:700px){.galerie{grid-template-columns:repeat(3,1fr)}}
.galerie figure{margin:0;border-radius:var(--r-s);overflow:hidden;aspect-ratio:4/5;background:var(--noir-3);border:1px solid var(--ligne)}
.galerie img{width:100%;height:100%;object-fit:cover}

/* ── appel final ─────────────────────────────────────────────────── */
.final{position:relative;isolation:isolate;overflow:hidden;padding:clamp(110px,14vw,190px) 0;text-align:center}
.final__image{position:absolute;inset:0;z-index:-2}
.final__image img{width:100%;height:112%;object-fit:cover;will-change:transform}
.final__voile{position:absolute;inset:0;z-index:-1;background:rgba(5,5,6,.8)}
.final h2{margin-inline:auto;max-width:16ch;font-size:clamp(2.4rem,1.4rem+4.4vw,5.4rem)}
.final .texte{margin:22px auto 0}
.final .hero__actions{justify-content:center}

/* ── pied ────────────────────────────────────────────────────────── */
/* Le pied : le drapeau en dégradé, du bleu nuit au rouge, un éclat blanc en diagonale. */
.pied{position:relative;isolation:isolate;overflow:hidden;padding:64px 0 34px;border-top:0;font-size:.9rem;color:#c9c8d8;
  background:linear-gradient(118deg,#2D2A4A 0%,#1c1a33 38%,#3a1022 70%,#A51931 115%)}
.pied::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;z-index:1;background:linear-gradient(to bottom,var(--rouge) 0 25%,var(--blanc) 25% 50%,var(--bleu-clair) 50% 75%,var(--blanc) 75% 100%)}
.pied::after{content:"";position:absolute;inset:-40% auto -40% 0;width:34%;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 0,rgba(244,245,248,0) 35%,rgba(244,245,248,.14) 50%,rgba(244,245,248,0) 65%,transparent 100%);
  transform:translateX(-120%) skewX(-18deg);animation:pied-eclat 9s ease-in-out infinite}
@keyframes pied-eclat{0%{transform:translateX(-120%) skewX(-18deg)}45%,100%{transform:translateX(420%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){.pied::after{display:none}}
.pied .conteneur{position:relative;z-index:1}
.pied h4,.pied .pied__titre{color:var(--blanc)}
.pied a{color:#d9d8e6}
.pied__bas{border-top-color:rgba(244,245,248,.14);color:#b3b2c4}
.pied__bas a{color:#e9e8f2}
.pied .conteneur{display:grid;gap:28px;position:relative;z-index:1}
@media (min-width:860px){.pied .conteneur{grid-template-columns:1.3fr 1fr 1fr}}
.pied h4,.pied .pied__titre{margin:0 0 12px;font-size:.9rem;font-weight:650;color:var(--blanc)}
.pied ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pied a:hover{color:var(--blanc)}
.pied__bas{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:22px;border-top:1px solid var(--ligne-2);font-size:.82rem;color:var(--gris-2)}
.pied__bas a{color:var(--gris)}

/* ── mouvement : tout en CSS (compositeur, aucun script par image). La classe `js` sur
   <html> pose les états de départ ; site.js la retire en mouvement réduit. ── */
@keyframes entree-haut{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes entree-fondu{from{opacity:0}to{opacity:1}}
@keyframes entree-monter{from{transform:translateY(110%)}to{transform:none}}
@keyframes entree-drapeau{from{transform:scaleX(0)}to{transform:none}}
.js .coque{animation:entree-haut 1s var(--lent) .1s both}
.js .hero .masque>span{animation:entree-monter .8s var(--lent) .1s both}
.js .hero .masque:nth-of-type(2)>span{animation-delay:.18s}
.js .hero .hero__sur{animation:entree-fondu .4s var(--lent) .05s both}
.js .hero .hero__sur .drapeau{animation:entree-drapeau .6s var(--lent) .05s both}
.js .hero .hero__texte{animation:entree-fondu .6s var(--lent) .35s both}
.js .hero .hero__actions{animation:entree-fondu .6s var(--lent) .45s both}
.js .hero .hero__faits{animation:entree-fondu .6s var(--lent) .55s both}
.js .hero__defile{animation:entree-fondu .6s var(--lent) .7s both}
/* Apparitions et rideaux : état de départ, puis transition quand site.js pose .est-visible. */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--lent),transform 1.1s var(--lent)}
.js [data-reveal].est-visible{opacity:1;transform:none}
.js [data-rideau]{clip-path:inset(0 100% 0 0 round 22px);transition:clip-path 1.4s var(--lent)}
.js [data-rideau].est-visible{clip-path:inset(0 0 0 0 round 22px)}
.js .sans-transition{transition:none!important}
/* Changement de page sans rechargement : court voile pendant l'attente réseau. */
#contenu{transition:opacity .18s linear}
.en-route #contenu{opacity:.45;pointer-events:none}
.en-route .son,.en-route .coque{pointer-events:auto}
#contenu:focus{outline:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-rideau],.js .hero .masque>span,.js .coque,.js .hero .hero__sur,.js .hero .hero__texte,.js .hero .hero__actions,.js .hero .hero__faits,.js .hero .hero__sur .drapeau,.js .hero__defile{opacity:1;transform:none;clip-path:none;animation:none;transition:none}
  .hero__video{display:none}
  .bande__piste,.hero__defile i{animation:none}
  .voyage__piste{height:auto}.voyage__scene{position:relative;height:auto}
  .voyage__images,.voyage__voile,.voyage__barre{display:none}
  .voyage__contenu{display:block;padding:clamp(80px,10vw,136px) 0}
  .voyage__etapes{display:grid;gap:18px;margin-top:34px}
  .etape{position:relative;opacity:1;visibility:visible;padding:26px 22px;border:1px solid var(--ligne);border-radius:var(--r);background:var(--noir-2)}
}

/* ── le boxeur : compagnon du défilement (assets/js/boxeur.js) ──────── */
.boxeur-calque{position:absolute;top:0;left:0;width:100%;overflow:hidden;pointer-events:none;z-index:21}  /* clôture : le boxeur ne peut pas élargir la page */
.boxeur{position:absolute;top:0;left:0;display:none;pointer-events:none;will-change:transform}
.boxeur.on{display:block}
.boxeur canvas{display:block;width:100%;height:100%}
.boxeur .ombre{position:absolute;width:46%;height:9px;margin-left:-23%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);opacity:0;transition:opacity .35s ease}
.boxeur.pose .ombre{opacity:1}
@media (prefers-reduced-motion:reduce){.boxeur{display:none!important}}