/* ============================================= */
/*  STYLE.CSS – Feuille de style personnalisée   */
/*  Projet : Site web Yokai Bot Discord           */
/* ============================================= */

/* -------------------------------------------------- */
/*  EFFETS HOVER SUR LES CARTES                       */
/* -------------------------------------------------- */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* -------------------------------------------------- */
/*  BADGE "Bientôt" EN COIN HAUT-DROITE               */
/* -------------------------------------------------- */
.badge-soon {
  @apply absolute top-0 right-0 px-4 py-1.5 bg-gradient-to-br from-sky-500 to-blue-600 text-white text-xs font-semibold rounded-bl-xl shadow-md;
}

/* -------------------------------------------------- */
/*  HEADER FIXE – PASSAGE EN MODE SOMBRE AU SCROLL   */
/* -------------------------------------------------- */

/* Classe ajoutée par JS quand on scroll > 50px */
html#header-dark-mode #main-header {
  /* Permet de cibler facilement le header en mode sombre */
}

/* Bouton principal "Ajouter à Discord" en mode sombre */
html#header-dark-mode #add-btn {
  @apply bg-white text-sky-600 hover:bg-sky-100 hover:text-sky-700 shadow-lg;
}

html#header-dark-mode #add-btn:hover {
  @apply shadow-xl ring-4 ring-sky-200/50;
}

/* Bouton "Dashboard" – adaptation en mode sombre */
#btn-dashboard {
  @apply border border-gray-300 rounded-lg px-5 py-2 hover:border-sky-500;
}

html#header-dark-mode #btn-dashboard {
  @apply border-gray-500 hover:border-white hover:text-white;
}

/* Menu mobile – fond sombre quand le header l’est */
html#header-dark-mode #mobile-menu {
  @apply bg-gray-900/95 text-white border-gray-700;
}

/* -------------------------------------------------- */
/*  AJUSTEMENTS ESTHÉTIQUES MINEURS                   */
/* -------------------------------------------------- */

/* Supprime tout espace blanc disgracieux entre header et hero */
header + div.h-24 {
  margin-top: -1px;
}

/* Effets de flou décoratifs dans le hero (pricing, etc.) */
.blur-bg-1 {
  @apply absolute top-20 right-10 w-72 h-72 bg-sky-200/30 rounded-full blur-3xl -z-10;
}

.blur-bg-2 {
  @apply absolute bottom-20 left-10 w-96 h-96 bg-blue-200/20 rounded-full blur-3xl -z-10;
}

/* Ombre renforcée sur le header en mode sombre (scroll) */
html#header-dark-mode #main-header {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}