/* FitClub Shawi : les scènes de l'accueil */
:root{--cine:#10150F;--creme:#F6F3EC;--sauge:#BCC0A3;--ease:cubic-bezier(.16,1,.3,1)}
.f{position:relative;background:var(--cine);color:var(--creme)}
.motion .f{height:var(--h,300svh)}
.f .stage{position:relative;min-height:100svh;overflow:hidden;isolation:isolate}
.motion .f .stage{position:sticky;top:0;height:100svh}
.f .illus,.f-fin .illus,.scene .illus{position:absolute;z-index:6;right:var(--marge);left:auto;top:86px;bottom:auto;max-width:64vw;text-align:right;font-size:.75rem}
.btn.clair{background:var(--creme);color:var(--cine)}
.f h1,.f h2,.f-fin h2{color:var(--creme)}
.f .surtitre,.f-fin .surtitre{color:var(--sauge)}

/* En-tête sur les scènes */
.sur-film .tete,.sur-film .tete.colle{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff}
.sur-film .tete::before{content:"";position:absolute;inset:0 0 -60%;z-index:-1;pointer-events:none;background:linear-gradient(rgba(8,12,8,.6),transparent)}
.sur-film .marque svg{color:#fff;--neg:var(--cine);filter:drop-shadow(0 1px 8px #0006)}
.sur-film .burger,.sur-film .mode{color:#fff;box-shadow:inset 0 0 0 1px #fff7}

/* Rideau d'entrée */
.precharge{display:none}
.motion .precharge{display:grid;position:fixed;inset:0;z-index:200;place-content:center;justify-items:center;gap:26px;background:var(--cine);color:var(--sauge);animation:pre-secours .6s 5s forwards}
@keyframes pre-secours{to{opacity:0;visibility:hidden}}
.precharge svg{width:132px;height:132px;fill:currentColor;--neg:var(--cine)}
.precharge span{display:block;width:150px;height:1px;background:#fff3}
.precharge i{display:block;height:100%;background:var(--sauge);transform:scaleX(0);transform-origin:0 0}

/* 1. Ouverture */
.f-ouv .fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.f-ouv .decoupe{display:none}
.motion .f-ouv .decoupe{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1}
.f-ouv::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(8,12,8,.72));pointer-events:none}
.motion .f-ouv::after{display:none}
.motion .f-ouv .stage::after{content:"";position:absolute;z-index:2;inset:0;opacity:var(--a,0);pointer-events:none;background:linear-gradient(transparent 28%,rgba(8,12,8,.76))}
.f-ouv .haut{display:none}
.motion .f-ouv .haut{display:block;position:absolute;z-index:2;left:0;right:0;top:calc(50% + min(36svw,33svh));max-width:none;text-align:center;color:var(--sauge);font-size:.9375rem}
.f-ouv .apres{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:100svh;padding:110px var(--marge) 12svh}
.motion .f-ouv .apres{position:absolute;inset:0;min-height:0;opacity:0;pointer-events:none}
.f-ouv h1{font-size:clamp(3.2rem,11.5vw,7.4rem);max-width:12em;text-shadow:0 2px 34px #0007}
.f-ouv h1 em{display:block}
.f-ouv .apres p{margin:14px 0 24px;font-size:1.1875rem;color:#fffe;max-width:26em;text-shadow:0 1px 16px #0009}
.f-ouv .indice{display:none}
.motion .f-ouv .indice{display:block;position:absolute;z-index:3;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));width:1px;height:46px;background:linear-gradient(var(--sauge),transparent);transform-origin:top;animation:coule 2.2s var(--ease) infinite}
@keyframes coule{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1) translateY(30px);opacity:0}}

