:root{
  --blanc:#FFFFFF; --sable:#F3ECDA; --sable-2:#E7DCC2; --creme:#FAF0E5;
  --brique:#99341F; --brique-deep:#5C1408; --bordeaux:#700202;
  --rouge:#F92424;
  --ink:#1D1815; --gris:#6E655C; --gris-2:#B5AB9E;
  --line:rgba(29,24,21,.1);
  --display:"Clash Display",-apple-system,"Segoe UI",sans-serif;
  --ui:"Roboto",-apple-system,"Segoe UI",sans-serif;
  --feed:"Inter",-apple-system,"Segoe UI",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--creme);color:var(--ink);font-family:var(--ui);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
::selection{background:var(--rouge);color:var(--blanc)}
.wrap{max-width:1200px;margin:0 auto;padding:0 30px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.015em}

/* la page = couche au-dessus du footer, fond lerpé au scroll (fallback) ou shader fluide (canvas) */
.page{position:relative;z-index:2;background:var(--blanc)}
#fluid{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ====== typographie chapitres ====== */
.chap{font-size:clamp(30px,3.8vw,52px);letter-spacing:-.02em;line-height:1.08;max-width:26ch}
.chap .sub{color:var(--gris)}
.chap .pop{color:var(--rouge)}
.chap .brk{color:var(--brique)}
.caption{font-family:var(--ui);font-size:15.5px;line-height:1.6;color:var(--gris)}
.caption b{color:var(--ink);font-weight:600}
.pillbtn{font-family:var(--ui);font-weight:500;font-size:14px;border:none;cursor:pointer;border-radius:999px;padding:12px 22px;display:inline-flex;align-items:center;gap:8px;transition:transform .2s,background .25s,border-color .25s,color .25s;white-space:nowrap}
.pillbtn:active{transform:scale(.97)}
.pill-red{background:var(--rouge);color:#fff}.pill-red:hover{background:#d61515}
.pill-ghost{background:transparent;color:var(--ink);border:1px solid rgba(29,24,21,.25)}.pill-ghost:hover{border-color:var(--ink)}
.kick{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brique);display:block;margin-bottom:14px}

/* ====== reveal / fx ====== */
/* ⚑ Les attributs width/height (posés pour réserver la place et éviter les sauts de
   mise en page) sont des « hints de présentation » : ils s'appliquent comme une hauteur
   CSS dès qu'aucune règle d'auteur n'en fixe une — le téléphone du hero passait à
   1755 px de haut. Cette règle de spécificité (0,0,1) neutralise le hint tout en
   laissant gagner n'importe quelle règle d'auteur (`.gal-th img{height:100%}`…). */
img{height:auto}

/* lien d'évitement : hors écran, il revient au premier coup de tabulation */
.skip{position:absolute;left:14px;top:-60px;z-index:200;background:var(--ink);color:var(--creme);
  font-family:var(--ui);font-size:14px;font-weight:600;padding:12px 18px;border-radius:999px;
  text-decoration:none;transition:top .2s ease}
.skip:focus{top:14px;outline:2px solid var(--rouge);outline-offset:2px}

/* bouton de pause des vidéos du mur Social (WCAG 2.2.2 : tout mouvement
   automatique de plus de 5 s doit pouvoir être arrêté) */
.sw-pause{position:absolute;right:10px;bottom:10px;z-index:4;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#fff;
  background:rgba(13,13,13,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s,transform .25s}
.sw-pause:hover{background:rgba(13,13,13,.8)}
.sw-pause:active{transform:scale(.92)}
.sw-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sw-pause svg{width:13px;height:13px;fill:currentColor;display:block}
.sw-pause .ico-play{display:none}
.sw-pause[aria-pressed="true"] .ico-play{display:block}
.sw-pause[aria-pressed="true"] .ico-pause{display:none}

.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
[data-fx]{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  [data-fx]{transform:none!important;opacity:1!important}
  .fl-chip,.hero-phone-wrap .ph,.ph-reflect::before{animation:none!important;opacity:1!important}
}

/* ====== header minimal (maquette) ====== */
.localnav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 44px;transition:background .35s,box-shadow .35s,padding .35s}
.localnav.scrolled{background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 12px 40px -22px rgba(29,24,21,.3);padding:8px 44px}
.localnav.scrolled .brand svg{height:34px}
.localnav.scrolled .pillbtn{padding:8px 17px;font-size:12.5px}
.localnav .brand{color:var(--ink)}
.localnav .brand svg{height:52px;width:auto;display:block;
  transition:height .35s cubic-bezier(.2,.7,.2,1)}
.lnav-cta{display:flex;gap:10px;align-items:center}
.lnav-cta .pillbtn{padding:10px 20px;font-size:13px;background-color:rgba(255,255,255,.7);
  transition:transform .2s,background .25s,border-color .25s,color .25s,padding .35s cubic-bezier(.2,.7,.2,1),font-size .35s}
.lnav-cta .pill-red{background:var(--rouge)}


/* ====== NAV : bouton burger (sous 1024px) ====== */
.lnav-burger{display:none;width:46px;height:46px;border:none;background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:12px}
.lnav-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
.lnav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lnav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.lnav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.lnav-panel{position:fixed;inset:0 0 auto 0;top:0;padding:86px 26px 30px;z-index:99;
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 30px 60px -30px rgba(29,24,21,.35);
  display:flex;flex-direction:column;gap:12px;
  transform:translateY(-102%);transition:transform .45s cubic-bezier(.2,.7,.2,1);visibility:hidden}
.lnav-panel.open{transform:none;visibility:visible}
.lnav-panel a{min-height:52px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;font-family:var(--ui);font-size:15px;font-weight:500;text-decoration:none;
  border:1px solid rgba(29,24,21,.2);color:var(--ink)}
