#ppp-player-wrap{
    /* MODIF 1 : Masque visuel par défaut (géré par opacity/transform pour transition) */
     position: fixed; bottom: 50px; z-index: 99999;
  left: 50%; transform: translateX(-50%) translateY(8px);
  width: 100%; max-width: 1165px;
  align-items: center; padding: .6rem .9rem;
  background: #b57e51; 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;
}
.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:.75rem 1rem}
#ppp-btn{width:36px;height:36px;border-radius:999px;border:1px solid #333;background:#1f1f1f;display:grid;place-items:center;cursor:pointer}
#ppp-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ppp-time{min-width:84px;text-align:center;font-variant-tabular-nums:tabular-nums;color:#FFFFFF}
#ppp-progress{position:relative;height:4px;background:#2a2a2a}
#ppp-bar{position:absolute;left:0;top:0;bottom:0;width:0%;background:#9fdcff}
#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-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;
  gap: .4rem;
  width: 36px;
}
#ppp-vol-btn{
  width: 28px;
  height: 28px;
  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:#9fdcff; border-radius:50%; border:0; }
#ppp-volume{ -webkit-appearance:none; appearance:none; }
#ppp-volume::-moz-range-track{ height:6px; background:#3a3a3a; border-radius:6px; }
#ppp-volume::-moz-range-thumb{ width:12px; height:12px; background:#9fdcff; border-radius:50%; border:0; }

@media (max-width:480px){
  /* Cacher le slider sur petits écrans pour éviter chevauchement */
  #ppp-volume{ display:none }
}

/* Nouvelle stylisation SVG pour icône moderne */
#ppp-vol-btn svg.volume-icon { width:18px; height:18px; 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; }