/* ============================================================
   🌐 BASE - Scroll fluide & police globale
   ============================================================ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
}


/* ============================================================
   ✨ ANIMATIONS - Apparition au scroll (fade-in)
   Les éléments commencent invisibles et montent en apparaissant
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

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


/* ============================================================
   🧭 NAVBAR - Fond flouté au scroll
   Activé via JS quand l'utilisateur scrolle > 100px
   ============================================================ */
.nav-scroll {
  background: rgba(15, 15, 35, 0.95);
  backdrop-filter: blur(10px);
}


/* ============================================================
   🔗 BOUTONS RÉSEAUX SOCIAUX - Cartes avec hover
   Style des liens sociaux avec effet de survol lumineux
   ============================================================ */
.social-link {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.social-link:hover {
  transform: scale(1.05);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  background: rgba(0, 0, 0, 0.5);
}


/* ============================================================
   🎵 BOUTON PLAY MUSIC FLOTTANT (FAB)
   Bouton rond fixe en bas de page pour lancer la musique
   ============================================================ */
.player-fab {
  position: fixed;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 9999;
}

.fab-play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #0687f5;
  color: #ffffff;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.fab-plus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #0687f5;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  line-height: 24px;
  padding: 0;
}

.fab-play:hover,
.fab-plus:hover {
  filter: brightness(1.1);
}


/* ============================================================
   🖼️ AVATAR - Transition douce entre les images du carousel
   ============================================================ */
#avatar-image-auto {
  transition: opacity 0.5s ease, transform 0.5s ease;
}


/* ============================================================
   🛒 BOUTON SHOP KO-FI - Fixe en bas à droite
   Lien vers la boutique avec effet hover
   ============================================================ */
#kofi-shop-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background: #ff38b8;
  color: #fff;
  padding: 12px 20px;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 56, 184, 0.4);
  transition: all 0.3s;
}

#kofi-shop-btn:hover {
  background: #e02ea2;
  transform: translateY(-2px);
}


/* ============================================================
   🔧 CORRECTION - Masque le .fab-play hors de son contexte
   Réaffiche uniquement le bouton dans les sections centrées
   ============================================================ */
button.fab-play {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  display: none !important;
}

/* Réaffiche le bouton play dans la section hero centrée */
.flex.justify-center button.fab-play,
section button.fab-play {
  display: inline-block !important;
  position: static !important;
}


/* ============================================================
   🛠️ MENU OUTILS - Dropdown de navigation desktop
   Gère l'apparition/disparition avec délai de fermeture
   ============================================================ */
#menu-outils .outils-dropdown {
  transition-delay: 0ms;
}

#menu-outils:hover .outils-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

#menu-outils:not(:hover) .outils-dropdown {
  transition-delay: 1000ms;
}