/**
 * ============================================================================
 * ANIMATIONS.CSS — Transitions et micro-interactions
 * ============================================================================
 * Une seule famille de mouvement dans toute l'application : un glissement
 * horizontal discret + fondu, pour que chaque étape "glisse" comme demandé
 * dans le brief. Respecte prefers-reduced-motion.
 * ============================================================================
 */

.step-container {
  animation: step-enter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes step-enter {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.step-container.is-leaving {
  animation: step-leave 0.28s ease forwards;
}

@keyframes step-leave {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .step-container,
  .step-container.is-leaving {
    animation: none !important;
  }
  .choice-card,
  .btn-primary,
  .progress-fill {
    transition: none !important;
  }
}