/* Atlas Connect · SCÈNE DE HÉRO PARTAGÉE (.hsx-stage) — vocabulaire de la diapositive 1 de l'accueil :
   halo qui respire, disque de points, anneaux, arc cyan→orange, points d'intervention, étincelles, particules montantes.
   Source unique pour l'accueil (diapositives 2 à 6) ET les héros Services, À propos, Atlas Club, Contact, FAQ.
   Couches injectées par assets/atlas-hero-stage-2026.js (ou atlas-accueil-hero-slides-2026.js sur l'accueil).
   Règle du 15/09 : aucune rotation d'ÉLÉMENT, on tourne l'ANGLE d'un dégradé (@property).
   Seuls transform / opacity / background-position sont animés ; tout est en pause
   hors diapositive active. */
@property --hsx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --hsx-b{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes hsxSpin{to{--hsx-a:360deg}}
@keyframes hsxSpinB{to{--hsx-b:360deg}}
@keyframes hsxBreath{0%,100%{opacity:.8;scale:1}50%{opacity:1;scale:1.06}}
@keyframes hsxPing{0%{scale:1;opacity:.9}70%,100%{scale:4.2;opacity:0}}
@keyframes hsxTwinkle{0%,100%{opacity:.15;scale:.5}50%{opacity:1;scale:1}}
@keyframes hsxUp{0%{opacity:0;transform:translateY(0)}12%{opacity:.9}80%{opacity:.55}100%{opacity:0;transform:translateY(-340px)}}
@keyframes hsxFade{from{opacity:0}}
@keyframes hsxGrow{from{opacity:0;scale:.72}}
@keyframes hsxLive{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}100%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}

