/* ==========================================================================
   Fidelyxa — couche de mouvement commune (accueil + pages secondaires)
   À charger en dernier. Fonctionne avec fx-motion.js.

   Vocabulaire :
     · « tampon »  : ce qui confirme (coches, étiquettes, numéros) s'imprime
                     comme un tampon sur la carte ;
     · « donne »   : les cartes arrivent comme on distribue des cartes ;
     · « volet »   : les images se dévoilent de bas en haut ;
     · les titres montent mot par mot.

   Rien n'est masqué sans JavaScript, ni si le visiteur a demandé à réduire
   les animations. Sur une machine lente, fx-motion.js ajoute .fx-lite sur
   <html> : les boucles d'ambiance s'arrêtent, le reste continue.
   ========================================================================== */

::selection{background:#7fe3d3;color:#052f2b}

/* --- Pause : hors écran, ou derrière l'écran d'accueil --------------------- */
.fx-off,.fx-off *,.fx-off::before,.fx-off::after,.fx-off *::before,.fx-off *::after{animation-play-state:paused!important}
.fx-loading-on .fx-hero *,.fx-loading-on .fx-hero *::before,.fx-loading-on .fx-hero *::after{animation-play-state:paused!important}
[data-film].is-paused .mf-scene,[data-film].is-paused .mf-scene *,[data-film].is-paused .mf-scene *::before,[data-film].is-paused .mf-scene *::after{animation-play-state:paused!important}

/* --- Tampon : keyframes partagées ------------------------------------------ */
@keyframes fx-stamp-in{
  0%{transform:scale(1.9) rotate(-14deg);opacity:0}
  55%{transform:scale(.92) rotate(3deg);opacity:1}
  100%{transform:none;opacity:1}
}
@keyframes fx-tag-in{
  0%{transform:scale(1.7) rotate(-9deg);opacity:0}
  60%{transform:scale(.95) rotate(2deg);opacity:1}
  100%{transform:none;opacity:1}
}

/* ==========================================================================
   Révélations au scroll (classes posées par fx-motion.js)
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .rv{--rv-ease:cubic-bezier(.22,1,.36,1);--rv-delay:calc(var(--rv-d,0) * 80ms)}

  /* montée douce */
  .rv.rv--rise{opacity:0;transform:translateY(26px);transition:opacity .7s ease var(--rv-delay),transform .95s var(--rv-ease) var(--rv-delay)}
  .rv.rv--rise.rv-in{opacity:1;transform:none}

  /* donne : la carte arrive en biais puis se pose */
  .rv.rv--deal{opacity:0;transform:translateY(54px) rotate(var(--rv-r,-4deg)) scale(.95);transform-origin:50% 100%;transition:opacity .55s ease var(--rv-delay),transform 1.05s var(--rv-ease) var(--rv-delay)}
  .rv.rv--deal:nth-child(even){--rv-r:3.5deg}
  .rv.rv--deal.rv-in{opacity:1;transform:none}
  .rv.rv--deal .fx-plan-tag{opacity:0}
  .rv.rv--deal.rv-in .fx-plan-tag{animation:fx-tag-in .7s cubic-bezier(.2,1.35,.4,1) calc(var(--rv-delay) + .55s) both}

  /* volet : l'image se dévoile de bas en haut pendant qu'elle se recadre.
     (État de départ en opacité : un élément entièrement rogné n'est pas vu par IntersectionObserver.) */
  .rv.rv--clip{opacity:0}
  .rv.rv--clip.rv-in{opacity:1;animation:fx-clip-in 1.15s var(--rv-ease) var(--rv-delay) both}
  @keyframes fx-clip-in{from{clip-path:inset(100% 0 0 0 round var(--rv-rad,32px))}to{clip-path:inset(0 0 0 0 round var(--rv-rad,32px))}}
  .rv.rv--clip>img,.rv.rv--clip>video{transform:scale(1.14);transition:transform 1.5s var(--rv-ease) var(--rv-delay)}
  .rv.rv--clip.rv-in>img,.rv.rv--clip.rv-in>video{transform:none}

  /* ligne de liste : le texte glisse, la coche se tamponne */
  .rv.rv--line{opacity:0;transform:translateX(-18px);transition:opacity .55s ease var(--rv-delay),transform .8s var(--rv-ease) var(--rv-delay)}
  .rv.rv--line.rv-in{opacity:1;transform:none}
  .rv.rv--line>svg,.rv--line>.fx-icon{opacity:0}
  .rv.rv--line.rv-in>svg,.rv--line.rv-in>.fx-icon{animation:fx-stamp-in .6s cubic-bezier(.2,1.35,.4,1) calc(var(--rv-delay) + .18s) both}

  /* le bloc grandit en se posant (tableau de bord, appel final) */
  .rv.rv--grow{opacity:0;transform:translateY(40px) scale(.94);transform-origin:50% 100%;transition:opacity .6s ease var(--rv-delay),transform 1.1s var(--rv-ease) var(--rv-delay)}
  .rv.rv--grow.rv-in{opacity:1;transform:none}

  /* titres : mots qui montent (pages secondaires ; l'accueil a déjà .fx-split) */
  .rv-words .rv-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
  .rv-words .rv-w>span{display:inline-block;transform:translateY(108%);transition:transform .9s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--n,0) * 42ms)}
  .rv-words.rv-in .rv-w>span{transform:none}

  /* pages secondaires : les cartes .pg-reveal reprennent la « donne » */
  .pg-anim .pg-card.pg-reveal,.pg-anim .pg-value.pg-reveal{transform:translateY(46px) rotate(-3.5deg) scale(.96);transform-origin:50% 100%;transition:opacity .55s ease,transform 1s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--d,0) * 80ms)}
  .pg-anim .pg-card.pg-reveal:nth-child(even),.pg-anim .pg-value.pg-reveal:nth-child(even){transform:translateY(46px) rotate(3deg) scale(.96)}
  .pg-anim .pg-card.pg-reveal.is-in,.pg-anim .pg-value.pg-reveal.is-in{transform:none}
  .pg-anim .pg-reveal .pg-icon{transform:scale(.5) rotate(-18deg);opacity:0;transition:transform .7s cubic-bezier(.2,1.35,.4,1),opacity .3s ease;transition-delay:calc(var(--d,0) * 80ms + .25s)}
  .pg-anim .pg-reveal.is-in .pg-icon{transform:none;opacity:1}

  /* numéros d'étape : ils se tamponnent quand on arrive dessus */
  .pg-step.is-on .pg-num{animation:fx-num-pop .6s cubic-bezier(.2,1.35,.4,1)}
  @keyframes fx-num-pop{0%{transform:scale(.86) rotate(-3deg)}55%{transform:scale(1.06) rotate(1deg)}100%{transform:none}}
  .pg-num{display:inline-block;transform-origin:0 80%}

  /* pastille « 14 jours » : tamponnée à l'arrivée, puis elle flotte */
  .pg-badge{animation:fx-stamp-in .85s cubic-bezier(.2,1.35,.4,1) .45s both,pg-float 7s ease-in-out 1.4s infinite}
  .pg-seal,.pg-qmark{animation:fx-soft-scale 1.1s cubic-bezier(.22,1,.36,1) .3s both}
  @keyframes fx-soft-scale{from{opacity:0;transform:scale(.8)}}

  /* FAQ : la réponse se déplie en fondu */
  .fx-faq-item[open]>p,.pg-faq-item[open]>p{animation:fx-faq-in .5s cubic-bezier(.22,1,.36,1) .05s both}
  @keyframes fx-faq-in{from{opacity:0;transform:translateY(-8px)}}
}

