/* Utilitaire critique — doit l'emporter sur .pl-modal-overlay{display:flex} etc. */
.hidden { display: none !important; }

/* Sous-menu profil dans le header */
.profile-dropdown-menu.open {
  display: flex !important;
}
.profile-dropdown-menu {
  z-index: 200 !important;
}
/* ============================================================
   Yedje! — styles.css
   Styles pour les blocs défilants horizontaux & cartes artistes
   ============================================================ */

/* ========== THEME SYSTEM — Variables CSS ========== */
:root {
  /* Dark theme (défaut) */
  --bg-body: #1f2937;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-faint: rgba(255, 255, 255, 0.45);
  --text-placeholder: rgba(255, 255, 255, 0.3);
  --bg-card: rgba(255, 255, 255, 0.05);
  --shadow-card: rgba(0, 0, 0, 0.3);
  --overlay-bg: rgba(0, 0, 0, 0.3);
  --scrollbar-track: rgba(255, 255, 255, 0.05);
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --scrollbar-hover: rgba(255, 255, 255, 0.25);
  --section-title: #ffffff;
  --link-gold: #d4a017;
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-color: #fff;
  --input-placeholder: rgba(255, 255, 255, 0.35);
}

[data-theme="light"] {
  --bg-body: #f0f2f5;
  --text-primary: #1a1a2e;
  --text-secondary: rgba(0, 0, 0, 0.85);
  --text-muted: rgba(0, 0, 0, 0.55);
  --text-faint: rgba(0, 0, 0, 0.4);
  --text-placeholder: rgba(0, 0, 0, 0.3);
  --bg-card: rgba(0, 0, 0, 0.05);
  --shadow-card: rgba(0, 0, 0, 0.12);
  --overlay-bg: rgba(0, 0, 0, 0.15);
  --scrollbar-track: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --scrollbar-hover: rgba(0, 0, 0, 0.25);
  --section-title: #1a1a2e;
  --link-gold: #b8860b;
  --input-bg: rgba(0, 0, 0, 0.04);
  --input-border: rgba(0, 0, 0, 0.12);
  --input-color: #1a1a2e;
  --input-placeholder: rgba(0, 0, 0, 0.35);
}

/* Apply theme to body only (header & footer stay dark) */
body {
  background-color: var(--bg-body) !important;
  transition: background-color 0.3s ease;
}

/* Supprime le défilement horizontal sur mobile/tablette */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
}

/* Header bottom border */
header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- Titres de section (Bebas Neue) ---------- */
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--section-title);
}

/* Light mode: main content text */
[data-theme="light"] main {
  color: var(--text-primary);
}
[data-theme="light"] main h2 {
  color: var(--section-title);
}
[data-theme="light"] main a.text-gold {
  color: var(--link-gold);
}

/* ---------- Theme toggle button ---------- */
.theme-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
  padding: 0;
  flex-shrink: 0;
}

.theme-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s ease, background 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  transition: opacity 0.3s ease;
}

.theme-toggle .icon-sun {
  left: 4px;
  opacity: 0;
}

.theme-toggle .icon-moon {
  right: 4px;
  opacity: 1;
}

/* Light mode toggle state */
[data-theme="light"] .theme-toggle::after {
  transform: translateX(18px);
  background: #d4a017;
}

[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 1;
}

[data-theme="light"] .theme-toggle .icon-moon {
  opacity: 0;
}

/* ---------- Conteneur défilant horizontal ---------- */
.scroll-container {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
}

.scroll-container::-webkit-scrollbar {
  height: 4px;
}

.scroll-container::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}

/* Masquer la scrollbar des carousels sur mobile/tablette */
@media (max-width: 1024px) {
  .scroll-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .scroll-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }
  .hp-scroll-outer {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hp-scroll-outer::-webkit-scrollbar {
    display: none;
  }
}

/* ========== HIT PARADE ========== */
.hit-parade-wrapper {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.25rem 1rem 1rem;
}

@media (max-width: 480px) {
  .hit-parade-wrapper {
    padding: 0.75rem 0.7rem 0.75rem;
    margin-top: 0.15rem;
  }
  .hp-detail-card {
    margin-top: 0.5rem;
  }
  .search-bar-inline {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
  }
}

[data-theme="light"] .hit-parade-wrapper {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Canvas du graphique — conteneur scrollable */
.hp-scroll-outer {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,160,23,0.4) transparent;
  padding-bottom: 4px;
}
.hp-scroll-outer::-webkit-scrollbar { height: 5px; }
.hp-scroll-outer::-webkit-scrollbar-thumb { background: rgba(212,160,23,0.4); border-radius: 99px; }
.hp-scroll-outer::-webkit-scrollbar-track { background: transparent; }

.hp-chart-box {
  position: relative;
  /* width & height set dynamically in JS */
}

