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

/* === Thème clair/sombre === */
html {
  scroll-behavior : smooth;
  }

body {
  @apply bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-100;
  }

/* === Composants génériques === */
.btn {
  @apply inline-block px-5 py-2 rounded-lg font-semibold transition-colors duration-300;
  }

.btn-primary {
  @apply bg-amber-600 text-white hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600;
  }

.card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow p-6;
  }

/* === Animation scroll (fade in) === */
[data-animate="fade-in"] {
  opacity    : 0;
  transform  : translateY(20px);
  transition : opacity 0.6s ease-out, transform 0.6s ease-out;
  }

[data-animate="fade-in"].visible {
  opacity   : 1;
  transform : translateY(0);
  }

/* === Compteur animé === */
.counter {
  @apply text-4xl font-bold text-amber-600 dark:text-amber-400;
  }

/* === Navigation mobile === */
.mobile-menu {
  @apply hidden fixed top-0 left-0 w-full h-full bg-white dark:bg-gray-900 z-50;
  }

.mobile-menu.active {
  @apply block;
  }

/* === Header et Footer === */
.header,
.footer {
  @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 py-4;
  }

/* Animation fade-in de base */
.fade-in {
  opacity    : 0;
  transform  : translateY(20px);
  transition : opacity 0.8s ease, transform 0.8s ease;
  }

.fade-in.visible {
  opacity   : 1;
  transform : translateY(0);
  }

/* Animation pour les éléments scroll */
.animate-on-scroll {
  opacity    : 0;
  transform  : translateY(40px);
  transition : opacity 0.8s ease, transform 0.8s ease;
  }

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

/* Bouton global de déplacement Haut de Page */
.back-to-top-btn {
  position         : fixed;
  bottom           : 30px;
  right            : 30px;
  z-index          : 1000;
  width            : 48px;
  height           : 48px;
  background-color : #d97706;
  color            : #090909 !important;
  border           : none;
  border-radius    : 50%;
  box-shadow       : 0 4px 16px rgba(0, 0, 0, 0.15);
  display          : none;
  align-items      : center;
  justify-content  : center;
  font-size        : 2rem;
  cursor           : pointer;
  transition       : background 0.2s, transform 0.2s, box-shadow 0.2s;
  }

.back-to-top-btn:hover {
  background-color : #b45309;
  transform        : translateY(-2px) scale(1.08);
  box-shadow       : 0 8px 24px rgba(0, 0, 0, 0.20);
  }

.back-to-top-btn.visible {
  display : flex;
  }