@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #121212;
  color: #ffffff;
}

.hero-section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../bannière professionnelle 1.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  padding: 150px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 120px 20px;
  }
}

.album-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Nouveau style pour le conteneur du lecteur audio */
.audio-player-container {
  background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  border: 1px solid #333;
  margin: 15px 0;
  overflow: hidden;
}

/* Style pour le lecteur audio lui-même */
.audio-player {
  width: 100%;
  border-radius: 8px;
  background: transparent;
}

/* Suppression du cadre gris foncé par défaut */
audio {
  outline: none;
}

audio::-webkit-media-controls-enclosure {
  background-color: transparent;
  border-radius: 8px;
}

audio::-webkit-media-controls-panel {
  background-color: rgba(30, 30, 30, 0.7);
  backdrop-filter: blur(10px);
}

audio::-webkit-media-controls-play-button {
  background-color: #1DB954;
  border-radius: 50%;
}

audio::-webkit-media-controls-play-button:hover {
  background-color: #1ed760;
}

audio::-webkit-media-controls-timeline {
  background-color: #333;
  border-radius: 25px;
  margin: 0 15px;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}

audio::-webkit-media-controls-volume-slider {
  background-color: #333;
  border-radius: 25px;
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #1DB954;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.active-nav::after {
  width: 100%;
}


/* Style pour les boîtes de pistes dans les pages d'album */

/* Change la couleur de fond de l'encadré */
.space-y-4 > div.bg-gray-800 {
  background-color: #1A202C; /* Exemple: un gris plus foncé (gray-900). Choisissez la couleur que vous voulez. */
  /* Vous pouvez utiliser n'importe quelle couleur: #2D3748 (gris-700), #4A5568 (gris-600), #000000 (noir), etc. */
}

/* Adapte la couleur de fond au survol (si vous changez celle du dessus) */
.space-y-4 > div.bg-gray-800:hover {
   background-color: #2D3748; /* Exemple: un gris légèrement plus clair (gray-700) pour le survol. Adaptez selon votre choix. */
}


/* Met TOUT le texte à l'intérieur de l'encadré en blanc */
.space-y-4 > div.bg-gray-800, /* Définit la couleur par défaut pour les éléments héritant */
.space-y-4 > div.bg-gray-800 h4, /* Cible spécifiquement le titre (h4) */
.space-y-4 > div.bg-gray-800 p,  /* Cible spécifiquement la durée (p) */
.space-y-4 > div.bg-gray-800 div.text-gray-400 /* Cible spécifiquement le numéro (div avec text-gray-400) */
 {
    color: #FFFFFF; /* Blanc */
}