.hp-avatar-preview {
  position: absolute;
  z-index: 5;
  display: none;
  width: 77px;
  height: 92px;
  padding: 0.45rem;
  background: rgba(22, 33, 62, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.hp-avatar-preview.is-visible { display: block; }

.hp-avatar-tap-target {
  position: absolute;
  z-index: 4;
  width: 32px;
  height: 32px;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid var(--hp-avatar-color, rgba(255, 255, 255, 0.5));
  border-radius: 50%;
  background: var(--bg-card);
  touch-action: none;
}

.hp-avatar-tap-target img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 480px) {
  .hp-avatar-tap-target {
    width: 22px;
    height: 22px;
  }
}

.hp-avatar-preview img {
  width: 100%;
  height: 65px;
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
}

.hp-avatar-preview span {
  display: block;
  margin-top: 0.35rem;
  overflow: hidden;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.2;
  height: 17px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Carte de détail (clic / survol) */
.hp-detail-card {
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  position: relative;
  animation: hp-fade-in 0.2s ease;
}

.hp-detail-artist-photo {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .hp-detail-card {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

.hp-detail-hidden { display: none; }

@keyframes hp-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hp-detail-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 2px 4px;
  transition: color 0.15s;
}

.hp-detail-close:hover { color: #e94560; }

[data-theme="light"] .hp-detail-close { color: rgba(0,0,0,0.3); }

.hp-detail-rank {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.2rem;
}

.hp-detail-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.55rem;
}

.hp-detail-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0.18rem 0;
}

.hp-detail-label {
  color: var(--text-faint);
  min-width: 90px;
}

/* Responsive */
@media (max-width: 640px) {
  /* hp-chart-box height is now set inline */
}

/* ========== NOUVEAUX TYPES DE RUBRIQUES ========== */

/* --- Galerie d'images --- */
.section-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.gallery-item {
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-card);
  cursor: pointer;
  transition: transform 0.2s;
}
.gallery-item:hover { transform: scale(1.02); }
.gallery-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gallery-caption {
  padding: 0.35rem 0.5rem;
  font-size: 0.73rem;
  color: var(--text-muted);
}

/* --- Grille vidéos --- */
.section-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.video-item {
  flex: 0 0 auto;
  width: 144px;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(to bottom, #0088cc, #1a3a8a);
  cursor: pointer;
  transition: transform 0.2s;
  scroll-snap-align: start;
  border: 1px solid #0088cc;
}
.video-item:hover { transform: scale(1.02); }
.video-thumb-wrapper {
  position: relative;
  width: 100%;
  height: 214px;
  overflow: hidden;
}
.video-part-count {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(13, 18, 38, 0.88);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
}
.video-thumb-wrapper img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.video-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s;
}
.video-item:hover .video-play-btn,
.carousel-slide:hover .video-play-btn { opacity: 1; }
.video-play-btn svg {
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.video-title {
  padding: 0.35rem 0.5rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  white-space: normal;
  word-break: break-word;
  background: transparent;
}
.home-video-parts-panel {
  margin: 0 0 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--bg-card);
}
.home-video-parts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  color: var(--text-primary);
  font-size: 0.9rem;
}
.home-video-parts-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--input-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.home-video-parts-list {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.home-video-part-card {
  flex: 0 0 112px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.home-video-part-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}
.home-video-part-card span {
  display: block;
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.home-video-part-card:hover { border-color: var(--accent, #e94560); }

/* --- Lecteur vidéo inline --- */
.video-inline-player { margin-bottom: 0.75rem; }
.video-inline-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  border-radius: 0;
  overflow: hidden;
}

/* Plein écran automatique en paysage mobile */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .video-inline-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding-bottom: 0 !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
  }
}
.video-inline-wrap .video-interact-btns {
  z-index: 20;
  pointer-events: auto;
}
.video-inline-close,
.video-cast-btn {
  position: absolute;
  top: 8px;
  z-index: 10;
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  padding: 5px;
  transition: background 0.2s;
}
.video-inline-close { right: 8px; font-size: 0.9rem; }
.video-cast-btn { right: 46px; }
.video-inline-close:hover { background: #e94560; }
.video-cast-btn:hover { background: #0088cc; }
.video-inline-resume {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  font-size: 0.8rem;
  color: #fff;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  background: #1565c0;
}

/* --- Grille texte / actualités --- */
.section-text-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.text-card {
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.text-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 160, 23, 0.3);
}
[data-theme="light"] .text-card { border-color: rgba(0,0,0,0.08); }
.text-card-img-wrap {
  position: relative;
  width: 30%;
  flex-shrink: 0;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.text-card-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.text-card-news-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s;
}
.text-card:hover .text-card-news-btn { opacity: 1; }
.text-card-news-btn svg {
  width: 1.75rem;
  height: 1.75rem;
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.text-card-body { padding: 0.75rem; }
.text-card-date {
  font-size: 0.7rem;
  color: #d4a017;
  display: block;
  margin-bottom: 0.2rem;
}
.text-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.3rem;
  line-height: 1.35;
}
.text-card-excerpt {
  font-size: 0.77rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* --- Carousel (scroll horizontal) --- */
.section-carousel {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.section-carousel::-webkit-scrollbar { height: 4px; }
.section-carousel::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.section-carousel::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
.carousel-slide {
  flex: 0 0 auto;
  width: 220px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-card);
  cursor: pointer;
  scroll-snap-align: start;
  position: relative;
  transition: transform 0.2s;
}
.carousel-slide:hover { transform: scale(1.02); }
.carousel-slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.carousel-caption {
  padding: 0.35rem 0.5rem;
  font-size: 0.73rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .section-gallery,
  .section-video-grid { grid-template-columns: repeat(2, 1fr); }
  .section-text-grid  { grid-template-columns: 1fr; }
  .carousel-slide     { width: 180px; }
}

/* ============================================================
   Icônes Actualités — cartes carrées avec pied de page titre
   ============================================================ */
.actu-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.75rem;
}
.actu-icon {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid #0088cc;
  box-shadow: 0 3px 12px rgba(0,0,0,0.28);
  transition: transform 0.22s, box-shadow 0.22s;
}
.actu-icon:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}
.actu-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
/* Vignettes journal (articles/numéros) : évite le flou des grandes photos sous-échantillonnées */
.journal-article-row img,
.journal-issue-row img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
/* Placeholder quand pas d'image */
.actu-icon-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f3460 0%, #16213e 60%, #1a1a2e 100%);
}
.actu-icon-placeholder svg {
  width: 2.6rem;
  height: 2.6rem;
  color: rgba(46,204,113,0.55);
}
/* Pied de page dégradé superposé à l'image */
.actu-icon-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.8rem 0.65rem 0.55rem;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.62) 40%,
    rgba(0,0,0,0.88) 100%
  );
  pointer-events: none;
}
.actu-icon-title {
  color: #fff;
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  margin: 0;
}
.video-desc-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 11;
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font: 700 1rem/1 Georgia, serif;
  cursor: pointer;
}
.actu-icon-date {
  display: block;
  color: #2ecc71;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 0.18rem;
}
/* Badge catégorie en haut à gauche */
.actu-icon-badge {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  background: rgba(46,204,113,0.88);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
/* Rubrique avec un seul élément : pleine largeur */
.actu-icon-grid--single {
  grid-template-columns: 1fr;
}
.actu-icon-grid--single .actu-icon {
  aspect-ratio: 16 / 9;
}
@media (max-width: 480px) {
  .actu-icon-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .actu-icon-grid--single { grid-template-columns: 1fr; }
  .actu-icon-title { font-size: 0.68rem; }
}

/* Journal series card : hauteur automatique pour afficher la couverture entière */
.journal-series-card,
.actu-icon-grid--single .journal-series-card {
  aspect-ratio: auto !important;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.journal-series-card .actu-icon-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.journal-numero-badge {
  position: absolute;
  background: #fff !important;
  color: #e00 !important;
  -webkit-text-fill-color: #e00 !important;
  font-family: 'Bebas Neue', sans-serif;
  line-height: 1;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  z-index: 2;
  font-size: clamp(0.73rem, 3vw, 1.45rem);
  padding: 0.4em 0.7em;
  top: 19%;
  right: 2%;
}

/* Pub section : affiche la totalité de la hauteur de l'image en conservant ses proportions */
.pub-icon,
.actu-icon-grid--single .pub-icon {
  aspect-ratio: auto !important;
  height: auto;
  display: flex;
  flex-direction: column;
}
.pub-icon-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
/* Footer sous l'image (non superposé) pour les pubs */
.pub-icon .actu-icon-footer {
  position: static;
  padding: 0.5rem 0.65rem;
  background: rgba(0, 0, 0, 0.75);
}

/* --- Popup item --- */
.item-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: popup-fade-in 0.2s ease;
}
@keyframes popup-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.item-popup {
  background: #16213e;
  border-radius: 14px;
  border: 1px solid #0088cc;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  animation: popup-slide-in 0.22s ease;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
[data-theme="light"] .item-popup {
  background: #ffffff;
  color: #1a1a2e;
}
[data-theme="light"] .item-popup-title {
  color: #1a1a2e;
}
[data-theme="light"] .item-popup-text {
  color: rgba(0,0,0,0.75);
}
/* Contenu description compilation : normaliser les inline styles Summernote */
.comp-desc-content {
  color: var(--text-primary);
  background: rgba(31, 41, 55, 0.95);
  padding: 1rem;
  border-radius: 8px 8px 0 0;
  margin: 0.5rem 0 0 0;
}
.comp-desc-content *:not(a):not(img) {
  color: var(--text-primary) !important;
  background-color: transparent !important;
  font-size: 0.85rem !important;
  font-family: inherit !important;
  line-height: 1.65 !important;
}
.comp-desc-content a {
  color: var(--link-gold) !important;
}
[data-theme="light"] .comp-desc-content {
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
[data-theme="light"] .comp-desc-content *:not(a):not(img) {
  color: #1a1a2e !important;
  background-color: transparent !important;
}
[data-theme="light"] .comp-desc-content a {
  color: #0088cc !important;
}
.comp-desc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.comp-desc-date {
  color: #d4a017;
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
}
.comp-desc-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.comp-desc-actions .artist-interact-btn {
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
}
.comp-desc-actions .artist-interact-btn svg {
  width: 15px;
  height: 15px;
}
[data-theme="light"] .comp-desc-footer {
  border-top-color: rgba(0,0,0,0.15);
}

/* Contenu article journal : normaliser les inline styles de l'éditeur (Summernote / Quill) */
.journal-article-body {
  color: var(--text-primary);
  background: rgba(31, 41, 55, 0.95);
  padding: 1rem;
  border-radius: 8px 8px 0 0;
  margin: 0.5rem 0 0 0;
}
.journal-article-body *:not(a):not(img):not(iframe):not(video) {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}
.journal-article-body a {
  color: var(--link-gold) !important;
}
.journal-article-interactions {
  background: rgba(31, 41, 55, 0.95);
  border-top: none;
  margin-top: 0;
  padding: 1rem;
  border-radius: 0 0 8px 8px;
}
.journal-article-interactions .avli-actions {
  justify-content: center;
}
[data-theme="light"] .journal-article-body {
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
[data-theme="light"] .journal-article-body *:not(a):not(img):not(iframe):not(video) {
  color: #1a1a2e !important;
  background-color: transparent !important;
}
[data-theme="light"] .journal-article-body a {
  color: #0088cc !important;
}
[data-theme="light"] .journal-article-interactions {
  background: transparent;
  border-top: none;
  margin-top: 1.25rem;
  padding: 0;
  border-radius: 0;
}

/* Header du popup article journal */
.journal-popup-header {
  background: #16213e;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
[data-theme="light"] .journal-popup-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
@keyframes popup-slide-in {
  from { transform: translateY(22px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Playlist Player Overlay ── */
.pl-player-panel {
  background: #1a1a2e;
  border-radius: 14px;
  border: 1px solid #0088cc;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: popup-slide-in 0.22s ease;
  box-shadow: 0 24px 60px rgba(0,0,0,0.8);
  overflow: hidden;
}
.pl-player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.pl-player-title {
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-player-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem;
  border-radius: 6px;
  transition: background .2s, color .2s;
}
.pl-player-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.pl-player-ratio {
  position: relative;
  padding-bottom: 56.25%;
  background: #000;
  flex-shrink: 0;
}
.pl-player-ratio iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.pl-player-list {
  overflow-y: auto;
  max-height: 280px;
  padding: 0.4rem 0;
}
.pl-player-list::-webkit-scrollbar { width: 4px; }
.pl-player-list::-webkit-scrollbar-thumb { background: rgba(239,68,68,.5); border-radius: 4px; }

/* Lecteur playlist vidéo — overlay plein écran, flex:1 en paysage */
.pl-inline-player {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: flex;
  flex-direction: column;
}
.pl-ov-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #111;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pl-inline-title {
  font-weight: 600; font-size: 0.9rem; color: #fff;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Navigation prev/next dans le header du player playlist */
.pl-ov-nav {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.pl-ov-nav.hidden { display: none; }
.pl-ov-prev, .pl-ov-next {
  background: rgba(255,255,255,0.1); border: none; color: #fff;
  border-radius: 50%; width: 28px; height: 28px; font-size: 1.2rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.pl-ov-prev:hover:not(:disabled), .pl-ov-next:hover:not(:disabled) { background: rgba(255,255,255,0.25); }
.pl-ov-prev:disabled, .pl-ov-next:disabled { opacity: 0.3; cursor: default; }
.pl-ov-counter { font-size: 0.72rem; color: rgba(255,255,255,0.5); min-width: 30px; text-align: center; }
/* Bouton "Lire tout" dans la tracklist */
.pl-track-play-all {
  flex-shrink: 0; display: flex; align-items: center;
  padding-right: 10px; margin-right: 2px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.pl-play-all-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #e94560; border: none; border-radius: 8px; color: #fff;
  cursor: pointer; padding: 8px 12px; font-size: 0.7rem; font-weight: 700;
  transition: opacity 0.2s; white-space: nowrap;
}
.pl-play-all-btn svg { width: 22px; height: 22px; }
.pl-play-all-btn:hover { opacity: 0.85; }
.pl-ov-video {
  position: relative;
  width: 100%;
  height: min(56.25vw, 32dvh);
  max-height: min(56.25vw, 32dvh);
  min-height: 96px;
  background: #000;
  flex: 0 1 auto;
}
.pl-ov-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
/* En paysage : vidéo remplit tout l'espace, tracklist/interact masquées */
@media (orientation: landscape) {
  .pl-inline-player .pl-ov-header { padding: 0.25rem 0.75rem; }
  .pl-inline-player .pl-ov-video { flex: 1; padding-bottom: 0; }
  .pl-inline-player .pl-interact-bar { display: none; }
  .pl-inline-player .pl-inline-tracklist { display: none; }
}
.pl-interact-bar {
  flex-shrink: 0;
  background: #111;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 8px 12px;
}
.pl-interact-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pl-interact-btns .artist-interact-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 0.78rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 9999px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background 0.2s;
}
.pl-interact-btns .artist-interact-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.pl-interact-btns .artist-interact-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Le lecteur de playlist reste sombre, y compris lorsque la page utilise le thème clair. */
[data-theme="light"] .pl-inline-player .pl-interact-btns .artist-interact-btn {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
}
[data-theme="light"] .pl-inline-player .pl-interact-btns .artist-interact-btn:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.pl-inline-player .pl-interact-btns .pl-video-description-btn,
[data-theme="light"] .pl-inline-player .pl-interact-btns .pl-video-description-btn {
  margin-left: auto;
  width: 30px;
  min-width: 30px;
  height: 30px;
  justify-content: center;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
  filter: none;
}
.pl-inline-player .pl-interact-btns .pl-video-description-btn:hover,
[data-theme="light"] .pl-inline-player .pl-interact-btns .pl-video-description-btn:hover {
  background: #e8edf5;
  color: #111;
}
.pl-inline-tracklist {
  flex: 0 0 auto; min-height: 84px; max-height: 14dvh; box-sizing: border-box;
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  padding: 8px 10px; background: #0d0d0d;
  scroll-snap-type: x mandatory;
}
.pl-inline-tracklist::-webkit-scrollbar { height: 3px; }
.pl-inline-tracklist::-webkit-scrollbar-thumb { background: rgba(239,68,68,.5); border-radius: 2px; }
/* Contrôles précédent / stop / lecture / suivant, au-dessus du bouton "Lire tout" */
.pl-ctrl-bar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 8px 12px; background: #0d0d0d;
}
.pl-ctrl-bar.hidden { display: none; }
.pl-ctrl-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12); color: #fff; cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.pl-ctrl-btn svg { width: 20px; height: 20px; }
.pl-ctrl-btn:hover:not(:disabled) { background: rgba(255,255,255,0.25); }
.pl-ctrl-btn:active:not(:disabled) { transform: scale(0.92); }
.pl-ctrl-btn:disabled { opacity: 0.3; cursor: default; }
.pl-ctrl-play { width: 48px; height: 48px; background: #e94560; }
.pl-ctrl-play svg { width: 24px; height: 24px; }
.pl-ctrl-play:hover:not(:disabled) { background: #d63a54; }
@media (orientation: landscape) {
  .pl-inline-player .pl-ctrl-bar { display: none; }
}
.pl-promo-slot {
  flex: 1 1 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  padding: 2px 10px calc(4px + env(safe-area-inset-bottom)); background: #000;
}
.pl-promo-slot.hidden { display: none; }
.pl-promo-card {
  position: relative; flex: 1 1 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; border-radius: 10px; padding: 6px 8px;
  background: #0d1226; color: #fff; font-size: 0.82rem; line-height: 1.45;
  border: 1px solid rgba(255,255,255,0.1);
}
.pl-promo-card strong { display: block; font-size: 0.88rem; text-align: center; }
.pl-promo-card p { margin: 4px 0 0; opacity: 0.8; }
.pl-promo-flash { background: #1f1021; border-left: 3px solid #e94560; }
.pl-promo-tag {
  display: inline-block; margin-bottom: 4px; font-size: 0.55rem;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55;
}
.pl-promo-flash .pl-promo-tag { color: #e94560; opacity: 1; font-weight: 700; }
.pl-promo-img, .pl-promo-video {
  display: block; flex: 1 1 0; width: 100%; height: 0; min-height: 0; max-height: none;
  object-fit: contain; object-position: center;
  border-radius: 8px; margin: 0 auto 6px; background: #000;
}
.pl-promo-link {
  display: block; padding: 6px 0; font-weight: 700; color: #f0b429; text-decoration: none;
}
.pl-promo-html { overflow-x: auto; }
.pl-lire-tout-bar {
  flex: 0 0 auto; width: 100%; box-sizing: border-box;
  padding: 6px 12px; background: #0d0d0d;
}
.pl-lire-tout-btn {
  width: 100%; min-height: 42px; padding: 8px 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #e94560; border: 0; border-radius: 8px;
  color: #fff; font-size: 0.88rem; font-weight: 700; cursor: pointer;
}
.pl-lire-tout-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.pl-lire-tout-btn:hover { filter: brightness(0.94); }
@media (max-height: 700px) and (orientation: portrait) {
  .pl-ov-video { height: min(56.25vw, 22dvh); max-height: min(56.25vw, 22dvh); min-height: 64px; }
  .pl-interact-bar { padding-top: 4px; padding-bottom: 4px; }
  .pl-inline-tracklist { max-height: 12dvh; padding-top: 4px; padding-bottom: 4px; }
  .pl-ctrl-bar { padding-top: 3px; padding-bottom: 3px; gap: 8px; }
  .pl-ctrl-btn { width: 32px; height: 32px; }
  .pl-ctrl-play { width: 38px; height: 38px; }
  .pl-lire-tout-bar { padding-top: 4px; padding-bottom: 4px; }
  .pl-lire-tout-btn { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
}
@media (orientation: landscape) {
  .pl-inline-player .pl-promo-slot { display: none; }
}
.pl-track-item {
  flex-shrink: 0; width: 90px; scroll-snap-align: start;
  cursor: pointer; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; transition: border-color .15s;
  background: #1a1a2e;
}
.pl-track-item.active { border-color: #ef4444; }
.pl-track-thumb {
  position: relative; width: 100%; padding-bottom: 56.25%; background: #000;
}
.pl-track-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pl-track-num, .pl-track-playing {
  position: absolute; bottom: 3px; right: 4px;
  font-size: 0.65rem; font-weight: 700;
  background: rgba(0,0,0,.65); color: #fff;
  padding: 1px 4px; border-radius: 3px;
}
.pl-track-playing { color: #ef4444; }
.pl-track-title {
  font-size: 0.66rem; color: rgba(255,255,255,.75);
  padding: 3px 5px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-video-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: background .15s;
  border-left: 3px solid transparent;
}
.pl-video-item:hover { background: rgba(255,255,255,.05); }
.pl-video-item.active { background: rgba(239,68,68,.12); border-left-color: #ef4444; }
.pl-video-thumb {
  width: 62px; height: 39px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: #222;
}
.pl-video-info { flex: 1; min-width: 0; }
.pl-video-title {
  font-size: 13px;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-video-artist { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 2px; }
.pl-video-num { font-size: 12px; color: rgba(255,255,255,.3); flex-shrink: 0; }

.item-popup-close {
  position: absolute;
  top: 0.6rem;
  right: 0.65rem;
  z-index: 10;
  background: rgba(0,0,0,0.55);
  border: none;
  color: #fff;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.item-popup-close:hover { background: #e94560; }
.item-popup-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 55vh;
  object-fit: contain;
  background: #16213e;
  border-radius: 14px 14px 0 0;
}
.item-popup-body { padding: 1rem 1rem 1.25rem; }
.item-popup-date {
  display: block;
  font-size: 0.72rem;
  color: #d4a017;
  margin-bottom: 0.3rem;
}
.item-popup-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.7rem;
  line-height: 1.3;
}
.item-popup-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 0.85rem;
  white-space: pre-wrap;
}
/* Neutraliser les styles inline (fond/couleur) injectés par l'éditeur admin */
.item-popup-text *:not(a):not(img) {
  color: inherit !important;
  background-color: transparent !important;
}
.item-popup-link {
  display: inline-block;
  padding: 0.45rem 1.3rem;
  background: #d4a017;
  color: #1a1a2e;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.item-popup-link:hover { background: #e9b42a; }

/* ========== FLASH INFO TICKER ========== */
.flash-info-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: #e94560; /* écrasé dynamiquement par JS */
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  height: 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.4s ease;
}
.flash-info-bar.hidden { display: none; }

.flash-info-label {
  flex-shrink: 0;
  background: #c0392b; /* écrasé dynamiquement par JS */
  padding: 0 0.75rem;
  height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  transition: background 0.4s ease;
}

.flash-info-track-wrapper {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.flash-info-track-wrapper:hover {
  background: rgba(255,255,255,0.08);
}

.flash-info-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-left: 100%;
  animation: flash-scroll 40s linear infinite;
  gap: 0;
}

.flash-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.8rem;
}

.flash-ticker-sep {
  color: rgba(255,255,255,0.4);
  padding: 0 0.3rem;
  flex-shrink: 0;
}

@keyframes flash-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-66.66%); }
}

/* ---------- Placeholder chargement ---------- */
.scroll-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  padding: 2rem;
  color: var(--text-placeholder);
  font-size: 0.875rem;
  animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* ---------- Carte Artiste ---------- */
.artist-card {
  flex: 0 0 auto;
  width: 130px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.2s ease;
  border: 1px solid #e94560;
  border-radius: 0.4rem;
  padding: 6px 6px 8px;
  background: linear-gradient(to bottom, #0088cc, #1a3a8a);
  color: #ffffff !important;
}

.artist-card * {
  color: #ffffff !important;
}

.artist-card:hover {
  transform: translateY(-4px);
}

@media (min-width: 640px) {
  .artist-card { width: 150px; }
}

@media (min-width: 1024px) {
  .artist-card { width: 170px; }
}

/* ---------- Wrapper image ---------- */
.artist-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0.3rem;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 4px 15px var(--shadow-card);
  border: 1px solid #000000;
}

.artist-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.artist-card:hover .artist-img {
  transform: scale(1.08);
  filter: brightness(0.7);
}

/* ---------- Overlay play ---------- */
.artist-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: var(--overlay-bg);
  transition: opacity 0.3s ease;
}

.artist-card:hover .artist-overlay {
  opacity: 1;
}

/* ---------- Badges (audios / vidéos) ---------- */
.artist-badges {
  position: absolute;
  bottom: 6px;
  left: 6px;
  display: flex;
  gap: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
  line-height: 1.2;
}

.badge-audio {
  background: rgba(212, 160, 23, 0.85);
  color: #1a1a2e;
}

.badge-video {
  background: rgba(233, 69, 96, 0.85);
  color: #fff;
}

/* ---------- Nom artiste ---------- */
.artist-name {
  margin-top: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000000;
  letter-spacing: -0.01em;
}

/* ---------- Nom du groupe ---------- */
.artist-group {
  font-size: 0.6875rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-faint);
  margin-top: 1px;
}

/* ---------- Liens navigation header ---------- */
.nav-link {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  border-radius: 9999px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.nav-link.active {
  color: #fff;
  background: #e94560;
}

/* ---------- Navigation basse mobile ---------- */
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
  color: #d4a017;
}

/* ---------- Champs auth (login / register) ---------- */
.auth-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  color: var(--input-color);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input::placeholder {
  color: var(--input-placeholder);
}

.auth-input:focus {
  border-color: #d4a017;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15);
}

.auth-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== SEARCH OVERLAY ========== */
/* Search bar inline (page d'accueil) */
.search-bar-inline {
  margin: 10px 1rem 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  overflow: hidden;
}
.search-bar-inline .search-input-wrapper {
  padding: 10px 14px;
  border-bottom: none;
}
.search-bar-inline .search-filters {
  border-top: 1px solid rgba(255,255,255,0.07);
}
.search-bar-inline .search-results {
  border-top: 1px solid rgba(255,255,255,0.07);
  max-height: 320px;
}

/* ── Light mode overrides ── */
[data-theme="light"] .search-bar-inline {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .search-bar-inline .search-filters {
  border-top-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .search-bar-inline .search-results {
  border-top-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .search-input {
  color: #1a1a2e;
}
[data-theme="light"] .search-input::placeholder {
  color: rgba(0,0,0,0.35);
}
[data-theme="light"] .search-input-icon {
  color: rgba(0,0,0,0.35);
}
[data-theme="light"] .search-close {
  color: rgba(0,0,0,0.35);
}
[data-theme="light"] .search-filter {
  color: rgba(0,0,0,0.55);
  border-color: rgba(0,0,0,0.15);
}
[data-theme="light"] .search-filter:hover {
  color: #1a1a2e;
  border-color: rgba(0,0,0,0.35);
}
[data-theme="light"] .search-filter.active {
  background: #d4a017;
  color: #fff;
  border-color: #d4a017;
}
[data-theme="light"] .search-results {
  background: #fff;
}
[data-theme="light"] .search-result-item:hover {
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .search-result-name {
  color: #1a1a2e;
}
[data-theme="light"] .search-result-meta {
  color: rgba(0,0,0,0.5);
}
[data-theme="light"] .search-hint {
  color: rgba(0,0,0,0.35);
}
[data-theme="light"] .search-no-results {
  color: rgba(0,0,0,0.4);
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 60px;
  animation: fadeIn 0.2s ease;
}

.search-overlay.hidden {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.search-panel {
  width: 90%;
  max-width: 540px;
  background: #16213e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: slideDown 0.25s ease;
}

@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Input wrapper */
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.search-input-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1rem;
  color: #fff;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.search-close {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}

.search-close:hover {
  color: #e94560;
  background: rgba(233, 69, 96, 0.1);
}

/* Filtres */
.search-filters {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
}

.search-filter {
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.search-filter:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.search-filter.active {
  background: #d4a017;
  color: #1a1a2e;
  border-color: #d4a017;
}

/* Résultats */
.search-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 10px 0;
}

.search-results::-webkit-scrollbar {
  width: 4px;
}

.search-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

.search-hint {
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8125rem;
  padding: 24px 16px;
}

/* Un résultat */
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.search-result-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.search-result-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-type {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.search-result-type.type-artist {
  background: rgba(212, 160, 23, 0.2);
  color: #d4a017;
}

.search-result-type.type-song {
  background: rgba(233, 69, 96, 0.2);
  color: #e94560;
}

.search-result-type.type-album {
  background: rgba(15, 52, 96, 0.5);
  color: #7eb8da;
}

.search-result-type.type-orchestre {
  background: rgba(46, 196, 182, 0.2);
  color: #2ec4b6;
}

.search-result-type.type-compilation {
  background: rgba(255, 159, 28, 0.2);
  color: #ff9f1c;
}

.search-result-type.type-page {
  background: rgba(108, 99, 255, 0.2);
  color: #a89cff;
}

.search-no-results {
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8125rem;
  padding: 32px 16px;
}

.search-no-results svg {
  margin: 0 auto 8px;
  opacity: 0.3;
}

/* ========== PAGE ARTISTE — Hero ========== */
.artist-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-color: #1a1a2e; /* fallback quand pas de photo */
}
.artist-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.35);
  transform: scale(1.15);
  z-index: 0;
}
.artist-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 6px 16px 8px;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
}
.artist-hero-img-wrapper {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  border: 5px solid #e94560;
}
.artist-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artist-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.artist-hero-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0;
  line-height: 1.1;
}
.artist-hero-group {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.artist-hero-external-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
}
.artist-hero-external-links.hidden {
  display: none;
}
.artist-external-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.1);
}
.artist-external-link:hover {
  background: rgba(255,255,255,0.2);
}
.artist-external-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.artist-external-link-icon,
.artist-external-link-img {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  object-fit: contain;
}
.artist-hero-badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* ========== Interactions artiste (like/unlike/comment dans le hero) ========== */
.artist-interact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 36px;
  height: 34px;
  border: none;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 10px;
  font-size: 0.8rem;
  font-family: inherit;
}
.artist-interact-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.artist-interact-btn.active-like {
  background: rgba(233, 69, 96, 0.25);
  color: #e94560;
}
.artist-interact-btn.active-like svg {
  fill: currentColor;
}
.artist-interact-btn.active-unlike {
  background: rgba(255, 165, 0, 0.25);
  color: #ffa500;
}
.artist-interact-btn.active-unlike svg {
  fill: currentColor;
}
.artist-interact-count {
  font-size: 0.75rem;
  min-width: 10px;
  text-align: center;
}

/* Light mode — hero : forcer le texte en blanc malgré [data-theme="light"] main h2 */
[data-theme="light"] .artist-hero-name {
  color: #fff;
}
[data-theme="light"] .artist-hero-group {
  color: rgba(255, 255, 255, 0.7);
}

/* Light mode — boutons d'interaction (hors hero, fond clair) */
[data-theme="light"] .artist-interact-btn {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.65);
}
[data-theme="light"] .artist-interact-btn:hover {
  background: rgba(0, 0, 0, 0.13);
  color: rgba(0, 0, 0, 0.9);
}
[data-theme="light"] .artist-interact-btn.active-like {
  background: rgba(233, 69, 96, 0.15);
  color: #c0304a;
}
[data-theme="light"] .artist-interact-btn.active-unlike {
  background: rgba(184, 134, 11, 0.15);
  color: #b8860b;
}

/* Light mode — boutons d'interaction dans le hero (fond toujours sombre) */
[data-theme="light"] .artist-hero .artist-interact-btn {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .artist-hero .artist-interact-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
[data-theme="light"] .artist-hero .artist-interact-btn.active-like {
  background: rgba(233, 69, 96, 0.3);
  color: #e94560;
}
[data-theme="light"] .artist-hero .artist-interact-btn.active-unlike {
  background: rgba(255, 165, 0, 0.3);
  color: #ffa500;
}

@media (max-width: 480px) {
  .artist-hero-img-wrapper { width: 90px; height: 90px; }
  .artist-hero-name { font-size: 1.5rem; }
  .artist-hero-content { padding: 18px 12px 14px; gap: 12px; }
}

/* ========== PAGE ARTISTE — Onglets ========== */
.artist-tabs-bar {
  display: flex;
  position: relative;
  border-bottom: 2px solid rgba(255,255,255,0.08);
  max-width: 72rem;
  margin: 0 auto;
  width: 100%;
}
.artist-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s;
  font-family: inherit;
}
.artist-tab:hover {
  color: rgba(255,255,255,0.8);
}
.artist-tab.active {
  color: #d4a017;
}
.artist-tab svg {
  width: 16px;
  height: 16px;
}
.tab-indicator {
  position: absolute;
  bottom: -2px;
  height: 3px;
  background: #d4a017;
  border-radius: 3px 3px 0 0;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.artist-tab-panel {
  display: none;
}
.artist-tab-panel.active {
  display: block;
}
.artist-empty-msg {
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 0.875rem;
  padding: 32px 16px;
}

/* Biographie & descriptions vidéos : neutralise les couleurs inline du HTML Wikipedia */
#biographieContent img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 1rem;
}
#biographieContent,
.avli-desc {
  color: var(--text-primary);
}
#biographieContent *,
.avli-desc * {
  color: inherit !important;
  background-color: transparent !important;
}
#biographieContent a,
.avli-desc a {
  color: var(--link-gold) !important;
}
[data-theme="light"] #biographieContent,
[data-theme="light"] .avli-desc {
  color: var(--text-primary);
}

/* Disclaimer YouTube sous l'onglet Vidéos */
.artist-videos-disclaimer {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid rgba(255, 80, 80, 0.5);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 10px 0 14px;
  line-height: 1.45;
}
[data-theme="light"] .artist-videos-disclaimer {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.03);
  border-left-color: rgba(200, 0, 0, 0.35);
}

/* ========== Albums row (sélecteur horizontal) ========== */
.albums-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 12px;
  scroll-snap-type: x proximity;
}
.albums-row::-webkit-scrollbar { height: 3px; }
.albums-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }

.album-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  scroll-snap-align: start;
}
.album-pill:hover {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.album-pill.active {
  background: #d4a017;
  color: #1a1a2e;
  border-color: #d4a017;
}
.album-pill-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.album-pill-noimg {
  font-size: 16px;
  line-height: 1;
}
.album-pill-name {
  font-weight: 600;
}
.album-pill-year {
  opacity: 0.6;
  font-size: 0.65rem;
}

/* ========== Album header (dans la tracklist) ========== */
.album-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.album-header-cover {
  width: 56px;
  height: 56px;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
}
.album-header-nocover {
  width: 56px;
  height: 56px;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.album-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.album-header-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #fff;
}
.album-header-year {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
}
.album-header-count {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
}
.album-play-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 9999px;
  border: none;
  background: #e94560;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.album-play-all-btn:hover {
  background: #d63a54;
  transform: scale(1.04);
}
.album-play-all-btn svg {
  width: 16px;
  height: 16px;
}

/* Album interaction buttons (2e ligne dans le header) */
.album-interact-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.album-interact-btns .artist-interact-btn {
  padding: 4px 10px;
  font-size: 0.7rem;
  gap: 4px;
}
.album-interact-btns .artist-interact-btn svg {
  width: 14px;
  height: 14px;
}

/* ========== Track row (liste de pistes) ========== */
.audio-tracklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.track-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s;
}
.track-row:hover {
  background: rgba(255,255,255,0.06);
}
.track-row.playing {
  background: rgba(212,160,23,0.12);
}
.track-row.playing .track-title {
  color: #d4a017;
}
.track-row.track-unavailable {
  opacity: 0.4;
  cursor: default;
}

