/* ============================================
   ANIMATIONS.CSS — Transitions & entrées au scroll
   Principe : fade-in + légère montée (20px)
   Durée courte, easing naturel, discret
   ============================================ */

/* ---- Respect des préférences utilisateur ---- */
@media (prefers-reduced-motion: reduce) {
    [data-anim],
    [data-anim-group] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---- État initial : invisible & légèrement décalé ---- */
[data-anim],
[data-anim-group] > * {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.55s ease-out,
        transform 0.55s ease-out;
}

/* ---- État visible : déclenché par JS ---- */
[data-anim].is-visible,
[data-anim-group].is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Délais de cascade pour les groupes de cartes ---- */
[data-anim-group].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-anim-group].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
[data-anim-group].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-anim-group].is-visible > *:nth-child(4) { transition-delay: 0.24s; }
[data-anim-group].is-visible > *:nth-child(5) { transition-delay: 0.32s; }
[data-anim-group].is-visible > *:nth-child(6) { transition-delay: 0.40s; }
[data-anim-group].is-visible > *:nth-child(7) { transition-delay: 0.48s; }
[data-anim-group].is-visible > *:nth-child(8) { transition-delay: 0.56s; }
[data-anim-group].is-visible > *:nth-child(9) { transition-delay: 0.64s; }

/* ---- Animation d'entrée du hero (au chargement) ---- */
.hero__surtitre {
    opacity: 0;
    transform: translateY(12px);
    animation: heroFadeIn 0.6s ease-out 0.1s forwards;
}
.hero__titre {
    opacity: 0;
    transform: translateY(12px);
    animation: heroFadeIn 0.6s ease-out 0.25s forwards;
}
.hero__texte {
    opacity: 0;
    transform: translateY(12px);
    animation: heroFadeIn 0.6s ease-out 0.4s forwards;
}
.hero__actions {
    opacity: 0;
    transform: translateY(12px);
    animation: heroFadeIn 0.6s ease-out 0.55s forwards;
}

@keyframes heroFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Pages expertise : hero ---- */
.hero-article__icone {
    opacity: 0;
    transform: translateY(10px);
    animation: heroFadeIn 0.5s ease-out 0.1s forwards;
}
.hero-article__titre {
    opacity: 0;
    transform: translateY(12px);
    animation: heroFadeIn 0.6s ease-out 0.25s forwards;
}