/* ============================================================
   ANIMATIONS — reveal au scroll (IntersectionObserver + .in-view)
   Neutralisables pour la recette : body.no-anim
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left  { opacity: 0; transform: translateX(-32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right { opacity: 0; transform: translateX(32px);  transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-zoom  { opacity: 0; transform: scale(0.96);       transition: opacity 0.7s ease, transform 0.7s ease; }

.in-view.reveal,
.in-view.reveal-left,
.in-view.reveal-right,
.in-view.reveal-zoom {
  opacity: 1;
  transform: none;
}

/* Sous le grand format, les entrées latérales deviennent verticales : un translateX
   sur un bloc pleine largeur provoque un vrai défilement horizontal tant que
   l'élément n'est pas révélé. */
@media (max-width: 1240px) {
  .reveal-left, .reveal-right { transform: translateY(24px); }
}

/* Une carte de carrousel garde son fondu, mais perd son décalage vertical.
   `overflow-x: auto` sur la piste rend l'axe Y calculé à `auto` (règle CSS :
   dès qu'un axe n'est plus `visible`, l'autre passe de `visible` à `auto`), et
   la zone défilable d'un conteneur inclut la boîte TRANSFORMÉE de ses
   descendants : `translateY(24px)` ouvrait donc 24 px de défilement vertical.
   Les cartes sorties du cadre horizontal ne croisant jamais l'observateur, le
   décalage — et le débordement — restaient à demeure : la molette faisait
   glisser le carrousel de 24 px au lieu de faire défiler la page. */
.slider-track > .reveal,
.slider-track > .reveal-left,
.slider-track > .reveal-right,
.slider-track > .reveal-zoom { transform: none; }

/* Décalages en cascade */
.d-1 { transition-delay: 0.1s; }
.d-2 { transition-delay: 0.2s; }
.d-3 { transition-delay: 0.3s; }
.d-4 { transition-delay: 0.4s; }

/* Neutralisation (recette pixel-perfect + accessibilité) */
body.no-anim .reveal,
body.no-anim .reveal-left,
body.no-anim .reveal-right,
body.no-anim .reveal-zoom {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom { opacity: 1; transform: none; }
}