/* ========================================================================
   Atlas Pro IPTV — couche premium (surcouche visuelle, 0 impact contenu)
   Curseur custom · boutons magnétiques · glassmorphism · glow · reveals
   ======================================================================== */

/* --- Canvas WebGL de fond (derrière tout le contenu) --- */
#atlas-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;}
#atlas-bg.ready{opacity:1;}
/* on garde le contenu au-dessus du canvas */
.notice,.header,main,.footer,.wa-float{position:relative;z-index:2;}
.header{z-index:100;}
/* on atténue l'ancienne grille CSS pour laisser respirer la 3D */
body.atlas-3d::after{opacity:.18;}
/* voile de lisibilité : assombrit le côté texte du hero sans masquer les montagnes à droite */
body.atlas-3d .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,7,17,.94) 0%,rgba(8,7,17,.80) 26%,rgba(8,7,17,.34) 50%,rgba(8,7,17,0) 68%),
             linear-gradient(to top,rgba(8,7,17,.85) 0%,transparent 32%);}
body.atlas-3d .hero>.wrap{position:relative;z-index:1;}
/* léger voile sur les hero des pages internes pour garder le texte net */
body.atlas-3d .page-hero::before{content:"";position:absolute;inset:-20px 0;z-index:0;pointer-events:none;
  background:linear-gradient(to right,rgba(8,7,17,.85),rgba(8,7,17,.35) 60%,transparent);}
body.atlas-3d .page-hero>.wrap{position:relative;z-index:1;}

/* --- Holder : mini-scène 3D « L'Atlas sous globe » --- */
canvas.holder-3d{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;
  opacity:0;transition:opacity 1s ease;}
canvas.holder-3d.ready{opacity:1;}
/* on masque le SVG statique + les anneaux CSS quand la 3D prend le relais (SVG conservé dans le DOM) */
.peak-disc.has3d>svg.peak-core{opacity:0;transition:opacity .6s ease;}
.peak-disc.has3d .ring,.peak-disc.has3d .ring2{opacity:0;}

/* --- Curseur personnalisé (pointeur fin uniquement) --- */
@media (hover:hover) and (pointer:fine){
  body.atlas-3d{cursor:none;}
  body.atlas-3d a,body.atlas-3d button,body.atlas-3d .faq-q{cursor:none;}
  .cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;
    mix-blend-mode:screen;will-change:transform;}
  .cur-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#c7d0ff;
    box-shadow:0 0 12px 2px rgba(139,157,255,.9);transition:opacity .3s;}
  .cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(165,180,252,.55);
    transition:width .25s ease,height .25s ease,margin .25s ease,border-color .25s ease,background .25s ease;}
  .cur-ring.hot{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:rgba(199,208,255,.9);
    background:rgba(124,58,237,.10);}
  .cur-ring.down{width:28px;height:28px;margin:-14px 0 0 -14px;}
}

/* --- Boutons premium : glow, sheen, ripple, magnétisme --- */
.btn-gold,.header-cta,.mini-cta,.m-cta{position:relative;overflow:hidden;isolation:isolate;
  will-change:transform;}
.btn-gold::after,.header-cta::after,.mini-cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.btn-gold:hover::after,.header-cta:hover::after,.mini-cta:hover::after{transform:translateX(120%);}
.btn-gold{box-shadow:0 14px 40px var(--glow),0 0 0 1px rgba(165,180,252,.18) inset;}
.btn-gold:hover{box-shadow:0 22px 60px rgba(99,102,241,.5),0 0 30px rgba(124,58,237,.4);}
.atlas-ripple{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%);
  pointer-events:none;z-index:1;animation:atlas-rip .6s ease-out forwards;}
@keyframes atlas-rip{to{transform:translate(-50%,-50%) scale(1);opacity:0;}}