.lnav-panel a.pri{background:var(--rouge);border-color:var(--rouge);color:#fff;font-weight:700}

/* ====== HERO — maquette Figma 961:5984 ====== */
.hero{position:relative;overflow:hidden}
.hero-stage{position:relative;height:max(80vh,660px)}
/* grille Figma (asset Grid 12) */
.hero-grid{position:absolute;left:45.4%;top:-2%;width:56.3%;height:80%;object-fit:cover;opacity:.3;z-index:0;pointer-events:none}
.hero .h1a,.hero .h1b{position:absolute;font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:.95;z-index:1}
.hero .h1a{left:5.9vw;top:21%;font-size:clamp(46px,6vw,116px);text-align:left}
.hero .h1b{right:9vw;top:33%;font-size:clamp(46px,6vw,116px);text-align:right;background:linear-gradient(100deg,var(--rouge),var(--brique) 88%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-phone-wrap{position:absolute;left:57.5%;top:8%;transform:translateX(-50%);width:min(600px,31.4vw);z-index:2}
/* le téléphone tourne légèrement sur lui-même en 3D, ombre globale portée à gauche, reflet qui balaie l'écran */
.hero-phone-wrap{perspective:1400px}
.hero-phone-wrap .ph{display:block;position:relative;transform-style:preserve-3d;animation:phSway 8s ease-in-out infinite;will-change:transform}
.hero-phone-wrap .ph img{width:100%;filter:drop-shadow(-48px 36px 58px rgba(29,24,21,.30))}
.ph-reflect{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:url(phone-hero.webp);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;
  mask-image:url(phone-hero.webp);mask-size:100% 100%;mask-repeat:no-repeat}
.ph-reflect::before{content:"";position:absolute;top:-15%;bottom:-15%;left:-70%;width:55%;transform:skewX(-14deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.17) 45%,rgba(255,255,255,.06) 60%,transparent);
  animation:phGlint 7s ease-in-out infinite}
@keyframes phSway{0%,100%{transform:rotateY(-9deg) rotateX(1.5deg)}50%{transform:rotateY(11deg) rotateX(-1deg)}}
@keyframes phGlint{0%,100%{left:-70%}50%{left:115%}}
.hero .ln{display:block}
.hero-eyebrow{display:none}   /* surtitre réservé au mobile — voir MQ ≤900px */
/* ⚑ 34vw et non 47vw : le téléphone est posé à `57.5% - largeur/2`, donc sa bordure
   gauche se rapproche du texte quand l'écran rétrécit. À 47vw le paragraphe passait
   SOUS le téléphone de 1300 à 1770 px — soit la quasi-totalité des portables — et
   devenait illisible. 34vw laisse toujours une gouttière. */
.hero-sub{position:absolute;left:5.9vw;top:62%;display:flex;gap:38px;width:min(640px,34vw);z-index:3;font-size:14.5px;line-height:1.55;color:var(--gris)}
.hero-sub{align-items:flex-start}
.hero-sub .col{flex:1;font-size:14.5px}
.hero-sub .lg{font-family:var(--display);font-weight:500;color:var(--brique);font-size:16px;display:block;margin-bottom:7px}
.hero-sub b{color:var(--ink);font-weight:600}
.an-cta{position:absolute;right:9vw;top:63%;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:3}
/* ⚑ Au-dessus de 1024 px, le bouton rouge « S'inscrire à la bêta » est visible dans la
   barre du haut : un second bouton dans le hero fait doublon. En dessous, ce bouton passe
   derrière le burger — on GARDE donc celui du hero, sinon il ne reste aucun appel à
   l'action à l'arrivée sur la page. */
@media(min-width:1025px){.an-cta{display:none}}
/* bouton bêta : glassmorphisme fort (le pattern ne transparaît pas) */
.an-cta .pillbtn{background:rgba(255,255,255,.82);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1.5px solid var(--rouge);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px -20px rgba(29,24,21,.35);color:var(--ink)}
.an-cta .pillbtn:hover{background:rgba(255,255,255,.95);color:var(--rouge)}
/* chips : glassmorphisme léger, apparition une à une, flottement */
.fl-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.42);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 16px 38px -18px rgba(29,24,21,.35);white-space:nowrap;opacity:0;animation:chipIn .7s cubic-bezier(.2,.7,.2,1) forwards,chipFloat 5.5s ease-in-out infinite}
.fl-chip .dotg{width:8px;height:8px;border-radius:50%;background:#398152;box-shadow:0 0 9px #39815266}
.hero-phone-wrap .fl-chip.c1{left:5%;top:52%;animation-delay:1.05s,1.75s}
.hero-phone-wrap .fl-chip.c2{left:56%;top:14.5%;animation-delay:1.4s,2.1s}
@keyframes chipIn{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* filmstrip sports intégré au hero — visible avant le scroll */
.hero-strip{padding:0 44px 40px}

/* ====== flou progressif bas de viewport (partout sur le site) ====== */
.blurbottom{position:fixed;left:0;right:0;bottom:0;height:15vh;z-index:60;pointer-events:none;transition:opacity .35s}
.blurbottom.off{opacity:0}
.blurbottom>i{position:absolute;inset:0}
.blurbottom>i:nth-child(1){backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);-webkit-mask-image:linear-gradient(transparent 0%,#000 45%,#000 60%,transparent 90%);mask-image:linear-gradient(transparent 0%,#000 45%,#000 60%,transparent 90%)}
.blurbottom>i:nth-child(2){backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);-webkit-mask-image:linear-gradient(transparent 35%,#000 62%,#000 78%,transparent 96%);mask-image:linear-gradient(transparent 35%,#000 62%,#000 78%,transparent 96%)}
.blurbottom>i:nth-child(3){backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(transparent 58%,#000 80%,#000 100%);mask-image:linear-gradient(transparent 58%,#000 80%,#000 100%)}
.blurbottom>i:nth-child(4){backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);-webkit-mask-image:linear-gradient(transparent 78%,#000 96%);mask-image:linear-gradient(transparent 78%,#000 96%)}

/* ====== FILMSTRIP SPORTS (hero) — carrousel une ligne, scroll naturel ====== */
.gal-strip{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:8px 8px 12px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.gal-strip::-webkit-scrollbar{display:none}
.gal-strip.dragging{cursor:grabbing;scroll-snap-type:none}
.gal-th{background:none;border:none;cursor:pointer;text-align:left;padding:0;flex:1 0 clamp(104px,9.2vw,182px);scroll-snap-align:start}
.gal-th .num{font-family:var(--feed);font-size:11.5px;letter-spacing:.04em;color:var(--gris);display:block;margin-bottom:9px;transition:color .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-th .im{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:3px;position:relative}
.gal-th .im img{width:100%;height:100%;object-fit:cover;filter:saturate(.5);opacity:.82;transition:filter .3s,opacity .3s,transform .5s cubic-bezier(.2,.7,.2,1)}
.gal-th:hover .im img{opacity:1;filter:none;transform:scale(1.05)}
.gal-th.on .im img{opacity:1;filter:none}
.gal-th.on .num{color:var(--rouge);font-weight:600}

/* ====== chapitres ====== */
.sec{padding:110px 0}

/* ====== MANIFESTE — bloc sombre façon daspritam.in ====== */
.mani-dark{position:relative;min-height:106vh;display:flex;align-items:center;overflow:hidden;background:#060404;color:var(--creme);padding:130px 0}
/* le dégradé (image) bouge lentement ; le grain est une couche FIXE par-dessus */
.mani-bg{position:absolute;inset:-14%;background:url(mani-glow.webp) center/cover;filter:blur(38px) saturate(1.1) brightness(.68);will-change:transform;animation:maniDrift 26s ease-in-out infinite alternate}
@keyframes maniDrift{0%{transform:scale(1.12) translate(-2.5%,-1.5%) rotate(0deg)}100%{transform:scale(1.32) translate(3%,2%) rotate(5deg)}}
.mani-grain{position:absolute;inset:0;background:url(grain.png);background-size:170px;opacity:.13;mix-blend-mode:overlay;pointer-events:none;z-index:1}
/* même dégradé, mais il coule (WebGL déforme l'image très lentement) */
.mani-shader{position:absolute;inset:-12%;width:124%;height:124%;filter:blur(38px) saturate(1.1) brightness(.68)}
.mani-dark::after{content:"";position:absolute;inset:0;background:radial-gradient(95% 75% at 50% 50%,transparent 30%,rgba(0,0,0,.72) 100%)}
.mani-inner{position:relative;z-index:2;width:100%}
.mani-huge{font-family:var(--display);font-weight:500;font-size:clamp(48px,6.9vw,150px);line-height:.98;letter-spacing:.01em;text-transform:uppercase;color:var(--creme)}
.mani-huge>span{display:block;white-space:nowrap}
.mani-huge .l1{margin-left:29%}
.mani-huge .l2{margin-left:9%}
.mani-huge .l3{margin-left:20%}
.mani-huge .l4{margin-left:31%}
/* blur du texte au passage de la souris */
.mani-huge .w{display:inline-block;font-style:normal;transition:filter .65s ease}
.mani-huge .w.blur{filter:blur(9px)}
/* images éditoriales teintées rouge, en ligne dans le titre */
.inimg{display:inline-block;height:.72em;aspect-ratio:5/3.4;border-radius:10px;overflow:hidden;vertical-align:-.05em;background:var(--rouge);margin:0 .06em;transition:filter .65s ease}
.inimg.blur{filter:blur(9px)}
.inimg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(1.08);mix-blend-mode:multiply}
.mono{font-family:"Roboto Mono",monospace;font-size:12.5px;font-weight:400;letter-spacing:.04em;line-height:1.6;color:rgba(250,240,229,.85);position:absolute;z-index:3;max-width:33ch}
.mono.tl{left:4vw;top:13%}
.mono.tr{right:4vw;top:13%;text-align:right}
.mono.br{right:4vw;bottom:9%;text-align:right;max-width:34ch}
.mono.bl{left:4vw;bottom:9%;line-height:1.5}
.mono .red{color:#fff;font-size:14px}
.mono .statline{white-space:nowrap;display:inline-block;margin-top:7px}
.mono.bl .count{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:0;color:#fff;text-shadow:0 0 24px rgba(249,36,36,.35)}

/* ====== ÉTAPIER — accordéon + téléphone (tél à gauche, étapes à droite) ====== */
/* la section tient dans un écran : contenu centré verticalement */
.steps-sec{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;padding:0;
  background:radial-gradient(58% 62% at 92% 4%,var(--sable) 0%,rgba(243,236,218,.5) 40%,rgba(243,236,218,0) 75%)}
/* même asset de grille que le hero — en bas à gauche */
.steps-gridimg{position:absolute;left:0;bottom:0;width:46%;height:54%;object-fit:cover;opacity:.3;z-index:0;pointer-events:none}
.steps-sec .wrap{position:relative;z-index:1;width:100%;padding-top:46px;padding-bottom:46px}
/* le titre passe DERRIÈRE le téléphone (z-index 0 sous le contenu) */
.steps-title{position:absolute;left:30px;top:max(-46px,-2.1vw);z-index:0;margin:0;pointer-events:none;
  font-family:var(--display);font-weight:700;color:var(--rouge);
  font-size:clamp(52px,7.6vw,124px);line-height:.92;letter-spacing:-.028em}
.steps-split{position:relative;z-index:1;display:grid;grid-template-columns:.85fr 1fr;gap:70px;align-items:center}
.steps-split>*{min-width:0}

/* --- téléphone CSS : le cadre reste, l'écran change --- */
.stp-stage{display:flex;justify-content:center;align-items:center;perspective:1800px}
/* largeur pilotée + aspect-ratio : le ratio reste juste quoi qu'il arrive ;
   le cap en svh garantit que le tél tient dans l'écran */
/* ⚑ Maquette RACCOURCIE (9/16,6 au lieu de 9/18,5) : la tab bar de l'app flotte
   au-dessus du contenu, donc sur un écran pleine hauteur elle tombait au milieu
   avec du contenu dessous. Les captures sont recadrées juste sous la tab bar
   (source : elle s'arrête à y=2455 sur 2622) et le cadre suit ce format. */
.stp-phone{--w:min(300px,32svh,88%);position:relative;width:var(--w);height:auto;aspect-ratio:9/16.6;border-radius:44px;
  background:linear-gradient(145deg,#3a3a3c,#0e0e0f 42%,#2c2c2e 78%,#0a0a0b);padding:11px;
  box-shadow:0 60px 90px -50px rgba(29,24,21,.62),0 8px 24px -12px rgba(29,24,21,.3);
  transform:rotateY(13deg) rotateX(2.5deg) rotate(-.6deg);transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.stp-phone:hover{transform:rotateY(6deg) rotateX(1.5deg)}
.stp-phone::before{content:"";position:absolute;inset:1.5px;border-radius:44px;
  background:linear-gradient(120deg,rgba(255,255,255,.55),transparent 26%,transparent 72%,rgba(255,255,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;pointer-events:none;z-index:3}
.stp-island{position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:31%;height:22px;border-radius:14px;background:#000;z-index:2;pointer-events:none}
.stp-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#000}
.stp-screen>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.stp-screen>.on{opacity:1;transform:none}
/* écran provisoire — remplacer par <img src="assets/screen-0X.png"> */
.stp-scr{background:#0B0B0C;color:var(--creme);display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 22px 92px;font-family:var(--display)}
.stp-scr img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8;z-index:0}
.stp-scr::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 28%,rgba(0,0,0,.8));z-index:1}
.stp-scr .stp-scr-in{position:relative;z-index:2}
.stp-scr .lab{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge);margin-bottom:6px}
.stp-scr .ttl{font-size:26px;font-weight:600;line-height:1.08}
.stp-scr .note{font-family:var(--ui);font-size:11px;color:rgba(250,240,229,.55);margin-top:9px}
.stp-tabs{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  display:flex;gap:5px;align-items:center;background:#0D0D0D;border-radius:999px;padding:7px 9px}
.stp-tabs span{font-family:var(--ui);font-size:10px;color:rgba(250,240,229,.55);padding:5px 11px;border-radius:999px}
.stp-tabs span.on{background:var(--creme);color:var(--ink);font-weight:600}

/* --- accordéon : bulles en verre --- */
.acc{display:flex;flex-direction:column;gap:12px}
.acc-item{border-radius:26px;overflow:hidden;
  background:rgba(255,255,255,.42);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 16px 38px -20px rgba(29,24,21,.3);
  transition:background .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
.acc-item.open{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 60px -30px rgba(92,20,8,.4)}
.acc-head{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 26px;text-align:left}
.acc-ic{width:30px;height:30px;flex:none;border-radius:50%;border:1.5px solid rgba(29,24,21,.28);
  display:grid;place-items:center;position:relative;
  transition:border-color .4s,background .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;background:var(--ink);border-radius:2px;transition:background .4s,opacity .3s}
.acc-ic::before{width:12px;height:1.8px}
.acc-ic::after{width:1.8px;height:12px}
.acc-item.open .acc-ic{border-color:var(--rouge);background:var(--rouge);transform:rotate(135deg)}
.acc-item.open .acc-ic::before,.acc-item.open .acc-ic::after{background:#fff}
.acc-item.open .acc-ic::after{opacity:0}
.acc-n{font-family:var(--display);font-weight:600;font-size:13px;color:var(--rouge);letter-spacing:.08em;flex:none;width:2.2em}
.acc-t{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.01em}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.acc-item.open .acc-body{grid-template-rows:1fr}
.acc-body>div{overflow:hidden}
.acc-body p{color:var(--gris);font-size:15.5px;line-height:1.6;padding:0 26px 24px 88px;max-width:44ch}
/* barre de carrousel de l'étapier — MOBILE UNIQUEMENT (cf. media query ≤900px) */
.stp-nav{display:none;align-items:center;justify-content:center;gap:18px;padding:18px 22px 0}
.stp-arrow{width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.6);border:1px solid rgba(29,24,21,.14);color:var(--ink);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 26px -16px rgba(29,24,21,.4);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s,opacity .3s}
.stp-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.stp-arrow:hover{background:#fff;border-color:var(--rouge);color:var(--rouge)}
.stp-arrow:active{transform:scale(.9)}
.stp-dots{display:flex;align-items:center;gap:9px}
.stp-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(29,24,21,.2);transition:background .35s,width .35s cubic-bezier(.2,.7,.2,1)}
.stp-dot.on{background:var(--rouge);width:26px;border-radius:999px}
@media(prefers-reduced-motion:reduce){.stp-arrow,.stp-dot,.acc-item{transition:none!important}}

/* ====== XP CARD — registre SABLE (aucun raccord : la section est claire
   comme le reste de la page, le shader fluide gère la teinte via BG_STOPS) ====== */
.xp-sec{position:relative;overflow:hidden;padding:max(96px,9.2vw) 0 clamp(100px,12vh,170px);background:transparent}
.xp-sec .wrap{position:relative;z-index:2}
/* mot géant, derrière la carte */
.xp-giant{position:absolute;left:0;right:0;top:max(18px,2.2vw);z-index:1;pointer-events:none;
  text-align:center;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.022em;
  font-size:clamp(58px,10.6vw,176px);line-height:.88;color:var(--rouge);white-space:nowrap}

/* --- grille 3 colonnes : texte · carte · texte --- */
.xp-grid3{display:grid;grid-template-columns:.82fr 1fr .92fr;gap:clamp(26px,3.4vw,62px);align-items:center}
.xp-grid3>*{min-width:0}
.xp-left{display:flex;flex-direction:column;gap:22px}
.xp-left .caption{padding-left:16px;border-left:2.5px solid var(--rouge)}
.xp-left .caption.muted{border-left-color:rgba(29,24,21,.18);color:var(--gris)}
.xp-right h3{font-size:clamp(24px,2.5vw,38px);line-height:1.12;margin-bottom:20px}
.xp-right .caption{font-size:16px;line-height:1.62}

/* --- bascule Profil / Sportive --- */
.xp-toggle{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:4px 0}
.xp-pill{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:14px 34px;min-width:190px;text-align:center;cursor:pointer;
  border:1.5px solid rgba(29,24,21,.18);background:rgba(255,255,255,.6);color:var(--gris);
  transition:background .45s cubic-bezier(.2,.7,.2,1),color .45s,border-color .45s,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.xp-pill:hover{border-color:rgba(29,24,21,.4);color:var(--ink);transform:translateX(3px)}
.xp-pill.on{background:var(--rouge);border-color:var(--rouge);color:#fff;
  box-shadow:0 16px 30px -14px rgba(249,36,36,.6)}
.xp-pill:active{transform:scale(.975)}
.xp-pill:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}

/* --- la carte : scène 3D --- */
.xp-stage{position:relative;display:flex;justify-content:center;align-items:center;
  perspective:1500px;perspective-origin:50% 45%}
.xp-card{position:relative;width:min(340px,86%);aspect-ratio:853/1367;
  transform-style:preserve-3d;will-change:transform;cursor:pointer}
.xp-card:focus-visible{outline:2.5px solid var(--rouge);outline-offset:14px;border-radius:22px}
/* un jeu = recto + verso ; on n'affiche qu'un jeu a la fois */
.xp-set{position:absolute;inset:0;transform-style:preserve-3d;
  opacity:0;pointer-events:none;transition:opacity .45s ease}
.xp-set.on{opacity:1;pointer-events:auto}
.xp-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* ⚑ l'ombre est portée par l'IMG, jamais par .xp-face : un `filter` sur un enfant
   de preserve-3d aplatit la scène et neutralise backface-visibility (= flip invisible) */
.xp-face img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 46px 70px rgba(92,20,8,.34))}
.xp-face.back{transform:rotateY(180deg)}
/* reflet qui suit le curseur, decoupe sur la forme de la carte */
.xp-glare{position:absolute;inset:auto;width:min(340px,86%);aspect-ratio:853/1367;border-radius:22px;pointer-events:none;z-index:3;
  opacity:0;transition:opacity .5s ease;mix-blend-mode:screen;
  background:radial-gradient(closest-side circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.42),rgba(255,255,255,.1) 46%,transparent 72%)}
.xp-stage:hover .xp-glare{opacity:.9}
/* pas de libellé « clique pour retourner » : l'affordance est le geste lui-même
   (glissé au doigt en tactile, clic à la souris). `pan-y` laisse passer le scroll. */
.xp-card{touch-action:pan-y}
@media(prefers-reduced-motion:reduce){
  .xp-card{transition:none!important}
  .xp-glare{display:none}
}

.xp-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.xp-grid>*{min-width:0}
.xpcard-stage{display:flex;gap:22px;align-items:flex-end;justify-content:center}
.xpcard{position:relative;width:min(330px,70vw)}
.xpcard img{width:100%;filter:drop-shadow(0 45px 80px rgba(92,20,8,.35))}
.xpcard .shine{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.xpcard .shine::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);animation:shine 5.5s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}85%,100%{left:130%}}
.xpcard-pills{display:flex;flex-direction:column;gap:12px}
.pill{font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:11px 18px;border-radius:999px;text-align:center}
.pill.on{background:var(--ink);color:var(--creme)}
.pill.off{background:transparent;color:var(--gris);border:1px solid rgba(29,24,21,.2)}
.xp-caps{display:flex;flex-direction:column;gap:18px;margin-top:28px}
.xp-caps .caption{padding-left:18px;border-left:2.5px solid var(--rouge)}

/* ====== EXPLORE — cartes flottantes, parallaxe de profondeur, survol local ====== */
.gv-sec{position:relative;overflow:hidden;min-height:100svh;
  padding:clamp(60px,7vh,96px) 0 clamp(40px,5vh,70px);background:transparent;color:var(--creme);isolation:isolate}
/* --- matière de fond : bokeh flous qui dérivent (aucun JS n'écrit dessus) --- */
.gv-bokeh{position:absolute;inset:-14%;z-index:0;pointer-events:none;filter:blur(78px);opacity:.6;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 86%,transparent 100%);}
.gv-bokeh i{position:absolute;display:block;border-radius:50%;
  left:var(--x);top:var(--y);width:var(--s);height:var(--s);background:var(--c);
  animation:gvFloat var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes gvFloat{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(var(--mx),var(--my),0) scale(1.22)}}
/* nappes larges qui respirent en fond : donnent de la matiere sans surcharger */
.gv-haze{position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:.5;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 86%,transparent 100%);
  filter:blur(90px) saturate(1.1);mix-blend-mode:screen}
.gv-haze i{position:absolute;display:block;border-radius:50%;
  left:var(--x);top:var(--y);width:var(--s);height:var(--s);background:var(--c);
  animation:gvHaze var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes gvHaze{
  0%{transform:translate3d(0,0,0) scale(.9) rotate(0deg)}
  100%{transform:translate3d(var(--mx),var(--my),0) scale(1.35) rotate(12deg)}}
/* bulles photo floues du fond : elles derivent lentement, en CSS (le JS ne les touche pas) */
.gv-dust{position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 86%,transparent 100%);}
.gv-dust span{position:absolute;display:block;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;
  filter:blur(var(--b)) saturate(.85);opacity:var(--o);
  animation:gvDust var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
.gv-dust img{width:100%;height:100%;object-fit:cover}
@keyframes gvDust{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(var(--mx),var(--my),0) scale(1.14)}}
@media(prefers-reduced-motion:reduce){.gv-haze i,.gv-dust span{animation:none}}
.gv-grain{position:absolute;inset:0;z-index:1;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 86%,transparent 100%);
  background:url(grain.png);background-size:170px;opacity:.1;mix-blend-mode:overlay}

/* --- le champ de cartes --- */
.gv-field{position:absolute;inset:0;z-index:2;pointer-events:none}
.gv-card{pointer-events:auto}
.gv-bub{pointer-events:none}
.gv-card{position:absolute;left:var(--x);top:var(--y);width:var(--w);
  transform-origin:50% 50%;will-change:transform;
  border-radius:var(--r,20px);overflow:hidden;
  background:rgba(255,255,255,.07);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.16)}
/* profondeur : le fond est plus flou, plus sombre, plus petit */
.gv-card[data-depth="0"]{filter:blur(5px) brightness(.72)}
.gv-card[data-depth="1"]{filter:blur(1.6px) brightness(.9)}
.gv-card[data-depth="2"]{filter:none}
.gv-card img{width:100%;display:block}
.gv-lab{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(250,240,229,.62)}
.gv-name{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.12;margin-top:3px}
.gv-pad{padding:13px 15px}
/* variantes */
.gv-card .im img{height:100%;object-fit:cover}
/* carte CLUB : photo encastree, avec son propre rayon (crea TC Lyon Sud) */
.gv-card.club{padding:7%}
.gv-card.club .im{aspect-ratio:160/87;overflow:hidden;border-radius:calc(var(--r,20px) * .83)}
.gv-card.club .cap{padding:11px 5px 3px}
/* carte EVENT : photo pleine + barre en verre avec les participants (crea Marathon) */
.gv-card.event{padding:0}
.gv-card.event .im{aspect-ratio:369.29/280;overflow:hidden}
.gv-card.event .bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:13px 15px;background:rgba(16,13,11,.66);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.1)}
.gv-card.event .bar .t{font-family:var(--display);font-weight:600;font-size:14.5px;color:#fff;line-height:1.1}
.gv-card.event .avs{margin-left:auto;display:flex;flex:none}
.gv-card.event .avs span{width:25px;height:25px;border-radius:50%;overflow:hidden;flex:none;
  border:2px solid rgba(16,13,11,.85);margin-left:-9px}
.gv-card.event .avs span:first-child{margin-left:0}
.gv-card.event .avs img{width:100%;height:100%;object-fit:cover}
/* bulles floutees : posees DERRIERE les cartes pour reveler la refraction du verre */
.gv-bub{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);
  border-radius:50%;overflow:hidden;filter:blur(var(--b,16px));opacity:var(--o,.7);
  will-change:transform}
.gv-bub img{width:100%;height:100%;object-fit:cover}
/* carte issue d'un SVG de la crea : le wrapper ne sert qu'au positionnement + animation */
.gv-card.svgc{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:0;box-shadow:none;border-radius:0;overflow:visible}
.gv-card.svgc img{width:100%;height:auto;display:block}
/* pills date + lieu de la carte or */
.gv-pills{display:flex;gap:7px}
.gv-pills span{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.04em;
  background:rgba(255,255,255,.55);color:#2B2410;border-radius:999px;padding:5px 10px}
/* lignes empilees facon resultat de recherche */
.gv-card.row{padding:0}
.gv-card.row .rav{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none}
.gv-card.row .rav img{width:100%;height:100%;object-fit:cover}
.gv-card.row .gv-name{margin:0;font-size:14px}
/* la flamme respire : aucun JS n'ecrit dessus, l'animation CSS est sure */
.gv-flame{font-size:15px;display:inline-block;transform-origin:50% 85%;
  animation:gvFlame 2.4s ease-in-out infinite}
@keyframes gvFlame{
  0%,100%{transform:scale(1) rotate(0deg)}
  30%{transform:scale(1.16) rotate(-6deg)}
  60%{transform:scale(.94) rotate(5deg)}
}
@media(prefers-reduced-motion:reduce){.gv-flame{animation:none}}
.gv-card.gold{background:linear-gradient(150deg,#D8C572,#C4AE55);border-color:rgba(255,255,255,.3);color:#2B2410}
.gv-card.gold .gv-lab{color:rgba(43,36,16,.66)}
.gv-card.gold .gv-name{font-size:17px;text-transform:uppercase}
.gv-card.red{background:#EE4030;border-color:rgba(255,255,255,.2);color:#0E0A08}
.gv-card.red .gv-lab{color:rgba(14,10,8,.72)}
.gv-card.red .gv-name{font-size:19px;text-transform:uppercase;letter-spacing:-.01em}
.gv-shield{width:38px;height:38px;border-radius:50%;background:#141110;display:grid;place-items:center;margin-bottom:20px}
.gv-shield svg{width:17px;height:17px;fill:#fff}
.gv-card.cream{background:rgba(250,240,229,.94);color:var(--ink);border-color:rgba(255,255,255,.6)}
.gv-card.cream .im{margin:9px 9px 0;border-radius:10px;overflow:hidden}
.gv-card.cream .gv-pad{padding:10px 11px 12px}
.gv-card.cream .gv-lab{color:var(--gris)}
.gv-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:9px 13px;
  background:rgba(20,16,14,.72);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(12px)}
.gv-chip .av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none}
.gv-chip .av img{width:100%;height:100%;object-fit:cover}
.gv-row{display:flex;align-items:center;gap:11px;padding:11px 12px}
.gv-row .btn{margin-left:auto;font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:7px 13px;color:var(--creme)}
.gv-badge{position:absolute;top:9px;right:9px;font-family:var(--ui);font-size:9px;font-weight:700;
  letter-spacing:.12em;background:var(--ink);color:var(--creme);border-radius:999px;padding:5px 9px}
.gv-plus{position:absolute;right:13px;bottom:13px;width:30px;height:30px;border-radius:50%;
  background:rgba(14,10,8,.16);display:grid;place-items:center;color:#0E0A08;font-size:17px;line-height:1}

/* --- bloc central --- */
.gv-center{position:relative;z-index:4;text-align:center;padding:0 26px;max-width:900px;margin:0 auto}
/* voile doux derriere le titre : garantit la lisibilite si une carte derive */
.gv-scrim{position:absolute;left:50%;top:-6%;transform:translateX(-50%);
  width:min(1180px,104%);height:66%;z-index:3;pointer-events:none;
  background:radial-gradient(58% 56% at 50% 42%,rgba(8,5,4,.9) 0%,rgba(8,5,4,.62) 52%,transparent 78%)}
.gv-center .kick{color:var(--rouge)}
.gv-center h2{font-size:clamp(34px,5.2vw,74px);line-height:1.02;color:var(--creme)}
.gv-sub{font-family:var(--display);font-weight:300;font-size:clamp(18px,2.4vw,34px);
  line-height:1.15;color:rgba(250,240,229,.82);margin-top:6px}
.gv-search{display:flex;align-items:center;gap:12px;margin:26px auto 0;max-width:400px;
  background:rgba(255,255,255,.96);border-radius:999px;padding:9px 9px 9px 22px;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.7);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.gv-search:hover{transform:translateY(-2px);box-shadow:0 34px 60px -24px rgba(0,0,0,.8)}
.gv-search .gv-ph{flex:1;text-align:left;font-family:var(--ui);font-size:12.5px;line-height:1.3;color:var(--gris)}
.gv-search .go{width:38px;height:38px;border-radius:50%;background:var(--sable);flex:none;
  display:grid;place-items:center;color:var(--ink);font-size:15px}
@media(prefers-reduced-motion:reduce){.gv-bokeh i{animation:none}}


/* ====== SOCIAL — mur vivant (Pinterest wall) ====== */
.sw-sec{padding:110px 0;overflow:hidden}
.sw-grid{display:grid;grid-template-columns:.74fr 1.26fr;gap:54px;align-items:center}
.sw-grid>*{min-width:0}
.sw-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--feed);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brique);border:1px solid rgba(153,52,31,.3);border-radius:999px;padding:7px 13px;margin-top:26px}
.sw-live i{width:7px;height:7px;border-radius:50%;background:var(--rouge);animation:swBlink 1.6s infinite}
.avrow{display:flex;align-items:center;margin-top:22px}
.avrow .avc{width:52px;height:52px;border-radius:50%;overflow:hidden;border:2.5px solid var(--creme);margin-left:-13px;background:#ddd;transition:transform .3s}
.avrow .avc:first-child{margin-left:0}
.avrow .avc:hover{transform:translateY(-5px)}
.avrow .avc img{width:100%;height:100%;object-fit:cover}
.avrow .more{margin-left:14px;font-size:13px;font-weight:600;color:var(--gris)}

/* le mur : 3 colonnes qui defilent en boucle */
.sw-wall{position:relative;height:min(86vh,820px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  -webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.sw-col{position:relative;overflow:hidden}
.sw-track{display:flex;flex-direction:column;gap:16px;will-change:transform}

/* cartes : pop d'entree, lift au survol */
.swc{position:relative;background:var(--blanc);border:1px solid rgba(29,24,21,.07);border-radius:18px;overflow:hidden;flex:none;
  box-shadow:0 24px 48px -34px rgba(92,20,8,.38);
  opacity:0;transform:translateY(28px) scale(.93);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.swc.in{opacity:1;transform:none}
.swc:hover{box-shadow:0 36px 64px -30px rgba(92,20,8,.52);z-index:3}

/* rangee user */
.swu{display:flex;gap:10px;padding:12px 14px;align-items:flex-start;font-family:var(--feed)}
.swu .av{width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--brique);color:var(--creme);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:12px;flex:none}
.swu .av img{width:100%;height:100%;object-fit:cover}
.swu .bd{font-size:13px;color:var(--ink);line-height:1.45;flex:1;min-width:0}
.swu b{font-weight:600}
.sw-flexline{display:inline-flex;align-items:center;gap:5px;color:var(--rouge);font-weight:600;font-size:12px;margin-top:4px}
/* la flamme des lignes vacille aussi, plus discrètement — chaque carte a son décalage */
.sw-flexline .fl{display:inline-block;animation:swFlame 2.9s ease-in-out infinite;animation-delay:var(--fd,0s)}
.sw-flexline .n{display:inline-block;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.sw-flexline.pop .n{transform:translateY(-3px) scale(1.3)}

/* medias : photo ken burns ou vraie video */
.sw-media{position:relative;overflow:hidden;background:var(--sable)}
.sw-media img,.sw-media video{width:100%;display:block}
.sw-media img.kb{animation:swKb 13s ease-in-out infinite alternate;will-change:transform}
@keyframes swKb{from{transform:scale(1)}to{transform:scale(1.1) translateY(-2.5%)}}
.sw-media .datebdg{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.88);color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.07em;padding:6px 10px;border-radius:8px;backdrop-filter:blur(4px);font-family:var(--feed)}
.sw-vidtag{position:absolute;top:10px;right:10px;background:rgba(13,13,13,.55);color:#fff;font:600 9.5px var(--feed);letter-spacing:.1em;padding:5px 9px;border-radius:7px;backdrop-filter:blur(4px);display:flex;gap:5px;align-items:center;text-transform:uppercase}
.sw-vidtag i{width:6px;height:6px;border-radius:50%;background:var(--rouge);animation:swBlink 1.4s infinite}
@keyframes swBlink{50%{opacity:.25}}

/* carte badge : le badge se tamponne */
.sw-badge{background:linear-gradient(140deg,var(--brique),var(--bordeaux));color:var(--creme);padding:18px 16px;display:flex;gap:14px;align-items:center;position:relative;overflow:hidden}
.sw-badge::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(250,240,229,.16),transparent);transform:skewX(-16deg);animation:swShine 5.2s ease-in-out infinite}
@keyframes swShine{0%,60%{left:-70%}90%,100%{left:130%}}
.sw-badge .bic{width:54px;height:54px;border-radius:15px;background:rgba(250,240,229,.14);border:1px solid rgba(250,240,229,.3);display:grid;place-items:center;font-size:25px;flex:none;position:relative}
.sw-badge .ring{position:absolute;inset:-2px;border-radius:15px;border:2px solid rgba(250,240,229,.7);opacity:0;pointer-events:none}
.swc.in .sw-badge .bic{animation:swStamp .85s cubic-bezier(.34,1.56,.64,1) .3s backwards}
@keyframes swStamp{0%{transform:scale(0) rotate(-16deg)}70%{transform:scale(1.16) rotate(3deg)}100%{transform:scale(1)}}
.swc.in .sw-badge .ring{animation:swRing 1s ease-out .55s}
@keyframes swRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.65)}}
.sw-badge .bt{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,240,229,.75);font-family:var(--ui)}
.sw-badge .bn{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.05;margin-top:3px}

/* texte qui se tape */
.sw-typing{min-height:1.35em}
.sw-typing.caret::after{content:"";display:inline-block;width:2px;height:.95em;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:swCaret .8s steps(1) infinite}
@keyframes swCaret{50%{opacity:0}}

/* carte follow */
.sw-followbtn{font:600 12px var(--ui);padding:8px 16px;min-height:34px;border-radius:999px;border:none;background:var(--rouge);color:#fff;cursor:default;white-space:nowrap;transition:background .35s,color .35s,transform .2s}
.sw-followbtn.done{background:rgba(57,129,82,.14);color:#398152}

/* carte dispo */
.sw-dispopill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#398152;border:1.5px solid #398152;border-radius:999px;padding:7px 12px;font-family:var(--ui)}
.sw-dispopill i{width:7px;height:7px;border-radius:50%;background:#398152;animation:pulse 2s infinite}

/* carte Spark geante */
.sw-flexcard{background:linear-gradient(165deg,#241511,#4a170b);color:var(--creme);padding:20px 16px;text-align:center}
.sw-flexcard .big{font-size:40px;display:inline-block;animation:swFlame 2.3s ease-in-out infinite}
@keyframes swFlame{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.16) rotate(4deg)}}
.sw-flexcard .cnt{font-family:var(--display);font-weight:700;font-size:30px;margin-top:2px;font-variant-numeric:tabular-nums}
.sw-flexcard .lb{font:600 10px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:rgba(250,240,229,.65);margin-top:4px}

/* particules feu */
.sw-part{position:absolute;font-size:15px;pointer-events:none;z-index:5;animation:swPart 1.6s ease-out forwards}
@keyframes swPart{0%{opacity:0;transform:translateY(6px) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-72px) scale(1.2) rotate(var(--rr,12deg))}}

/* LA carte qui se cree en direct */
.swb .swb-tag{position:absolute;top:10px;right:10px;z-index:4;background:rgba(255,255,255,.9);color:var(--brique);font:600 9.5px "Roboto Mono",monospace;letter-spacing:.06em;padding:5px 9px;border-radius:7px;display:flex;gap:5px;align-items:center}
.swb .swb-tag i{width:6px;height:6px;border-radius:50%;background:var(--rouge);animation:swBlink 1.2s infinite}
.swb .swu .av{transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.swb.s1 .swu .av{transform:scale(1)}
.swb .swu .bd{opacity:0;transform:translateY(7px);transition:opacity .4s .12s,transform .4s .12s}
.swb.s1 .swu .bd{opacity:1;transform:none}
.swb .ph{height:150px}
.swb .ph img{height:100%;object-fit:cover;clip-path:inset(0 100% 0 0)}
.swb.s2 .ph img{clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.22,1,.36,1)}
.swb .sk{position:absolute;inset:0;z-index:3;background:var(--blanc);padding:14px;display:flex;flex-direction:column;gap:10px;transition:opacity .45s}
.swb.s1 .sk{opacity:0;pointer-events:none}
.skb{height:11px;border-radius:6px;background:linear-gradient(90deg,#efe9dd 25%,#f8f4ea 45%,#efe9dd 65%);background-size:220% 100%;animation:swSkel 1.2s linear infinite}
@keyframes swSkel{from{background-position:120% 0}to{background-position:-120% 0}}
.skb.r{width:34px;height:34px;border-radius:50%}

/* ====== CTA FINAL (texture brique) ====== */
.final{position:relative;padding:150px 0;text-align:center;color:var(--creme);overflow:hidden;background:var(--brique-deep)}
.final .bgtex{position:absolute;inset:-12%;background:url(final-glow.webp) center/cover;filter:blur(34px) saturate(1.12)}
.final .final-cv{position:absolute;inset:-10%;width:120%;height:120%;filter:blur(40px) saturate(1.12)}
/* nappes chaudes qui derivent : le JS n'ecrit QUE sur .bgtex, aucune collision de transform */
.final .fx-glow{position:absolute;inset:-25%;z-index:1;pointer-events:none;
  filter:blur(90px) saturate(1.15);mix-blend-mode:screen;opacity:.55}
.final .fx-glow i{position:absolute;display:block;border-radius:50%;
  left:var(--x);top:var(--y);width:var(--s);height:var(--s);background:var(--c);
  animation:fnDrift var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes fnDrift{
  0%{transform:translate3d(0,0,0) scale(.92) rotate(0deg)}
  100%{transform:translate3d(var(--mx),var(--my),0) scale(1.3) rotate(10deg)}}
/* voile sombre qui respire : donne du relief a la texture */
.final .fx-shade{position:absolute;inset:-10%;z-index:1;pointer-events:none;
  background:radial-gradient(48% 44% at 30% 34%,rgba(20,4,2,.75),transparent 68%),
             radial-gradient(52% 48% at 74% 70%,rgba(12,3,2,.7),transparent 66%);
  filter:blur(50px);animation:fnShade 33s ease-in-out infinite alternate}
@keyframes fnShade{
  0%{transform:scale(1.05) translate3d(-2%,-1%,0)}
  100%{transform:scale(1.28) translate3d(3%,2%,0)}}
.final .fx-grain{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url(grain.png);background-size:170px;opacity:.14;mix-blend-mode:overlay}
@media(prefers-reduced-motion:reduce){
  .final .fx-glow i,.final .fx-shade{animation:none}
}
.final::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(80% 90% at 50% 110%,rgba(29,10,5,.55),transparent 60%)}
.final .wrap{position:relative;z-index:2}
.final .kick{color:rgba(250,240,229,.8)}
.final h2{font-size:clamp(36px,5vw,68px);margin:0 auto 16px;max-width:15ch;color:var(--creme)}
.final p{color:rgba(250,240,229,.85);max-width:44ch;margin:0 auto}
.beta{display:flex;flex-direction:column;gap:9px;max-width:460px;margin:34px auto 0}
/* label VISIBLE : le placeholder disparaît à la première frappe, il ne peut pas en tenir lieu */
.beta-lab{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(250,240,229,.92);text-align:left}
.beta-row{display:flex;gap:10px}
.beta input{flex:1;min-width:0;background:rgba(255,255,255,.94);border:none;border-radius:999px;padding:15px 22px;color:var(--ink);font-family:var(--ui);font-size:14px}
.beta input::placeholder{color:var(--gris)}
.beta input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.beta input[aria-invalid="true"]{outline:2px solid #FFB3A6;outline-offset:2px}
.beta-msg{margin:0;min-height:1.25em;font-family:var(--ui);font-size:13.5px;line-height:1.35;text-align:left}
.beta-msg.ok{color:#C6EBD2}      /* l'erreur n'est jamais portée par la seule couleur : */
.beta-msg.err{color:#FFC2B8}     /* le texte dit toujours ce qui ne va pas (RGAA) */
.beta .pillbtn{background:var(--ink);color:var(--creme)}
.beta .pillbtn:hover{background:#000}

/* ====== FOOTER REVEAL (façon Orchid) ====== */
.foot-spacer{height:100svh}
.megafoot{position:fixed;left:0;right:0;bottom:0;height:100svh;z-index:0;background:var(--creme);display:flex;flex-direction:column;justify-content:space-between;padding:110px 0 26px;overflow:hidden}
.megafoot .wrap{width:100%}
.mf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px}
.mf-brand{display:flex;align-items:center;gap:16px;font-family:var(--display);font-weight:600;font-size:clamp(44px,6vw,84px);letter-spacing:-.03em;line-height:1}
.mf-brand .logo{width:clamp(44px,5.4vw,74px);height:clamp(44px,5.4vw,74px)}
.mf-tag{margin-top:14px;color:var(--gris);font-size:15px;max-width:34ch}
.mf-socials{display:flex;gap:18px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);padding-top:16px}
.mf-socials a:hover{color:var(--ink)}
.mf-media{position:relative;border-radius:22px;overflow:hidden;height:clamp(200px,38vh,420px);margin:34px 0}
.mf-media img{width:100%;height:100%;object-fit:cover}
.mf-media .lg{position:absolute;left:20px;bottom:16px;font-family:var(--display);font-weight:500;color:#fff;font-size:17px;z-index:2}
.mf-bottom{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end}
.mf-adr{font-size:13.5px;color:var(--gris);line-height:1.7}
.mf-adr a:hover{color:var(--ink)}
.mf-links{display:flex;gap:34px;flex-wrap:wrap}
.mf-links .col{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.mf-links .col h4{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:4px;font-family:var(--ui)}
.mf-links a{color:#5d554c}.mf-links a:hover{color:var(--ink)}
/* entrées conservées mais sans page : ni lien mort, ni clic dans le vide */
.soon{color:var(--gris-2);cursor:default}
.mf-socials .soon{color:var(--gris-2)}
.mf-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--gris-2);border-top:1px solid var(--line);padding-top:18px;margin-top:26px}
.mf-base .lg{font-family:var(--display);color:var(--brique)}



/* ====== MOBILE : corrections d'accessibilité et de contenu (audit 2026-08-16) ====== */

/* ====== 1200px : la mise en page desktop ne tient plus ====== */


/* ====== 1024px : le menu passe en burger ====== */


/* ====== Points de bascule — du plus large au plus étroit.
   L'ordre compte : en max-width, le dernier déclaré gagne. ====== */
@media(max-width:1200px){
  /* EXPLORE — la constellation flottante déborde : on la passe en rail horizontal */
  .gv-field{position:relative;inset:auto;height:auto;margin-top:30px;z-index:2;
    display:flex;gap:14px;overflow-x:auto;padding:6px 22px 20px;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gv-field::-webkit-scrollbar{display:none}
  .gv-bub,.gv-scrim{display:none}
  .gv-card{position:relative!important;left:auto!important;top:auto!important;
    flex:0 0 auto;width:var(--w);scroll-snap-align:center;
    transform:none!important;opacity:1!important;filter:none!important}
  .gv-sec{min-height:0;padding:70px 0 56px}
  .gv-center{margin-inline:auto}

  /* XP CARD — 3 colonnes trop serrées : la carte au centre, les textes dessous */
  .xp-grid3{grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center}
  .xp-stage{order:1}
  .xp-left{order:2;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:14px 22px;max-width:760px}
  .xp-right{order:3;max-width:640px}
  .xp-left .caption,.xp-right .caption{text-align:left}
  .xp-left .caption{flex:1 1 260px}
  .xp-toggle{flex-direction:row;order:-1;flex:1 1 100%;justify-content:center}
  .xp-pill{min-width:150px}
  .xp-card,.xp-glare{width:min(300px,42svh)}
  .xp-giant{font-size:clamp(48px,9vw,110px)}
  .xp-sec{padding:max(80px,7vw) 0 70px}

  /* MANIFESTE — en absolu, les 4 paragraphes entrent en collision avec le titre
     dès que la largeur baisse : on les repasse dans le flux */
  .mani-dark{min-height:0;padding:90px 0;display:block}
  .mani-inner{margin:26px 0}
  /* ⚑ `position:relative`, PAS `static` : le z-index:3 des paragraphes n'a aucun
     effet sur un élément statique — ils repassaient DERRIÈRE .mani-shader et
     .mani-grain (absolus) et disparaissaient dès que le canvas se peignait.
     ⚑ MAIS `relative` réactive les décalages du desktop (left/right:4vw, top:13%,
     bottom:9%) : chaque paragraphe partait dans un sens différent et les
     gouttières devenaient incohérentes. Il FAUT les neutraliser. */
  /* ⚑ SPÉCIFICITÉ : `.mono.tl{left:4vw}` vaut (0,2,0) et bat `.mono{left:auto}`
     (0,1,0). Il faut reprendre les mêmes sélecteurs composés, sinon les 4 coins
     du desktop repartent chacun dans leur sens et les gouttières se décalent. */
  .mono,.mono.tl,.mono.tr,.mono.bl,.mono.br{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    margin:16px auto;padding:0 5vw;max-width:64ch;text-align:center!important}
  .mani-huge{font-size:clamp(34px,6.4vw,72px);padding:0 5vw}
  .mani-huge>span{white-space:normal}
  .mani-huge .l1,.mani-huge .l3{margin-left:6%}
  .mani-huge .l2,.mani-huge .l4{margin-left:0}
  /* typo générale resserrée : la page respire au lieu de flotter */
  .hero .h1a,.hero .h1b{font-size:clamp(34px,6.6vw,74px)}
  .chap{font-size:clamp(22px,3vw,34px)}
  .steps-title{font-size:clamp(34px,5.4vw,68px)}
  .gv-center h2{font-size:clamp(26px,4vw,46px)}
  .gv-sub{font-size:clamp(16px,2vw,24px)}
  .final h2{font-size:clamp(28px,4vw,48px)}

  /* EXPLORE — le titre et la recherche passent AU-DESSUS du rail de cartes */
  .gv-sec{display:flex;flex-direction:column;justify-content:center}
  .gv-center{order:1}
  .gv-field{order:2;margin-top:26px}
  /* la pile de 3 « Samumu » n'a plus de sens en rail : on ne garde que la carte nette */
  .gv-card.row[data-depth="0"],.gv-card.row[data-depth="1"]{display:none}

  /* XP CARD — bascule sur UNE ligne, boutons compacts */
  .xp-toggle{flex-direction:row!important;flex-wrap:nowrap;justify-content:center;gap:10px;width:auto;flex:0 0 auto}
  .xp-pill{min-width:0;width:auto;padding:11px 22px;font-size:11px;letter-spacing:.1em}
  /* les deux légendes à filet font doublon avec le texte de droite */
  .xp-left .caption{display:none}
  .xp-left{gap:0}
}

@media(max-width:1024px){
  .lnav-cta{display:none}
  .lnav-burger{display:flex}
}

@media(max-width:900px){
  .gv-sec{min-height:0;padding:80px 0}
  .gv-field{display:none}
  .gv-center h2{font-size:clamp(28px,8vw,40px)}
}

@media(max-width:900px){
  .localnav{padding:16px 22px}
  .localnav .brand svg{height:40px}
  /* hero : retour en pile simple */
  .hero-stage{height:auto;padding:110px 0 20px}
  .hero-grid{display:none}
  .hero .h1a,.hero .h1b,.hero-sub,.an-cta,.hero-phone-wrap{position:static;transform:none;width:auto}
  .hero .h1a,.hero .h1b{font-size:clamp(40px,11vw,64px);text-align:left;display:block;padding:0 26px}
  .hero-sub{padding:16px 26px 0;gap:22px;flex-direction:column}
  .an-cta{padding:20px 26px 0;align-items:flex-start}
  .an-cta .row{justify-content:flex-start}
  .hero-phone-wrap{margin:26px auto 0;width:min(320px,84vw)}
  .hero-strip{padding:22px 22px 30px}
  .fl-chip{display:none}
  .gal-th{flex:0 0 110px}
  .gal-grid,.xp-grid,.sw-grid{grid-template-columns:1fr;gap:40px}
  .sw-wall{grid-template-columns:repeat(2,1fr);height:62vh}
  .sw-wall .sw-col:nth-child(3){display:none}
  .mani-dark{min-height:0;padding:80px 0;display:block}
  /* les neutralisations d'offsets sont posées en ≤1200 (sélecteurs composés) ;
     ici on ne fait que resserrer les gouttières */
  .mono,.mono.tl,.mono.tr,.mono.bl,.mono.br{margin:14px auto;padding:0 24px;max-width:none}
  .mani-huge{padding:22px 26px;font-size:clamp(40px,11vw,64px)}
  .mani-huge>span{white-space:normal}
  .mani-huge .l1,.mani-huge .l3{margin-left:10%}
  .mani-huge .l2,.mani-huge .l4{margin-left:0}
  .gal-th .num{font-size:10px}
  .stats{flex-direction:row;gap:40px}
  .steps-gridimg{display:none}
  .steps-title{margin-bottom:32px}
  .steps-split{grid-template-columns:1fr;gap:40px}
  .stp-stage{order:-1}
  .stp-phone{transform:none;width:min(280px,74vw)}
  .stp-phone:hover{transform:none}
  .acc-body p{padding-left:26px}
  .feed{grid-template-columns:1fr}.fcol.late{margin-top:0}
  .xpcard-stage{flex-direction:column;align-items:center;gap:16px}
  .xpcard-pills{flex-direction:row}
  .xp-giant{font-size:clamp(40px,13vw,78px);top:14px}
  .xp-grid3{grid-template-columns:1fr;gap:34px}
  .xp-stage{order:-1}
  .xp-card,.xp-glare{width:min(300px,74vw)}
  .xp-left{gap:16px}
  .xp-pill{min-width:0;width:100%}
  .megafoot{padding-top:80px}
  .mf-media{height:200px}
  .mf-top{flex-direction:column;gap:16px}
  .mf-socials{padding-top:0;flex-wrap:wrap;gap:14px}
}

@media(max-width:900px){
  /* 1) cibles tactiles : 44px minimum (RGAA) */
  .localnav .pillbtn{min-height:44px;padding:11px 15px;font-size:12.5px}
  .lnav-team{display:none}                 /* 3 boutons ne tiennent pas : la team reste au footer */
  .lnav-cta{gap:7px}
  .localnav .brand{min-height:44px;display:flex;align-items:center}
  .mf-socials{gap:6px;flex-wrap:wrap}
  .mf-socials a{min-height:44px;display:inline-flex;align-items:center;padding:0 10px}
  .mf-links .col a{min-height:44px;display:flex;align-items:center}
  .mf-links .col{gap:0}
  .mf-adr a{min-height:44px;display:inline-flex;align-items:center}
  .sw-follow,.avrow .more{min-height:44px;display:inline-flex;align-items:center;padding:0 14px}

  /* 2) libellés du rail sports : 10px illisible sur mobile */
  .gal-th .num{font-size:12px}
  .gal-th{flex:0 0 128px}

  /* 3) EXPLORE : la constellation flottante ne tient pas en 375px.
        On la remet en rail horizontal plutôt que de la masquer. */
  .gv-field{display:block;position:relative;inset:auto;height:auto;margin-top:34px;
    display:flex;gap:14px;overflow-x:auto;padding:4px 22px 18px;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gv-field::-webkit-scrollbar{display:none}
  .gv-bub{display:none}
  .gv-card{position:relative!important;left:auto!important;top:auto!important;
    flex:0 0 auto;width:var(--w);scroll-snap-align:center;
    transform:none!important;opacity:1!important;filter:none!important}
  .gv-card.svgc img{width:100%}
  .gv-scrim{display:none}
  .gv-sec{min-height:0;padding:76px 0 60px}

  /* « une section = un écran » : la carte et sa bascule Profil/Sportive
     doivent être vues ENSEMBLE, sinon les boutons ne veulent rien dire */
  .xp-sec{padding:48px 0 40px}
  .xp-giant{position:static;text-align:center;margin-bottom:10px;font-size:clamp(34px,11vw,60px)}
  .xp-grid3{gap:16px}
  .xp-card,.xp-glare{width:min(212px,34svh)}
  .xp-left{gap:12px}
  .xp-toggle{gap:8px}
  .xp-pill{min-width:0;padding:12px 18px;min-height:44px;font-size:10.5px}
  .xp-right h3{font-size:clamp(19px,5.4vw,24px);margin-bottom:10px}
  .xp-right .caption{font-size:14.5px}
  /* étapier : le téléphone laisse la place aux étapes */
  .stp-phone{--w:min(230px,60vw)}
  .steps-title{font-size:clamp(38px,12vw,58px)}
  .acc-head{padding:16px 20px}
  .acc-t{font-size:16px}
  /* dernière cible sous 44px */
  .sw-followbtn,.swc .btn,.sw-wall .btn{min-height:44px!important;height:auto;display:inline-flex;align-items:center;justify-content:center;padding:0 16px}

  /* ====== HERO mobile — structure des bons hero produit (Apple iPhone Air,
     Strava, Linear) : SURTITRE › TITRE › deck court › UN CTA › le produit.
     Une seule colonne, une seule graisse d'accent, le visuel comme point final. ====== */
  .hero-stage{padding:78px 0 4px;display:flex;flex-direction:column}
  .hero-eyebrow{display:block;padding:0 24px;margin-bottom:18px;font-size:11px;letter-spacing:.24em}
  /* on relâche les coupes du desktop et on équilibre les lignes :
     sans ça on obtient l'orpheline « déjà. » toute seule sur sa ligne */
  .hero .ln{display:inline}
  .hero .ln+.ln::before{content:" "}
  .hero .h1a,.hero .h1b{font-size:clamp(27px,7.4vw,36px);line-height:1.06;padding:0 24px;
    text-wrap:balance;-webkit-hyphens:none;hyphens:none}
  .hero .h1b{margin-top:2px}
  /* ⚑ corps de texte à 15 px = « Subheadline » iOS (Material : body-medium 14 sp).
     Les 17 px du « Body » iOS faisaient trop gros ici ; en dessous de 14 px on sort
     des normes de lisibilité mobile. 15 px est le palier qui tient les deux. */
  .hero-sub{padding:24px 24px 0;gap:13px}
  .hero-sub .col{font-size:15px;line-height:1.5}
  .hero-sub .col:first-child .lg{display:none}          /* remontée en surtitre */
  .hero-sub .col+.col .lg{display:inline;font-size:inherit;margin:0;
    font-family:var(--ui);font-weight:600;color:var(--ink)}
  .hero-sub .col+.col .lg::after{content:" "}
  /* CTA à DROITE, et il chevauche légèrement le téléphone : le bouton en verre
     passe au-dessus (z-index), ce qui ancre le produit au lieu de le laisser flotter */
  /* ⚑ `relative` réactive le `right:9vw` du desktop (qui décalait le bloc de 34 px
     vers la gauche) : il faut le neutraliser explicitement. */
  .an-cta{padding:24px 24px 0;align-items:flex-end;position:relative;z-index:4;
    right:auto;top:auto;margin-bottom:-18px}
  .an-cta .pillbtn{font-size:13.5px;padding:13px 22px;min-height:46px}
  .hero-phone-wrap{margin:0 auto;width:min(300px,78vw)}
  .hero-strip{padding:26px 24px 30px}
  /* le flou de bas de viewport prenait 15 % de la hauteur : trop sur un téléphone */
  .blurbottom{height:8vh}

  /* échelle typographique mobile : tout était surdimensionné */
  .chap{font-size:clamp(19px,5.6vw,24px)}
  .caption{font-size:14.5px}
  .steps-title{font-size:clamp(30px,9.2vw,44px)}
  .mani-huge{font-size:clamp(26px,8vw,38px)}
  .mono{font-size:11.5px}   /* la marge est gérée plus haut (auto = centrage) */
  .mono.bl .count{font-size:24px}
  .gv-center h2{font-size:clamp(22px,6.6vw,30px)}
  .gv-sub{font-size:clamp(15px,4.4vw,19px)}
  .gv-search{max-width:320px;padding:8px 8px 8px 18px}
  .gv-search .gv-ph{font-size:12px}
  .final h2{font-size:clamp(24px,7vw,32px)}
  .final p{font-size:14.5px}
  .beta input,.beta .pillbtn{font-size:13.5px}
  .kick{font-size:11px;margin-bottom:11px}
  .sw-followbtn{min-height:44px;padding:10px 18px}

  /* ====== ÉTAPIER mobile — CARROUSEL, plus d'accordéon ======
     Un accordéon replié sur un écran de 375 px demande deux gestes pour lire
     une étape. Ici : une étape à la fois, plein texte, flèches ‹ › + points.
     Le titre « Lance-toi » disparaît — il volait la moitié de la hauteur. */
  .steps-title{display:none}
  .steps-sec{min-height:0}
  .steps-sec .wrap{padding-top:30px;padding-bottom:34px}
  .steps-split{gap:22px}
  /* ⚑ ratio piloté par la LARGEUR (cf. règle du doc) : le `svh` sert de plafond
     de largeur, jamais de hauteur — sinon le ratio 9/18.5 casse en silence. */
  .stp-phone{--w:min(232px,27svh,64vw)}
  .steps-split{gap:14px}
  .acc{position:relative;min-height:142px}
  /* ⚑ la bulle en glass vient de `.acc-item.open` (spécificité 0,2,0) : il FAUT
     reprendre le même sélecteur, sinon elle reste et se coupe en plein texte.
     Hors accordéon la bulle n'a plus de rôle — le texte respire sur le fond. */
  .acc-item,.acc-item.open{position:absolute;inset:0 0 auto 0;
    background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1)}
  .acc-item{opacity:0;pointer-events:none;transform:translateX(calc(20px * var(--dir,1)))}
  .acc-item.open{opacity:1;transform:none;pointer-events:auto}
  /* texte CENTRÉ sous le téléphone, lui-même centré : aligné à gauche, l'étape
     paraissait décrochée de son visuel */
  .acc-head{padding:0 22px 8px;gap:12px;cursor:default;justify-content:center}
  .acc-ic{display:none}                      /* le +/− n'a plus de sens hors accordéon */
  .acc-n{font-size:12px;width:auto}
  .acc-t{font-size:clamp(18px,5.2vw,22px)}
  .acc-body,.acc-item.open .acc-body{grid-template-rows:1fr}
  .acc-body p{padding:0 22px 4px;max-width:none;font-size:14.5px;text-align:center}
  .stp-nav{display:flex}

  /* ====== EXPLORE mobile — le rail de cartes ======
     ⚑ En flex, `align-items` vaut `stretch` par défaut : les 9 cartes étaient
     toutes étirées à 293 px de haut alors que leur SVG garde son ratio → l'image
     flottait dans un cadre vide (« on ne voit rien de l'image »). */
  .gv-field{align-items:center;padding-left:24px;padding-right:24px}
  /* aucune carte ne doit être coupée par le bord de l'écran (marathon fait 365 px) */
  .gv-card{width:min(var(--w),76vw)}
  /* la pile de 3 « Samumu » (2 répliques floutées) n'a de sens qu'en constellation */
  .gv-card[data-depth="0"],.gv-card[data-depth="1"]{display:none}
  /* on ouvre le rail sur les cartes les plus parlantes, pas sur la plus plate.
     Indices comptés sur TOUS les enfants de .gv-field — les 3 .gv-bub comptent
     même masquées. */
  .gv-field>:nth-child(9){order:1}    /* marathon — carte photo */
  .gv-field>:nth-child(11){order:2}   /* Sophie */
  .gv-field>:nth-child(7){order:3}    /* TC Lyon */
  .gv-field>:nth-child(10){order:4}   /* Tissier */
  .gv-field>:nth-child(12){order:5}   /* Marc D. */
  .gv-field>:nth-child(8){order:6}    /* marathon or */
  .gv-field>:nth-child(6){order:7}    /* Samumu */
  /* ⚑ rail sur DEUX rangées : `grid-auto-flow:column` empile 2 cartes par colonne,
     donc ~4 visibles d'un coup au lieu de 2 — le champ redevient un champ. */
  .gv-field{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;
    justify-items:center;gap:16px 14px}

  /* ====== ÉTAPIER — la barre de navigation ne doit pas peser plus que l'étape ====== */
  .stp-nav{padding:6px 22px 0;gap:14px}
  .stp-arrow{width:38px;height:38px}     /* ≥ 24 px = cible AA (WCAG 2.5.8) */
  .stp-arrow svg{width:13px;height:13px}
  .stp-dots{gap:7px}
  .stp-dot{width:7px;height:7px}
  .stp-dot.on{width:20px}

  /* ====== « CENTRE TOUT » (16/08) — chaque bloc de texte est centré en mobile.
     Le pied de page garde ses colonnes alignées à gauche : centrer une liste de
     liens la rend illisible. ====== */
  #hero .hero-eyebrow,#hero .h1a,#hero .h1b,#hero .hero-sub .col,
  #comment .acc-t,#comment .acc-body p,
  #carte .kick,#carte .chap,#carte .caption,
  #social .kick,#social .chap,#social .caption,
  #final .kick,#final h2,#final p{text-align:center}
  #hero .an-cta{align-items:center}
  #carte .xp-right,#carte .xp-left{align-items:center}

  /* ⚑ Centrer le TEXTE ne suffit pas : un bloc à largeur contrainte reste collé à
     gauche, et le texte se retrouve centré dans une boîte décentrée. Il faut aussi
     centrer les blocs eux-mêmes. */
  .chap,.caption,#final p,#hero .hero-sub .col{margin-left:auto;margin-right:auto}

  /* le filet rouge à gauche devient orphelin quand le texte est centré : il part
     d'un côté et le texte de l'autre. On le remplace par un trait court au-dessus,
     qui garde l'accent de marque tout en tenant l'axe. */
  .xp-caps .caption,.xp-left .caption{border-left:0;padding-left:0;padding-top:16px;position:relative}
  .xp-caps .caption::before,.xp-left .caption::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:2.5px;border-radius:2px;background:var(--rouge)}

  /* les rangées en flex ne suivent pas text-align */
  .avrow{justify-content:center}
  .xp-caps{align-items:center}
  #social .sw-grid>div,#social .sw-live{text-align:center}
  #social .avrow .more{margin-left:14px}
}

/* ====== 901–1300 px — la bande où le hero se cassait ======
   La composition du hero est réglée en `vw` pour les grands écrans. Entre la bascule
   mobile (900) et ~1300, le téléphone se rapproche du texte : le paragraphe passait
   DESSOUS et devenait illisible. On resserre la colonne de texte et le titre noir ;
   le titre rouge continue de passer derrière le téléphone — c'est la compo validée,
   pas un bug. Placé en fin de feuille : `min-width` ne peut pas polluer le mobile. */
@media(min-width:901px) and (max-width:1300px){
  .hero .h1a{font-size:clamp(40px,5vw,116px)}
  .hero-sub{gap:24px;font-size:13.5px}
  .hero-sub .col{font-size:13.5px}
  .hero-sub .lg{font-size:15px}
}

/* Le libellé unifié « S'inscrire à la bêta » fait 154 px : à côté du champ, il ne
   laissait que 96 px pour saisir une adresse sur un petit écran. On empile. */
@media(max-width:480px){
  .beta-row{flex-direction:column;gap:10px}
  .beta-row input,.beta-row .pillbtn{width:100%}
  .beta .pillbtn{justify-content:center}
}

/* ====== Captures réelles de l'app dans l'étapier ======
   La barre d'état iOS est recadrée à l'encodage : la maquette a sa propre encoche. */
/* ⚑ `.stp-scr` est un conteneur flex AVEC padding (hérité du placeholder texte) :
   une vidéo en enfant normal n'y occupait que 209×425 au lieu de 253×543. Il faut la
   sortir du flux pour qu'elle remplisse vraiment l'écran, padding compris. */
.stp-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;z-index:1}
/* le dégradé sombre servait à faire lire le texte du placeholder : il assombrit la capture */
.stp-scr.has-vid::after{content:none}
.stp-scr.has-vid{padding:0}

/* ====== ÉTAPE 05 — l'écran Social, reconstruit en HTML ======
   Pas de capture disponible pour le fil social : on le rejoue en direct dans la maquette.
   ⚑ Toutes les tailles sont en `em`, et 1em suit la largeur de l'écran via `cqw` :
   l'écran fait 171 à 292 px selon la taille de la fenêtre, donc rien ne peut être figé
   en pixels. Référence : 375 px de large → 1em = 10px.
   ⚑ Préfixe `.sf-` obligatoire (règle n°1 : la CSS est globale). */
.stp-scr.sf-host{container-type:inline-size;padding:0;background:var(--creme)}
.stp-scr.sf-host::after{content:none}
.sf{position:absolute;inset:0;font-size:calc(100cqw / 37.5);
  font-family:var(--ui);color:var(--ink);background:var(--creme);overflow:hidden}

.sf-top{display:flex;align-items:center;justify-content:space-between;
  padding:4.8em 1.8em 1.8em;position:relative;z-index:3}
.sf-ttl{font-family:var(--display);font-weight:700;font-size:2.5em;letter-spacing:-.02em}
.sf-bell{position:relative;width:3.4em;height:3.4em;border-radius:50%;flex:none;
  display:grid;place-items:center;background:#fff;color:var(--ink);
  box-shadow:0 .4em 1.2em -.6em rgba(29,24,21,.35)}
.sf-bell svg{width:1.7em;height:1.7em}
.sf-dot{position:absolute;top:.5em;right:.6em;width:.75em;height:.75em;border-radius:50%;
  background:var(--rouge);box-shadow:0 0 0 .18em #fff;animation:sfPulse 2.4s ease-in-out infinite}
@keyframes sfPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.75}}

/* deux colonnes asymétriques (décision « masonry 2 colonnes » du 17/06) */
.sf-feed{position:absolute;inset:8.6em 0 7.4em 0;display:grid;grid-template-columns:.82fr 1fr;
  gap:.9em;padding:0 1.1em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 78%,transparent 96%);
  mask-image:linear-gradient(#000 78%,transparent 96%)}
.sf-col{overflow:hidden}
/* le fil défile tout seul ; il s'arrête dès que l'étape n'est plus affichée */
.sf-run{display:flex;flex-direction:column;gap:.9em;animation:sfScroll 26s linear infinite}
.sf-col-b .sf-run{animation-duration:31s;animation-delay:-6s}
@keyframes sfScroll{from{transform:translateY(0)}to{transform:translateY(-52%)}}
.stp-scr:not(.on) .sf-run,.stp-scr:not(.on) .sf-fl,.stp-scr:not(.on) .sf-dot{animation-play-state:paused}

.sf-c{background:#fff;border-radius:1.5em;overflow:hidden;
  box-shadow:0 .8em 2em -1em rgba(29,24,21,.22)}
.sf-badge{height:9.4em;display:grid;place-items:center;position:relative;gap:0}
.sf-or{background:linear-gradient(160deg,#C9A227,#A98A1E)}
.sf-rd{background:linear-gradient(160deg,#B3241A,#7A140D)}
.sf-em{font-size:3.6em;line-height:1;filter:drop-shadow(0 .12em .18em rgba(0,0,0,.28))}
.sf-pill{position:absolute;bottom:.9em;background:#111;color:#fff;font-size:1.05em;font-weight:600;
  padding:.42em 1em;border-radius:999px;white-space:nowrap}
.sf-ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:#ddd}
.sf-ph.sf-tall{aspect-ratio:1/1}
.sf-ph img{width:100%;height:100%;object-fit:cover;display:block}
.sf-date{position:absolute;top:.8em;left:.8em;background:rgba(10,8,7,.72);color:#fff;
  font-size:1em;font-weight:600;padding:.35em .7em;border-radius:.6em;
  -webkit-backdrop-filter:blur(.4em);backdrop-filter:blur(.4em)}
.sf-over{position:absolute;left:.9em;bottom:.7em;right:.9em;color:#fff;font-family:var(--display);
  font-weight:600;font-size:1.85em;line-height:1.04;text-transform:uppercase;letter-spacing:-.01em;
  text-shadow:0 .1em .5em rgba(0,0,0,.55)}
.sf-body{padding:1em 1.1em 1.05em}
.sf-h{font-family:var(--display);font-weight:700;font-size:1.55em;line-height:1.12;margin:0 0 .55em}
.sf-who{display:flex;align-items:center;gap:.6em;font-size:1.25em;font-weight:600;margin-bottom:.4em}
.sf-av{width:2.1em;height:2.1em;border-radius:50%;overflow:hidden;flex:none;background:#ddd}
.sf-av img{width:100%;height:100%;object-fit:cover;display:block}
.sf-also{display:flex;align-items:center;gap:.5em;font-size:1.02em;color:var(--gris);margin-bottom:.45em}
.sf-avs{display:flex;flex:none}
.sf-avs i{width:1.7em;height:1.7em;border-radius:50%;overflow:hidden;margin-left:-.45em;
  border:.14em solid #fff;background:#ddd}
.sf-avs i:first-child{margin-left:0}
.sf-avs img{width:100%;height:100%;object-fit:cover;display:block}
.sf-p{font-size:1.15em;line-height:1.32;color:#3A332D;margin:0}
.sf-p b{color:var(--ink)}
.sf-mini .sf-body{padding:1.1em}

/* le Spark — l'emoji flamme animé, conservé (décision du 16/08) */
.sf-spk{display:flex;align-items:center;justify-content:flex-end;gap:.4em;
  font-size:1.1em;font-weight:600;color:var(--gris);margin-top:.6em}
.sf-fl{display:inline-block;transform-origin:50% 85%;
  animation:swFlame 2.9s ease-in-out infinite;animation-delay:var(--fd,0s)}
.sf-n{font-variant-numeric:tabular-nums}

.sf-fab{position:absolute;right:1.6em;bottom:9.6em;z-index:4;
  width:5.2em;height:5.2em;border-radius:50%;background:var(--rouge);color:#fff;
  display:grid;place-items:center;font-size:1em;line-height:1;
  box-shadow:0 .9em 1.8em -.7em rgba(185,20,20,.75);animation:sfBreathe 4.2s ease-in-out infinite}
.sf-fab::before{content:"+";font-size:2.8em;font-weight:300;margin-top:-.06em}
@keyframes sfBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* la vraie tab bar de l'app, exportée du Figma par Cindy (assets/ui/tabbar.svg).
   Le SVG mesure 402×137 et embarque ses 2 icônes en WebP. */
.sf-tabwrap{position:absolute;left:0;right:0;bottom:.6em;z-index:5;line-height:0;pointer-events:none}
.sf-tabs{width:100%;height:auto;display:block;position:relative;z-index:2}
/* ⚑ Le SVG a un fond noir à 80 % d'opacité mais AUCUN flou : en `<img>`, le contenu
   du fil le traversait net. On pose une pilule floutée derrière, calée sur la
   géométrie du SVG (x=16,5 y=23 l=369 h=91 sur 402×137). */
.sf-tabblur{position:absolute;left:4.1%;right:4.1%;top:16.8%;bottom:16.8%;
  border-radius:999px;z-index:1;
  -webkit-backdrop-filter:blur(1.1em) saturate(1.3);backdrop-filter:blur(1.1em) saturate(1.3)}

@media(prefers-reduced-motion:reduce){
  .sf-run,.sf-fl,.sf-dot,.sf-fab{animation:none!important}
}