/* Conteneur principal */
.audio-player {
  background-color: rgb(255 255 255 / 80%);    /* fond blanc */
  padding: 15px;
  max-width: 400px;
  margin: 20px auto;
  border: 0px solid #000;        /* filet noir */
  box-shadow: none;
  font-family: Arial, sans-serif;
  text-align: center;
  box-shadow: 10px 10px 77px 1px rgba(240,240,240,0.75);
-webkit-box-shadow: 10px 10px 77px 1px rgba(240,240,240,0.75);
-moz-box-shadow: 10px 10px 77px 1px rgba(240,240,240,0.75);
border-radius: 20px;

}

/* Zone boutons */
.audio-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* Boutons ronds */
.control-btn {
  font-size: 18px;
  background-color: #ffffff;
  border: 1px solid #000;        /* filet noir */
  border-radius: 50%;            /* boutons ronds conservés */
  width: 42px;
  height: 42px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s, transform 0.1s;
}

.control-btn:hover {
  background-color: #f2f2f2;     /* gris très léger */
}

.control-btn:active {
  transform: scale(0.95);
}

/* Bouton Loop ACTIF (seul élément orange) */
.control-btn.loop.active {
  color: #ff8800;
  border-color: #ff8800;
}

/* Playlist */
#audio-playlist {
  list-style: none;
  padding: 0;
  margin: 12px auto 0 auto;
  max-width: 300px;
   background-color: rgb(255 255 255 / 20%);
  border: 0px solid #000;        /* filet noir */
  text-align:left;
}

/* Pistes */
#audio-playlist li {
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 0px solid #000;
  transition: background 0.2s;
  color: #000;
}

#audio-playlist li:last-child {
  border-bottom: none;
}

/* Hover piste */
#audio-playlist li:hover {
  background-color: #f2f2f2;
}

/* Piste active (orange uniquement ici aussi) */
#audio-playlist li.active {
  background-color: #ffe0b2;     /* orange clair */
  font-weight: bold;
}