/* =====================================================================
   Animations Alexo — couche d'animations visibles sur tout le site.
   Tout est désactivé quand le visiteur clique sur « Mettre en pause »
   (classe .motion-off sur <body>).
   ===================================================================== */

@keyframes fx-up{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes fx-pop{0%{opacity:0;transform:scale(.6) rotate(-8deg)}70%{opacity:1;transform:scale(1.06) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes fx-float{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes fx-float-b{0%,100%{translate:0 0}50%{translate:0 14px}}
@keyframes fx-sway{0%,100%{transform:translate(-50%,-50%) rotate(-3deg) rotateY(-8deg) rotateX(3deg)}50%{transform:translate(-50%,-50%) rotate(-1deg) rotateY(8deg) rotateX(-3deg)}}
@keyframes fx-shine{to{background-position:200% center}}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 #bb2edb88}80%,100%{box-shadow:0 0 0 14px #bb2edb00}}
@keyframes fx-bounce{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -12px;rotate:-8deg}60%{translate:0 0;rotate:5deg}}
@keyframes fx-flip{from{opacity:0;transform:translateY(40%) rotateX(-70deg)}to{opacity:1;transform:none}}
@keyframes fx-page-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fx-blob{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%;transform:translate(0,0) rotate(0)}50%{border-radius:61% 39% 38% 62%/58% 63% 37% 42%;transform:translate(30px,-20px) rotate(25deg)}}

/* ---------- Entrée de page ---------- */
body:not(.motion-off) main{animation:fx-page-in .7s var(--ease,cubic-bezier(.2,.8,.2,1)) both}
body.fx-leaving main,body.fx-leaving footer{opacity:0;transform:translateY(-10px);transition:opacity .25s,transform .25s}

/* ---------- En-tête qui se compacte au défilement ---------- */
header .nav,header .nav .logo img{transition:padding .35s,width .35s}
body.scrolled:not(.motion-off) header .nav{padding-top:12px;padding-bottom:12px}
@media(min-width:751px){body.scrolled header .nav .logo img{width:140px}}

/* ---------- Haut de page : contenus qui arrivent en cascade ---------- */
body:not(.motion-off) :is(.hero-copy,.cabinet-copy,.product-layout>div:first-child)>*:not(h1){animation:fx-up 1s var(--ease,cubic-bezier(.2,.8,.2,1)) both}
body:not(.motion-off) :is(.hero-copy,.cabinet-copy,.product-layout>div:first-child)>*:nth-child(1){animation-delay:.05s}
body:not(.motion-off) :is(.hero-copy,.cabinet-copy,.product-layout>div:first-child)>*:nth-child(2){animation-delay:.18s}
body:not(.motion-off) :is(.hero-copy,.cabinet-copy,.product-layout>div:first-child)>*:nth-child(3){animation-delay:.32s}
body:not(.motion-off) :is(.hero-copy,.cabinet-copy,.product-layout>div:first-child)>*:nth-child(4){animation-delay:.46s}
body:not(.motion-off) :is(.hero-copy,.cabinet-copy,.product-layout>div:first-child)>*:nth-child(5){animation-delay:.6s}
body:not(.motion-off) :is(.hero-copy,.cabinet-copy,.product-layout>div:first-child)>*:nth-child(n+6){animation-delay:.74s}

/* Titre principal : dégradé qui brille en continu */
:is(.hero-copy h1 em,.hero h1 em){background:linear-gradient(100deg,#c09aff 0%,#ef95ff 25%,#ffffff 50%,#ef95ff 75%,#c09aff 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
body:not(.motion-off) :is(.hero-copy h1 em,.hero h1 em){animation:fx-shine 5s linear infinite}

/* Scène du haut de page : carte qui oscille, pastilles qui flottent */
body:not(.motion-off) .insurance-file{animation:fx-sway 9s ease-in-out infinite}
body:not(.motion-off) .satellite{animation:fx-float 5.5s ease-in-out infinite}
body:not(.motion-off) .satellite-1{animation:fx-float-b 6.5s ease-in-out infinite .4s}
body:not(.motion-off) .satellite-2{animation:fx-float 7s ease-in-out infinite .9s}
body:not(.motion-off) .satellite-3{animation:fx-float-b 6s ease-in-out infinite 1.3s}
body:not(.motion-off) .dossier-icon{animation:fx-float 6s ease-in-out infinite}
body:not(.motion-off) .scene-person.person-main{animation:fx-float 8s ease-in-out infinite}

/* Points lumineux qui pulsent */
body:not(.motion-off) :is(.status-dot,.dot,.eyebrow .status-dot){animation:fx-pulse 2s infinite}

/* Halo qui suit la souris dans les sections sombres */
.fx-glow{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),#bb2edb38,transparent 60%)}
body:not(.motion-off) .fx-glow.on{opacity:1}

/* Formes colorées qui se déforment lentement en arrière-plan */
.fx-blob{position:absolute;width:340px;height:340px;pointer-events:none;z-index:-1;filter:blur(60px);opacity:.45;background:linear-gradient(135deg,#7131dd,#bb2edb)}
body:not(.motion-off) .fx-blob{animation:fx-blob 14s ease-in-out infinite}

/* ---------- Apparitions au défilement, plus marquées ---------- */
body:not(.motion-off) .reveal{opacity:0;transform:translateY(60px) scale(.97);filter:blur(6px);transition:opacity .9s var(--ease,ease),transform 1.1s var(--ease,ease),filter .9s;transition-delay:var(--delay,0ms)}
body:not(.motion-off) .reveal.fx-from-left{transform:translateX(-70px)}
body:not(.motion-off) .reveal.fx-from-right{transform:translateX(70px)}
body:not(.motion-off) .reveal.is-visible{opacity:1;transform:none;filter:none}

/* Éléments en cascade (cartes, questions, avis…) */
body:not(.motion-off) .fx-item{opacity:0;transform:translateY(50px) scale(.94);transition:opacity .7s var(--ease,ease),transform .9s var(--ease,ease),box-shadow .5s,border-color .4s,background .4s;transition-delay:calc(var(--fx-i,0)*110ms)}
body:not(.motion-off) .fx-item.fx-in{opacity:1;transform:none}
body:not(.motion-off) .fx-item.fx-in.fx-done{transition-delay:0s}

/* Titres qui se dévoilent mot par mot */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.fx-w>span{display:inline-block}
body:not(.motion-off) .fx-words .fx-w>span{transform:translateY(105%);opacity:0;transition:transform .8s var(--ease,cubic-bezier(.2,.8,.2,1)),opacity .5s;transition-delay:calc(var(--i,0)*55ms)}
body:not(.motion-off) .fx-words.fx-in .fx-w>span{transform:none;opacity:1}

/* ---------- Survols ---------- */
body:not(.motion-off) .btn:hover :is(span,.arrow,.circle-arrow){transform:translate(3px,-3px) rotate(8deg);transition:transform .3s}

/* Cartes inclinées en 3D sous la souris */
.fx-tilt{transform-style:preserve-3d;will-change:transform}
body:not(.motion-off) .fx-tilt.fx-tilting{transition:transform .12s linear!important}
body:not(.motion-off) .service:hover .service-art img,
body:not(.motion-off) .situation-card:hover img,
body:not(.motion-off) .related-grid a:hover img{animation:fx-bounce .8s ease}

/* Liens du pied de page */
footer a:not(.logo){transition:transform .25s,color .25s}
body:not(.motion-off) footer a:not(.logo):hover{transform:translateX(6px)}

/* Compteur de la section méthode : bascule à chaque étape */
body:not(.motion-off) #method-num.fx-flip{animation:fx-flip .6s var(--ease,ease) both;display:inline-block}

/* Questions fréquentes : réponse qui glisse */
body:not(.motion-off) details[open]>:not(summary){animation:fx-up .5s var(--ease,ease) both}

/* Filtres : cartes qui réapparaissent */
body:not(.motion-off) .service.fx-refilter{animation:fx-pop .55s var(--ease,ease) both;animation-delay:calc(var(--fx-i,0)*60ms)}