/* =============== PRODUITS (onglets & images) =============== */
#products .nav-pills .nav-link { border-radius:999px; padding:.45rem 1rem; }
#products .nav-pills .nav-link.active { box-shadow:0 6px 18px rgba(0,0,0,.12); }
#products .ratio > img { border:1px solid rgba(0,0,0,.06); }

/* Image produit pleine largeur */
.product-img-full{ width:100%; height:auto; display:block; max-height:500px; }

/* =============== TABS (défilement horizontal des onglets) =============== */
.tabs-wrapper{ position:relative; }
#prodTabs{
  display:flex; flex-wrap:nowrap; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-top:5px;
}
#prodTabs::-webkit-scrollbar{ display:none; }
#prodTabs li{ flex:0 0 auto; }

.tabs-arrows{ display:flex; justify-content:space-between; margin-bottom:3px; }
.tabs-arrow{ display:none; background:none; border:0; font-size:22px; cursor:pointer; color:#333; padding:2px 8px; }
@media (max-width:768px){ .tabs-arrow{ display:inline-block; } }

/* =============== PLAYER PRODUIT (playlist) =============== */

/* Vars pour la hauteur d’une ligne et le nb de lignes visibles */
.product-player{
  --pv-row-h: 48px;     /* hauteur min d’une ligne (icône+texte) */
  --pv-rows: 4;         /* nb de lignes visibles */
  --pv-gap: 4px;        /* si ta liste a un gap */
  --pv-accent: #000;    /* tu as choisi noir en accent */
  --pv-accent-2: #22d3ee;
}

/* Liste scrollable – couvre #pvPlaylist ET .pv-audio__list */
.product-player #pvPlaylist,
.product-player .pv-audio__list{
  display:block;
  max-height: calc(var(--pv-row-h) * var(--pv-rows) + (var(--pv-rows) - 1) * var(--pv-gap));
  overflow-y:auto !important;
  overflow-x:hidden !important;          /* 🔒 empêche toute barre horizontale */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;                  /* Firefox */
  padding-left:0;                        /* évite l’indent des <ul> */
  list-style:none;
  position:relative;
  box-sizing:border-box;
}

/* Items: hauteur de ligne + base */
.product-player #pvPlaylist > li,
.product-player .pv-audio__list > li{
  min-height:var(--pv-row-h);
  display:flex; align-items:center; gap:10px;
  position:relative;                     /* requis pour ::before */
  box-sizing:border-box;                 /* largeur stable */
  padding:8px 12px;
  cursor:pointer;
}

/* ===== Hover FLAT sans déplacement (overlay interne) ===== */
@media (hover:hover){
  .product-player #pvPlaylist > li::before,
  .product-player .pv-audio__list > li::before{
    content:"";
    position:absolute;
    inset:2px;                           /* overlay à l’intérieur de l’item */
    border-radius:8px;
    background:transparent;
    transition:background .20s ease;
    pointer-events:none;
  }
  .product-player #pvPlaylist > li:hover::before,
  .product-player .pv-audio__list > li:hover::before{
    /* voile léger mauve (ou noir atténué si tu préfères) */
    background:rgba(167,139,250,.10);
  }

  /* Titre + badge au hover (pas de font-weight pour éviter reflow) */
  .product-player #pvPlaylist > li:hover .track-title,
  .product-player .pv-audio__list > li:hover .track-title{
    color:var(--pv-accent);
    text-decoration:none;
  }
  .product-player #pvPlaylist > li:hover .badge,
  .product-player .pv-audio__list > li:hover .badge{
    background-color:var(--pv-accent-2);
    color:#000;
  }
}

/* ===== État actif / sélectionné ===== */
.product-player [aria-selected="true"],
.product-player .is-active{
  background:rgba(167,139,250,.18);      /* mauve doux */
}

/* Intégration Bootstrap list-group active (si utilisé ailleurs) */
.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;
}

