/* =========================================================
   MOTEUR LÉGER (sans bibliothèque) — fx-lite.css (07/11/2026)
   Utilisé sur téléphone, tablette et pages de lecture (js/fx-lite.js).
   Les états « cachés » ne s'appliquent qu'aux éléments que le script a enregistrés (attribut data-fx) :
   sans JavaScript, ou si le script s'arrête, tout reste visible.
   ========================================================= */
html.fx-lite{--e:cubic-bezier(.16,1,.3,1)}

/* Titres : les mots se lèvent */
html.fx-lite [data-fx=w] .w>span{transform:translateY(118%);transition:transform 1s var(--e);transition-delay:calc(var(--i,0) * 45ms)}
html.fx-lite [data-fx=w].in .w>span{transform:none}

/* Élément isolé qui apparaît */
html.fx-lite [data-fx=r]{opacity:0;transform:translateY(44px) scale(.96);transition:opacity .9s var(--e),transform 1s var(--e)}
html.fx-lite [data-fx=r].in{opacity:1;transform:none}

/* Groupe d'éléments qui apparaissent l'un après l'autre */
html.fx-lite [data-fx=g] .gi{opacity:0;transform:translateY(46px) scale(.96);transition:opacity .9s var(--e),transform 1s var(--e),border-color .2s ease,background-color .4s ease;transition-delay:calc(var(--i,0) * 100ms),calc(var(--i,0) * 100ms),0s,0s}
html.fx-lite [data-fx=g] .gx{transform:translateX(40px)}
html.fx-lite [data-fx=g].in .gi{opacity:1;transform:none}

/* Engagements : la phrase s'allume, la coche se dessine */
html.fx-lite [data-fx=ck]{opacity:.2;transform:translateX(-16px);transition:opacity .8s var(--e),transform .9s var(--e)}
html.fx-lite [data-fx=ck] path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--e) .2s}
html.fx-lite [data-fx=ck].in{opacity:1;transform:none}
html.fx-lite [data-fx=ck].in path{stroke-dashoffset:0}

/* Ouverture : la façade avance doucement pendant le défilement (variable --hp posée par le script) */
html.fx-lite .hero-home .hero-media img,html.fx-lite .hero-page .hero-media img{transform:scale(calc(1 + .2 * var(--hp,0)));transform-origin:50% 45%;will-change:transform}
html.fx-lite .hero-home .fx-veil,html.fx-lite .hero-page .fx-veil{opacity:calc(.7 * var(--hp,0))}

/* Preuves : étoiles qui s'allument, jauges qui se remplissent */
@keyframes fxStar{from{opacity:0;transform:scale(0) rotate(-40deg)}to{opacity:1;transform:none}}
html.fx-lite .fx-stars:not(.in) .stars svg{opacity:0}
html.fx-lite .fx-stars.in .stars svg{animation:fxStar .7s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(.45s + var(--i,0) * 90ms)}
html.fx-lite .fx-meter b{transition:transform 1.6s var(--e) .6s}
html.fx-lite .in .fx-meter b{transform:scaleX(var(--v,.9))}

/* Services (téléphone) : les cartes empilées reculent quand la suivante arrive */
/* recul = transform posé par le script ; assombrissement = voile .fx-dim (opacité), plus de filter */
.fx-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;border-radius:inherit;z-index:3}
html.fx-lite #services.is-stack .svc-card{will-change:transform}

/* Badge Auto Plus : médaille qui tourne en continu (pause quand elle n'est plus à l'écran) */
@keyframes fxCoin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
html.fx-lite .award-coin{animation:fxCoin 9s linear 1;animation-play-state:paused}
html.fx-lite .award-coin.run{animation-play-state:running}

/* Contact : numéro fantôme qui dérive lentement (seulement quand la section est à l'écran) */
@keyframes fxGhost{from{transform:translateX(5%)}to{transform:translateX(-5%)}}
html.fx-lite .fx-ghost{animation:fxGhost 36s ease-in-out infinite alternate;animation-play-state:paused}
html.fx-lite .contact.live .fx-ghost{animation-play-state:running}

/* Pages intérieures : on coupe l'ancienne animation « kenburns » de l'image d'ouverture (elle masquerait la nôtre) */
html.fx-lite .hero-page .hero-media img{animation:none}
.fx-veil{position:absolute;inset:0;background:var(--darkest);opacity:0;pointer-events:none}