/* =====================================================================
   FPT — Système de motion design
   Tout est activé par la classe html.mo (posée seulement si le visiteur
   n'a pas demandé « réduire les animations »). Sans elle : site statique.
   ===================================================================== */
:root{--ez:cubic-bezier(.16,1,.3,1);--ez2:cubic-bezier(.76,0,.24,1);--spring:cubic-bezier(.34,1.56,.64,1)}
html.mo{scroll-behavior:auto}

/* ---------- 1. Intro : les portes de l'atelier s'ouvrent ---------- */
#pre{display:none}
html.intro{overflow:hidden}
html.intro #pre{display:block;position:fixed;inset:0;z-index:200;animation:preKill 0s 4.6s forwards}
@keyframes preKill{to{visibility:hidden;pointer-events:none}}
#pre .pa,#pre .pb{position:absolute;left:0;right:0;height:50.3%;background:linear-gradient(120deg,#06104f,#0a1fb8 55%,#1238F5);transition:transform 1.05s var(--ez2)}
#pre .pa{top:0}#pre .pb{bottom:0}
#pre .pa::after,#pre .pb::before{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(-45deg,#FFD400 0 18px,#111318 18px 36px)}
#pre .pa::after{bottom:0}#pre .pb::before{top:0}
#pre .pc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;transition:opacity .45s,transform .9s var(--ez)}
#pre .pc img{width:clamp(96px,13vw,148px);aspect-ratio:1;object-fit:cover;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,212,0,.35),0 0 60px 8px rgba(255,212,0,.35);animation:preLogo 1s var(--spring) both}
#pre .pc .bar{width:min(270px,62vw);height:9px;border-radius:9px;background:rgba(255,255,255,.18);overflow:hidden;margin-top:30px}
#pre .pc .bar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:repeating-linear-gradient(-45deg,#FFD400 0 10px,#111318 10px 20px);background-size:28.3px 100%;animation:preBar 1.05s .2s var(--ez) forwards,tape .7s linear infinite}
#pre .pc small{margin-top:18px;font:600 13px Rajdhani,sans-serif;letter-spacing:.38em;color:#fff;opacity:0;animation:preTxt .7s .45s forwards}
#pre.go .pa{transform:translateY(-101%)}#pre.go .pb{transform:translateY(101%)}
#pre.go .pc{opacity:0;transform:scale(1.25)}
@keyframes preLogo{from{opacity:0;transform:scale(.3) rotate(-90deg)}}
@keyframes preBar{to{transform:scaleX(1)}}
@keyframes preTxt{to{opacity:.85}}
@keyframes tape{to{background-position:28.3px 0}}

