/* ==========================================================================
   Styles complémentaires — Ambassadeurs YOMA
   (Tailwind CSS gère l'essentiel via les classes utilitaires dans app.js)
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
}

.font-heading {
  font-family: 'Poppins', sans-serif;
}

/* Animation d'entrée pour les notifications toast */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.animate-toast-in {
  animation: toast-in 0.25s ease-out;
}

/* Scrollbar plus discrète */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c4b5fd, #fb923c);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #8b5cf6;
}

/* Focus visible plus net pour l'accessibilité clavier */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}

/* Petite touche pour les champs désactivés */
input:disabled {
  cursor: not-allowed;
}

/* Bandeau dégradé multicolore (violet, orange, jaune, rouge, vert) */
.yoma-rainbow-bar {
  height: 4px;
  background: linear-gradient(90deg, #7c3aed, #f97316, #eab308, #dc2626, #16a34a);
}

.yoma-rainbow-text {
  background: linear-gradient(90deg, #7c3aed, #f97316, #eab308, #dc2626, #16a34a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}