/* ── scène commune ── */
.hsx-stage{position:absolute;left:var(--hsx-x,50%);top:var(--hsx-y,50%);width:var(--hsx-w,min(128%,700px));aspect-ratio:1;translate:-50% -50%;z-index:-1;pointer-events:none;overflow:clip}
.hsx-stage>span{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%}
.hsx-halo{width:92%;aspect-ratio:1;background:radial-gradient(circle,rgba(59,130,246,.48),rgba(37,99,235,.2) 34%,rgba(103,232,249,.07) 50%,transparent 68%);filter:blur(10px);animation:hsxBreath 9s ease-in-out infinite}
.hsx-grid{width:88%;aspect-ratio:1;background:radial-gradient(circle,rgba(147,197,253,.6) 1.1px,transparent 1.8px) 0 0/20px 20px;-webkit-mask:radial-gradient(circle,#000 18%,transparent 64%);mask:radial-gradient(circle,#000 18%,transparent 64%);opacity:.55}
.hsx-ring{border:1px solid rgba(147,197,253,.26)}
.hsx-ring.r1{width:62%;aspect-ratio:1;border-color:rgba(147,197,253,.36);box-shadow:0 0 40px -6px rgba(59,130,246,.4),inset 0 0 40px -6px rgba(59,130,246,.3)}
.hsx-ring.r2{width:80%;aspect-ratio:1;border-style:dashed;border-color:rgba(147,197,253,.24)}
.hsx-arc{width:80%;aspect-ratio:1;background:conic-gradient(from var(--hsx-a),transparent 0 60%,rgba(103,232,249,.9) 74%,rgba(249,115,22,.9) 87%,transparent 95%);-webkit-mask:radial-gradient(circle,transparent calc(50% - 2.5px),#000 calc(50% - 1.5px) 50%,transparent calc(50% + .5px));mask:radial-gradient(circle,transparent calc(50% - 2.5px),#000 calc(50% - 1.5px) 50%,transparent calc(50% + .5px));filter:drop-shadow(0 0 6px rgba(103,232,249,.6));animation:hsxSpin 16s linear infinite}
.hsx-stage>.hsx-blip{width:8px;height:8px;background:#67e8f9;box-shadow:0 0 10px 2px rgba(103,232,249,.8)}
.hsx-blip::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid currentColor;color:rgba(103,232,249,.8);animation:hsxPing 3.6s cubic-bezier(.2,.7,0,1) infinite}
.hsx-blip.b1{left:14%;top:34%}
.hsx-blip.b2{left:88%;top:58%;background:#fb923c;box-shadow:0 0 10px 2px rgba(249,115,22,.8)}.hsx-blip.b2::after{color:rgba(249,115,22,.8);animation-delay:-1.2s}
.hsx-blip.b3{left:72%;top:14%}.hsx-blip.b3::after{animation-delay:-2.4s}
.hsx-stage>.hsx-spark{width:13px;height:13px;border-radius:0;background:#e0f2fe;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px rgba(147,197,253,.9));animation:hsxTwinkle 3.4s ease-in-out infinite}
.hsx-spark.s1{left:18%;top:20%}.hsx-spark.s2{left:84%;top:30%;width:9px;height:9px;background:#fed7aa;animation-delay:-1.1s}.hsx-spark.s3{left:80%;top:80%;width:8px;height:8px;animation-delay:-2.3s}
.hsx-stage>.hsx-rise{inset:0;left:0;top:0;translate:none;border-radius:0;-webkit-mask:radial-gradient(circle,#000 20%,transparent 62%);mask:radial-gradient(circle,#000 20%,transparent 62%)}
.hsx-rise i{position:absolute;bottom:14%;width:3px;height:3px;border-radius:50%;background:#bfdbfe;box-shadow:0 0 6px 1px rgba(147,197,253,.8);opacity:0;animation:hsxUp 9s linear infinite}
.hsx-rise i:nth-child(1){left:26%}.hsx-rise i:nth-child(2){left:34%;animation-delay:-2.2s;animation-duration:11s}.hsx-rise i:nth-child(3){left:42%;animation-delay:-5s}.hsx-rise i:nth-child(4){left:50%;animation-delay:-7.4s;animation-duration:12s;background:#fed7aa;box-shadow:0 0 6px 1px rgba(249,115,22,.7)}.hsx-rise i:nth-child(5){left:58%;animation-delay:-1.3s}.hsx-rise i:nth-child(6){left:65%;animation-delay:-4.1s;animation-duration:10s}.hsx-rise i:nth-child(7){left:72%;animation-delay:-6.6s;background:#fed7aa;box-shadow:0 0 6px 1px rgba(249,115,22,.7)}.hsx-rise i:nth-child(8){left:46%;animation-delay:-3.2s;animation-duration:13s}

/* parallaxe douce (même source que la s1) */
body.ah26 .hsx-grid{translate:calc(-50% + var(--ah26-px,0)*-10px) calc(-50% + var(--ah26-py,0)*-8px);transition:translate .9s cubic-bezier(.2,.7,0,1)}
body.ah26 .hsx-ring.r2,body.ah26 .hsx-arc{translate:calc(-50% + var(--ah26-px,0)*-16px) calc(-50% + var(--ah26-py,0)*-11px);transition:translate .9s cubic-bezier(.2,.7,0,1)}
body.ah26 .hsx-spark,body.ah26 .hsx-blip{translate:calc(-50% + var(--ah26-px,0)*-24px) calc(-50% + var(--ah26-py,0)*-16px);transition:translate 1s cubic-bezier(.2,.7,0,1)}

/* chorégraphie d'entrée, rejouée à chaque arrivée sur la diapositive */
.hcar .hcar-slide.is-in .hsx-halo{animation:hsxFade 1.2s .15s cubic-bezier(.22,.68,0,1) both,hsxBreath 9s ease-in-out 1.4s infinite}
.hcar .hcar-slide.is-in .hsx-grid{animation:hsxFade 1.4s .3s both}
.hcar .hcar-slide.is-in .hsx-ring.r1{animation:hsxGrow .9s .3s cubic-bezier(.22,.68,0,1) both}
.hcar .hcar-slide.is-in .hsx-ring.r2{animation:hsxGrow .9s .45s cubic-bezier(.22,.68,0,1) both}
.hcar .hcar-slide.is-in .hsx-arc{animation:hsxGrow 1s .6s cubic-bezier(.22,.68,0,1) both,hsxSpin 16s linear infinite}


/* ── héros de page (hors carrousel) : entrée jouée une fois au chargement ── */
.hsx-host{isolation:isolate}
.hsx-page .hsx-halo{animation:hsxFade 1.2s .15s cubic-bezier(.22,.68,0,1) both,hsxBreath 9s ease-in-out 1.4s infinite}
.hsx-page .hsx-grid{animation:hsxFade 1.4s .3s both}
.hsx-page .hsx-ring.r1{animation:hsxGrow .9s .3s cubic-bezier(.22,.68,0,1) both}
.hsx-page .hsx-ring.r2{animation:hsxGrow .9s .45s cubic-bezier(.22,.68,0,1) both}
.hsx-page .hsx-arc{animation:hsxGrow 1s .6s cubic-bezier(.22,.68,0,1) both,hsxSpin 16s linear infinite}
.hsx-page .hsx-blip,.hsx-page .hsx-spark{animation-delay:1s}
/* variantes : « sm » = pastille (pas de grille ni de particules), « lite » = scène qui a déjà ses anneaux */
.hsx-sm .hsx-grid,.hsx-sm .hsx-rise,.hsx-sm .hsx-spark{display:none}
.hsx-sm .hsx-ring.r1{width:46%}.hsx-sm .hsx-ring.r2,.hsx-sm .hsx-arc{width:66%}.hsx-sm .hsx-halo{width:72%}
.hsx-sm .hsx-blip.b1{left:24%;top:40%}.hsx-sm .hsx-blip.b2{left:80%;top:60%}.hsx-sm .hsx-blip.b3{left:64%;top:22%}
.hsx-lite .hsx-ring,.hsx-lite .hsx-halo{display:none}
.hsx-wide .hsx-grid{opacity:.2}.hsx-wide .hsx-halo{opacity:.55}.hsx-wide .hsx-ring.r1{opacity:.6}
/* hors écran : tout s'arrête */
.hsx-off *{animation-play-state:paused!important}
@media(max-width:1024px){.hsx-rise i:nth-child(n+6){display:none}}
@media(max-width:600px){.hsx-stage{max-width:100vw}.hsx-grid{background-size:16px 16px}.hsx-spark.s3{display:none}}
@media(prefers-reduced-motion:reduce){.hsx-stage *{animation:none!important}.hsx-rise{display:none}}