/* ==========================================================================
   Animations liées au défilement (CSS pur, sans JavaScript, navigateurs récents)
   ========================================================================== */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* accueil : la carte et le texte se séparent légèrement quand on quitte le héros */
    html:not(.fx-lite) .fx-hero .fx-scene{animation:fx-scene-out linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes fx-scene-out{to{translate:0 70px}}
    html:not(.fx-lite) .fx-hero .fx-hero-copy{animation:fx-copy-out linear both;animation-timeline:view();animation-range:exit 15% exit 100%}
    @keyframes fx-copy-out{to{opacity:.3;translate:0 -18px}}

    /* la photo avance doucement vers le visiteur */
    html:not(.fx-lite) .fx-brand-story-media>img{transform-origin:50% 100%;animation:fx-zoom linear both;animation-timeline:view();animation-range:cover 10% cover 90%}
    @keyframes fx-zoom{from{scale:1}to{scale:1.09}}

  }
}

/* ==========================================================================
   Micro-interactions
   ========================================================================== */
/* --- Navigation : une pastille glisse d'un lien à l'autre ------------------- */
@media (min-width:901px) and (hover:hover){
  .fx-nav{position:relative}
  .fx-nav-pill{position:absolute;left:0;top:50%;z-index:0;width:var(--w,0px);height:40px;border-radius:999px;background:var(--fx-mint);opacity:0;transform:translate(var(--x,0px),-50%);pointer-events:none;transition:transform .45s var(--fx-ease),width .45s var(--fx-ease),opacity .2s ease}
  .fx-nav.has-pill a{position:relative;z-index:1}
  .fx-nav.has-pill a:hover{background:transparent}
  .fx-nav.has-pill.is-hover .fx-nav-pill{opacity:1}
  .fx-nav.has-pill:not(.is-ready) .fx-nav-pill{transition:opacity .2s ease}
  body.pg .fx-header:not(.is-solid):not(.open) .fx-nav.has-pill a:hover{background:transparent}
  body.pg .fx-header:not(.is-solid):not(.open) .fx-nav-pill{background:rgba(255,255,255,.14)}
}

