/* ==========================================================================
   Era Studio - animations
   era-studio-tokens.css reste la source de verite et n'est pas modifie.

   Trois regles tenues partout dans ce fichier :
   1. Rien ne depend du JavaScript pour etre visible. Les etats "masque avant
      animation" vivent dans @media (prefers-reduced-motion: no-preference)
      et, pour la revelation au scroll, sous html.era-js.
   2. On n'anime que transform et opacity : aucune reprise de mise en page,
      donc aucun impact sur le CLS.
   3. Le H1 ne passe jamais par opacity 0 : c'est l'element LCP de la page.
      Il ne bouge qu'en transform, ce qui n'en retarde pas la mesure.
   ========================================================================== */

:root {
  --era-dur:      500ms;
  --era-dur-fast: 180ms;
  --era-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   1. Entree du hero, en cascade
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  body.era .era-hero__body > * {
    opacity: 0;
    transform: translateY(12px);
    animation: era-rise var(--era-dur) var(--era-ease) forwards;
  }

  /* Le titre : transform seul, sans fondu, pour ne pas repousser le LCP. */
  body.era .era-hero__body > .era-hero__title {
    opacity: 1;
    transform: translateY(10px);
    animation: era-settle var(--era-dur) var(--era-ease) forwards;
  }

  body.era .era-hero__body > *:nth-child(1) { animation-delay:  60ms; }
  body.era .era-hero__body > *:nth-child(2) { animation-delay: 130ms; }
  body.era .era-hero__body > *:nth-child(3) { animation-delay: 200ms; }
  body.era .era-hero__body > *:nth-child(4) { animation-delay: 270ms; }
  body.era .era-hero__body > *:nth-child(5) { animation-delay: 340ms; }
  body.era .era-hero__body > *:nth-child(6) { animation-delay: 410ms; }
  body.era .era-hero__body > *:nth-child(7) { animation-delay: 480ms; }

  /* ------------------------------------------------------------------------
     2. Le geste signature : le surligneur mint se deploie
     Seul le fond grandit, le mot reste lisible pendant tout le mouvement.
     ------------------------------------------------------------------------ */
  body.era .era-hero__title .era-highlight::before {
    transform: skewX(-11deg) scaleX(0);
    transform-origin: left center;
    animation: era-highlight 450ms var(--era-ease) 560ms forwards;
  }
}

@keyframes era-rise      { to { opacity: 1; transform: none; } }
@keyframes era-settle    { to { transform: none; } }
@keyframes era-highlight { to { transform: skewX(-11deg) scaleX(1); } }

/* --------------------------------------------------------------------------
   3. Micro-interactions
   Elles restent actives sous prefers-reduced-motion quand elles ne bougent
   qu'une couleur ; les deplacements, eux, sont neutralises plus bas.
   -------------------------------------------------------------------------- */

/* La fleche des CTA avance. */
body.era .era-cta-primary .elementor-button-text::after,
body.era .era-cta-ghost .elementor-button-text::before {
  transition: transform var(--era-dur-fast) var(--era-ease);
}
body.era .era-cta-primary .elementor-button:hover .elementor-button-text::after,
body.era .era-header__cta:hover svg { transform: translateX(3px); }
body.era .era-header__cta svg { transition: transform var(--era-dur-fast) var(--era-ease); }

/* La carte de preuve sociale prend de l'elevation, ses avatars s'ecartent. */
body.era .era-proof { transition: box-shadow 250ms var(--era-ease); }
body.era .era-proof:hover { box-shadow: var(--era-shadow-2); }
body.era .era-proof .era-avatars > * { transition: margin-left 250ms var(--era-ease); }
body.era .era-proof:hover .era-avatars > * + * { margin-left: -8px; }

/* Soulignement mint sur la navigation. */
body.era .era-nav__list a { position: relative; }
body.era .era-nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 3px;
  border-radius: 2px;
  background: var(--era-mint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--era-ease);
}
body.era .era-nav__list a:hover::after,
body.era .era-nav__list a:focus-visible::after { transform: scaleX(1); }

/* Les barres du burger s'ecartent. */
body.era .era-burger:hover .era-burger__bar:first-child { transform: translateY(-1px); }
body.era .era-burger:hover .era-burger__bar:last-child  { transform: translateY(1px); }

/* La pastille de disponibilite respire : seule l'icone mint varie. */
@media (prefers-reduced-motion: no-preference) {
  body.era .era-pill-dark svg { animation: era-breathe-icon 2.6s ease-in-out infinite; }
}
@keyframes era-breathe-icon { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* --------------------------------------------------------------------------
   4. Revelation au scroll, pour les sections a venir
   Ajouter la classe era-reveal a un conteneur depuis l'onglet Avance
   d'Elementor suffit. L'etat masque n'existe que si le JS a pris la main.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.era-js body.era .era-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--era-ease), transform 600ms var(--era-ease);
  }
  html.era-js body.era .era-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   5. Sortie du hero, pilotee par le defilement
   CSS pur. Les navigateurs qui ne connaissent pas animation-timeline ignorent
   simplement le bloc : rien a degrader.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.era .era-hero__body {
      animation: era-hero-exit linear both;
      animation-timeline: view();
      animation-range: exit-crossing 0% exit-crossing 70%;
    }
  }
}
@keyframes era-hero-exit { to { opacity: 0.2; transform: translateY(-28px); } }

/* --------------------------------------------------------------------------
   6. Mouvement reduit : tout deplacement est neutralise, l'etat final reste.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.era .era-hero__body > *,
  body.era .era-hero__title .era-highlight::before,
  body.era .era-pill-dark svg {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  body.era .era-hero__title .era-highlight::before { transform: skewX(-11deg); }
  body.era .era-proof .era-avatars > *,
  body.era .era-nav__list a::after,
  body.era .era-burger__bar { transition: none; }
}

/* --------------------------------------------------------------------------
   7. Etat de secours
   Pose par le script si l'animation d'entree n'a pas joue : le contenu doit
   toujours finir visible, quoi qu'il arrive.
   -------------------------------------------------------------------------- */
body.era.era-motion-done .era-hero__body > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
body.era.era-motion-done .era-hero__title .era-highlight::before {
  animation: none !important;
  transform: skewX(-11deg) !important;
}