/* --- Glassmorphism + profondeur sur les cartes existantes --- */
body.atlas-3d .feat,
body.atlas-3d .step,
body.atlas-3d .silo a,
body.atlas-3d .price-inner,
body.atlas-3d .stat,
body.atlas-3d .callout,
body.atlas-3d .faq-item,
body.atlas-3d .rescue-inner,
body.atlas-3d .cmp thead th{
  background:rgba(24,20,44,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(165,180,252,.14);
}
/* conteneurs 3D-tilt : perspective + surbrillance qui suit la souris */
body.atlas-3d .feat,
body.atlas-3d .step,
body.atlas-3d .silo a,
body.atlas-3d .stat{
  transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
  will-change:transform;position:relative;overflow:hidden;
}
body.atlas-3d .feat::after,
body.atlas-3d .step::after,
body.atlas-3d .silo a::after,
body.atlas-3d .stat::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(165,180,252,.20),transparent 60%);
  transition:opacity .3s ease;}
body.atlas-3d .feat:hover::after,
body.atlas-3d .step:hover::after,
body.atlas-3d .silo a:hover::after,
body.atlas-3d .stat:hover::after{opacity:1;}
body.atlas-3d .feat:hover,
body.atlas-3d .step:hover,
body.atlas-3d .silo a:hover,
body.atlas-3d .stat:hover{box-shadow:0 30px 70px rgba(10,9,25,.6),0 0 30px rgba(99,102,241,.22);
  border-color:rgba(165,180,252,.32);}
/* le contenu des cartes remonte en profondeur */
body.atlas-3d .feat>*,body.atlas-3d .step>*,body.atlas-3d .silo a>*{transform:translateZ(24px);}

/* halo violet doux derrière la carte prix */
body.atlas-3d .price-card{position:relative;}
body.atlas-3d .price-card::after{content:"";position:absolute;inset:-40px;z-index:-1;
  background:radial-gradient(closest-side,rgba(124,58,237,.35),transparent 75%);filter:blur(30px);
  animation:atlas-breathe 6s ease-in-out infinite;}
@keyframes atlas-breathe{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:.9;transform:scale(1.05);}}

/* --- Reveals au scroll (état initial ; .in déclenché par JS/GSAP) --- */
body.atlas-3d [data-reveal]{opacity:0;transform:translateY(38px);filter:blur(6px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s ease;}
body.atlas-3d [data-reveal].in{opacity:1;transform:none;filter:none;}

/* --- Reveal de texte (hero h1) découpé en mots — piloté 100% en CSS (fiable) --- */
.atlas-word{display:inline-block;overflow:hidden;vertical-align:top;}
.atlas-word>span,.atlas-word>.atlas-word-el{display:inline-block;will-change:transform;
  transform:translateY(115%);transition:transform 1s cubic-bezier(.16,1,.3,1);}
.hero h1.revealed .atlas-word>span,.hero h1.revealed .atlas-word>.atlas-word-el{transform:translateY(0);}

/* --- Header : réactif au scroll (compact + masquage) --- */
body.atlas-3d .header{transition:transform .5s cubic-bezier(.16,1,.3,1),background .4s ease,backdrop-filter .4s ease,box-shadow .4s ease;}
body.atlas-3d .header.scrolled{background:rgba(9,8,17,.82);box-shadow:0 10px 40px rgba(5,4,14,.5);}
body.atlas-3d .header.hide{transform:translateY(-100%);}
/* soulignés animés de la navigation */
body.atlas-3d .nav a{position:relative;}
body.atlas-3d .nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1.5px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.16,1,.3,1);border-radius:2px;}
body.atlas-3d .nav a:hover::after{transform:scaleX(1);}

/* --- Accessibilité / perf : on coupe tout si l'utilisateur le demande --- */
@media (prefers-reduced-motion:reduce){
  #atlas-bg{display:none;}
  body.atlas-3d [data-reveal]{opacity:1;transform:none;filter:none;transition:none;}
  .cur-dot,.cur-ring{display:none;}
  body.atlas-3d{cursor:auto;}
  .atlas-word>span{transform:none;}
}
/* --- Tablette / mobile : pas de curseur custom, tilt allégé --- */
@media (max-width:900px){
  .cur-dot,.cur-ring{display:none;}
  body.atlas-3d{cursor:auto;}
}