/* =========================
   Variables
========================= */
:root{
  --pv-bg: rgb(8, 232, 248);
  --pv-fg: #000000;
  --pv-accent: #04919b;   /* accent (tu as choisi noir) */
  --pv-accent-2: #22d3ee; /* cyan */
  --pv-muted: rgba(255,255,255,.65);
  --pv-ring: rgba(96, 238, 248, 0.35);
  --pv-height: 68px;
  --pv-radius: 16px;
}

/* =========================
   Icônes / Boutons player
========================= */
.playlist-play,
.playlist-pause,
.suivante,
.precedente { width: 30px; height: auto; }

.btn-player{
  color:#fff;
  background-color:#15D1EC;
  border-color:#15D1EC;
}
.btn-player:hover{
  color:#fff;
  background-color:#ffffff;
  border-color:#15D1EC;
}

/* =========================
   Onglets (héritage Bootstrap)
========================= */
.nav-tabs > li > a{
  margin-right:2px;
  line-height:1.42857143;
  border:1px solid transparent;
  border-radius:4px 4px 0 0;
}
.nav-tabs > li.active > a{
  color:#ffffff!important;
  background-color:#15D1EC!important;
}

/* =========================
   Playlist Panel toggle
========================= */
#pvPlaylistPanel { display:none; }
.pv-audio.is-open #pvPlaylistPanel { display:block; }

/* =========================
   Scrolling playlist
========================= */
#pvPlaylist{ overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.pl-scroll{ overflow-y:auto !important; }

/* Verrouille aussi les autres conteneurs pour éviter tout scroll horizontal */
.pv-audio__playlist,
.pv-audio__list { overflow-x:hidden !important; }
.pv-audio__t {
  color: #000000;
}

/* =========================
   List-group (état actif Bootstrap)
========================= */
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover{
  z-index:2;
  color:#fff;
  background-color:#15D1EC;
  border-color:#15D1EC;
}

/* Couleur par défaut du titre (sera surclassé au hover) */
span.track-title{ color:#000; }

/* =========================
   Curseur + overlays
========================= */
/* main “hand” partout sur les items */
.list-group-item,
.list-group-item.active,
.list-group-item *{
  cursor:pointer !important;
}

/* si un overlay capte la souris, on l’ignore */
#pvPlaylist .list-group-item .content-wrapper-link,
#pvPlaylist .list-group-item [data-overlay],
#pvPlaylist .list-group-item [data-overlay="true"]{
  pointer-events:none !important;
}

/* =========================
   Effets hover (FLAT, sans déplacement)
========================= */
#pvPlaylist .list-group-item{
  position:relative;
  transition:background-color .25s ease, box-shadow .25s ease, color .2s ease;
}

/* hover visuel uniquement : INSET, ne modifie pas la boîte */
@media (hover:hover){
  #pvPlaylist .list-group-item:hover{
    background-color:transparent !important;
    box-shadow: inset 0 0 0 999px rgba(167,139,250,.10); /* voile léger */
  }
  #pvPlaylist .list-group-item.active:hover{
    /* garde le look “actif” mais en un peu plus lumineux */
    box-shadow: inset 0 0 0 999px rgba(21,209,236,.18) !important;
    color:#fff !important;
    border-color:transparent !important;
  }

  /* filet dégradé à gauche (absolu, n'affecte pas la largeur) */
  #pvPlaylist .list-group-item::before{
    content:"";
    position:absolute; left:0; top:8px; bottom:8px;
    width:4px; border-radius:4px;
    background: transparent; transition: background .25s ease;
    pointer-events:none;
  }
  #pvPlaylist .list-group-item:hover::before{
    background: linear-gradient(180deg, var(--pv-accent), var(--pv-accent-2));
  }

  /* titre + badge au hover */
  #pvPlaylist .list-group-item:hover .track-title{
    color:var(--pv-accent) !important;
    font-weight:600;
  }
  #pvPlaylist .list-group-item:hover .badge{
    background-color:var(--pv-accent-2) !important;
    color:#000 !important;
  }
}