.track-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.track-top-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

.track-num {
  width: 22px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

.track-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  word-break: break-word;
}

.track-duration {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
}

.track-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}
.track-play-icon svg {
  width: 20px;
  height: 20px;
}
.track-row:hover .track-play-icon {
  color: #d4a017;
}
.track-row.playing .track-play-icon {
  color: #d4a017;
}

.track-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  padding: 0;
}
.track-add-btn:hover {
  background: rgba(233,69,96,0.15);
  color: #e94560;
}
.track-add-btn svg {
  width: 14px;
  height: 14px;
}

/* Light mode — track list */
[data-theme="light"] .track-row:hover {
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .track-row.playing {
  background: rgba(212,160,23,0.08);
}
[data-theme="light"] .track-num {
  color: rgba(0,0,0,0.35);
}
[data-theme="light"] .track-title {
  color: rgba(0,0,0,0.85);
}
[data-theme="light"] .track-row.playing .track-title {
  color: #b8860b;
}
[data-theme="light"] .track-duration {
  color: rgba(0,0,0,0.35);
}
[data-theme="light"] .track-play-icon {
  color: rgba(0,0,0,0.35);
}
[data-theme="light"] .track-row:hover .track-play-icon,
[data-theme="light"] .track-row.playing .track-play-icon {
  color: #b8860b;
}
[data-theme="light"] .track-add-btn {
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.35);
}
[data-theme="light"] .track-add-btn:hover {
  background: rgba(233,69,96,0.1);
  color: #e94560;
}
[data-theme="light"] .album-header {
  border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .album-header-name {
  color: var(--text-primary);
}
[data-theme="light"] .album-header-year {
  color: rgba(0,0,0,0.4);
}
[data-theme="light"] .album-header-count {
  color: rgba(0,0,0,0.4);
}
[data-theme="light"] .album-header-nocover {
  background: rgba(0,0,0,0.06);
}
[data-theme="light"] .album-interact-btns {
  border-top-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .artist-tabs-bar {
  border-bottom-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .artist-tab {
  color: rgba(0,0,0,0.45);
}
[data-theme="light"] .artist-tab:hover {
  color: rgba(0,0,0,0.75);
}
[data-theme="light"] .artist-tab.active {
  color: #b8860b;
}
[data-theme="light"] .artist-empty-msg {
  color: rgba(0,0,0,0.35);
}

/* Light mode — album pills */
[data-theme="light"] .album-pill {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.65);
}
[data-theme="light"] .album-pill:hover {
  border-color: rgba(0,0,0,0.3);
  color: rgba(0,0,0,0.9);
}
[data-theme="light"] .album-pill.active {
  background: #d4a017;
  color: #1a1a2e;
  border-color: #d4a017;
}

/* Light mode — album header hardcoded white colors */
[data-theme="light"] .album-header-name {
  color: #1a1a2e;
}
[data-theme="light"] .album-header-nocover {
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.35);
}

/* ========== Artiste — Vidéo cards ========== */
.artist-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.media-card {
  background: rgba(255,255,255,0.04);
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.media-card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.media-card-icon {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.2);
}
.media-card-info {
  padding: 10px 12px;
}
.media-card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.media-card-yt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 10px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: #e94560;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.media-card-yt-btn:hover { background: #d63a54; }
.media-card-yt-facade {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.media-card-yt-facade .yt-facade-thumb {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-card-yt-facade .yt-facade-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.media-card-yt-facade .yt-facade-play svg {
  width: 68px;
  height: 48px;
}
.media-card-yt-facade:hover .yt-facade-play { opacity: 1; }
.media-card-yt-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.media-card-yt-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.media-card-video { width: 100%; border-radius: 0 0 0.75rem 0.75rem; }
.media-card-unavailable {
  display: block;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
}

/* Video media wrapper — provides relative context for button overlay */
.video-media-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Interactions like/unlike/commentaire — colonne verticale à gauche de la pochette de compilation */
.comp-interact-btns {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 10;
  pointer-events: auto;
}
.comp-interact-btns .artist-interact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  font-size: 0.65rem;
  min-width: 36px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
  transition: opacity 0.2s;
}
.comp-interact-btns .artist-interact-btn:hover {
  background: transparent;
  opacity: 0.75;
}
.comp-interact-btns .artist-interact-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Interaction buttons — floating column on the left side of the video */
.video-interact-btns {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 10;
  pointer-events: auto;
}
.video-interact-btns .artist-interact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  font-size: 0.65rem;
  min-width: 36px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
  transition: opacity 0.2s;
}
.video-interact-btns .artist-interact-btn:hover {
  background: transparent;
  opacity: 0.75;
}
.video-interact-btns .artist-interact-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ========== Artiste — Liste vidéos style YouTube ========== */
.artist-video-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.avli-item {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1.5px solid #0088cc;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.avli-item:hover { background: var(--scrollbar-track); border-color: #00aaee; }
.avli-thumb {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  min-height: 112px;
  background: #000;
  border-radius: 0.75rem 0 0 0.75rem;
  overflow: hidden;
}
.avli-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.avli-item:hover .avli-thumb img { transform: scale(1.07); }
.avli-no-thumb {
  width: 100%;
  height: 100%;
  min-height: 112px;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-placeholder);
}
.avli-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.6) 0%,
    rgba(0,0,0,0.15) 55%,
    rgba(0,0,0,0.04) 100%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
}
.avli-item:hover .avli-play-overlay { opacity: 1; }
/* Aperçu vidéo muet au survol */
.avli-preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none; /* le clic passe au travers pour ouvrir le popup */
}
.avli-preview-frame.avli-preview-visible { opacity: 1; }
/* Pendant l'aperçu : geler le zoom image et masquer le bouton play */
.avli-previewing .avli-thumb img { transform: scale(1) !important; }
.avli-previewing .avli-play-overlay { opacity: 0 !important; }

