@tailwind base;
@tailwind components;
@tailwind utilities;

/* Contrôles natifs (select, datetime-local, scrollbars…) rendus en sombre */
:root { color-scheme: dark; }

/* Scrollbar minimaliste */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* La croix native de WebKit ferait doublon avec notre bouton d'effacement */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Focus clavier visible partout.
   Le double `:focus-visible` porte la spécificité à (0,2,0) pour égaler les
   utilitaires `focus:outline-none` de Tailwind ; à spécificité égale, la règle
   déclarée en dernier (celle-ci) l'emporte. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
}

/* ─── Animations ──────────────────────────────────────────────────────────── */

@keyframes fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes toast-in { from { opacity: 0; transform: translateY(.5rem)  scale(.98) } to { opacity: 1; transform: none } }
@keyframes modal-in { from { opacity: 0; transform: translateY(.75rem) scale(.98) } to { opacity: 1; transform: none } }
@keyframes shimmer  { 100% { transform: translateX(100%) } }

.animate-fade-in  { animation: fade-in  .15s ease-out }
.animate-toast-in { animation: toast-in .18s ease-out }
.animate-modal-in { animation: modal-in .18s cubic-bezier(.16, 1, .3, 1) }

/* Squelette de chargement */
.skeleton { position: relative; overflow: hidden; background-color: rgb(31 41 55 / .6); }
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .05), transparent);
  animation: shimmer 1.6s infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