/* =========================
   Barre audio (player principal)
========================= */
.pv-audio{
  color:var(--pv-fg);
  background:linear-gradient(180deg, rgba(96, 159, 164, 0.85), var(--pv-bg));
  border-radius:0;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  backdrop-filter:saturate(1.1) blur(6px);
  margin:0 auto;
  width:100%;
  max-width:none;
  position:relative;
  z-index:10;
}
.pv-audio__inner{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; min-height:var(--pv-height);
  width:100%; max-width:1170px; margin:0 auto;
}
.pv-btn{
  display:inline-grid; place-items:center;
  height:42px; min-width:42px; padding:0 10px;
  border-radius:12px; color:var(--pv-fg);
  background:transparent; border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
}
.pv-btn:hover{ background:rgba(255,255,255,.06); }
.pv-btn:focus-visible{ outline:3px solid var(--pv-ring); }
.pv-btn--ghost{ border:none; }
.pv-btn--primary{
  background:linear-gradient(90deg,var(--pv-accent),var(--pv-accent-2));
  border:none;
}
.pv-icon-pause{ display:none; }
.is-playing .pv-icon-play{ display:none; }
.is-playing .pv-icon-pause{ display:block; }

.pv-audio__controls{ display:flex; gap:8px; }
.pv-audio__meta{ flex:1 1 auto; min-width:0; display:grid; gap:6px; }
.pv-audio__titlewrap{ overflow:hidden; }
.pv-audio__title{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-weight:600; letter-spacing:.2px;
}

/* Barre de progression */
.pv-audio__bar{
  position:relative; height:8px; border-radius:6px;
  background:rgba(255,255,255,.07); cursor:pointer;
}
.pv-audio__bar-bg{
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.pv-audio__bar-fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg,var(--pv-accent),var(--pv-accent-2));
  border-radius:inherit;
}

/* Volume */
.pv-audio__volume{ display:flex; align-items:center; gap:8px; min-width:130px; }
.pv-audio__volume input{ width:85px; }
/* ===== Volume slider ===== */
#pvVolume{
  /* tes couleurs ici */
  --vol-bg:   #e5e7eb;   /* piste (gris clair) */
  --vol-fill: #15D1EC;   /* partie remplie + pouce */
  --vol-h:    6px;       /* hauteur de la piste */
  --thumb:    14px;      /* taille du pouce */

  width: 140px; /* ajuste si besoin */
  background: transparent;
  border: 0;
  margin: 0;
}

/* Astuce moderne (Chrome/Edge/Firefox récents) */
#pvVolume { accent-color: var(--vol-fill); }

/* ===== WebKit (Chrome, Edge, Safari) ===== */
#pvVolume{appearance:none;}
#pvVolume::-webkit-slider-runnable-track{
  height: var(--vol-h);
  background: var(--vol-bg);
  border-radius: 999px;
}
#pvVolume::-webkit-slider-thumb{
  -webkit-appearance:none;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: var(--vol-fill);
  border: 0;
  margin-top: calc((var(--vol-h) - var(--thumb)) / 2); /* centre le pouce */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vol-fill) 25%, transparent);
}

/* ===== Firefox ===== */
#pvVolume{ appearance:none; }
#pvVolume::-moz-range-track{
  height: var(--vol-h);
  background: var(--vol-bg);
  border-radius: 999px;
}
#pvVolume::-moz-range-progress{
  height: var(--vol-h);
  background: var(--vol-fill);   /* ← partie “remplie” en couleur */
  border-radius: 999px 0 0 999px;
}
#pvVolume::-moz-range-thumb{
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: var(--vol-fill);
  border: 0;
}

