/* =========================================================
   DESIGN — couche finale (chargée après dev.css)
   ========================================================= */

/* scanlines sans mode de fusion (évitait des blocs plus clairs) + grain */
body:after{mix-blend-mode:normal;background:repeating-linear-gradient(#0000 0 2px,#0000000d 2px 3px)}
.grain{position:fixed;inset:0;z-index:249;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- hero : aurore + logo en orbite ---------- */
.aurora{position:absolute;inset:-30%;z-index:-1;pointer-events:none;filter:blur(40px);opacity:.75}
.aurora i{position:absolute;border-radius:50%}
.aurora i:nth-child(1){width:60%;height:50%;left:5%;top:10%;background:#f5b40055;animation:au1 12s ease-in-out infinite}
.aurora i:nth-child(2){width:55%;height:45%;right:0;top:25%;background:#2aabee44;animation:au2 14s ease-in-out infinite}
.aurora i:nth-child(3){width:45%;height:40%;left:30%;bottom:5%;background:#b98cff2e;animation:au1 16s ease-in-out infinite reverse}
@keyframes au1{50%{transform:translate(18%,12%) scale(1.15)}}
@keyframes au2{50%{transform:translate(-20%,-10%) scale(.9)}}
.logo-wrap{width:230px;height:230px;margin:4px auto 18px}
.logo-wrap:before{inset:32px}
.logo-wrap:after{inset:40px}
.hero .logo{width:150px;height:150px}
.orbit-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed #ffffff1f;animation:rot 26s linear infinite;pointer-events:none}
.orbit-ring.r2{inset:22px;border-style:solid;border-color:#f5b4001a;animation-duration:40s;animation-direction:reverse}
.orb{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;transform:rotate(var(--a)) translateY(-115px) rotate(calc(var(--a) * -1))}
.orb span{display:grid;place-items:center;width:100%;height:100%;border-radius:11px;font-size:15px;font-family:var(--mono);font-weight:800;color:#fff;background:#10131bdd;border:1px solid #ffffff22;box-shadow:0 6px 16px #000a,0 0 14px var(--oc);animation:rot 26s linear infinite reverse}
.hero h1{font-size:34px;letter-spacing:.5px}

/* ---------- sections : grand index en filigrane ---------- */
.sec{position:relative;margin-top:40px}
.sec-h{position:relative;padding-top:6px}
.sec-h:before{content:attr(data-n);position:absolute;right:-4px;top:-34px;font-family:"Russo One";font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1px #ffffff14;pointer-events:none}
.sec-h h2{font-size:21px}

/* ---------- catégories en dock défilant ---------- */
.cats{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:4px 16px 10px;scrollbar-width:none;scroll-snap-type:x mandatory}
.cats::-webkit-scrollbar{display:none}
.cat{flex:0 0 84px;scroll-snap-align:start;padding:14px 4px 12px;border-radius:20px;background:linear-gradient(180deg,#141824,#0b0d13);font-size:10.5px}
.cat .ic{width:48px;height:48px;border-radius:15px;font-size:24px;background:radial-gradient(circle at 30% 20%,#f5b40044,#1a1408 70%);box-shadow:0 8px 18px #0008,inset 0 1px 0 #ffffff22}

/* ---------- « les plus demandés » en mosaïque ---------- */
#best{grid-template-columns:1fr 1fr;gap:10px}
#best .svc{flex-direction:column;gap:10px;padding:16px 14px 14px}
#best .svc .em{width:48px;height:48px;font-size:24px;border-radius:14px}
#best .svc p{display:none}
#best .svc h3{font-size:14px;line-height:1.25}
#best .svc .ft{flex-direction:column;align-items:flex-start;gap:3px}
#best .svc .fname{display:none}
#best .svc:first-child{grid-column:span 2;flex-direction:row;align-items:center;padding:20px 16px;background:radial-gradient(120% 140% at 0% 0%,#3a2a00,#10131b 60%);border-color:#f5b40066}
#best .svc:first-child .em{width:70px;height:70px;font-size:36px}
#best .svc:first-child p{display:-webkit-box}
#best .svc:first-child h3{font-size:17px}
#best .svc:first-child .ft{flex-direction:row;align-items:center}

/* ---------- packs holographiques ---------- */
.pack{--hx:50%;--hy:50%}
.pack:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;background:radial-gradient(circle at var(--hx) var(--hy),#ffffff2e,transparent 40%),linear-gradient(115deg,transparent 20%,#ff9de222 35%,#9de7ff22 45%,#fff59d22 55%,transparent 70%);background-size:100% 100%,250% 250%;background-position:0 0,var(--hx) var(--hy)}

/* ---------- barre du bas : bouton couronne central ---------- */
.nav{grid-template-columns:repeat(5,1fr);overflow:visible}
.nav .crown-btn{position:relative;align-self:center;justify-self:center;width:56px;height:56px;margin-top:-30px;border-radius:19px;display:grid;place-items:center;font-size:26px;background:var(--goldgrad);box-shadow:0 10px 24px #f5b40055,0 0 0 5px #07070a,0 0 0 6px #f5b40055;color:#1a1200;padding:0;overflow:visible}
.nav .crown-btn:after{content:"";position:absolute;inset:-6px;border-radius:23px;border:1.5px solid #f5b40066;animation:crPulse 2.2s ease-out infinite}
@keyframes crPulse{from{transform:scale(.9);opacity:1}to{transform:scale(1.3);opacity:0}}

/* ---------- cartes : bordure lumineuse au toucher ---------- */
.svc.hot{border-color:#f5b40088;box-shadow:0 0 0 1px #f5b40033,0 14px 34px #000a,0 0 30px #f5b40018}

@media (prefers-reduced-motion:reduce){.aurora i,.orbit-ring,.orb span{animation:none}}

/* ---------- mini apps réalisées ---------- */
.real{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:9/16;max-height:560px;margin:0 auto;background:#000;border:1px solid #f5b40055;box-shadow:0 20px 50px #000c,0 0 40px #f5b40022;cursor:pointer}
.real video{width:100%;height:100%;object-fit:cover;display:block}
.real-info{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 16px;background:linear-gradient(transparent,#000e)}
.real-info small{display:block;font-family:var(--mono);font-size:10.5px;color:#3ddc84}
.real-info b{display:block;font-family:"Russo One";font-weight:400;font-size:26px;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.real-info span{font-size:12.5px;font-weight:800;color:#cfd6e6}