/* =============================================================================
   Tulipe — Animations (Axe 3, 2026-09-01)
   Keyframes globales + classes utilitaires `.anim-*` scopées sous html.ds-on.
   Note : @keyframes sont globales par nature ; une keyframe `fadeIn` existe
   déjà dans style.css (chargée après → c'est elle qui gagne, rendu identique).
   ============================================================================= */

@keyframes dsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dsSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dsShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

@keyframes dsPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes dsCheckmark {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}

/* ── Classes utilitaires (scopées : inertes tant que le flag est OFF) ───── */
html.ds-on .anim-fade-in  { animation: dsFadeIn 200ms ease-out both; }
html.ds-on .anim-slide-up { animation: dsSlideUp 200ms ease-out both; }
html.ds-on .anim-shake    { animation: dsShake 300ms ease-out both; }
html.ds-on .tp-skeleton   { animation: dsPulse 1.2s ease-in-out infinite; }

/* Coche de succès : <svg class="anim-checkmark"><path .../></svg> */
html.ds-on .anim-checkmark path {
  stroke-dasharray: 24;
  animation: dsCheckmark 400ms ease-out 100ms both;
}

/* Accessibilité : respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html.ds-on .anim-fade-in,
  html.ds-on .anim-slide-up,
  html.ds-on .anim-shake,
  html.ds-on .tp-skeleton,
  html.ds-on .anim-checkmark path {
    animation: none;
  }
}