/* ==========================================================================
   JORDAN.R NETTOYAGE — animations.css
   Limites du design system, respectées au 1/10e de seconde :
     · 0.15s ease-out  → interactions rapides (hover boutons / cards)
     · 0.3s  ease-out  → apparitions au scroll (fade + translateY 16px → 0)
     · 0.6s  maximum   → réservé au parallax de la photo du hero (≤ 40px)
   Jamais : translateY/scale au hover, carrousel auto, compteurs, loaders.
   ========================================================================== */

/* --- Apparition au scroll (une seule fois par élément) --------------------- */
.reveler {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duree-apparition) var(--courbe),
              transform var(--duree-apparition) var(--courbe);
  will-change: opacity, transform;
}

.reveler.est-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cascade discrète sur les grilles de cards : 60 à 80 ms entre chaque card
   d'une même rangée. Le délai est posé par animations.js (data-delai) pour
   ne dépendre ni du nombre de colonnes ni du viewport. */
.reveler[data-delai] { transition-delay: var(--delai-reveal, 0ms); }

/* Le hero apparaît sans attendre le scroll (LCP) : cascade fixe très courte */
.hero .reveler { transition-delay: var(--delai-reveal, 0ms); }

/* --- Barre rouge de l'overline : s'étire de 0 à 28px à l'entrée dans le viewport */
.overline::before {
  transform: scaleX(0);
  transition: transform var(--duree-apparition) var(--courbe);
}
.overline.est-visible::before,
.est-visible .overline::before,
.overline.sans-animation::before {
  transform: scaleX(1);
}

/* --- Parallax hero : uniquement la photo de fond, ≤ 40px, desktop seulement --- */
.hero__photo { transform: translate3d(0, 0, 0); }

/* --- Respect de prefers-reduced-motion : tout est visible, rien ne bouge ------ */
@media (prefers-reduced-motion: reduce) {
  .reveler,
  .reveler.est-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .overline::before { transform: scaleX(1); transition: none; }
  .hero__photo { transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Sans JavaScript : tout est visible ---------------------------------------- */
.sans-js .reveler { opacity: 1; transform: none; }
.sans-js .overline::before { transform: scaleX(1); }