/* ---------- 2. Hero : entrée orchestrée ---------- */
html.mo .hm{opacity:0;animation:hmIn .9s var(--ez) 4.7s both}      /* 4,7 s = filet de sécurité */
html.mo.hero-go .hm{animation-delay:var(--hd,0s)}
@keyframes hmIn{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
html.mo .hero h1.hm{opacity:1;animation:none}
html.mo .hero .tag.hm{animation-name:tagIn;animation-duration:1s}
@keyframes tagIn{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-24px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
html.mo .hero .lead.hm{animation-name:leadIn;animation-duration:1.2s}
@keyframes leadIn{from{opacity:0;filter:blur(10px);transform:translateY(28px)}to{opacity:1;filter:none;transform:none}}
html.mo .hero .cta.hm{opacity:1;animation:none}
html.mo .hero .cta.hm .btn{opacity:0;animation:btnPop .9s var(--spring) 4.8s both}
html.mo.hero-go .hero .cta.hm .btn{animation-delay:calc(1.05s + var(--bi,0)*.12s)}
@keyframes btnPop{from{opacity:0;transform:translateY(30px) scale(.7)}to{opacity:1;transform:none}}
html.mo .hero .chips3.hm{opacity:1;animation:none}
html.mo .hero .chip3{opacity:0;animation:chipIn .9s var(--spring) 4.9s both,chipFloat 6s ease-in-out 6s infinite}
html.mo.hero-go .hero .chip3{animation-delay:calc(1.35s + var(--ci,0)*.14s),calc(2.6s + var(--ci,0)*.5s)}
@keyframes chipIn{from{opacity:0;transform:translateY(40px) rotate(-5deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes chipFloat{50%{transform:translateY(-6px)}}

/* Titre cinétique : mots sous masque */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .04em .1em;margin:-.14em -.04em -.1em}
.wi{display:inline-block;transform:translateY(118%) rotate(8deg);transform-origin:0 100%;will-change:transform}
.split-go .wi{animation:wIn 1.05s var(--ez) both;animation-delay:calc(var(--i)*65ms + var(--base,0ms))}
@keyframes wIn{to{transform:none}}
html.mo .hero h1.split-ready em{clip-path:inset(0 100% 0 0)}
html.mo .hero h1.split-go em{animation:emWipe .9s var(--ez) .75s both}
/* filets de sécurité si le script d'intro ne démarre jamais */
html.mo .hero h1.split-ready:not(.split-go) .wi{animation:wIn 1s var(--ez) 4.8s both}
html.mo .hero h1.split-ready:not(.split-go) em{animation:emWipe .9s 5.2s both}
@keyframes emWipe{to{clip-path:inset(-4% -4% -4% -4%)}}

/* Fond du hero vivant */
html.mo .bgv{animation:bgvIn 2.6s var(--ez) both;will-change:translate}
@keyframes bgvIn{from{opacity:0;transform:scale(1.22)}to{opacity:1;transform:scale(1.06)}}
html.mo .bp{animation:gridDrift 28s linear infinite}
@keyframes gridDrift{to{background-position:56px 56px,56px 56px}}
html.mo .hazard{background-size:50.91px 16px;animation:tapeMove 1.4s linear infinite}
@keyframes tapeMove{to{background-position:50.91px 0}}
.spot{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s;background:radial-gradient(460px circle at var(--sx,70%) var(--sy,40%),rgba(255,212,0,.26),transparent 62%);mix-blend-mode:screen}
.hero:hover .spot{opacity:1}
.spark{position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);background:#FFD400;border-radius:1px;opacity:0;z-index:1;pointer-events:none;box-shadow:0 0 10px 3px rgba(255,212,0,.75);animation:spark var(--t) linear var(--dl) infinite}
@keyframes spark{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:.95}100%{transform:translate(var(--dx),-78vh) rotate(420deg);opacity:0}}
.scue{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:44px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;font:600 12px Rajdhani,sans-serif;letter-spacing:.34em;text-transform:uppercase;text-decoration:none;opacity:.9}
.scue i{display:block;width:2px;height:52px;background:rgba(255,255,255,.28);position:relative;overflow:hidden;border-radius:2px}
html.mo .scue i::after{content:"";position:absolute;left:0;top:-55%;width:100%;height:55%;background:#FFD400;animation:scDrop 1.9s var(--ez2) infinite}
@keyframes scDrop{to{top:110%}}
@media(max-width:700px),(max-height:620px){.scue{display:none}}

/* ---------- 3. Titres de section ---------- */
html.mo .eyebrow{border-bottom-color:transparent;background:linear-gradient(#FFD400,#FFD400) left bottom/0 3px no-repeat;transition:background-size 1s var(--ez) .1s}
html.mo .eyebrow.in{background-size:100% 3px}
html.mo .reveal.mo-h{opacity:1;transform:none;transition:none}

/* ---------- 4. Révélations au scroll (variantes) ---------- */
html.mo .reveal,html.mo [data-mo]{opacity:0;transform:translateY(52px);transition:opacity 1s var(--ez),transform 1.15s var(--ez),clip-path 1.2s var(--ez2),box-shadow .4s;transition-delay:var(--rd,0s)}
html.mo [data-mo=left]{transform:translateX(-80px)}
html.mo [data-mo=right]{transform:translateX(80px)}
html.mo [data-mo=zoom]{transform:scale(.88)}
html.mo [data-mo=pop]{transform:translateY(46px) scale(.84) rotate(-2.5deg);transition-timing-function:var(--spring)}
html.mo [data-mo=rise]{transform:translateY(110px) rotate(3deg)}
html.mo [data-mo=wipe]{opacity:1;transform:none;clip-path:inset(-24px 100% -24px -24px)}
html.mo [data-mo=wipe] img{transform:scale(1.3);transition:transform 1.8s var(--ez)}
html.mo [data-mo=wipe].in{clip-path:inset(-24px -24px -24px -24px)}
html.mo [data-mo=wipe].in img{transform:none}
html.mo .reveal.in,html.mo [data-mo].in{opacity:1;transform:none}
html.mo [data-mo=wipe].in{clip-path:inset(-24px -24px -24px -24px)}

/* Cartes formations */
html.mo .card:not(.in),html.mo .gh:not(.in){opacity:0;animation:none}
html.mo .card.in{animation:cardIn 1.05s var(--ez) both}
@keyframes cardIn{from{opacity:0;transform:translateY(80px) rotateX(-16deg) scale(.93)}}
html.mo .card.in .ph{animation:phIn 1.1s .12s var(--ez) both}
@keyframes phIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
html.mo .card.in .ph img{animation:imgIn 1.5s .12s var(--ez) both}
@keyframes imgIn{from{transform:scale(1.45) translateY(24px)}}
html.mo .card.in .ph .no{animation:noIn .7s .55s var(--spring) both}
@keyframes noIn{from{opacity:0;transform:translateX(-34px) rotate(-8deg)}}
html.mo .card.in h3,html.mo .card.in p,html.mo .card.in .meta,html.mo .card.in>a{animation:txtIn .8s var(--ez) both}
html.mo .card.in h3{animation-delay:.35s}html.mo .card.in p{animation-delay:.45s}html.mo .card.in .meta{animation-delay:.55s}html.mo .card.in>a{animation-delay:.65s}
@keyframes txtIn{from{opacity:0;transform:translateY(18px)}}
.card>a::after{content:" →";display:inline-block;transition:transform .45s var(--ez)}
.card:hover>a::after{transform:translateX(7px)}
html.mo .card{transition:transform .3s var(--ez),box-shadow .45s}
html.mo .card:hover{box-shadow:0 36px 60px -26px rgba(18,56,245,.6)}
.grid .gh{position:relative}
.grid .gh::after{content:"";position:absolute;left:0;bottom:-2px;width:130px;height:3px;background:var(--yellow);border-radius:3px;transform-origin:left;transform:scaleX(0)}
html.mo .gh.in{animation:ghIn .9s var(--ez) both}
html.mo .gh.in::after{animation:lineDraw 1.2s .25s var(--ez) forwards}
html.mo .gh.in>i{animation:icoPop .9s .1s var(--spring) both}
@keyframes ghIn{from{opacity:0;transform:translateX(-50px)}}
@keyframes lineDraw{to{transform:scaleX(1)}}
@keyframes icoPop{from{transform:scale(0) rotate(-140deg)}}
html:not(.mo) .grid .gh::after{transform:none}

/* Méthode : tête lumineuse sur le rail + anneau sur l'étape active */
.rail i{position:relative}
html.mo .rail i::after{content:"";position:absolute;right:0;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;transform:translate(50%,-50%);box-shadow:0 0 0 6px rgba(255,212,0,.35),0 0 26px 8px #FFD400;animation:railPulse 1.5s ease-in-out infinite}
@keyframes railPulse{50%{box-shadow:0 0 0 12px rgba(255,212,0,.12),0 0 34px 12px #FFD400}}
.step::after{content:"";position:absolute;top:0;left:0;width:48px;height:48px;border-radius:50%;border:2px solid #FFD400;opacity:0;pointer-events:none}
html.mo .step.on::after{animation:stepPing 1.3s var(--ez) both}
@keyframes stepPing{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}
html.mo .strip figure{transition:opacity .7s,transform .8s var(--ez),box-shadow .6s}
html.mo .strip figure.on img{animation:kb 6s ease-out both}

/* Chiffres clés */
html.mo .stats b.done{animation:numPop .7s var(--spring)}
@keyframes numPop{40%{transform:scale(1.14);text-shadow:0 0 30px rgba(255,212,0,.8)}}

/* Galerie */
html.mo .gal figure:not(.in){opacity:0;animation:none}
html.mo .gal figure.in{animation:galIn 1.05s var(--ez) both}
@keyframes galIn{from{opacity:0;clip-path:inset(100% 0 0 0 round 18px);transform:translateY(46px) scale(1.06)}to{opacity:1;clip-path:inset(0 0 0 0 round 18px)}}
html.mo .gb img{animation:none;transition:transform 1.5s var(--ez)}
html.mo .gb:hover img,html.mo .gb:focus-visible img{transform:scale(1.1)}
html.mo #lb.open{animation:lbBg .45s var(--ez)}
html.mo #lb.open button,html.mo #lb.open p{animation:lbUi .6s .25s var(--ez) both}
@keyframes lbBg{from{opacity:0}}
@keyframes lbUi{from{opacity:0;transform:translateY(14px)}}

/* Témoignages */
html.mo .tv .frame{transition:translate .6s var(--ez),box-shadow .35s}
html.mo .tv:hover .frame{translate:0 -12px}

/* Bandeau de mots (piloté par le scroll) */
html.mo .trust ul{animation:none;will-change:transform}

/* ---------- 5. Boutons ---------- */
html.mo .btn{transition:transform .3s,box-shadow .3s,background .3s,color .3s,translate .25s var(--ez)}
html.mo .btn:active{scale:.95}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;transform:scale(0);animation:rip .7s var(--ez) forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---------- 6. Navigation : trait jaune glissant ---------- */
nav ul{position:relative}
.ni{position:absolute;bottom:1px;height:3px;border-radius:3px;background:#FFD400;left:0;width:0;opacity:0;pointer-events:none;transition:left .55s var(--ez),width .55s var(--ez),opacity .3s}
html.mo nav a.on::after{display:none}

/* ---------- 7. Curseur ---------- */
.cur-r,.cur-d{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .3s}
.cur-r{width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid #FFD400;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.22);display:grid;place-items:center;transition:opacity .3s,width .4s var(--ez),height .4s var(--ez),margin .4s var(--ez),background .3s,border-color .3s}
.cur-d{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#FFD400;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.cur-r span{font:800 12px Archivo,sans-serif;letter-spacing:.1em;color:#171717;opacity:0;transform:scale(.5);transition:opacity .25s,transform .4s var(--spring)}
html.cur-on .cur-r,html.cur-on .cur-d{opacity:1}
html.cur-hide .cur-r,html.cur-hide .cur-d{opacity:0}
.cur-r.lk{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(255,212,0,.16)}
.cur-r.lb{width:88px;height:88px;margin:-44px 0 0 -44px;background:#FFD400}
.cur-r.lb span{opacity:1;transform:none}
.cur-r.tx{width:4px;height:30px;margin:-15px 0 0 -2px;border-radius:3px;background:#FFD400}
@media(hover:none),(pointer:coarse){.cur-r,.cur-d{display:none}}

html.mo .cta-band .cb-bg{animation:none;will-change:translate}

/* ---------- 9. Détails ---------- */
html.mo .faq details{transition:background .3s}
html.mo .faq summary:hover{color:var(--blue)}
html.mo .bento div{transition:transform .6s var(--ez),opacity 1s var(--ez),box-shadow .4s}
html.mo .bento div:hover{transform:translateY(-8px) rotate(-.6deg)}

@media(prefers-reduced-motion:reduce){#pre,.spot,.spark,.cur-r,.cur-d{display:none!important}}

/* Sécurité : aucun débordement horizontal pendant les entrées latérales */
html.mo body{overflow-x:clip}
@media(max-width:860px){html.mo [data-mo=left],html.mo [data-mo=right]{transform:translateY(44px)}}