/* Curseur main partout (sécurité) */
.product-player #pvPlaylist > li *,
.product-player .pv-audio__list > li *{
  cursor:pointer;
}

/* Bouton lecture (si tu utilises .pv-audio__play) */
.product-player .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(0,0,0,.15); background:transparent; color:#000; cursor:pointer;
  font-size:0; line-height:0; vertical-align:middle;
}
.product-player .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;
}
.product-player .pv-audio__play:hover{ background:rgba(0,0,0,.06); }

/* Scrollbar fine (WebKit) */
.product-player #pvPlaylist::-webkit-scrollbar,
.product-player .pv-audio__list::-webkit-scrollbar{ width:8px; }
.product-player #pvPlaylist::-webkit-scrollbar-thumb,
.product-player .pv-audio__list::-webkit-scrollbar-thumb{ background:rgba(153,153,153,.9); border-radius:8px; }
.product-player #pvPlaylist::-webkit-scrollbar-track,
.product-player .pv-audio__list::-webkit-scrollbar-track{ background:transparent; }

/* Si ton JS ajoute .pl-scroll, on garde le style et on ne casse pas le viewport */
.product-player .pl-scroll{ overflow-y:auto !important; overflow-x:hidden !important; }

/* =============== PANNEAU “overlay” de playlist (si utilisé) =============== */
.product-player #pvPlaylistPanel{ display:none; }
.product-player .pv-audio.is-open #pvPlaylistPanel{ display:block; }

/* Variante overlay animé */
.product-player .pv-audio__playlist{
  padding:6px 10px 10px;
  background:linear-gradient(180deg, rgba(18,18,24,.96), rgba(18,18,24,.92));
  box-shadow:0 12px 24px rgba(0,0,0,.35);
  border-top:1px solid rgba(255,255,255,.08);
  overflow:hidden;                       /* c’est l’UL interne qui scrolle */
}
.product-player .pv-audio.is-open .pv-audio__playlist{
  max-height: calc(var(--pv-row-h) * var(--pv-rows) + 80px);
  opacity:1; visibility:visible;
}

/* =============== THÈME (héritage) =============== */
span.track-title{ color:#000; }
.btn-player{ color:#fff; background-color:#15D1EC; border-color:#15D1EC; }
.btn-player:hover{ color:#fff; background-color:#fff; border-color:#15D1EC; }

/* Nav tabs Bootstrap 3 (si utilisé ailleurs) */
.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:#fff !important; background-color:#15D1EC !important; }

/* === Playlist scrol­lable pour les UL générées (#…_list) dans .product-player === */
.product-player ul[id$="_list"]{
  --pv-row-h:48px; --pv-rows:4; --pv-gap:6px;
  display:block;
  max-height: calc(var(--pv-row-h) * var(--pv-rows) + (var(--pv-rows) - 1) * var(--pv-gap));
  overflow-y:auto; overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  padding-left:0; list-style:none; position:relative; box-sizing:border-box;
}
.product-player ul[id$="_list"] > li{
  min-height:var(--pv-row-h);
  display:flex; align-items:center;
  position:relative; box-sizing:border-box; padding:8px 12px;
  cursor:pointer;
}
/* Hover identique via overlay interne */
@media (hover:hover){
  .product-player ul[id$="_list"] > li::before{
    content:""; position:absolute; inset:2px; border-radius:8px;
    background:transparent; transition:background .20s ease; pointer-events:none;
  }
  .product-player ul[id$="_list"] > li:hover::before{ background:rgba(128, 227, 245, 0.1); }
}

/* Badge à droite + réserve d’espace */
.product-player ul[id$="_list"] > li .badge{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
}
.product-player ul[id$="_list"] > li .track-title{
  padding-right:80px; /* réserve la place du badge */
}

/* =============== Mobile =============== */
@media (max-width:768px){
  .product-player #pvPlaylist,
  .product-player .pv-audio__list,
  .product-player ul[id$="_list"]{ scrollbar-width:thin; }
}