/* -----------------------------------------------------
   🎨 Style global Host'Labs
   ----------------------------------------------------- */

/* Police et base */
html, body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Liens */
a {
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
}
a:hover {
  opacity: 0.85;
}

/* Boutons */
button {
  transition: all 0.2s ease;
}
button:focus {
  outline: none;
}

/* Images et médias */
img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  user-select: none;
}

/* Conteneurs */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  max-width: 1200px;
}

/* Cards et panels */
.card {
  @apply bg-white dark:bg-slate-900 rounded-2xl shadow-md p-6 border border-slate-200 dark:border-slate-800 transition;
}
.card:hover {
  @apply shadow-lg border-primary-300 dark:border-primary-700;
}

/* Sections */
section {
  position: relative;
  overflow: hidden;
}

/* Animations d'apparition douce */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header & Footer fixes */
header {
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
footer {
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Formulaires */
input, textarea, select {
  @apply rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-200 w-full px-4 py-3;
  transition: all 0.2s ease;
}
input:focus, textarea:focus, select:focus {
  @apply outline-none ring-2 ring-primary-500 border-primary-400 dark:ring-primary-600;
}

/* Checkbox et radio */
input[type="checkbox"], input[type="radio"] {
  accent-color: #22c55e; /* Vert primaire */
}

/* Boutons primaires */
.btn-primary {
  @apply bg-primary-600 text-white px-5 py-3 rounded-xl font-semibold hover:bg-primary-700 transition;
}

/* Boutons secondaires */
.btn-outline {
  @apply border border-primary-600 text-primary-600 hover:bg-primary-50 dark:hover:bg-slate-800 px-5 py-3 rounded-xl font-semibold transition;
}

/* Titre de section */
.section-title {
  @apply text-3xl md:text-4xl font-bold text-center mb-8 text-primary-600 dark:text-primary-400;
}

/* Footer */
footer a {
  @apply text-slate-500 dark:text-slate-400 hover:text-primary-500 dark:hover:text-primary-400;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(34, 197, 94, 0.4);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(34, 197, 94, 0.7);
}

/* Mode sombre spécifique */
.dark body {
  background-color: #0f172a;
  color: #e2e8f0;
}
.dark a {
  color: #4ade80;
}
.dark a:hover {
  color: #86efac;
}