/* 🟢 Bouton Hover Vert */
.btn-hover-green {
  background-color: #4f46e5; /* Indigo (par défaut) */
  color: white;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-hover-green:hover {
  background-color: #16a34a; /* Green-600 */
  transform: scale(1.05);
}

/* 🔴 Bouton Hover Rouge */
.btn-hover-red {
  background-color: #4f46e5;
  color: white;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-hover-red:hover {
  background-color: #dc2626; /* Red-600 */
  transform: scale(1.05);
}

/* 🔵 Bouton Hover Bleu */
.btn-hover-blue {
  background-color: #4f46e5;
  color: white;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-hover-blue:hover {
  background-color: #2563eb; /* Blue-600 */
  transform: scale(1.05);
}

/* 🟡 Bouton Hover Jaune */
.btn-hover-yellow {
  background-color: #4f46e5;
  color: white;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-hover-yellow:hover {
  background-color: #ca8a04; /* Yellow-600 */
  transform: scale(1.05);
}

/* Fond d'écran global */
body {
  background-image: url('../images/background.jpg'); /* chemin depuis style.css */
  background-size: cover;       /* l'image couvre tout l'écran */
  background-position: center;  /* centrée */
  background-repeat: no-repeat; /* pas de répétition */
  background-attachment: fixed; /* reste fixe lors du scroll */
}

#accueil::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* noir transparent */
  z-index: 0;
}
#accueil > * {
  position: relative;
  z-index: 1; /* texte au-dessus de l'overlay */
}

/* Animation pulsation Premium */
@keyframes pulse-premium {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 15px 5px rgba(250, 204, 21, 0.5);
  }
}

.badge-premium {
  animation: pulse-premium 2s infinite;
}

/* Animation pulsation Basic */
@keyframes pulse-basic {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 15px 5px rgba(34, 197, 94, 0.5);
  }
}

.badge-basic {
  animation: pulse-basic 2s infinite;
}

/* ✅ Responsive ajustements mobiles */
@media (max-width: 640px) {
  h1 {
    font-size: 2rem !important;
    line-height: 2.5rem;
  }
  h2 {
    font-size: 1.5rem !important;
    line-height: 2rem;
  }
  p, li {
    font-size: 1rem !important;
    line-height: 1.5rem;
  }
  nav ul li a {
    padding: 0.5rem 0;
  }
  section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}