/* 2. Le premier pas */
.f-film canvas{display:none}
.motion .f-film canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.f-film .repli{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.motion .f-film .repli{display:none}
.f-film .voile{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 42%,rgba(6,10,6,.5)),linear-gradient(transparent 44%,rgba(6,10,6,.78))}
.f-film .beats{position:relative;z-index:3;display:grid;gap:56px;padding:120px var(--marge) 80px}
.motion .f-film .beats{position:absolute;inset:auto 0 0;display:grid;gap:0;padding:0 var(--marge) calc(12svh + 34px);align-items:end}
.beat{max-width:15em;font-size:clamp(2.6rem,9.2vw,5.6rem)}
.motion .beat{grid-area:1/1;opacity:0;visibility:hidden;will-change:transform,opacity}
.beat p{max-width:none;font:400 1em/1.04 var(--serif);color:#fff;letter-spacing:-.012em;text-shadow:0 1px 3px #0008,0 2px 34px #0009}
.beat em{display:block}
.beat small{display:block;margin-top:12px;font:400 clamp(.9375rem,2.2vw,1.0625rem)/1.4 "Hanken Grotesk",sans-serif;color:var(--sauge);text-shadow:0 1px 8px #000a}
.f-film .fil{display:none}
.motion .f-film .fil{display:block;position:absolute;z-index:3;left:var(--marge);right:var(--marge);bottom:calc(9svh + 8px);height:1px;background:#fff4}
.f-film .fil i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 0}
.f-film .sortie{display:none}
.motion .f-film .sortie{display:block;position:absolute;z-index:5;inset:0;background:var(--fond);opacity:0;pointer-events:none}

/* 3. Refus */
.f-reel canvas{display:none}
.motion .f-reel canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.f-reel video{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none}
.sans-gl.f-reel canvas{display:none}
.sans-gl.f-reel video{inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
html:not(.motion) .f-reel video:first-of-type{inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.f-reel .voile{position:absolute;inset:0;background:linear-gradient(rgba(6,10,6,.42),transparent 30%,transparent 42%,rgba(6,10,6,.84))}
.reel-texte{position:relative;z-index:3;padding:110px var(--marge) 60px}
.motion .reel-texte{position:absolute;inset:auto 0 0;padding:0 var(--marge) calc(11svh + 20px)}
.refus{display:grid}
.refus li{font:400 clamp(2.5rem,8.6vw,5.8rem)/1.05 var(--serif);letter-spacing:-.012em;color:#fff;text-shadow:0 1px 3px #0008,0 2px 34px #0009;max-width:13em}
.motion .refus li{grid-area:1/1;align-self:end;opacity:0;visibility:hidden}
.refus span{--t:var(--trait,0);background:linear-gradient(var(--sauge),var(--sauge)) 0 58%/calc(var(--t)*100%) 3px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html:not(.motion) .refus li{margin-bottom:.4em}

/* 4. Anneau */
.f-anneau .stage{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:96px var(--marge) 8svh;text-align:center}
.anneau-tete{position:relative;z-index:3;max-width:760px}
.anneau-tete h2{font-size:clamp(2.1rem,6.4vw,4rem);margin:0}
.scene3d{display:none}
.motion .scene3d{display:grid;place-items:center;width:100%;perspective:1200px;perspective-origin:50% 42%;--w:min(54vw,34svh);--r:calc(var(--w)*.94)}
.roue{position:relative;width:var(--w);aspect-ratio:3/4;transform-style:preserve-3d;transform:translateZ(calc(var(--r)*-1));will-change:transform}
.tuile{position:absolute;inset:0;margin:0;overflow:hidden;border-radius:18px;background:#1b211a;transform:rotateY(var(--a,0deg)) translateZ(var(--r));box-shadow:0 30px 70px #0009}
.tuile video{width:100%;height:100%;object-fit:cover}
.mesure-mots{position:relative;display:grid;margin-top:18px;z-index:3;width:100%}
.mesure-mots li{font:400 clamp(1.7rem,5.6vw,3rem)/1.1 var(--serif);color:var(--creme)}
.motion .mesure-mots li{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .45s,transform .7s var(--ease)}
.motion .mesure-mots li.la{opacity:1;transform:none}
.f-anneau .illus{top:auto;right:auto;left:var(--marge);bottom:14px}

/* 5. Duo */
.f-duo{background:var(--fond);color:var(--encre);transition:background-color .6s}
.f-duo .stage{display:grid;align-content:end;padding:0}
.noms{display:none}
.motion .noms{display:grid;position:absolute;inset:0;align-content:center;gap:1vh;overflow:hidden;font:400 clamp(7rem,33vw,26rem)/.92 var(--serif);color:var(--doux);letter-spacing:-.03em;white-space:nowrap;text-align:center;transform:translateY(-12svh)}
.noms span{display:block;will-change:transform}
.legende{display:none}
.motion .legende{display:block;position:absolute;z-index:2;left:var(--marge);top:92px;font-size:.8125rem;color:var(--mute)}
.jade-pose{width:auto;max-width:none;height:62svh;margin-inline:auto;position:relative;z-index:1}
.motion .jade-pose{position:absolute;left:50%;bottom:0;margin-left:calc(62svh*-.364);will-change:transform;transform-origin:bottom}
.duo-texte{position:relative;z-index:2;padding:28px var(--marge) 40px;max-width:680px}
.motion .duo-texte{position:absolute;inset:auto 0 0;margin:0 auto;padding:22px var(--marge) calc(26px + env(safe-area-inset-bottom));max-width:none;background:linear-gradient(transparent,rgba(var(--voile),.94) 26%);opacity:0;text-align:center}
.duo-texte h2{font-size:clamp(2rem,6vw,3.8rem);color:var(--encre);margin-bottom:.3em}
.f-duo .surtitre{color:var(--mute)}
.duo-texte p{margin:0 auto 10px;color:var(--mute)}

/* 6. Pile de cours */
.pile{position:relative;padding:clamp(64px,10vw,120px) 0 40px}
.pile-tete{margin-bottom:26px}
.pile-carte{display:block;position:sticky;top:11svh;height:78svh;padding:0 clamp(10px,2.4vw,28px);margin-bottom:6svh;color:#fff;text-decoration:none}
.pile-corps{position:relative;width:100%;height:100%;overflow:hidden;border-radius:26px;background:var(--cine);transform-origin:50% 0;will-change:transform}
.pile-corps video,.pile-corps img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.motion .pile-corps .lent{animation:lent 16s ease-in-out infinite alternate}
@keyframes lent{to{transform:scale(1.1)}}
.pile-corps::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 46%,rgba(6,10,6,.82))}
.pile-corps div{position:absolute;z-index:2;left:clamp(20px,4vw,48px);right:20px;bottom:clamp(22px,4vw,44px)}
.pile-corps h3{font-size:clamp(2.8rem,10vw,6.4rem);margin-bottom:.1em}
.pile-corps p{font-size:1.125rem;color:#fffe}
.pile-corps small{position:absolute;z-index:2;right:16px;top:14px;font-size:.75rem;color:#fffd;text-shadow:0 1px 5px #0009}

/* Porte : la salle dans le noir, puis les lumières */
.porte .stage{background:#050705}
.porte picture{display:block;position:absolute;inset:0}
.porte img{filter:none}
.porte .voile{display:none}
.motion .porte .stage{perspective:1000px}
.motion .porte picture{transform:scale(calc(1.26 - var(--p,0)*.26));will-change:transform,opacity}
.motion .porte .allume{opacity:clamp(0,calc((var(--p,0) - .46)*3.6),1)}
.motion .porte .texte{opacity:clamp(0,calc((var(--p,0) - .74)*6),1);transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .74)*6),1))*30px))}
.motion .lames i{background:linear-gradient(#262b23,#171b15);border-bottom:1px solid #0a0c09}
.motion .lames b{color:var(--creme)}
.motion .lames b svg{color:var(--sauge);--neg:#1d211b}
.motion .lames{--o:clamp(0,calc(var(--p,0)/.6),1)}
.motion .lames{transform-origin:50% 0;transform:translateY(calc(var(--o)*-101%)) rotateX(calc(var(--o)*-22deg))}

/* Fin */
.f-fin{position:relative;min-height:100svh;display:grid;align-content:end;overflow:hidden;background:var(--cine);color:var(--creme);isolation:isolate}
.f-fin video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.f-fin .voile{position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(6,10,6,.22),rgba(6,10,6,.78))}
.fin-texte{padding:120px var(--marge) 14svh}
.fin-texte h2{font-size:clamp(3rem,10.4vw,7rem);max-width:11em;margin-bottom:.5em;text-shadow:0 2px 30px #0008}
.fin-texte em{display:block}

/* Feuilles */
.feuilles{position:fixed;inset:0;z-index:30;width:100%;height:100%;pointer-events:none;opacity:0}
html:not(.motion) .feuilles{display:none}

@media(min-width:760px){
.f-film .beats,.reel-texte{padding-left:clamp(40px,7vw,120px)}
.motion .scene3d{--w:min(34vw,50svh);--r:calc(var(--w)*.94);perspective:1500px}
.motion .jade-pose{left:66%;height:78svh;margin-left:calc(78svh*-.364)}
.duo-texte{text-align:left}
.motion .duo-texte{text-align:left;max-width:560px;margin:0;left:var(--marge);right:auto;bottom:6svh;padding:26px 30px;border-radius:20px;background:rgba(var(--voile),.92)}
.duo-texte p{margin-inline:0}
}