/* --- Mensuel / annuel : le curseur glisse ----------------------------------- */
.fx-billing{position:relative}
.fx-billing.has-thumb::before{content:"";position:absolute;top:5px;bottom:5px;left:0;width:var(--tw,0px);border-radius:999px;background:var(--fx-ink);transform:translateX(var(--tx,0px));transition:transform .5s var(--fx-ease),width .5s var(--fx-ease)}
.fx-billing.has-thumb button{position:relative;z-index:1}
.fx-billing.has-thumb button.active{background:transparent}

/* --- Formules : la carte se soulève, un halo suit le curseur sur « Pro » ----- */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .fx-plan{transition:transform .5s var(--fx-ease),box-shadow .5s ease,border-color .3s ease}
  .fx-plan:hover{transform:translateY(-8px);box-shadow:0 34px 56px -36px rgba(5,47,43,.55)}
  .fx-plan:not(.fx-plan--pro):hover{border-color:rgba(15,143,131,.45)}
  .fx-plan--pro::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),rgba(127,227,211,.2),transparent 62%)}
  .fx-plan--pro:hover::after{opacity:1}
  .fx-plan--pro>*{position:relative;z-index:1}
  .fx-plan--pro>.fx-plan-tag{position:absolute}
}

/* --- Liens du pied de page : le soulignement se trace ------------------------ */
.fx-footer nav a{background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;padding-bottom:2px;transition:background-size .35s var(--fx-ease),color .2s ease}
.fx-footer nav a:hover{text-decoration:none;background-size:100% 1px}

/* --- Menu mobile : il se déplie au lieu d'apparaître d'un coup --------------- */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .fx-header.open .fx-nav-content{animation:fx-menu-in .38s var(--fx-ease) both;transform-origin:50% 0}
  @keyframes fx-menu-in{from{opacity:0;transform:translateY(-10px) scale(.97)}}
  .fx-header.open .fx-nav a,.fx-header.open .fx-header-actions{animation:fx-menu-item .45s var(--fx-ease) both}
  .fx-header.open .fx-nav a:nth-child(1){animation-delay:.04s}
  .fx-header.open .fx-nav a:nth-child(2){animation-delay:.08s}
  .fx-header.open .fx-nav a:nth-child(3){animation-delay:.12s}
  .fx-header.open .fx-nav a:nth-child(4){animation-delay:.16s}
  .fx-header.open .fx-nav a:nth-child(5){animation-delay:.2s}
  .fx-header.open .fx-header-actions{animation-delay:.24s}
  @keyframes fx-menu-item{from{opacity:0;transform:translateY(8px)}}
}

