#ppp-player-wrap{
    /* MODIF 1 : Masque visuel par défaut (géré par opacity/transform pour transition) */
     position: fixed; bottom: 30px; z-index: 99999;
  left: 50%; transform: translateX(-50%) translateY(8px);
  width: 100%; max-width: 1165px;
  align-items: center; padding: .4rem .7rem;
  background: rgba(191, 130, 69, 0.9); color: #fff; box-shadow: 0 -6px 18px rgba(0,0,0,.25);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  border-radius: 20px;
  opacity: 0; pointer-events: none;
  transition: transform .28s ease, opacity .2s ease;
}
/* Image du lecteur (pochette d'album) */
#ppp-cover{
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 6px;
  object-fit: cover;
  background: #2a2a2a;
  flex-shrink: 0;
  margin-right: 8px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  image-rendering: -webkit-optimize-contrast;
}
.ppp-visible#ppp-player-wrap,
#ppp-player-wrap.ppp-visible {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
#ppp-inner{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem}
#ppp-btn{width:32px;height:32px;border-radius:999px;border:1px solid #333;background:#1f1f1f;display:grid;place-items:center;cursor:pointer;padding:0;line-height:1;font-size:16px}
#ppp-rewind, #ppp-forward{width:32px;height:32px;border-radius:999px;border:1px solid #333;background:#1f1f1f;display:grid;place-items:center;cursor:pointer;padding:0;line-height:1;font-size:16px}
#ppp-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
#ppp-time{min-width:84px;text-align:center;font-variant-tabular-nums:tabular-nums;color:#FFFFFF}
#ppp-progress{position:relative;height:3px;background:#2a2a2a}
#ppp-bar{position:absolute;left:0;top:0;bottom:0;width:0%;background:#ffffff}
#ppp-seek{position:absolute;left:0;right:0;top:-8px;bottom:-8px;cursor:pointer}
#ppp-player-wrap button, #ppp-player-wrap a{color:inherit}
#ppp-close{position:absolute;top:8px;right:8px;width:20px;height:20px;border:0;background:transparent;font-size:14px;cursor:pointer;padding:0;line-height:1;opacity:0.8;transition:opacity .2s ease}
#ppp-close:hover{opacity:1}
.ppp-active-link{outline:2px solid #9fdcff;outline-offset:2px;border-radius:4px}
/* body{padding-bottom:68px} <-- RETIRÉ, géré par JS */
@media (max-width:768px){ #ppp-time{display:none} }
/* Volume controls */
/* Volume controls — slider vertical au-dessus de l'icône */
#ppp-vol{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 32px;
  margin-right: 30px;
}
#ppp-vol-btn{
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3; /* au-dessus du slider si superposition */
}
/* Le slider est positionné absolument au-dessus du bouton et tourné
   pour apparaître vertical (rotation -90deg). Il est centré horizontalement.
   Par défaut il est masqué ; il s'affiche quand #ppp-vol a la classe .ppp-open */
#ppp-volume{
  position: absolute;
  bottom: calc(100% + 30px);
  left: 50%;
  transform: translateX(-50%) rotate(-90deg) scaleX(0.8);
  transform-origin: center;
  width: 90px; /* longueur visuelle du slider */
  height: 28px; /* épaisseur du slider avant rotation */
  background: transparent;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
#ppp-vol.ppp-open #ppp-volume{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) rotate(-90deg) scaleX(1);
}

/* Stylisation de la piste et du thumb pour rendre la barre visible verticalement */
#ppp-volume::-webkit-slider-runnable-track{ height:6px; background:#3a3a3a; border-radius:6px; }
#ppp-volume::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; margin-top:-3px; background:#ca8846;; border-radius:50%; border:0; }
#ppp-volume{ -webkit-appearance:none; appearance:none; -moz-appearance:none; }
#ppp-volume::-moz-range-track{ height:6px; background:#3a3a3a; border-radius:6px; }
#ppp-volume::-moz-range-thumb{ width:12px; height:12px; background:#ca8846; border-radius:50%; border:0; cursor:pointer; }

@media (max-width:480px){
  /* Cacher le slider et le bouton de volume sur petits écrans */
  #ppp-vol{ display:none !important }
  #ppp-volume{ display:none }
}

/* Nouvelle stylisation SVG pour icône moderne */
#ppp-vol-btn svg.volume-icon { width:40px; height:40px; display:block; }
#ppp-vol-btn svg.volume-icon { transition: transform .12s ease, opacity .12s ease; }
#ppp-vol-btn:hover svg.volume-icon { transform: scale(1.06); }
#ppp-vol-btn svg.volume-icon circle { stroke-width:1.6; }

/* Toggle Mini Mode Button */
#ppp-toggle-mini{
  position: absolute;
  top: 8px;
  right: 30px;
  width: 12px;
  height: 20px;
  border: 0;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.8;
  transition: opacity .2s ease;
  color: #fff;
}
#ppp-toggle-mini:hover{
  opacity: 1;
}

/* Mini Mode Styles */
#ppp-player-wrap.ppp-mini{
  max-width: auto;
  width: auto;
}

#ppp-player-wrap.ppp-mini #ppp-inner{
  padding: .5rem .5rem;
  gap: .5rem;
}

#ppp-player-wrap.ppp-mini #ppp-title,
#ppp-player-wrap.ppp-mini #ppp-time,
#ppp-player-wrap.ppp-mini #ppp-progress,
#ppp-player-wrap.ppp-mini #ppp-vol{
  display: none;
}

#ppp-player-wrap.ppp-mini{
  width: auto;
  left: auto;
  right: 20px;
  transform: translateY(8px);
}

#ppp-player-wrap.ppp-mini.ppp-visible{
  transform: translateY(0);
}

#ppp-player-wrap.ppp-mini #ppp-toggle-mini,
#ppp-player-wrap.ppp-mini #ppp-close{
  top: 0px;
}

.my-play-button svg,
.my-play-button svg *{
  pointer-events: none;
}