/* Bouton play circulaire animé */
.avli-play-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.65);
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.22s ease,
    box-shadow 0.25s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}
.avli-item:hover .avli-play-btn {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 6px 28px rgba(0,0,0,0.55);
}
.avli-play-btn svg {
  width: 20px;
  height: 20px;
  color: #1a1a2e;
  margin-left: 3px;
}
.avli-info {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.avli-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 6px;
  line-height: 1.35;
}
.avli-desc {
  font-size: 0.775rem;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.avli-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  flex-wrap: wrap;
}
.avli-actions .artist-interact-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--bg-card);
  border: 1px solid var(--input-border);
  color: var(--text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.2s;
}
.avli-actions .artist-interact-btn:hover { background: var(--scrollbar-thumb); color: var(--text-primary); }
.avli-actions .artist-interact-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
@media (max-width: 480px) {
  .avli-thumb { width: 130px; min-height: 80px; }
  .avli-title { font-size: 0.8rem; }
  .avli-info { padding: 8px 10px; }
}

/* ========== Artiste — Popup lecteur vidéo ========== */
.avp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.18s ease;
}
.avp-overlay.hidden { display: none; }
.avp-box {
  background: var(--bg-body);
  border: 1px solid var(--input-border);
  border-radius: 0.875rem;
  width: 100%;
  max-width: 780px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.avp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--input-border);
}
.avp-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avp-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.2s;
}
.avp-close:hover { color: var(--text-primary); }
.avp-player {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
}
.avp-player iframe,
.avp-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.avp-footer {
  padding: 12px 16px;
}
.avp-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.55;
}
.avp-interact {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.avp-interact .artist-interact-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--bg-card);
  border: 1px solid var(--input-border);
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s;
}
.avp-interact .artist-interact-btn:hover { background: var(--scrollbar-thumb); color: var(--text-primary); }
.avp-interact .artist-interact-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ========== Popup — navigation file de lecture ========== */
.avp-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.avp-nav.hidden { display: none; }
.avp-nav-btn {
  background: none;
  border: 1px solid var(--input-border);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.avp-nav-btn:hover:not(:disabled) { background: var(--bg-card); color: var(--text-primary); }
.avp-nav-btn:disabled { opacity: 0.3; cursor: default; }
.avp-nav-btn svg { width: 18px; height: 18px; }
.avp-counter {
  font-size: 0.75rem;
  color: var(--text-faint);
  white-space: nowrap;
  min-width: 36px;
  text-align: center;
}

/* ========== Popup — bande miniatures ========== */
.avp-playlist {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--input-border);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.avp-playlist.hidden { display: none; }
.avp-strip-item {
  flex: 0 0 auto;
  width: 88px;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.15s;
}
.avp-strip-item:hover { border-color: var(--accent, #e94560); transform: translateY(-2px); }
.avp-strip-item.active { border-color: var(--accent, #e94560); }
.avp-strip-item img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.avp-strip-no-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
}
.avp-strip-no-thumb svg { width: 20px; height: 20px; }
.avp-strip-title {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  padding: 3px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--bg-card);
}
.avp-strip-item.active .avp-strip-title { color: var(--accent, #e94560); }

/* ========== Onglet vidéos — bouton "Lire tout" ========== */
.videos-tab-header {
  display: flex;
  align-items: center;
  padding: 8px 0 12px;
}
.videos-tab-header.hidden { display: none; }
.play-all-videos-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 9999px;
  background: var(--accent, #e94560);
  color: #fff;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.play-all-videos-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.play-all-videos-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Bouton "Lire tout" intégré dans la bande de miniatures */
.avp-strip-play-all {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-right: 10px;
  margin-right: 4px;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.avp-strip-play-all-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--accent, #e94560);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.avp-strip-play-all-btn svg { width: 22px; height: 22px; }
.avp-strip-play-all-btn:hover { opacity: 0.85; transform: scale(1.04); }

/* ========== Wrapper du bouton "Lire tout" dans le popup ========== */
.avp-play-all-wrap {
  padding: 10px 0 2px;
  display: flex;
  justify-content: center;
}
.avp-play-all-wrap.hidden { display: none; }

/* ========== Onglet Audios/Clips — grille de clips ========== */
.ac-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 0.5rem 0 0.6rem;
}
.ac-section-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.ac-section-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 0.75rem 0;
}
.ac-clips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) { .ac-clips-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .ac-clips-grid { grid-template-columns: repeat(4, 1fr); } }
.ac-clip-card {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.07);
  transition: border-color .2s, transform .2s;
}
.ac-clip-card:hover { border-color: var(--accent, #e94560); transform: translateY(-2px); }
.ac-clip-thumb {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  overflow: hidden;
}
.ac-clip-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: opacity .2s;
}
.ac-clip-card:hover .ac-clip-thumb img { opacity: 1; }
.ac-clip-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ac-clip-play svg {
  width: 34px;
  height: 34px;
  fill: white;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.75));
  opacity: .85;
}
.ac-clip-title {
  font-size: 0.72rem;
  color: rgba(255,255,255,.8);
  padding: 5px 7px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.ac-album-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 0.5rem;
}
@media (min-width: 480px) { .ac-album-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .ac-album-grid { grid-template-columns: repeat(4, 1fr); } }
.ac-album-card {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.07);
  transition: border-color .2s, transform .2s;
}
.ac-album-card:hover { border-color: var(--accent, #e94560); transform: translateY(-2px); }
.ac-album-cover {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* carré */
  background: #111;
  overflow: hidden;
}
.ac-album-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: opacity .2s;
}
.ac-album-card:hover .ac-album-cover img { opacity: 1; }
.ac-album-year { opacity: .5; font-size: 0.65rem; }
.ac-audios-hint {
  font-size: 0.72rem;
  color: rgba(255,255,255,.35);
  text-align: center;
  padding: 0.5rem 0 0.25rem;
}
.ac-audios-hint strong { color: rgba(255,255,255,.55); }
.ac-playlist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) { .ac-playlist-grid { grid-template-columns: repeat(3, 1fr); } }
.ac-pl-card {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.07);
  transition: border-color .2s, transform .2s;
}
.ac-pl-card:hover { border-color: var(--accent, #e94560); transform: translateY(-2px); }
.ac-pl-cover {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  overflow: hidden;
}
.ac-pl-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: opacity .2s;
}
.ac-pl-card:hover .ac-pl-cover img { opacity: 1; }
.ac-pl-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ac-pl-overlay svg {
  width: 36px;
  height: 36px;
  fill: white;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.75));
  opacity: .85;
}
.ac-pl-count {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(0,0,0,.65);
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
}