/* ==========================================================================
   Mode allégé (.fx-lite) : machine lente, économie d'énergie ou de données.
   On coupe seulement les boucles d'ambiance et les effets liés au curseur.
   ========================================================================== */
.fx-lite .pg-aurora i,
.fx-lite .pg-hero::before,
.fx-lite .fx-scene-mark,
.fx-lite .fx-final-card::after,
.fx-lite .pg-ring,
.fx-lite .pg-orbit::before,
.fx-lite .pg-orbit::after,
.fx-lite .pg-qmark::before,
.fx-lite .pg-qmark::after,
.fx-lite .fx-compare-visual::before,
.fx-lite .fx-compare-visual img,
.fx-lite .fx-compare-float{animation:none!important}
.fx-lite .pg-chip{animation:pg-chip-in .8s var(--fx-ease) both!important}
.fx-lite .pg-badge{animation:fx-stamp-in .85s cubic-bezier(.2,1.35,.4,1) .45s both!important}
.fx-lite .pg-spot{display:none}
.fx-lite .fx-header,.fx-lite body.pg .fx-header.is-solid,.fx-lite body.pg .fx-header.open{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(246,250,248,.985)}
.fx-lite body.pg .fx-header:not(.is-solid):not(.open){background:transparent}
.fx-lite .rv.rv--clip>img,.fx-lite .rv.rv--clip>video{transform:none;transition:none}

/* ==========================================================================
   Arrivée sur une page secondaire : rien de coûteux au premier affichage.
   Le fond du héros est fixe (plus de grands calques animés en continu) et le
   titre entre par un simple glissement.
   ========================================================================== */
.pg-aurora i{animation:none!important;will-change:auto}
.pg-hero::before{animation:none!important}
@media (prefers-reduced-motion:no-preference){
  .pg-hero .pg-h1{animation:fx-title-in .8s cubic-bezier(.22,1,.36,1) .05s both}
  @keyframes fx-title-in{from{opacity:0;transform:translateY(22px)}}
}

/* ==========================================================================
   Titre du héros joué : « Ils passent. » traverse et son écho file hors de
   l'écran ; « Ils reviennent. » revient de la droite et se pose comme un tampon.
   Transform et opacité uniquement.
   ========================================================================== */
.tl{position:relative;display:block}
@media (prefers-reduced-motion:no-preference){
  .fx-h1 .fx-line{overflow:visible}
  .pg-hero .pg-h1--xl{animation:none}
  .fx-h1 .fx-line>.tl--pass,.pg-h1--xl>.tl--pass{animation:fx-pass-by 1s cubic-bezier(.2,1.15,.3,1) .05s both}
  @keyframes fx-pass-by{0%{opacity:0;transform:translateX(-55%) skewX(-12deg)}35%{opacity:1}100%{opacity:1;transform:none}}
  .tl--pass::after{
    content:attr(data-text);content:attr(data-text) / "";
    position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;
    color:transparent;-webkit-text-stroke:1.5px var(--tl-ghost,rgba(15,32,29,.4));
    opacity:0;animation:fx-pass-echo 1.15s cubic-bezier(.35,0,.2,1) .3s both;
  }
  .pg-hero .tl--pass::after{--tl-ghost:rgba(255,255,255,.5)}
  @keyframes fx-pass-echo{0%{opacity:0;transform:none}18%{opacity:.75}100%{opacity:0;transform:translateX(125%) skewX(-12deg)}}
  .fx-h1 .fx-line>.tl--back,.pg-h1--xl>.tl--back{transform-origin:12% 60%;animation:fx-come-back 1.1s ease-out .55s both}
  @keyframes fx-come-back{
    0%{opacity:0;transform:translateX(70%) skewX(10deg)}
    48%{opacity:1;transform:translateX(-2.5%)}
    66%{opacity:1;transform:scale(1.07) rotate(-1.6deg)}
    82%{opacity:1;transform:scale(.985) rotate(.4deg)}
    100%{opacity:1;transform:none}
  }
}