/* ===== Ancien Edge/IE (optionnel) ===== */
#pvVolume::-ms-track{
  height: var(--vol-h);
  background: transparent;
  border-color: transparent;
  color: transparent;
}
#pvVolume::-ms-fill-lower{ background: var(--vol-fill); border-radius: 999px; }
#pvVolume::-ms-fill-upper{ background: var(--vol-bg);   border-radius: 999px; }
#pvVolume::-ms-thumb{
  width: var(--thumb); height: var(--thumb);
  background: var(--vol-fill); border: 0; border-radius: 50%;
}

/* Couleur de la boule (thumb) : noir */
#pvVolume::-webkit-slider-thumb{
  -webkit-appearance:none;
  background:#000;            /* ← noir */
  width:18px; height:18px;    /* garde ta taille */
  border-radius:50%;
  border:0;
  margin-top:-4px;            /* ajuste si besoin pour centrer verticalement */
  box-shadow:0 0 0 3px rgba(0,0,0,.1); /* halo discret (optionnel) */
}
#pvVolume::-moz-range-thumb{
  background:#000;            /* ← noir */
  width:18px; height:18px;
  border-radius:50%;
  border:0;
}
#pvVolume::-ms-thumb{
  background:#000;
  width:18px; height:18px;
  border-radius:50%;
  border:0;
}

/* Accessibilité: anneau de focus visible quand on tabule */
#pvVolume:focus-visible::-webkit-slider-thumb{ outline:3px solid rgba(21,209,236,.6); outline-offset:2px; }
#pvVolume:focus-visible::-moz-range-thumb{ outline:3px solid rgba(21,209,236,.6); outline-offset:2px; }


/* Playlist (flyout) */
.pv-audio__playlist{
  position:absolute; left:0; right:0; top:100%;
  z-index:1000; border-top:1px solid rgba(255,255,255,.08);
  padding:6px 10px 10px; display:flex; justify-content:center;
  background:linear-gradient(180deg, rgba(141, 212, 230, 0.96), rgba(141, 212, 230, 0.90));
  box-shadow:0 12px 24px rgba(0,0,0,.35);
  max-height:0; overflow:hidden; opacity:0; visibility:hidden;
  transition:max-height .35s ease, opacity .25s ease, visibility 0s linear .35s;
}
.pv-audio.is-open .pv-audio__playlist{
  max-height:320px; opacity:1; visibility:visible;
  transition:max-height .35s ease, opacity .25s ease;
}

/* Liste interne (si tu utilises .pv-audio__list en plus de #pvPlaylist) */
.pv-audio__list{
  display:grid; gap:4px; margin:0; padding:0 65px;
  max-height:240px; overflow:auto;
  list-style:decimal-leading-zero; counter-reset:pv;
  width:100%; max-width:1170px; margin-left:auto; margin-right:auto;
}
.pv-audio__list li{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:10px;
  cursor:pointer; background:transparent;
}
.pv-audio__list li:hover{ background:rgba(255,255,255,.06); }
.pv-audio__list li[aria-selected="true"]{ background:rgba(187, 228, 238, 0.80); }
.pv-track-title{
  flex:1 1 auto; min-width:0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.pv-time{ font-variant-numeric:tabular-nums; color:var(--pv-muted); font-size:.9rem; }

/* Bouton Play minimaliste (si utilisé) */
.pv-audio__play{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:8px;
  border:1px solid rgba(255,255,255,.15); background:transparent; color:var(--pv-fg);
  cursor:pointer; font-size:0; line-height:0; vertical-align:middle;
}
.pv-audio__play::before{
  content:""; display:block; width:0; height:0;
  border-left:9px solid currentColor;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.pv-audio__play:hover{ background:rgba(255,255,255,.06); }
.pv-audio__play:focus-visible{ outline:3px solid var(--pv-ring); outline-offset:2px; }

/* =========================
   Mobile
========================= */
@media (max-width: 768px){
  .pv-audio__inner{ gap:8px; padding:10px; }
  .pv-audio__volume{ min-width:90px; }
  .pv-audio__volume input{ width:70px; }
  .pv-audio__title{ font-size:.95rem; }
  .pv-audio__list{ padding:0; }
}