/* ========== Artiste — Biographie ========== */
.artist-bio-content {
  max-width: 72ch;
  line-height: 1.7;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.8);
}
.artist-bio-content p {
  margin-bottom: 1rem;
}

/* ========== PAGE COMPILATION ========== */
.pl-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.pl-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 9999px;
  border: none;
  background: linear-gradient(135deg, #e94560, #d4a017);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.pl-create-btn svg { width: 18px; height: 18px; }
.pl-create-btn:hover { transform: scale(1.03); box-shadow: 0 4px 16px rgba(233,69,96,0.4); }

.pl-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Cards */
.pl-card {
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  transition: border-color 0.2s;
}
.pl-card:hover { border-color: rgba(255,255,255,0.15); }

.pl-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
}
.pl-card-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.pl-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #d4a017;
}
.pl-card-icon svg { width: 20px; height: 20px; }
.pl-card-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-card-meta {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  margin: 2px 0 0;
}
.pl-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pl-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 0.2s;
}
.pl-action-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.pl-action-btn svg { width: 16px; height: 16px; }
.pl-action-danger { color: #e94560; }
.pl-action-danger:hover { background: rgba(233,69,96,0.15); color: #e94560; }
.pl-chevron {
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,0.3);
  transition: transform 0.25s;
}
.pl-card.open .pl-chevron { transform: rotate(180deg); }

/* Tracks body */
.pl-tracks-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.pl-card.open .pl-tracks-body {
  max-height: 2000px;
}
.pl-track-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 14px 8px 20px;
  border-top: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}
