/* =========================================================
   TURBO — chargé en dernier.
   1) fluidité : on retire ce qui forçait le téléphone à repeindre
      tout l'écran à chaque image (flous, calques plein écran, filtres animés)
   2) design : nouveaux effets, uniquement en transform / opacity
   ========================================================= */

/* ---------------- 1. FLUIDITÉ ---------------- */

/* lueurs de fond : dégradés radiaux au lieu de filter:blur(80px) animé */
.glow{filter:none;opacity:1;will-change:transform}
.glow.a{background:radial-gradient(circle,#f5b40038,transparent 65%)}
.glow.b{background:radial-gradient(circle,#2aabee30,transparent 65%)}

/* aurore du hero : même idée, plus de filter:blur(40px) */
.aurora{filter:none;opacity:1}
.aurora i{will-change:transform}
.aurora i:nth-child(1){background:radial-gradient(closest-side,#f5b40066,transparent)}
.aurora i:nth-child(2){background:radial-gradient(closest-side,#2aabee55,transparent)}
.aurora i:nth-child(3){background:radial-gradient(closest-side,#b98cff44,transparent)}

/* calques plein écran par-dessus tout le contenu : scanlines retirées, grain passé sous le contenu */
body:after{content:none}
.grain{z-index:0;opacity:.05}

/* barres floutées au-dessus d'un contenu qui défile = très coûteux sur Android */
.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(#07070a 72%,#07070a00)}
.nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(180deg,#17151ff7,#0d0c12f7)}
.ov{backdrop-filter:none;-webkit-backdrop-filter:none;background:#000c}
.pal{backdrop-filter:none;-webkit-backdrop-filter:none;background:#000d}
.an-tabs{backdrop-filter:none;-webkit-backdrop-filter:none;background:#000c}
.tgk button{backdrop-filter:none}

/* révélation au scroll sans flou (le flou repeignait chaque carte pendant 0,8 s) */
.rv{filter:none;transform:translate3d(0,46px,0) scale(.94)}
.rv.vis{transform:none}
#splash.off{filter:none}

/* lettres du titre : le reflet qui défilait sur chaque lettre repeignait le titre en continu */
.hero h1 .ch{animation:chUp .7s cubic-bezier(.2,1.4,.4,1) both}

/* bouton or : reflet en transform (au lieu d'animer left / background-position) */
.btn.g{animation:none;background-size:100% 100%}
.btn.g:after{left:0;width:45%;transform:translateX(-160%) skewX(-20deg);animation:shineT 3.2s cubic-bezier(.4,0,.2,1) infinite;will-change:transform}
@keyframes shineT{0%{transform:translateX(-160%) skewX(-20deg)}45%,100%{transform:translateX(320%) skewX(-20deg)}}

/* halos qui pulsaient via box-shadow (repeint) : fixes */
.badge{animation:none;box-shadow:0 0 10px #2aabee55}
.oid{animation:none;box-shadow:0 0 26px #f5b40055}

/* carrousel : assombrissement par calque d'opacité au lieu de filter:brightness */
.pf{position:relative}
.pfi{filter:none;will-change:transform;transition:transform .08s linear}
.pfi:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:#000;opacity:calc((1 - var(--br,1)) * 1.3);border-radius:inherit}
.pfi img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}

/* tout ce qui tourne en boucle s'arrête quand on ne le voit pas */
.paused,.paused *,.paused:before,.paused:after,.paused *:before,.paused *:after{animation-play-state:paused!important}
body.busy main .hero *,body.busy main .hero:before,body.busy .marquee *{animation-play-state:paused!important}

/* la pluie de code s'efface quand on descend */
#rain{transition:opacity .6s}
body.scrolled #rain{opacity:0}

/* ---------------- 2. DESIGN DE FOU ---------------- */

/* barre de progression dorée en haut */
.prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:90;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#2aabee,#ffd65a 40%,#f5b400 70%,#ff5bd8);box-shadow:0 0 14px #f5b400aa}

/* projecteur qui suit le doigt sur toute la page */
.torch{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#f5b40026,#2aabee10 40%,transparent 68%);opacity:0;transition:opacity .5s;will-change:transform}
.torch.on{opacity:1}

/* hero : parallaxe au défilement */
.hero .logo-wrap{will-change:transform}
.hero h1{position:relative}

/* « ROI » géant en contour qui respire derrière le titre */
.hero h1:after{content:"ROI";position:absolute;left:50%;top:50%;z-index:-1;transform:translate(-50%,-55%);font-family:"Russo One";font-size:150px;line-height:1;color:transparent;-webkit-text-stroke:1.5px #f5b40026;letter-spacing:-4px;pointer-events:none;animation:roiBreath 6s ease-in-out infinite}
@keyframes roiBreath{50%{opacity:.35;transform:translate(-50%,-55%) scale(1.06)}}

/* stats : cartes vitrées avec reflet balayant */
.stats div{position:relative;overflow:hidden;background:linear-gradient(160deg,#1b1a22,#0b0d12);border-color:#ffffff14;box-shadow:inset 0 1px 0 #ffffff14}
.stats div:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffd65a22 50%,transparent 65%);transform:translateX(-120%);animation:statSweep 2.2s 2.4s ease-in-out 2 both}
.stats div:nth-child(2):after{animation-delay:2.7s}.stats div:nth-child(3):after{animation-delay:3s}
@keyframes statSweep{55%,100%{transform:translateX(120%)}}

/* 2 bandeaux défilants croisés en X */
.marquee{position:relative;z-index:2;box-shadow:0 10px 30px #000a;background:linear-gradient(90deg,#1d1606,#0b1a24)}
.marquee.x2{transform:rotate(2.5deg);margin-top:-14px;z-index:1;background:linear-gradient(90deg,#2aabee22,#ff5bd81a);border-color:#2aabee44}
.marquee.x2 .mq-track{animation-direction:reverse;animation-duration:26s}
.marquee.x2 .mq-track span{background:none;color:#cfe9ff;-webkit-text-fill-color:#cfe9ff}
.marquee.x2 .mq-track i{color:var(--gold2);text-shadow:none}
.mq-track{will-change:transform}

/* carte vedette : bordure lumineuse qui tourne */
#best .svc:first-child{isolation:isolate;border-color:transparent}
#best .svc:first-child>.ring{position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 60%,#ffd65a 75%,#2aabee 85%,transparent 95%);animation:rot 4s linear infinite;will-change:transform;pointer-events:none}
#best .svc:first-child:after{inset:1.5px;width:auto;opacity:1;z-index:-1;border-radius:calc(var(--r) - 1.5px);background:radial-gradient(120% 140% at 0% 0%,#3a2a00,#10131b 60%)}

/* dernière carte seule sur sa ligne : pleine largeur */
#best .svc:last-child:nth-child(even){grid-column:span 2;flex-direction:row;align-items:center}
#best .svc:last-child:nth-child(even) .ft{flex-direction:row;align-items:center;gap:12px}

/* icônes de service qui réagissent au toucher */
.svc .em{transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.svc.hot .em{transform:scale(1.12) rotate(-6deg)}

/* prix « dès » en or */
.svc .from b{background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* packs */
.pack{box-shadow:0 18px 40px #0009,inset 0 1px 0 #ffffff14}
.pack .tag{box-shadow:0 0 0 3px #f5b40022}

/* titres de section : soulignement néon */
.sec-h h2:after{height:3px;border-radius:3px;background:linear-gradient(90deg,#ffd65a,#2aabee)}

/* catégories : icônes qui sautent l'une après l'autre */
.cat .ic{animation:catHop 5s ease-in-out infinite}
.cat:nth-child(2) .ic{animation-delay:.25s}.cat:nth-child(3) .ic{animation-delay:.5s}.cat:nth-child(4) .ic{animation-delay:.75s}.cat:nth-child(5) .ic{animation-delay:1s}.cat:nth-child(6) .ic{animation-delay:1.25s}
@keyframes catHop{0%,12%,100%{transform:none}6%{transform:translateY(-7px) rotate(-8deg) scale(1.08)}}

/* changement d'onglet : la vue arrive en zoom + balayage doré */
.view{animation:viewIn .5s cubic-bezier(.2,.9,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translate3d(0,18px,0) scale(.985)}}
.curtain{position:fixed;inset:0;z-index:95;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#f5b40033 45%,#ffd65a55 50%,#2aabee33 55%,transparent 70%);transform:translateX(-110%);will-change:transform}
.curtain.go{animation:curtain .55s cubic-bezier(.6,0,.3,1)}
@keyframes curtain{to{transform:translateX(110%)}}

/* bouton couronne */
.nav .crown-btn{transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.nav .crown-btn:active{transform:scale(.88) rotate(-10deg)}

/* vidéos : pastille « LIVE » */
.real:before,.anim:before{content:"● LIVE";position:absolute;top:12px;right:12px;z-index:3;font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:1px;color:#fff;padding:4px 8px;border-radius:7px;background:#ff2b4acc;animation:blink 1.4s steps(1) infinite}

@media (prefers-reduced-motion:reduce){.torch,.curtain,.prog{display:none}.hero .logo-wrap,.hero h1{transform:none}}