/* ============================================================
   NutriVRich — CSS personnalisé (complément Tailwind)
   ============================================================ */

/* Composants réutilisables */
.label {
  @apply block text-sm font-semibold text-gray-700 mb-1;
}

.input {
  @apply w-full px-4 py-3 rounded-xl border border-gray-200 bg-white
         text-gray-800 text-sm
         focus:outline-none focus:ring-2 focus:ring-brun/30 focus:border-brun
         transition-colors duration-200
         placeholder-gray-400;
}

.input-error {
  @apply border-red-400 ring-1 ring-red-300 focus:ring-red-300 focus:border-red-400;
}

.erreur {
  @apply text-red-500 text-xs mt-1 flex items-center gap-1;
}

.erreur::before {
  content: '⚠ ';
}

/* Animation apparition page */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

main, section {
  animation: fadeInUp 0.5s ease both;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #faf7f3; }
::-webkit-scrollbar-thumb { background: #8b6340; border-radius: 3px; }

/* Sélection de texte */
::selection { background: #f0d090; color: #3d2a1a; }