/* Le contenu est toujours visible ; seuls les effets décoratifs sont animés. */
#etapes[data-steps-motion] .step-card {
  transition: opacity .25s ease, transform .32s cubic-bezier(.2,.7,.3,1), color .2s ease;
}
#etapes[data-steps-motion] .step-card[data-motion-state="pending"] { opacity: 1; transform: none; }
#etapes[data-steps-motion] .step-card h3,
#etapes[data-steps-motion] .step-card .step-num { transition: color .2s ease, transform .25s ease; }
#etapes[data-steps-motion] .step-card .step-visual {
  transition: opacity .25s ease, transform .32s cubic-bezier(.2,.7,.3,1);
}
#etapes[data-steps-motion] .step-card[data-motion-state="complete"]::before { transition: opacity .25s ease; }
#etapes[data-steps-motion] .step-card[data-motion-state="active"] .etape-pin { animation: etapePulse .225s ease-in-out 2; }
#etapes[data-steps-motion] .step-card[data-motion-state="active"] .etape-ripple { animation: etapeRipple .225s ease-out 2; }
#etapes[data-steps-motion] .step-card[data-motion-state="active"] .etape-orbit { animation: stepOrbit .45s linear both; }
#etapes[data-steps-motion] .step-card[data-motion-state="active"] .sms-send-btn { animation: stepSend .22s ease-in-out both; }
#etapes[data-steps-motion] .step-card--3[data-motion-state="active"] .step-visual > img { animation: stepResults .35s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  #etapes[data-steps-motion] .step-card,
  #etapes[data-steps-motion] .step-card .step-visual,
  #etapes[data-steps-motion] .step-card h3,
  #etapes[data-steps-motion] .step-card .step-num { transition: none; }
  #etapes[data-steps-motion] .step-card[data-motion-state="active"] .etape-pin,
  #etapes[data-steps-motion] .step-card[data-motion-state="active"] .etape-ripple,
  #etapes[data-steps-motion] .step-card[data-motion-state="active"] .etape-orbit,
  #etapes[data-steps-motion] .step-card[data-motion-state="active"] .sms-send-btn,
  #etapes[data-steps-motion] .step-card--3[data-motion-state="active"] .step-visual > img { animation: none; }
}

/* Neutralise aussi les masquages du module historique de révélation. */
#etapes .step-card, #etapes[data-steps-motion] .step-card[data-motion-state],
#etapes[data-steps-motion] .step-card .step-visual { opacity:1; transform:none; visibility:visible; }
#etapes[data-steps-motion] .step-card[data-motion-state="pending"] .step-visual { opacity:1; transform:none; }