/* =====================================================================
   pages/musique.css — page musique (musique.html)
   ---------------------------------------------------------------------
   Lecteur MP3 + visualiseur audio, esthétique "Windows Vista" rouge et
   blanc sur fond noir.

   Cette feuille est chargée APRÈS assets/css/styles.css et après
   Bootstrap dans le <head> de musique.html : c'est elle qui gagne en
   cas de conflit (fond de page, typographie). Ne pas changer cet ordre.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Page
   ------------------------------------------------------------------ */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 2rem;
  background: url("../../img/bg_music.png") center/contain no-repeat, #000;
  color: #ffffff;
  font-family: "Comic Neue", serif;
}


/* ---------------------------------------------------------------------
   2. Boîtier du lecteur
   ------------------------------------------------------------------ */

#mp3-player {
  max-width: 760px;
  margin: auto;
  padding: 1rem;
  border: 2px solid #ff0000;
  background: linear-gradient(to bottom, #ffffff, #ff0000);
  box-shadow: 0 4px 8px rgb(0, 0, 0);
}

#mp3-player h2 {
  margin-bottom: 1rem;
  text-align: center;
  font-family: "Comic Neue", serif;
  -webkit-text-stroke: 2px black; /* contour du titre */
}


/* ---------------------------------------------------------------------
   3. Playlist
   ------------------------------------------------------------------ */

#playlist {
  list-style: none;
  max-height: 150px;
  overflow-y: auto;
  padding: 0;
  margin-bottom: 1rem;
  color: white;
  /* Quatre ombres décalées = contour noir net autour du texte blanc,
     lisible quel que soit le dégradé derrière. */
  text-shadow:
    -2px 0 0 black,
     2px 0 0 black,
     0 2px 0 black,
     0 -2px 0 black;
}

#playlist li {
  padding: 0.4rem;
  cursor: pointer;
}

/* Survol et morceau en cours : inversion en noir sur blanc. */
#playlist li:hover,
#playlist .active {
  background: #000000;
  color: white;
}


/* ---------------------------------------------------------------------
   4. Commandes de lecture
   ------------------------------------------------------------------ */

#controls {
  margin-bottom: 1rem;
  text-align: center;
}

/* Surcharge volontaire des boutons Bootstrap : angles vifs, bord noir. */
#controls button {
  margin: 0 0.5rem;
  border: 4px solid #000000;
  border-radius: 0px;
  background: #ff0000;
  color: #ffffff;
}


/* ---------------------------------------------------------------------
   5. Visualiseur (canvas piloté par assets/js/mp3-player.js)
   ------------------------------------------------------------------ */

#visualizer {
  width: 100%;
  height: 400px;
  border: 1px solid #000000;
  background: #000;
}