.pl-track-row:hover { background: rgba(255,255,255,0.03); }
.pl-track-num {
  width: 20px;
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.pl-track-info {
  flex: 1;
  min-width: 0;
}
.pl-track-labels {
  flex: 1;
  min-width: 0;
}
.pl-track-interactions {
  padding-left: 0;
  margin-top: 2px;
}
.pl-track-title {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-track-artist {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
}
.pl-track-dur {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.pl-track-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.2s;
}
.pl-track-remove:hover { background: rgba(233,69,96,0.15); color: #e94560; }
.pl-track-remove svg { width: 14px; height: 14px; }

/* Modales playlist */
.pl-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pl-modal {
  background: #16213e;
  border-radius: 1rem;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.pl-modal-large { max-width: 540px; max-height: 80vh; overflow-y: auto; }
.pl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pl-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.pl-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.2s;
}
.pl-modal-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.pl-modal-close svg { width: 16px; height: 16px; }
.pl-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.pl-modal-btn-cancel,
.pl-modal-btn-confirm,
.pl-modal-btn-danger {
  padding: 8px 18px;
  border-radius: 9999px;
  border: none;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.pl-modal-btn-cancel {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
}
.pl-modal-btn-cancel:hover { background: rgba(255,255,255,0.14); color: #fff; }
.pl-modal-btn-confirm {
  background: #d4a017;
  color: #1a1a2e;
}
.pl-modal-btn-confirm:hover { background: #c29515; }
.pl-modal-btn-danger {
  background: #e94560;
  color: #fff;
}
.pl-modal-btn-danger:hover { background: #d63a54; }

/* Modale ajout de pistes */
.pl-artist-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 9999px;
  padding: 6px 12px;
  margin-bottom: 12px;
}
.pl-artist-search-icon { width: 18px; height: 18px; color: rgba(255,255,255,0.35); flex-shrink: 0; }
.pl-artist-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 0.8125rem;
  outline: none;
  font-family: inherit;
}
.pl-artist-search-input::placeholder { color: rgba(255,255,255,0.3); }
.pl-add-body { max-height: 50vh; overflow-y: auto; }
.pl-artist-list { display: flex; flex-direction: column; gap: 4px; }
.pl-artist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s;
}
.pl-artist-item:hover { background: rgba(255,255,255,0.06); }
.pl-artist-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pl-artist-name {
  font-size: 0.8125rem;
  color: #fff;
  font-weight: 500;
}
.pl-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #d4a017;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;
  padding: 0;
  font-family: inherit;
}
.pl-back-btn svg { width: 18px; height: 18px; }
.pl-add-artist-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 0.5rem;
}
.pl-album-grid { display: flex; flex-direction: column; gap: 4px; }
.pl-add-track-list { display: flex; flex-direction: column; gap: 2px; }
.pl-track-panel { }

/* ========== Playlist modal buttons (art-pl-choice-btn) ========== */
.art-pl-choice-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.art-pl-choice-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}
.art-pl-choice-btn:disabled,
.art-pl-choice-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========== TRACK INTERACTIONS (like, dislike, compteur, commentaire) ========== */
.track-interactions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 26px;
}

