/* ═══════════════════════════════════════════════════════════════════════
   APPYCALL V2 — Animations & micro-interactions
   Toutes les keyframes + classes utilitaires d'animation.
   Respecte prefers-reduced-motion via les durées du fichier tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════
   KEYFRAMES
   ═════════════════════════════════════════════════════════════ */

/* Fade */
@keyframes acv2-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes acv2-fade-out  { from { opacity: 1; } to { opacity: 0; } }

/* Slide + fade */
@keyframes acv2-slide-up   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes acv2-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes acv2-slide-in-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes acv2-slide-in-left  { from { transform: translateX(-100%); } to { transform: none; } }

/* Scale (modal, popover) */
@keyframes acv2-scale-in  { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes acv2-scale-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.97); } }

/* Pop spring (check, confirm) */
@keyframes acv2-pop       {
  0%   { transform: scale(.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* Shake (erreur validation) */
@keyframes acv2-shake {
  0%, 100% { transform: none; }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* Pulse (badge nouveau) */
@keyframes acv2-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}

/* Highlight row (refresh AJAX qui met à jour une ligne) */
@keyframes acv2-highlight {
  0%   { background: var(--acv2-bg-primary-soft); }
  100% { background: transparent; }
}

/* Check drawn (succès, enregistrement) */
@keyframes acv2-check-draw {
  0%   { stroke-dashoffset: 16; }
  100% { stroke-dashoffset: 0; }
}

/* Ring spin (spinner) */
@keyframes acv2-ring-spin { to { transform: rotate(360deg); } }

/* Progress bar indeterminate */
@keyframes acv2-progress-indeterminate {
  0%   { left: -40%; right: 100%; }
  60%  { left: 100%; right: -40%; }
  100% { left: 100%; right: -40%; }
}


/* ═════════════════════════════════════════════════════════════
   CLASSES UTILITAIRES D'ENTRÉE
   Ajoute une classe pour jouer une animation one-shot.
   ═════════════════════════════════════════════════════════════ */
.acv2 .acv2-anim-fade       { animation: acv2-fade-in   var(--acv2-duration-base) var(--acv2-ease-out) both; }
.acv2 .acv2-anim-slide-up   { animation: acv2-slide-up  var(--acv2-duration-base) var(--acv2-ease-out) both; }
.acv2 .acv2-anim-slide-down { animation: acv2-slide-down var(--acv2-duration-base) var(--acv2-ease-out) both; }
.acv2 .acv2-anim-scale      { animation: acv2-scale-in  var(--acv2-duration-base) var(--acv2-ease-out) both; }
.acv2 .acv2-anim-pop        { animation: acv2-pop       var(--acv2-duration-slow) var(--acv2-ease-spring) both; }
.acv2 .acv2-anim-shake      { animation: acv2-shake     350ms var(--acv2-ease-in-out); }
.acv2 .acv2-anim-pulse      { animation: acv2-pulse     1.5s var(--acv2-ease-out) infinite; }
.acv2 .acv2-anim-highlight  { animation: acv2-highlight 1.8s var(--acv2-ease-out) both; }


/* ═════════════════════════════════════════════════════════════
   STAGGER — enfants apparaissent en cascade (liste, tableau)
   Usage : parent porte .acv2-anim-stagger, enfants obtiennent un
   délai progressif via :nth-child (jusqu'à 12).
   ═════════════════════════════════════════════════════════════ */
.acv2 .acv2-anim-stagger > * {
  animation: acv2-slide-up var(--acv2-duration-base) var(--acv2-ease-out) both;
}
.acv2 .acv2-anim-stagger > *:nth-child(1)  { animation-delay: 20ms; }
.acv2 .acv2-anim-stagger > *:nth-child(2)  { animation-delay: 40ms; }
.acv2 .acv2-anim-stagger > *:nth-child(3)  { animation-delay: 60ms; }
.acv2 .acv2-anim-stagger > *:nth-child(4)  { animation-delay: 80ms; }
.acv2 .acv2-anim-stagger > *:nth-child(5)  { animation-delay: 100ms; }
.acv2 .acv2-anim-stagger > *:nth-child(6)  { animation-delay: 120ms; }
.acv2 .acv2-anim-stagger > *:nth-child(7)  { animation-delay: 140ms; }
.acv2 .acv2-anim-stagger > *:nth-child(8)  { animation-delay: 160ms; }
.acv2 .acv2-anim-stagger > *:nth-child(9)  { animation-delay: 180ms; }
.acv2 .acv2-anim-stagger > *:nth-child(10) { animation-delay: 200ms; }
.acv2 .acv2-anim-stagger > *:nth-child(11) { animation-delay: 220ms; }
.acv2 .acv2-anim-stagger > *:nth-child(n+12) { animation-delay: 240ms; }


/* ═════════════════════════════════════════════════════════════
   SPINNER
   ═════════════════════════════════════════════════════════════ */
.acv2 .acv2-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: acv2-ring-spin 700ms linear infinite;
  color: var(--acv2-primary-500);
  vertical-align: -3px;
}
.acv2 .acv2-spinner--sm { width: 12px; height: 12px; border-width: 1.5px; }
.acv2 .acv2-spinner--lg { width: 24px; height: 24px; border-width: 3px; }
.acv2 .acv2-spinner--xl { width: 36px; height: 36px; border-width: 3px; }


/* ═════════════════════════════════════════════════════════════
   PROGRESS BAR (déterminé + indéterminé)
   ═════════════════════════════════════════════════════════════ */
.acv2 .acv2-progress {
  position: relative;
  height: 6px; width: 100%;
  background: var(--acv2-surface-2);
  border-radius: var(--acv2-radius-full);
  overflow: hidden;
}
.acv2 .acv2-progress-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--acv2-primary-500);
  border-radius: inherit;
  transition: width var(--acv2-duration-base) var(--acv2-ease-out);
}
.acv2 .acv2-progress--indeterminate .acv2-progress-bar {
  animation: acv2-progress-indeterminate 1.4s var(--acv2-ease-in-out) infinite;
}
.acv2 .acv2-progress--success .acv2-progress-bar { background: var(--acv2-success-500); }
.acv2 .acv2-progress--warning .acv2-progress-bar { background: var(--acv2-warning-500); }
.acv2 .acv2-progress--danger  .acv2-progress-bar { background: var(--acv2-danger-500); }


