/* —— Toasts : entrée descendante depuis le haut du contenu —— */
:root{
  --toast-enter-ms: 380ms;
  --toast-leave-ms: 260ms;
  --toast-shift: 10px;          /* les toasts sont centrés en haut : ils descendent */
  --toast-timeout: 5s;          /* surchargé par toast.js depuis data-toast-timeout */
}

/* Le conteneur centre les toasts avec -translate-x-1/2 : les animations doivent
   conserver ce décalage horizontal, sinon la carte saute à droite pendant l'animation. */
@keyframes toast-soft-in  {
  from { opacity: 0; transform: translate(-50%, calc(var(--toast-shift) * -1)); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toast-soft-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, calc(var(--toast-shift) * -1)); }
}

/* Les cartes sont empilées par le conteneur (déjà centré) : elles ne portent pas
   le -50% elles-mêmes et s'animent donc sans décalage horizontal. */
@keyframes toast-item-in  {
  from { opacity: 0; transform: translateY(calc(var(--toast-shift) * -1)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-item-out {
  to { opacity: 0; transform: translateY(calc(var(--toast-shift) * -1)); }
}

.animate-toast-enter { animation: toast-item-in  var(--toast-enter-ms) cubic-bezier(.2,.7,.2,1) !important; }
.animate-toast-leave { animation: toast-item-out var(--toast-leave-ms) ease-in forwards !important; }
.animate-toast-shake { animation: none !important; }

/* La barre de progression est animée par toast.js (Web Animations API), pas ici : ce fichier
   est pré-caché par le service worker et une version périmée la laissait figée. Le JS gère
   aussi la pause au survol, en même temps que le minuteur de fermeture. */

@media (prefers-reduced-motion: reduce){
  /* Seules les animations décoratives sont neutralisées. La barre de progression porte une
     information — le temps restant — et continue donc de décroître. */
  .animate-toast-enter,
  .animate-toast-leave { animation: none !important; }
}

/* état initial */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* visible */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* variantes */
.animate-left {
  transform: translateX(-60px) scale(0.96);
}

.animate-right {
  transform: translateX(60px) scale(0.96);
}