.track-play-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  cursor: default;
}
.track-play-count svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}
.play-count-num {
  min-width: 14px;
  text-align: center;
}

.like-count-num,
.unlike-count-num {
  font-size: 0.65rem;
  min-width: 8px;
  text-align: center;
  line-height: 1;
}

.track-like-btn,
.track-dislike-btn,
.track-comment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 28px;
  height: 28px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 6px;
  flex-shrink: 0;
  font-size: 0.65rem;
  font-family: inherit;
}
.track-like-btn svg,
.track-dislike-btn svg,
.track-comment-btn svg {
  width: 15px;
  height: 15px;
}

.track-like-btn:hover {
  background: rgba(233, 69, 96, 0.15);
  color: #e94560;
}
.track-like-btn.active {
  background: rgba(233, 69, 96, 0.2);
  color: #e94560;
}

.track-dislike-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}
.track-dislike-btn.active {
  background: rgba(255, 165, 0, 0.2);
  color: #ffa500;
}

.track-comment-btn:hover {
  background: rgba(212, 160, 23, 0.15);
  color: #d4a017;
}

/* Light mode */
[data-theme="light"] .track-play-count {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .track-like-btn,
[data-theme="light"] .track-dislike-btn,
[data-theme="light"] .track-comment-btn {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .track-like-btn:hover {
  background: rgba(233, 69, 96, 0.1);
  color: #e94560;
}
[data-theme="light"] .track-like-btn.active {
  background: rgba(233, 69, 96, 0.15);
  color: #e94560;
}
[data-theme="light"] .track-dislike-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .track-dislike-btn.active {
  background: rgba(255, 165, 0, 0.15);
  color: #e68a00;
}
[data-theme="light"] .track-comment-btn:hover {
  background: rgba(212, 160, 23, 0.1);
  color: #b8860b;
}

/* Responsive : masquer les labels sur petit écran */
@media (max-width: 480px) {
  .track-interactions {
    gap: 3px;
  }
  .track-like-btn,
  .track-dislike-btn,
  .track-comment-btn {
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    font-size: 0.6rem;
  }
  .track-like-btn svg,
  .track-dislike-btn svg,
  .track-comment-btn svg {
    width: 13px;
    height: 13px;
  }
  .track-play-count {
    font-size: 0.6rem;
  }
  .track-play-count svg {
    width: 12px;
    height: 12px;
  }
}

/* ========== MODALE COMMENTAIRE ========== */
.comment-modal {
  max-width: 480px;
  width: 92%;
  background: linear-gradient(160deg, #16213e 0%, #0f3460 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.2rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: commentSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes commentSlideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.comment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
}
.comment-modal-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-modal-icon {
  width: 20px;
  height: 20px;
  color: #d4a017;
  flex-shrink: 0;
}
.comment-modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.comment-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #d4a017;
  color: #1a1a2e;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.comment-count-badge:empty {
  display: none;
}
.comment-modal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.comment-modal-close:hover {
  color: #e94560;
  background: rgba(233, 69, 96, 0.1);
}
.comment-modal-close svg {
  width: 20px;
  height: 20px;
}
.comment-track-name {
  padding: 10px 16px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 6px;
}
.comment-track-name::before {
  content: '♪';
  color: #d4a017;
  font-size: 0.9rem;
}
.comment-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 16px;
  scroll-behavior: smooth;
}
.comment-list::-webkit-scrollbar {
  width: 4px;
}
.comment-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}
.comment-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8125rem;
  padding: 30px 0;
}
.comment-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 0;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8125rem;
}
.comment-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #d4a017;
  border-radius: 50%;
  animation: commentSpin 0.7s linear infinite;
}
@keyframes commentSpin {
  to { transform: rotate(360deg); }
}
.comment-item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  animation: commentFadeIn 0.2s ease;
}
@keyframes commentFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.comment-item:last-child {
  border-bottom: none;
}
.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.comment-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4a017, #e94560);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}
.comment-user {
  font-size: 0.8rem;
  font-weight: 600;
  color: #d4a017;
}
.comment-date {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
}
.comment-text {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0;
  padding-left: 36px;
}
.comment-delete-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.comment-delete-btn:hover {
  color: #e94560;
  background: rgba(233, 69, 96, 0.12);
}
.comment-delete-btn svg {
  width: 15px;
  height: 15px;
}
.comment-login-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.comment-login-hint svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.comment-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.1);
}
.comment-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 9px 14px;
  color: #fff;
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.comment-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.comment-input:focus {
  border-color: #d4a017;
  box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.15);
}
.comment-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #d4a017;
  color: #1a1a2e;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.comment-send-btn:hover {
  background: #e5b422;
  transform: scale(1.05);
}
.comment-send-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.comment-send-btn svg {
  width: 18px;
  height: 18px;
}

