/* ============================================================
   ANIMATIONS AU SCROLL — SEI
   Déclenchées via IntersectionObserver (main.js)
   Classes ajoutées dynamiquement, pas dans le HTML
============================================================ */

.anim-fade,
.anim-slide-left,
.anim-slide-right {
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.anim-fade        { transform: translateY(24px); }
.anim-slide-left  { transform: translateX(-48px); }
.anim-slide-right { transform: translateX(48px); }

.anim-fade.is-visible,
.anim-slide-left.is-visible,
.anim-slide-right.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Stagger : cards formations ─────────────────────────────── */
.cards-row .training-card:nth-child(1) { transition-delay:   0ms; }
.cards-row .training-card:nth-child(2) { transition-delay:  90ms; }
.cards-row .training-card:nth-child(3) { transition-delay: 180ms; }
.cards-row .training-card:nth-child(4) { transition-delay: 270ms; }

/* ── Stagger : Notre méthode cards ─────────────────────────── */
.method-cards .method-card:nth-child(1) { transition-delay:   0ms; }
.method-cards .method-card:nth-child(2) { transition-delay:  90ms; }
.method-cards .method-card:nth-child(3) { transition-delay: 180ms; }

/* ── Stagger : FAQ items ────────────────────────────────────── */
.faq-right .faq-item:nth-child(1)  { transition-delay:   0ms; }
.faq-right .faq-item:nth-child(2)  { transition-delay:  60ms; }
.faq-right .faq-item:nth-child(3)  { transition-delay: 120ms; }
.faq-right .faq-item:nth-child(4)  { transition-delay: 180ms; }
.faq-right .faq-item:nth-child(5)  { transition-delay: 240ms; }
.faq-right .faq-item:nth-child(6)  { transition-delay: 300ms; }
.faq-right .faq-item:nth-child(7)  { transition-delay: 360ms; }
.faq-right .faq-item:nth-child(8)  { transition-delay: 420ms; }
.faq-right .faq-item:nth-child(9)  { transition-delay: 480ms; }
.faq-right .faq-item:nth-child(10) { transition-delay: 540ms; }

/* ── Mobile : slide remplacé par fade (moins agressif) ──────── */
@media (max-width: 768px) {
  .anim-slide-left,
  .anim-slide-right {
    transform: translateY(24px);
  }
}

/* ── Accessibilité : respecter les préférences système ──────── */
@media (prefers-reduced-motion: reduce) {
  .anim-fade,
  .anim-slide-left,
  .anim-slide-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .faq-answer {
    transition: none;
  }
}