/* ═════════════════════════════════════════════════════════════
   CHECKMARK ANIMÉ (enregistrement OK)
   Utilisation : <svg class="acv2-check-svg"><path .../></svg>
   ═════════════════════════════════════════════════════════════ */
.acv2 .acv2-check-svg {
  width: 20px; height: 20px;
  color: var(--acv2-success-500);
}
.acv2 .acv2-check-svg path {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 16;
  animation: acv2-check-draw 400ms var(--acv2-ease-out) forwards;
}


/* ═════════════════════════════════════════════════════════════
   SMOOTH SCROLL — activé uniquement si l'utilisateur le demande
   ═════════════════════════════════════════════════════════════ */
.acv2 html, .acv2 body { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .acv2 html, .acv2 body { scroll-behavior: auto; }
}

/* Scrollbar fin et discret (webkit) */
.acv2 ::-webkit-scrollbar { width: 10px; height: 10px; }
.acv2 ::-webkit-scrollbar-track { background: transparent; }
.acv2 ::-webkit-scrollbar-thumb {
  background: var(--acv2-border-strong);
  border-radius: var(--acv2-radius-full);
  border: 2px solid var(--acv2-surface-0);
}
.acv2 ::-webkit-scrollbar-thumb:hover { background: var(--acv2-neutral-400); }
.acv2 * { scrollbar-width: thin; scrollbar-color: var(--acv2-border-strong) transparent; }