/* ========== Light mode — page compilation / playlist ========== */
[data-theme="light"] .pl-card {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .pl-card:hover { border-color: rgba(0,0,0,0.18); }
[data-theme="light"] .pl-card-name { color: var(--text-primary, #1a1a2e); }
[data-theme="light"] .pl-card-meta { color: rgba(0,0,0,0.45); }
[data-theme="light"] .pl-card-icon { background: rgba(0,0,0,0.06); }
[data-theme="light"] .pl-action-btn {
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.5);
}
[data-theme="light"] .pl-action-btn:hover { background: rgba(0,0,0,0.1); color: rgba(0,0,0,0.85); }
[data-theme="light"] .pl-chevron { color: rgba(0,0,0,0.3); }
[data-theme="light"] .pl-track-row { border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .pl-track-row:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .pl-track-num   { color: rgba(0,0,0,0.3); }
[data-theme="light"] .pl-track-title { color: rgba(0,0,0,0.85); }
[data-theme="light"] .pl-track-artist { color: rgba(0,0,0,0.4); }
[data-theme="light"] .pl-track-dur   { color: rgba(0,0,0,0.35); }
[data-theme="light"] .pl-track-remove { color: rgba(0,0,0,0.3); }
[data-theme="light"] .track-play-count { color: rgba(0,0,0,0.45); }

/* Badge compteur commentaire dans la liste de pistes */
.comment-count-num {
  font-size: 0.65rem;
  min-width: 8px;
  text-align: center;
  line-height: 1;
}
.comment-count-num:empty {
  display: none;
}

/* Bouton commentaire dans le lecteur drawer */
.player-btn-comment {
  position: relative;
}
.player-comment-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #d4a017;
  color: #1a1a2e;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.player-comment-badge:empty {
  display: none;
}

/* Light mode overrides */
[data-theme="light"] .comment-modal {
  background: linear-gradient(160deg, #f8f9fa 0%, #e9ecef 100%);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .comment-modal-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .comment-modal-title {
  color: #333;
}
[data-theme="light"] .comment-track-name {
  color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .comment-empty,
[data-theme="light"] .comment-loading {
  color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .comment-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .comment-text {
  color: rgba(0, 0, 0, 0.75);
}
[data-theme="light"] .comment-date {
  color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .comment-input-wrap {
  border-top-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .comment-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: #333;
}
[data-theme="light"] .comment-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .comment-delete-btn {
  color: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .comment-delete-btn:hover {
  color: #e94560;
  background: rgba(233, 69, 96, 0.08);
}
[data-theme="light"] .comment-login-hint {
  color: rgba(0, 0, 0, 0.4);
  border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .comment-spinner {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: #d4a017;
}

/* ========== TOAST NOTIFICATION ========== */
.pl-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  animation: toastSlideUp 0.3s ease;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
@keyframes toastSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.pl-toast.hidden {
  display: none;
}
.pl-toast--success {
  background: linear-gradient(135deg, #0f3460, #16213e);
  color: #d4a017;
  border: 1px solid rgba(212, 160, 23, 0.3);
}
.pl-toast--error {
  background: linear-gradient(135deg, #3d1525, #2d1020);
  color: #e94560;
  border: 1px solid rgba(233, 69, 96, 0.3);
}
[data-theme="light"] .pl-toast--success {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  color: #2e7d32;
  border-color: rgba(46, 125, 50, 0.2);
}
[data-theme="light"] .pl-toast--error {
  background: linear-gradient(135deg, #fce4ec, #f8bbd0);
  color: #c62828;
  border-color: rgba(198, 40, 40, 0.2);
}