/* ═══════════════════════════════════════════════════════════════
   SMYLE PLAY — PLUG WATT Visual Identity
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg: #050508; --white: #e8e8f0; --violet: #8800ff; --violet-light: #cc88ff;
  --electric: #0055ff; --gap: 24px; --radius: 3px; --player-h: 80px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Fond de page : voile sombre translucide au-dessus du calque pétrole
   (watt-ambient.js, canvas en z-index:-1). html garde le noir d'origine en
   secours si WebGL est absent. Réversible : remettre body background var(--bg). */
html { background: var(--bg); }
body { background: rgba(5,5,8,.58); color: var(--white); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  min-height: 100vh; overflow-x: hidden; padding-bottom: var(--player-h); }
button { font-family: inherit; }

/* ── HEADER ──────────────────────────────────────────────────── */
header { display: flex; align-items: center; padding: 18px 48px; gap: 12px;
  border-bottom: 1px solid rgba(136,0,255,.07); position: sticky; top: 0;
  background: rgba(5,5,8,.92); backdrop-filter: blur(16px); z-index: 100; }
.header-logo { display: flex; align-items: center; gap: 12px; flex: 1; }
.header-logo-icon { width: 30px; height: 40px; flex-shrink: 0; transform: rotate(-11deg); transform-origin: 50% 60%; }
.logo-text { font-size: 15px; font-weight: 900; letter-spacing: .35em; text-transform: uppercase;
  color: #220044; text-shadow: 0 0 4px #aa00ff, 0 0 12px #8800ff, 0 0 24px #660099, 0 0 48px #440066;
  animation: neon-v 3.5s infinite; }
@keyframes neon-v {
  0%,17%,19%,21%,50%,52%,100% { color:#220044; text-shadow:0 0 4px #aa00ff,0 0 12px #8800ff,0 0 24px #660099,0 0 48px #440066; }
  18%,51% { color:#0a0015; text-shadow:none; } 20% { color:#1a0030; text-shadow:0 0 2px #8800ff; }
}
#authArea { display: flex; align-items: center; gap: 4px; margin-right: 8px; position: relative; }
/* Raccourci profil artiste — silhouette à gauche de la bulle SM.
   Click direct → /artiste/<slug> (pas de dropdown). */
.profile-quick-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: rgba(200,160,255,.72);
  background: rgba(136, 0, 255, 0.08);
  border: 1px solid rgba(136, 0, 255, 0.22);
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.profile-quick-btn:hover {
  background: rgba(136, 0, 255, 0.22);
  color: #e8d0ff;
  border-color: rgba(200, 160, 255, 0.55);
  transform: translateY(-1px);
}
.profile-quick-btn:active { transform: translateY(0); }
.profile-quick-btn svg { display: block; }
.auth-btn { background: none; border: 1px solid rgba(136,0,255,.22); color: rgba(200,160,255,.65);
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase; padding: 6px 14px;
  border-radius: 2px; cursor: pointer; transition: all .25s; }
.auth-btn:hover { border-color: rgba(136,0,255,.55); color: #cc88ff; }
.user-badge {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  padding: 2px 4px 2px 2px; border-radius: 999px;
  transition: background .18s ease;
  position: relative;
}
.user-badge:hover { background: rgba(136, 0, 255, 0.12); }
.user-avatar { width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg,#8800ff,#0055ff); display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 6px rgba(136,0,255,0.25);
}
.user-badge-caret {
  color: rgba(200,160,255,0.55);
  font-size: 10px;
  margin-right: 2px;
  transition: transform .18s ease, color .18s ease;
}
.user-badge:hover .user-badge-caret { color: #cc88ff; }
.user-name { font-size: 9px; letter-spacing: .15em; color: rgba(200,160,255,.75); text-transform: uppercase; }

/* Dropdown user menu — s'ouvre sous le badge */
.user-menu {
  position: absolute;
  top: 48px;
  left: 0;
  min-width: 220px;
  background: rgba(10, 4, 26, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(136, 0, 255, 0.25);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255,255,255,0.02);
  padding: 8px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1000;
}
.user-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.user-menu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(136, 0, 255, 0.12);
  margin-bottom: 6px;
}
.user-menu-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg,#8800ff,#0055ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  box-shadow: 0 0 12px rgba(136,0,255,0.35);
  flex-shrink: 0;
}
.user-menu-info { min-width: 0; }
.user-menu-name {
  font-size: 13px; font-weight: 600; color: #e6ddff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 150px;
}
.user-menu-mail {
  font-size: 11px; color: rgba(200, 160, 255, 0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 150px;
}
.user-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  background: none;
  border: none;
  color: #cfbfff;
  font-family: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
  text-align: left;
}
.user-menu-item:hover {
  background: rgba(136, 0, 255, 0.15);
  color: #fff;
}
.user-menu-item svg { flex-shrink: 0; opacity: 0.75; }
.user-menu-item:hover svg { opacity: 1; }
.user-menu-sep {
  height: 1px;
  background: rgba(136, 0, 255, 0.12);
  margin: 6px 4px;
}
.user-menu-item-danger { color: #ff8a9a; }
.user-menu-item-danger:hover {
  background: rgba(255, 60, 80, 0.12);
  color: #ff6b7a;
}
.mix-toggle-btn { position: relative; background: none; border: 1px solid rgba(136,0,255,.2);
  /* P1-B12 (2026-05-11) : was rgba(136,0,255,.5) → ratio ~1.6:1 illisible.
     Passé à rgba(204,136,255,.85) = ratio ~5.5:1 (AA). */
  color: rgba(204,136,255,.85); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 2px; cursor: pointer; transition: all .25s; flex-shrink: 0; }
.mix-toggle-btn:hover { border-color: rgba(136,0,255,.5); color: var(--violet-light); }
.mix-count { position: absolute; top: -6px; right: -6px; background: var(--violet); color: #fff;
  font-size: 9px; font-weight: 700; width: 17px; height: 17px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; }
.mix-count.visible { display: flex; }

/* ── DÉCONNEXION — bouton icône visible dans le header ──────────────────
   Rendu visible par page-services.js dès que l'utilisateur est connecté.
   Teinté rouge discret pour signaler l'action destructive, mais pas
   agressif — juste une légère différence par rapport aux autres icônes. */
.header-logout-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,100,100,.18);
  color: rgba(255,140,140,.65);
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.header-logout-btn:hover {
  background: rgba(255,60,80,.12);
  border-color: rgba(255,60,80,.4);
  color: #ff8a9a;
}

/* ── BIBLIOTHÈQUE — bouton header (accès rapide aux achats) ─────────────
   Style aligné sur .mix-toggle-btn pour la cohérence, mais accent bleu
   électrique (brand DNA PLUG WATT) pour différencier visuellement les
   fonctions : MY MIX = écoute (violet), BIBLIOTHÈQUE = possessions (cyan). */
.library-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid rgba(0, 212, 255, .22);
  color: rgba(0, 212, 255, .62);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: all .25s;
  flex-shrink: 0;
}
.library-toggle-btn:hover {
  border-color: rgba(0, 212, 255, .55);
  color: #00d4ff;
}
.library-toggle-btn svg { opacity: .85; flex-shrink: 0; }
.library-toggle-btn:hover svg { opacity: 1; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero { padding: 52px 48px 36px; }
.hero-title { font-size: clamp(36px,6vw,72px); font-weight: 900; letter-spacing: .3em;
  text-transform: uppercase; color: #1a0030;
  text-shadow: 0 0 6px #aa00ff, 0 0 16px #8800ff, 0 0 32px #660099, 0 0 64px #440066;
  animation: neon-v-big 4.2s infinite; line-height: 1; }
@keyframes neon-v-big {
  0%,17%,19%,21%,50%,52%,100% { color:#1a0030; text-shadow:0 0 6px #aa00ff,0 0 18px #8800ff,0 0 36px #660099,0 0 72px #440066; }
  18%,51% { color:#05000f; text-shadow:none; } 20% { color:#0f0020; text-shadow:0 0 4px #8800ff; }
}
.hero-sub { font-size: 11px; letter-spacing: .35em; color: rgba(136,0,255,.35); text-transform: uppercase; margin-top: 14px; }

/* ── GRID ────────────────────────────────────────────────────── */
.playlists-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); padding: 0 48px; margin-bottom: 48px; }

/* ── CARD BASE ───────────────────────────────────────────────── */
.playlist-card { position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  aspect-ratio: 3/4; border: 1px solid rgba(136,0,255,.1); transition: border-color .35s, box-shadow .35s; }
.card-bg { position: absolute; inset: 0; transition: transform .6s ease; }
.playlist-card:hover .card-bg { transform: scale(1.04); }
.card-deco-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.card-content { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 28px 24px; z-index: 5; }
.card-neon { font-size: clamp(16px,2vw,24px); font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1; margin-bottom: 8px; }
.card-subtitle { font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(176,176,204,.5); margin-bottom: 20px; }
/* Sous-titre plus lisible sur le fond sombre de Sunset Lover */
.card-sunset .card-subtitle { color: rgba(255,220,185,.78); }
.card-play-hint { font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(176,176,204,.28); opacity: 0; transition: opacity .3s; }
.playlist-card:hover .card-play-hint { opacity: 1; }

/* ── SUNSET LOVER ──────────────────────────────────────────────────────── */
.card-sunset .card-bg {
  background: linear-gradient(to bottom,
    #07001c 0%, #1c0538 12%, #420a1e 26%, #781500 40%,
    #a83200 54%, #cc5a00 65%, #e07e00 74%,
    #f0a010 82%, #ffbe30 88%, #e88020 94%, #b04500 100%);
}
.sun-disc {
  position:absolute; width:96px; height:96px; border-radius:50%;
  bottom:32%; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, #ffffff 0%, #fff5b0 18%, #ffe060 38%, #ffb030 60%, rgba(255,100,0,.22) 80%, transparent 100%);
  box-shadow:0 0 55px 22px rgba(255,160,20,.55),0 0 110px 55px rgba(255,80,0,.28),0 0 180px 90px rgba(200,40,0,.12);
  z-index:2;
}
.sun-horizon {
  position:absolute; bottom:33%; left:0; right:0; height:5px;
  background:linear-gradient(to right, transparent 0%, rgba(255,200,60,.65) 25%, rgba(255,240,100,.92) 50%, rgba(255,200,60,.65) 75%, transparent 100%);
  filter:blur(2.5px);
}
.water-reflection {
  position:absolute; bottom:0; left:0; right:0; height:33%;
  background:linear-gradient(to bottom, rgba(255,130,20,.26) 0%, rgba(180,60,0,.14) 50%, rgba(20,5,0,.55) 100%);
}
.water-reflection::after {
  content:''; position:absolute; top:14%; left:12%; right:12%; height:2px;
  background:linear-gradient(to right, transparent, rgba(255,210,80,.6) 30%, rgba(255,255,180,.88) 50%, rgba(255,210,80,.6) 70%, transparent);
  box-shadow:0 9px 0 rgba(255,190,70,.32),0 18px 0 rgba(255,160,50,.16);
}
.card-sunset .card-neon { color:#ffb347; text-shadow:0 0 12px #ff8c42,0 0 30px #ff4d00,0 0 60px #ff8c42; animation:neon-warm 5s infinite; }
.card-sunset:hover { border-color:rgba(255,110,0,.55); box-shadow:0 0 24px rgba(255,90,0,.12),inset 0 0 30px rgba(255,80,0,.04); }
@keyframes neon-warm { 0%,19%,21%,54%,56%,100%{text-shadow:0 0 12px #ff8c42,0 0 30px #ff4d00,0 0 60px #ff8c42;opacity:1}20%,55%{text-shadow:none;opacity:.8}22%{text-shadow:0 0 8px #ff8c42;opacity:.9} }
.card-sunset.entering .card-bg   { animation:sunset-bg-enter 1.1s ease-out forwards; }
.card-sunset.entering .sun-disc  { animation:sun-sink 1.1s ease-in forwards; }
.card-sunset.entering .sun-horizon { animation:horizon-flash 1.1s ease-out forwards; }
.card-sunset.entering .card-content { animation:cdim 1.1s ease-out forwards; }
@keyframes sunset-bg-enter { 0%{filter:brightness(1)} 30%{filter:brightness(2.2) saturate(1.8) hue-rotate(-12deg)} 100%{filter:brightness(.58) saturate(1.4)} }
@keyframes sun-sink {
  0%   { transform:translateX(-50%) translateY(0);   opacity:1; filter:brightness(1); }
  40%  { transform:translateX(-50%) translateY(20px); opacity:.95; filter:brightness(1.4); }
  80%  { transform:translateX(-50%) translateY(62px); opacity:.55; filter:brightness(.8); }
  100% { transform:translateX(-50%) translateY(105px);opacity:0;  filter:brightness(.4); }
}
@keyframes horizon-flash { 0%{opacity:1;filter:blur(2.5px)} 40%{opacity:1;filter:blur(0px) brightness(3)} 100%{opacity:.4;filter:blur(4px)} }

/* ── JUNGLE OSMOSE ─────────────────────────────────────────────────────── */
.card-jungle .card-bg {
  background:
    radial-gradient(ellipse 65% 45% at 50% 8%, rgba(0,90,18,.42) 0%, transparent 70%),
    linear-gradient(to bottom, #010502 0%, #031008 18%, #052218 40%, #062a1a 60%, #031408 84%, #010602 100%);
}
/* ── Feuille gauche : couvre la moitié gauche, pivote depuis le bord gauche ── */
.palm-left {
  position:absolute; top:0; left:0; width:62%; height:100%;
  transform-origin:0% 88%;        /* pivot : bord gauche, bas de la feuille */
  border-radius:0 62% 28% 0 / 0 52% 18% 0;
  background:
    linear-gradient(138deg,
      #001204 0%, #0a4a18 16%,
      #1c7e35 36%,               /* vert tropical vif */
      #157830 52%,
      #0d5522 70%,
      #042410 88%, #010902 100%
    );
  opacity:1;
  z-index:3;
}
.palm-left::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  /* Nervures de feuille */
  background:repeating-linear-gradient(148deg,
    transparent 0, transparent 11px,
    rgba(0,40,10,.45) 11px, rgba(0,40,10,.45) 13px
  );
}
/* ── Feuille droite : couvre la moitié droite, pivote depuis le bord droit ── */
.palm-right {
  position:absolute; top:0; right:0; width:62%; height:100%;
  transform-origin:100% 88%;     /* pivot : bord droit, bas de la feuille */
  border-radius:62% 0 0 28% / 52% 0 0 18%;
  background:
    linear-gradient(222deg,
      #001204 0%, #0a4a18 16%,
      #1c7e35 36%,
      #157830 52%,
      #0d5522 70%,
      #042410 88%, #010902 100%
    );
  opacity:1;
  z-index:3;
}
.palm-right::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:repeating-linear-gradient(32deg,
    transparent 0, transparent 11px,
    rgba(0,40,10,.45) 11px, rgba(0,40,10,.45) 13px
  );
}
/* Lumière centrale révélée quand les feuilles s'écartent */
.jungle-light {
  position:absolute; top:6%; left:26%; right:26%; height:58%;
  background:radial-gradient(ellipse at 50% 22%, rgba(80,220,55,.14) 0%, rgba(30,160,18,.06) 55%, transparent 100%);
  opacity:0; transition:opacity .4s;
}
.card-jungle:hover .jungle-light { opacity:1; }
.card-jungle .card-neon { color:#00ff88; text-shadow:0 0 12px #00cc66,0 0 30px #009944,0 0 60px #00cc66; animation:neon-jungle 7s infinite; }
.card-jungle:hover { border-color:rgba(0,210,70,.55); box-shadow:0 0 24px rgba(0,200,68,.12),inset 0 0 30px rgba(0,200,68,.04); }
@keyframes neon-jungle { 0%,18%,20%,60%,62%,100%{text-shadow:0 0 12px #00cc66,0 0 30px #009944,0 0 60px #00cc66;opacity:1}19%,61%{text-shadow:none;opacity:.7}21%{text-shadow:0 0 6px #00cc66;opacity:.9} }
/* ── Entrée jungle : révélation de gauche à droite, douce comme une brise ── */
/* La feuille gauche disparaît en premier, la droite la suit avec 0.28s de délai */
.card-jungle.entering .palm-left    { animation:palm-glide-l .85s cubic-bezier(.4,0,.2,1) forwards; }
.card-jungle.entering .palm-right   { animation:palm-glide-r .85s cubic-bezier(.4,0,.2,1) .28s forwards; }
.card-jungle.entering .jungle-light { animation:jungle-glow 1.1s ease-out .1s forwards; }
.card-jungle.entering .card-bg      { animation:jungle-bg-enter 1.1s ease-out forwards; }
.card-jungle.entering .card-content { animation:cdim 1.1s ease-out .15s forwards; }

/* Feuille gauche : glisse vers la gauche en s'évanouissant — comme soufflée */
@keyframes palm-glide-l {
  0%   { transform:translateX(0)    translateY(0)   scale(1);    opacity:1; }
  35%  { transform:translateX(-8%)  translateY(-3%) scale(.97);  opacity:.7; }
  100% { transform:translateX(-30%) translateY(-9%) scale(.88);  opacity:0; }
}
/* Feuille droite : glisse vers la droite, légèrement décalée dans le temps */
@keyframes palm-glide-r {
  0%   { transform:translateX(0)   translateY(0)   scale(1);    opacity:1; }
  35%  { transform:translateX(8%)  translateY(-3%) scale(.97);  opacity:.7; }
  100% { transform:translateX(30%) translateY(-9%) scale(.88);  opacity:0; }
}
@keyframes jungle-glow { 0%{opacity:0} 45%{opacity:.9} 100%{opacity:.42} }
@keyframes jungle-bg-enter { 0%{filter:brightness(1)} 38%{filter:brightness(2.2) saturate(2.8)} 100%{filter:brightness(.62) saturate(1.8)} }

/* ── NIGHT CITY ────────────────────────────────────────────────────────── */
.card-night .card-bg {
  background:
    radial-gradient(ellipse 100% 45% at 50% 100%, rgba(0,22,90,.75) 0%, rgba(0,8,42,.38) 50%, transparent 100%),
    linear-gradient(to bottom, #010108 0%, #030220 18%, #050338 36%, #040230 58%, #02011a 82%, #01000e 100%);
}
/* Étoiles */
.starfield {
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 10%, rgba(255,255,255,.88) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 6%, rgba(255,255,255,.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 28% 16%, rgba(255,255,255,.72) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 5%, rgba(255,255,255,.92) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 57% 13%, rgba(255,255,255,.58) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 8%, rgba(255,255,255,.82) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 76% 19%, rgba(255,255,255,.68) 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 6%, rgba(255,255,255,.78) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 15%, rgba(255,255,255,.52) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 30%, rgba(255,255,255,.42) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 26%, rgba(255,255,255,.52) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 33%, rgba(255,255,255,.62) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 28%, rgba(255,255,255,.48) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 40%, rgba(200,222,255,.36) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 36%, rgba(200,222,255,.42) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 42%, rgba(200,222,255,.36) 0%, transparent 100%);
}
/* Lune */
.city-moon {
  position:absolute; width:38px; height:38px; border-radius:50%;
  top:12%; right:15%;
  background:radial-gradient(circle at 36% 36%, #eeedc6 0%, #d2d096 44%, #aaa862 80%, #888648 100%);
  box-shadow:0 0 18px 6px rgba(215,215,162,.18),0 0 40px 16px rgba(182,182,122,.08);
}
.city-moon::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 4px -3px 0 rgba(0,0,0,.13),inset -2px 5px 0 2px rgba(0,0,0,.07),inset 8px 8px 0 3px rgba(0,0,0,.06);
}
/* Skyline SVG positionné via CSS */
.city-buildings-svg { position:absolute; bottom:0; left:0; width:100%; height:65%; }
/* Lumière de route vers la ville */
.city-road-light {
  position:absolute; bottom:0; left:0; right:0; height:56%;
  background:linear-gradient(to top,
    rgba(0,55,200,.28) 0%, rgba(0,30,140,.14) 40%, transparent 100%);
  /* La route part d'un point (horizon) et s'ouvre vers le bas — animée à l'entrée */
  clip-path:polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
  opacity:0;
}
/* Bandes de route — deux lignes blanches pointillées révélées à l'ouverture */
.city-road-lanes {
  position:absolute; bottom:0; left:0; right:0; height:56%; pointer-events:none;
  opacity:0;
}
.city-road-lanes::before,
.city-road-lanes::after {
  content:''; position:absolute; bottom:0; width:1.5px; height:100%;
  background:repeating-linear-gradient(to top,
    rgba(180,200,255,.55) 0px, rgba(180,200,255,.55) 8px,
    transparent 8px, transparent 16px);
  clip-path:polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
}
/* Bande gauche — légèrement décalée */
.city-road-lanes::before { left:38%; transform-origin:50% 100%; }
/* Bande droite */
.city-road-lanes::after  { right:38%; transform-origin:50% 100%; }

.card-night .card-neon { color:#4488ff; text-shadow:0 0 12px #0055ff,0 0 30px #0033cc,0 0 60px #0055ff; animation:neon-night 6s infinite; }
.card-night:hover { border-color:rgba(40,100,255,.55); box-shadow:0 0 24px rgba(0,85,255,.12),inset 0 0 30px rgba(0,85,255,.04); }
@keyframes neon-night { 0%,22%,24%,52%,54%,100%{text-shadow:0 0 12px #0055ff,0 0 30px #0033cc,0 0 60px #0055ff;opacity:1}23%,53%{text-shadow:none;opacity:.75}25%{text-shadow:0 0 8px #0055ff;opacity:.9} }

/* ── Entrée Night City : on fonce vers la ville, la route se dessine ── */
.card-night.entering .city-buildings-svg { animation:city-approach .95s ease-in forwards; }
.card-night.entering .city-road-light    { animation:road-unfold .95s cubic-bezier(.25,.46,.45,.94) forwards; }
.card-night.entering .city-road-lanes    { animation:road-lanes-appear .7s ease-out .3s forwards; }
.card-night.entering .city-buildings-svg line { animation:road-centerline .7s ease-out .15s forwards; }
.card-night.entering .card-bg            { animation:night-rush .95s ease-out forwards; }
.card-night.entering .card-content       { animation:cdim .95s ease-out forwards; }

/* La route se dessine comme un trait qui naît à l'horizon et s'élargit vers nous */
@keyframes road-unfold {
  0%   { clip-path:polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%); opacity:0; }
  8%   { opacity:1; }
  55%  { clip-path:polygon(28% 0%, 72% 0%, 100% 100%, 0% 100%); opacity:.88; }
  100% { clip-path:polygon(32% 0%, 68% 0%, 100% 100%, 0% 100%); opacity:.48; }
}
/* Bandes latérales qui apparaissent doucement */
@keyframes road-lanes-appear {
  0%   { opacity:0; }
  100% { opacity:1; }
}
/* Tirets centraux qui se dessinent du haut vers le bas */
@keyframes road-centerline {
  0%   { stroke-dashoffset:130; stroke:rgba(0,85,255,0); }
  25%  { stroke:rgba(0,85,255,.4); }
  100% { stroke-dashoffset:0; stroke:rgba(0,85,255,.6); }
}
/* Zoom vers la ville — plus marqué qu'avant */
@keyframes city-approach {
  0%   { transform:scale(1)    translateY(0);   opacity:.8; }
  45%  { transform:scale(1.22) translateY(6%);  opacity:1;  }
  100% { transform:scale(1.65) translateY(18%); opacity:.5; }
}
@keyframes night-rush { 0%{filter:brightness(1)} 42%{filter:brightness(2.4) saturate(2.6)} 100%{filter:brightness(.72) saturate(1.6)} }
@keyframes cdim { 0%{opacity:1} 100%{opacity:.26} }

/* HIT MIX */
.hitmix-section { padding: 0 48px; margin-bottom: 60px; }
.hitmix-card { position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;border:1px solid rgba(136,0,255,.1);padding:48px;display:flex;align-items:center;gap:48px;transition:border-color .35s,box-shadow .35s;min-height:180px; }
.hitmix-card::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,0,128,.07) 0%,rgba(136,0,255,.09) 30%,rgba(0,85,255,.06) 60%,rgba(0,204,102,.05) 100%);pointer-events:none; }
.hitmix-card:hover { border-color:rgba(170,0,255,.55);box-shadow:0 0 32px rgba(136,0,255,.13),inset 0 0 40px rgba(136,0,255,.04); }
.hitmix-card:hover .hitmix-play { opacity:1; }
.hitmix-label { writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:.4em;color:rgba(136,0,255,.3);text-transform:uppercase;flex-shrink:0; }
.hitmix-main { flex:1; }
.hitmix-title { font-size:clamp(32px,5vw,60px);font-weight:900;letter-spacing:.15em;text-transform:uppercase;line-height:1;margin-bottom:10px;color:#1a0030;text-shadow:0 0 8px #cc44ff,0 0 20px #aa00ff,0 0 40px #8800ff,0 0 80px #550066;animation:neon-v-big 4s infinite; }
.hitmix-sub { font-size:11px;letter-spacing:.3em;color:rgba(136,0,255,.3);text-transform:uppercase; }
.hitmix-play { display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.3em;color:rgba(136,0,255,.5);text-transform:uppercase;opacity:0;transition:opacity .3s;flex-shrink:0; }
.hitmix-play svg { width:24px;height:24px;fill:rgba(136,0,255,.8);margin-left:4px; }

/* ── CARD QUICK-PLAY BUTTON ──────────────────────────────────── */
.card-quick-play {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.7);
  width:52px; height:52px; border-radius:50%;
  background:rgba(5,5,8,.72); backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.18);
  color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .22s, transform .22s, border-color .22s, background .22s;
  z-index:10; pointer-events:none;
}
.card-quick-play svg { width:18px; height:18px; fill:currentColor; margin-left:2px; }
.playlist-card:hover .card-quick-play {
  opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:all;
}
.playlist-card:hover .card-quick-play:hover {
  background:rgba(136,0,255,.55); border-color:rgba(200,160,255,.55);
  transform:translate(-50%,-50%) scale(1.08);
}
/* Accent par playlist */
.card-sunset:hover .card-quick-play:hover  { background:rgba(255,100,0,.6);  border-color:rgba(255,180,80,.55); }
.card-jungle:hover .card-quick-play:hover  { background:rgba(0,180,60,.55);  border-color:rgba(80,255,140,.45); }
.card-night:hover  .card-quick-play:hover  { background:rgba(0,85,255,.6);   border-color:rgba(80,160,255,.5);  }

/* Quick-play sur la bannière HIT MIX */
.hitmix-card .card-quick-play {
  position:relative; top:auto; left:auto;
  transform:scale(.85); opacity:.42; pointer-events:all; flex-shrink:0;
}
.hitmix-card:hover .card-quick-play { opacity:1; transform:scale(1); }
.hitmix-card:hover .card-quick-play:hover {
  background:rgba(136,0,255,.55); border-color:rgba(200,160,255,.55); transform:scale(1.08);
}

/* ── OVERLAY ─────────────────────────────────────────────────── */
.overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;opacity:0;pointer-events:none;transition:opacity .3s; }
.overlay.show { opacity:1;pointer-events:all; }

/* ── TRACK PANEL ─────────────────────────────────────────────── */
.track-panel { position:fixed;top:0;right:-100%;width:min(480px,100vw);height:100vh;background:#060610;border-left:1px solid var(--panel-border,rgba(136,0,255,.12));z-index:100;transition:right .38s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding-bottom:var(--player-h);overflow:hidden; }
.track-panel.open { right:0; }
.panel-header { padding:28px 28px 20px;border-bottom:1px solid var(--panel-border,rgba(136,0,255,.08));flex-shrink:0; }
.panel-close { background:none;border:none;color:rgba(136,0,255,.35);font-size:20px;cursor:pointer;float:right;line-height:1;transition:color .2s; }
.panel-close:hover { color:var(--panel-accent,#cc88ff); }
.panel-playlist-name { font-size:22px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;color:var(--panel-glow,#8800ff);text-shadow:0 0 8px var(--panel-accent,#8800ff),0 0 20px var(--panel-glow,#660099),0 0 40px var(--panel-glow,#440066); }
.panel-sub { font-size:9px;letter-spacing:.28em;color:rgba(136,0,255,.3);text-transform:uppercase;margin-bottom:0; }
.track-list { flex:1;overflow-y:auto;padding:8px 0; }
.track-list::-webkit-scrollbar { width:3px; }
.track-list::-webkit-scrollbar-track { background:transparent; }
.track-list::-webkit-scrollbar-thumb { background:var(--panel-accent,rgba(136,0,255,.2));border-radius:2px; }
.track-item { display:flex;align-items:center;gap:12px;padding:10px 28px;cursor:pointer;transition:background .15s;border-left:2px solid transparent; }
.track-item:hover { background:rgba(136,0,255,.04); }
.track-item.active { background:rgba(136,0,255,.07);border-left-color:var(--panel-accent,#8800ff); }
.track-num { font-size:11px;color:rgba(136,0,255,.28);width:22px;flex-shrink:0;font-variant-numeric:tabular-nums; }
.track-item.active .track-num { color:var(--panel-accent,#8800ff); }
.track-info { flex:1;min-width:0; }
.track-name { font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;color:var(--panel-accent,rgba(232,232,240,.82));opacity:.85; }
.track-item.active .track-name { color:var(--white);opacity:1; }
.track-playing-icon { display:none;gap:2px;align-items:flex-end;height:14px;flex-shrink:0; }
.track-item.active .track-playing-icon { display:flex; }
.track-playing-icon span { width:2px;background:var(--panel-accent,#8800ff);border-radius:1px;animation:eq 1.1s ease-in-out infinite; }
.track-playing-icon span:nth-child(2) { animation-delay:.2s; }
.track-playing-icon span:nth-child(3) { animation-delay:.4s; }
@keyframes eq { 0%,100%{height:4px}50%{height:14px} }
.track-plays { font-size:9px;letter-spacing:.04em;min-width:26px;text-align:right;color:var(--panel-accent,rgba(136,0,255,.4));opacity:.5;flex-shrink:0;font-variant-numeric:tabular-nums;transition:opacity .2s; }
.track-item:hover .track-plays, .track-item.active .track-plays { opacity:.95;font-weight:600; }
.add-to-mix-btn { background:none;border:1px solid var(--panel-dim,rgba(136,0,255,.18));color:var(--panel-accent,rgba(136,0,255,.5));width:22px;height:22px;border-radius:50%;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;line-height:1; }
.add-to-mix-btn:hover { background:var(--panel-accent,rgba(136,0,255,.15));border-color:var(--panel-accent,#8800ff);color:#fff; }
.track-item.in-mix .add-to-mix-btn { background:var(--panel-accent,#8800ff);border-color:var(--panel-accent,#8800ff);color:#fff; }
.panel-like-btn,.panel-addpl-btn{background:none;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.4);width:22px;height:22px;border-radius:50%;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s;line-height:1;font-family:inherit;}
.panel-like-btn::before{content:"\2661";}
.panel-like-btn:hover{color:#ff7799;border-color:rgba(255,119,153,.4);}
.panel-like-btn.liked::before{content:"\2665";}
.panel-like-btn.liked{color:#ff5577;border-color:rgba(255,85,119,.5);}
.panel-addpl-btn:hover{color:#cc88ff;border-color:rgba(204,136,255,.4);}
.panel-profile-link{display:inline-block;margin:4px 28px 10px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--panel-accent,rgba(136,0,255,.55));text-decoration:none;transition:color .15s;}
.panel-profile-link:hover{color:var(--panel-accent,#8800ff);}

/* PANEL THEMES */
.track-panel[data-theme="sunset-lover"] { --panel-border:rgba(255,100,0,.2);--panel-accent:#ff6600;--panel-glow:#ff3300;--panel-dim:rgba(255,80,0,.18); }
.track-panel[data-theme="jungle-osmose"] { --panel-accent:#00cc44;--panel-glow:#009933;--panel-dim:rgba(0,200,68,.15); }
.track-panel[data-theme="night-city"] { --panel-accent:#0055ff;--panel-glow:#0033cc;--panel-dim:rgba(0,85,255,.18); }
.track-panel[data-theme="hit-mix"] { --panel-accent:#8800ff;--panel-glow:#6600cc;--panel-dim:rgba(136,0,255,.18); }

/* ── MIX PANEL ───────────────────────────────────────────────── */
.mix-panel { position:fixed;top:0;left:-100%;width:min(420px,100vw);height:100vh;background:#05050a;border-right:1px solid rgba(136,0,255,.12);z-index:100;transition:left .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding-bottom:var(--player-h);overflow:hidden; }
.mix-panel.open { left:0; }
.mix-panel-header { padding:28px 24px 20px;border-bottom:1px solid rgba(136,0,255,.08);flex-shrink:0; }
.mix-panel-title { font-size:20px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#1a0030;text-shadow:0 0 6px #aa00ff,0 0 14px #8800ff,0 0 28px #660099;margin-bottom:4px; }
.mix-panel-sub { font-size:9px;letter-spacing:.25em;color:rgba(136,0,255,.35);text-transform:uppercase; }
.mix-actions { display:flex;flex-direction:column;gap:8px;padding:14px 24px 0;flex-shrink:0; }
.mix-action-btn { background:none;border:1px solid rgba(136,0,255,.2);color:rgba(200,160,255,.6);font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:9px;border-radius:2px;cursor:pointer;transition:all .2s; }
.mix-action-btn:hover { border-color:rgba(136,0,255,.5);color:#cc88ff; }
.mix-action-btn.primary { background:rgba(136,0,255,.12);border-color:rgba(136,0,255,.35);color:#cc88ff; }
.mix-action-btn.primary:hover { background:rgba(136,0,255,.22); }
.mix-track-list { flex:1;overflow-y:auto;padding:12px 0; }
.mix-track-list::-webkit-scrollbar { width:3px; }
.mix-track-list::-webkit-scrollbar-thumb { background:rgba(136,0,255,.2); }
.mix-track-item { display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:pointer;transition:background .15s;border-left:2px solid transparent; }
.mix-track-item:hover { background:rgba(136,0,255,.04); }
.mix-track-item.active { background:rgba(136,0,255,.08);border-left-color:#8800ff; }
.mix-track-num { font-size:10px;color:rgba(136,0,255,.28);width:20px;flex-shrink:0;font-variant-numeric:tabular-nums; }
.mix-track-info { flex:1;min-width:0; }
.mix-track-name { font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mix-track-pl { font-size:9px;letter-spacing:.15em;color:rgba(136,0,255,.4);text-transform:uppercase;margin-top:2px; }
.mix-remove-btn { background:none;border:none;color:rgba(136,0,255,.3);font-size:14px;cursor:pointer;padding:4px;transition:color .15s; }
.mix-remove-btn:hover { color:#ff4444; }
.mix-empty { padding:40px 24px;font-size:11px;letter-spacing:.25em;color:rgba(136,0,255,.2);text-transform:uppercase;text-align:center;line-height:1.8; }

/* ── MIX — Playlists sauvegardées (localStorage) ──────────────── */
.mix-saved-wrap {
  border-top: 1px solid rgba(136,0,255,.12);
  padding: 14px 20px 16px;
  flex-shrink: 0;
  background: rgba(255,255,255,.015);
}
.mix-saved-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.mix-saved-title {
  font-size: 9px; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase;
  color: rgba(136,0,255,.55);
}
.mix-saved-count {
  font-size: 10px; font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(136,0,255,.1);
  color: rgba(200, 170, 255, .75);
  font-variant-numeric: tabular-nums;
}
.mix-saved-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 150px; overflow-y: auto;
}
.mix-saved-list::-webkit-scrollbar { width: 3px; }
.mix-saved-list::-webkit-scrollbar-thumb { background: rgba(136,0,255,.2); }
.mix-saved-empty {
  padding: 12px 0; text-align: center;
  font-size: 10px; letter-spacing: .15em;
  color: rgba(136,0,255,.3);
  text-transform: uppercase;
}
.mix-saved-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: rgba(136,0,255,.05);
  border: 1px solid rgba(136,0,255,.12);
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .12s;
}
.mix-saved-item:hover {
  background: rgba(136,0,255,.1);
  border-color: rgba(136,0,255,.3);
  transform: translateX(2px);
}
.mix-saved-item-info { flex: 1; min-width: 0; }
.mix-saved-item-name {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mix-saved-item-meta {
  font-size: 9px; letter-spacing: .15em;
  color: rgba(136,0,255,.5);
  text-transform: uppercase;
  margin-top: 2px;
}
.mix-saved-del {
  background: none; border: none;
  color: rgba(136,0,255,.35);
  font-size: 12px; cursor: pointer;
  padding: 4px 6px;
  transition: color .15s;
  flex-shrink: 0;
}
.mix-saved-del:hover { color: #ff4444; }

/* ═══ MY MIX double interface Musique ⇄ Image ═══ */
.mymix-switch {
  display: flex; gap: 6px; margin-top: 14px;
  background: rgba(136,0,255,.06);
  border: 1px solid rgba(136,0,255,.14);
  border-radius: 10px; padding: 4px;
}
.mymix-switch-btn {
  flex: 1; padding: 7px 10px;
  background: none; border: none; border-radius: 7px;
  color: rgba(200,170,255,.55);
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  cursor: pointer; transition: background .18s, color .18s;
}
.mymix-switch-btn:hover { color: rgba(220,200,255,.85); }
.mixPanel .mymix-switch-btn[aria-selected="true"],
.mix-panel .mymix-switch-btn[aria-selected="true"] {
  background: rgba(136,0,255,.22);
  color: #fff;
  box-shadow: 0 0 12px rgba(136,0,255,.25);
}
/* Bascule des mondes via classe sur le panneau */
.mymix-world { display: none; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
.mix-panel.mymix-mode-musique .mymix-world-musique { display: flex; }
.mix-panel.mymix-mode-image   .mymix-world-image   { display: flex; }

.mymix-world-image { overflow-y: auto; padding: 14px 20px 16px; gap: 18px; }
.mymix-world-image::-webkit-scrollbar { width: 3px; }
.mymix-world-image::-webkit-scrollbar-thumb { background: rgba(136,0,255,.2); }
.mymix-img-section { display: flex; flex-direction: column; gap: 10px; }
.mymix-img-head {
  display: flex; align-items: center; justify-content: space-between;
}
.mymix-img-title {
  font-size: 9px; font-weight: 700; letter-spacing: .25em;
  text-transform: uppercase; color: rgba(136,0,255,.6);
}
.mymix-img-count {
  font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: rgba(136,0,255,.1); color: rgba(200,170,255,.75);
  font-variant-numeric: tabular-nums;
}
.mymix-album-new-btn {
  background: rgba(136,0,255,.12); border: 1px solid rgba(136,0,255,.3);
  border-radius: 7px; color: #cbb3ff; font-size: 11px; font-weight: 700;
  padding: 5px 10px; cursor: pointer; transition: background .18s;
}
.mymix-album-new-btn:hover { background: rgba(136,0,255,.22); }
.mymix-img-empty {
  padding: 16px 0; text-align: center; font-size: 11px;
  color: rgba(136,0,255,.4); letter-spacing: .05em;
}
/* Grille images likées */
.mymix-liked-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.mymix-liked-card {
  position: relative; border-radius: 9px; overflow: hidden;
  background: rgba(136,0,255,.05); border: 1px solid rgba(136,0,255,.12);
  cursor: pointer; aspect-ratio: 1 / 1; transition: border-color .18s, transform .12s;
}
.mymix-liked-card:hover { border-color: rgba(136,0,255,.35); transform: translateY(-2px); }
.mymix-liked-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mymix-liked-card .mymix-liked-fallback {
  display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem;
}
.mymix-liked-card .like-btn {
  position: absolute; top: 6px; right: 6px; z-index: 2;
}
.mymix-liked-card .mymix-liked-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 8px 5px; font-size: 10px; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Liste albums */
.mymix-album-list { display: flex; flex-direction: column; gap: 6px; }
.mymix-album-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: rgba(136,0,255,.05); border: 1px solid rgba(136,0,255,.12);
  border-radius: 9px; cursor: pointer; transition: background .18s, border-color .18s;
}
.mymix-album-item:hover { background: rgba(136,0,255,.1); border-color: rgba(136,0,255,.3); }
.mymix-album-cover {
  width: 42px; height: 42px; border-radius: 7px; flex-shrink: 0;
  object-fit: cover; background: rgba(136,0,255,.1);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.mymix-album-info { flex: 1; min-width: 0; }
.mymix-album-name {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mymix-album-meta { font-size: 10px; color: rgba(136,0,255,.55); margin-top: 2px; }
.mymix-album-del {
  background: none; border: none; color: rgba(136,0,255,.35);
  font-size: 13px; cursor: pointer; padding: 4px 6px; flex-shrink: 0; transition: color .15s;
}
.mymix-album-del:hover { color: #ff4444; }

/* ── MIX — couleurs par playlist source ─────────────────────── */
.mix-track-item[data-theme="sunset-lover"]  .mix-track-name { color:rgba(255,130,50,.9); }
.mix-track-item[data-theme="sunset-lover"]  .mix-track-pl   { color:rgba(255,90,0,.55); }
.mix-track-item[data-theme="sunset-lover"].active  { border-left-color:#ff6600; background:rgba(255,70,0,.07); }
.mix-track-item[data-theme="jungle-osmose"] .mix-track-name { color:rgba(50,210,110,.9); }
.mix-track-item[data-theme="jungle-osmose"] .mix-track-pl   { color:rgba(0,170,55,.55); }
.mix-track-item[data-theme="jungle-osmose"].active { border-left-color:#00cc44; background:rgba(0,160,55,.07); }
.mix-track-item[data-theme="night-city"]    .mix-track-name { color:rgba(90,160,255,.9); }
.mix-track-item[data-theme="night-city"]    .mix-track-pl   { color:rgba(0,100,255,.55); }
.mix-track-item[data-theme="night-city"].active    { border-left-color:#0055ff; background:rgba(0,85,255,.07); }
.mix-track-item[data-theme="hit-mix"]       .mix-track-name { color:rgba(190,130,255,.9); }
.mix-track-item[data-theme="hit-mix"]       .mix-track-pl   { color:rgba(136,0,255,.55); }
.mix-track-item[data-theme="hit-mix"].active       { border-left-color:#8800ff; background:rgba(136,0,255,.08); }

/* ── MIX — poignée de tri ────────────────────────────────────── */
.mix-drag-handle { color:rgba(136,0,255,.18);font-size:13px;cursor:grab;padding:4px 2px;flex-shrink:0;transition:color .15s;user-select:none;line-height:1; }
.mix-drag-handle:active { cursor:grabbing; }
.mix-track-item:hover .mix-drag-handle { color:rgba(136,0,255,.45); }
.mix-track-item.dragging { opacity:.28; pointer-events:none; }
.mix-track-item.drag-over { border-top:1.5px solid rgba(136,0,255,.45); }

/* ── PLAYER ──────────────────────────────────────────────────── */
#player { position:fixed;bottom:0;left:0;right:0;height:var(--player-h);background:rgba(5,5,10,.97);backdrop-filter:blur(20px);border-top:1px solid var(--p-dim,rgba(136,0,255,.1));display:flex;align-items:center;padding:0 32px;gap:24px;z-index:200;transition:border-color .6s; }
#player[data-theme="sunset-lover"] { --p-accent:#ff6600;--p-glow:rgba(255,100,0,.55);--p-dim:rgba(255,100,0,.18); }
#player[data-theme="jungle-osmose"] { --p-accent:#00cc44;--p-glow:rgba(0,200,68,.55);--p-dim:rgba(0,200,68,.15); }
#player[data-theme="night-city"] { --p-accent:#0055ff;--p-glow:rgba(0,85,255,.55);--p-dim:rgba(0,85,255,.18); }
#player[data-theme="hit-mix"] { --p-accent:#8800ff;--p-glow:rgba(136,0,255,.55);--p-dim:rgba(136,0,255,.1); }
.player-info { flex:1;min-width:0; }
.player-track-name { font-size:13px;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.03em; }
.player-playlist-name { font-size:10px;letter-spacing:.2em;color:var(--p-glow,rgba(136,0,255,.4));text-transform:uppercase;margin-top:3px; }
.player-controls { display:flex;align-items:center;gap:20px;flex-shrink:0; }
.ctrl-btn { background:none;border:none;color:var(--p-glow,rgba(136,0,255,.5));cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;transition:color .2s,transform .1s; }
.ctrl-btn:hover { color:var(--p-accent,var(--violet-light)); }
.ctrl-btn:active { transform:scale(.92); }
.ctrl-btn svg { width:18px;height:18px;fill:currentColor; }
.ctrl-btn.play-pause svg { width:22px;height:22px; }
.ctrl-btn.loop-active { color:var(--p-accent,var(--violet-light)); opacity:1; }
.ctrl-btn.loop-active::after { content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--p-accent,var(--violet-light)); }
.ctrl-btn { position:relative; }
.player-progress { flex:2;min-width:120px;max-width:400px;display:flex;align-items:center;gap:10px; }
.player-time { font-size:10px;color:var(--p-glow,rgba(136,0,255,.4));width:34px;flex-shrink:0;font-variant-numeric:tabular-nums; }
.progress-bar {
  flex:1; height:22px; background:transparent; border-radius:2px; cursor:pointer;
  position:relative; display:flex; align-items:center;
}
.progress-bar::before {
  content:''; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:3px; background:var(--p-dim,rgba(136,0,255,.12)); border-radius:2px; transition:height .15s;
}
.progress-bar:hover::before { height:5px; }
.progress-fill {
  height:3px; background:var(--p-accent,var(--violet)); border-radius:2px;
  width:0%; transition:width .1s linear, height .15s; pointer-events:none;
  position:relative; z-index:1;
}
.progress-bar:hover .progress-fill { height:5px; filter:brightness(1.15); }
.progress-fill::after {
  content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%;
  background:var(--p-accent,var(--violet)); box-shadow:0 0 8px var(--p-glow,rgba(136,0,255,.5));
  opacity:0; transition:opacity .15s;
}
.progress-bar:hover .progress-fill::after { opacity:1; }
.player-empty { flex:1;font-size:11px;letter-spacing:.3em;color:rgba(136,0,255,.18);text-transform:uppercase; }
.player-mode-tag { flex-shrink:0;font-size:9px;letter-spacing:.2em;color:var(--violet-light);text-transform:uppercase;opacity:0;transition:opacity .3s; }
.player-mode-tag.visible { opacity:1; }

/* ── AUTH MODAL ──────────────────────────────────────────────── */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);z-index:500;display:none;align-items:center;justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-box { background:#080810;border:1px solid rgba(136,0,255,.2);border-radius:6px;padding:36px;width:min(400px,92vw);position:relative;box-shadow:0 0 60px rgba(136,0,255,.08); }
.modal-close { position:absolute;top:14px;right:16px;background:none;border:none;color:rgba(136,0,255,.4);font-size:18px;cursor:pointer; }
.modal-close:hover { color:#cc88ff; }
.modal-title { font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(136,0,255,.45);margin-bottom:22px; }
.modal-tabs { display:flex;border-bottom:1px solid rgba(136,0,255,.1);margin-bottom:26px; }
.modal-tab { flex:1;background:none;border:none;color:rgba(200,160,255,.38);font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:10px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s; }
.modal-tab.active { color:#cc88ff;border-bottom-color:#8800ff; }
.modal-input { width:100%;background:rgba(136,0,255,.04);border:1px solid rgba(136,0,255,.14);border-radius:3px;color:#e8e8f0;font-size:13px;padding:10px 14px;margin-bottom:11px;outline:none;box-sizing:border-box;transition:border-color .2s; }
.modal-input:focus { border-color:rgba(136,0,255,.38); }
.modal-input::placeholder { color:rgba(136,0,255,.28); }
.modal-submit { width:100%;background:linear-gradient(135deg,#8800ff,#5500cc);border:none;color:#fff;font-size:10px;letter-spacing:.28em;text-transform:uppercase;padding:12px;border-radius:3px;cursor:pointer;margin-top:6px;transition:opacity .2s; }
.modal-submit:hover { opacity:.85; }
.modal-msg { font-size:11px;color:#ff5555;margin-top:10px;min-height:16px;text-align:center; }
.modal-msg.ok { color:#00cc66; }
.saved-pl-title { font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(136,0,255,.32);margin:20px 0 10px; }
.saved-pl-item { display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border:1px solid rgba(136,0,255,.1);border-radius:3px;margin-bottom:6px;cursor:pointer;transition:border-color .2s; }
.saved-pl-item:hover { border-color:rgba(136,0,255,.3); }
.saved-pl-name { font-size:12px;color:rgba(200,160,255,.82); }
.saved-pl-count { font-size:9px;color:rgba(136,0,255,.35); }

/* ── DURÉE DE PISTE ──────────────────────────────────────────── */
.track-dur { font-size:9px;color:var(--panel-accent,rgba(136,0,255,.35));flex-shrink:0;
  font-variant-numeric:tabular-nums;opacity:.55;min-width:30px;text-align:right; }
.track-item:hover .track-dur { opacity:.9; }
.panel-total-dur { font-size:9px;letter-spacing:.2em;color:rgba(136,0,255,.3);
  text-transform:uppercase;margin-top:3px; }

/* ── CONTACT BUTTON ──────────────────────────────────────────── */
.contact-btn { background:none;border:none;color:rgba(136,0,255,.3);font-size:9px;
  letter-spacing:.25em;text-transform:uppercase;cursor:pointer;padding:6px 10px;
  transition:color .2s; }
.contact-btn:hover { color:var(--violet-light); }

/* ── CONTACT MODAL ───────────────────────────────────────────── */
.contact-select { width:100%;background:rgba(136,0,255,.04);border:1px solid rgba(136,0,255,.14);
  border-radius:3px;color:#e8e8f0;font-size:13px;padding:10px 14px;margin-bottom:11px;
  outline:none;box-sizing:border-box;transition:border-color .2s;appearance:none;
  font-family:inherit; }
.contact-select:focus { border-color:rgba(136,0,255,.38); }
.contact-select option { background:#0a0818; }
.contact-textarea { width:100%;background:rgba(136,0,255,.04);border:1px solid rgba(136,0,255,.14);
  border-radius:3px;color:#e8e8f0;font-size:13px;padding:10px 14px;margin-bottom:11px;
  outline:none;box-sizing:border-box;transition:border-color .2s;resize:vertical;
  min-height:110px;font-family:inherit;line-height:1.6; }
.contact-textarea:focus { border-color:rgba(136,0,255,.38); }
.contact-textarea::placeholder { color:rgba(136,0,255,.28); }
.contact-success { font-size:11px;color:#44cc88;margin-top:10px;text-align:center;min-height:16px; }

/* ── SUPPORT BUTTON (header) ─────────────────────────────────── */
.support-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid rgba(136,0,255,.18);
  /* P1-B12 (2026-05-11) : was rgba(200,160,255,.45) → ratio ~2:1 illisible.
     Opacity remontée à .85 pour passer AA (~5.5:1) tout en gardant
     le style "discret" du bouton support. */
  color: rgba(200,160,255,.85); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; padding: 6px 13px; border-radius: 2px;
  cursor: pointer; transition: all .25s; flex-shrink: 0;
}
.support-btn:hover { border-color: rgba(136,0,255,.5); color: #cc88ff; }
.support-btn svg { opacity: .6; flex-shrink: 0; }
.support-btn:hover svg { opacity: 1; }

/* Variante flottante : bas-droite, au-dessus du player sticky */
.support-btn-floating {
  position: fixed;
  /* Se cale au-dessus du player (qui prend var(--player-h)) */
  bottom: calc(var(--player-h) + 14px);
  right: 18px;
  z-index: 998;
  background: rgba(8, 0, 24, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(136, 0, 255, 0.3);
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(136, 0, 255, 0.08);
}
.support-btn-floating:hover {
  background: rgba(16, 0, 40, 0.85);
  box-shadow: 0 4px 22px rgba(136, 0, 255, 0.25), 0 0 0 1px rgba(136, 0, 255, 0.3);
}
@media (max-width: 600px) {
  .support-btn-floating {
    bottom: calc(var(--player-h) + 10px);
    right: 12px;
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    justify-content: center;
  }
  .support-btn-floating .support-btn-label { display: none; }
}

/* ── BOUTON + DANS LE PLAYER ─────────────────────────────────── */
.ctrl-btn.ctrl-add-mix {
  color: rgba(136,0,255,.45);
  transition: color .2s, transform .2s;
}
.ctrl-btn.ctrl-add-mix:hover { color: #cc88ff; transform: scale(1.18); }
.ctrl-btn.ctrl-add-mix.added {
  color: #44cc88;
  animation: add-pop .4s ease-out forwards;
}
@keyframes add-pop {
  0%  { transform: scale(1); }
  40% { transform: scale(1.35); }
  100%{ transform: scale(1); }
}

/* ── SECTION WATT ────────────────────────────────────────────── */
.watt-section {
  margin: 0 48px 56px;
  border: 1px solid rgba(255,210,0,.12);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(10,8,0,.95) 0%, rgba(5,5,15,.98) 60%, rgba(0,20,30,.95) 100%);
  overflow: hidden;
  position: relative;
}
.watt-section::before {
  content: '⚡';
  position: absolute; top: -18px; right: 48px;
  font-size: 120px; opacity: .018; user-select: none; pointer-events: none;
  line-height: 1;
}

.watt-header {
  display: flex; align-items: center; gap: 20px;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255,210,0,.08);
  background: rgba(255,210,0,.02);
}
.watt-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.watt-bolt { width: 20px; height: 20px; color: #ffd700; filter: drop-shadow(0 0 8px rgba(255,215,0,.55)); }
.watt-title {
  font-size: 22px; font-weight: 900; letter-spacing: .45em;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255,215,0,.7), 0 0 24px rgba(255,180,0,.4);
}
.watt-desc { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.watt-acronym { font-size: 9px; letter-spacing: .28em; color: rgba(255,210,0,.4); text-transform: uppercase; }
.watt-badge {
  display: inline-block; font-size: 8px; letter-spacing: .22em;
  color: rgba(255,215,0,.7); text-transform: uppercase;
  border: 1px solid rgba(255,215,0,.25); border-radius: 2px;
  padding: 2px 8px;
}
.watt-join-btn {
  background: linear-gradient(135deg, rgba(255,215,0,.12), rgba(255,165,0,.08));
  border: 1px solid rgba(255,215,0,.3);
  color: #ffd700; font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; padding: 9px 20px; border-radius: 3px;
  cursor: pointer; transition: all .25s; flex-shrink: 0;
}
.watt-join-btn:hover { background: rgba(255,215,0,.18); border-color: rgba(255,215,0,.6); }

.watt-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; padding: 0;
}

/* Classement artistes */
.watt-ranking { padding: 26px 32px; border-right: 1px solid rgba(255,210,0,.06); }
.watt-ranking-title {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,210,0,.45); margin-bottom: 16px;
}
.watt-ranking-list { display: flex; flex-direction: column; gap: 8px; }
.watt-artist-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255,210,0,.07); border-radius: 3px;
  background: rgba(255,215,0,.02);
  transition: border-color .2s;
}
.watt-artist-row:hover { border-color: rgba(255,215,0,.18); }
.watt-artist-row.watt-placeholder { opacity: .4; }
.watt-rank {
  font-size: 11px; font-weight: 900; letter-spacing: .1em;
  color: rgba(255,215,0,.35); min-width: 22px;
}
.watt-artist-row:first-child .watt-rank { color: #ffd700; }
.watt-artist-info { flex: 1; }
.watt-artist-name { font-size: 12px; color: rgba(200,200,160,.85); letter-spacing: .05em; }
.watt-artist-stats { font-size: 9px; color: rgba(255,210,0,.3); letter-spacing: .18em; text-transform: uppercase; margin-top: 2px; }
.watt-artist-plays { font-size: 10px; color: rgba(255,215,0,.45); letter-spacing: .1em; flex-shrink: 0; }

/* Infos premium */
.watt-info { padding: 26px 32px; }
.watt-info-title {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,210,0,.45); margin-bottom: 16px;
}
.watt-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.watt-features li { font-size: 11px; letter-spacing: .15em; color: rgba(200,190,160,.65); display: flex; align-items: center; gap: 10px; }
.watt-check { color: rgba(255,215,0,.55); font-size: 9px; flex-shrink: 0; }
.watt-premium-btn {
  background: linear-gradient(135deg, #ffd700, #ff9500);
  border: none; color: #0a0800;
  font-size: 10px; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; padding: 12px 24px;
  border-radius: 3px; cursor: pointer;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 0 20px rgba(255,215,0,.25);
}
.watt-premium-btn:hover { opacity: .9; transform: translateY(-1px); }

@media (max-width: 768px) {
  .watt-section { margin: 0 16px 40px; }
  .watt-body { grid-template-columns: 1fr; }
  .watt-ranking { border-right: none; border-bottom: 1px solid rgba(255,210,0,.06); }
  .watt-header { flex-wrap: wrap; }
}

/* ── PREMIUM HEADER BUTTON ───────────────────────────────────── */
.premium-header-btn {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(255,215,0,.08), rgba(255,140,0,.05));
  border: 1px solid rgba(255,215,0,.25);
  color: rgba(255,215,0,.65); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; padding: 6px 13px; border-radius: 2px;
  cursor: pointer; transition: all .25s; flex-shrink: 0;
}
.premium-header-btn:hover {
  border-color: rgba(255,215,0,.55); color: #ffd700;
  box-shadow: 0 0 12px rgba(255,215,0,.12);
}
.premium-header-btn svg { opacity: .7; }
.premium-header-btn:hover svg { opacity: 1; }

/* ── PREMIUM MODAL ───────────────────────────────────────────── */
.premium-modal-box {
  border-color: rgba(255,215,0,.2) !important;
  max-width: 480px;
}
.premium-modal-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.premium-modal-title {
  font-size: 13px; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: #ffd700;
  text-shadow: 0 0 12px rgba(255,215,0,.4);
}
.premium-modal-sub {
  font-size: 11px; color: rgba(200,190,160,.5); letter-spacing: .12em;
  margin-bottom: 24px; line-height: 1.7;
}
.premium-features-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 28px;
}
.premium-feat {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,215,0,.08); border-radius: 4px;
  background: rgba(255,215,0,.02);
}
.premium-feat-icon { font-size: 18px; flex-shrink: 0; }
.premium-feat-name { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,215,0,.7); margin-bottom: 4px; }
.premium-feat-desc { font-size: 10px; color: rgba(200,190,160,.45); line-height: 1.6; letter-spacing: .05em; }
.premium-cta-block { text-align: center; }
.premium-price {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,215,0,.4); margin-bottom: 16px;
}
.premium-modal-msg {
  font-size: 11px; margin-top: 14px; min-height: 16px; text-align: center; color: #ffd700;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT A — SÉLECTION OFFICIELLE + COMMUNITY HUB
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SÉLECTION OFFICIELLE — header séparateur ─────────────────────────────── */
.selection-officielle-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 48px;
  margin-bottom: 24px;
}
.soh-line {
  flex: 1;
  height: 1px;
  background: rgba(136, 0, 255, 0.12);
}
.soh-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(136, 0, 255, 0.35);
  white-space: nowrap;
}

/* ── COMMUNITY HUB ────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════════════
   COMMUNITY HUB WATT — Design minimaliste premium
   ════════════════════════════════════════════════════════════════════════════ */

.community-hub {
  margin: 48px 48px 0;
  border: 1px solid rgba(255, 215, 0, 0.08);
  border-radius: 10px;
  background: rgba(6, 5, 10, 0.55);
  padding: 32px 40px 28px;
}

/* En-tête minimal */
.hub-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.hub-head-watt {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .42em;
  color: #FFD700;
  text-transform: uppercase;
}
.hub-head-tagline {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.28);
}

/* Bloc 1 — Stats en une ligne */
.hub-stats-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 245, 200, 0.45);
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.06);
}
.hub-stats-line span[id] {
  font-weight: 700;
  color: rgba(255, 245, 200, 0.80);
}
.hsl-sep {
  color: rgba(255, 215, 0, 0.18);
  font-size: 11px;
}
.hsl-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(74, 222, 128, 0.70);
  font-size: 12px;
  font-weight: 500;
}
.hub-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: live-pulse 1.6s ease infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: .45; transform: scale(.82);  }
}

/* Bloc 2 — Top 3 artistes */
.hub-top3,
.hub-bands {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

/* ── Artist Bands — classement public type "réseau + classement dashboard" ──
   Chaque bande est un lien cliquable → /artiste/{slug}. Hover = glow brand.
   Structure : rank · avatar initiales · name+genre+tracks · plays · arrow
   ─────────────────────────────────────────────────────────────────────── */
.hub-band {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.hub-band::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--band-brand, #FFD700);
  opacity: 0.55;
  transition: opacity 0.22s ease, width 0.22s ease;
}
.hub-band:hover {
  transform: translateX(2px);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(255, 215, 0, 0.25);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(255, 215, 0, 0.08) inset;
}
.hub-band:hover::before { opacity: 1; width: 4px; }
.hub-band:active { transform: translateX(2px) scale(0.995); }

.hub-band-rank {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: rgba(255, 215, 0, 0.5);
  flex-shrink: 0;
  min-width: 22px;
  text-align: center;
}
.hub-band-gold  .hub-band-rank { color: #FFD700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); }
.hub-band-silver .hub-band-rank { color: #C0C5D0; text-shadow: 0 0 6px rgba(192, 197, 208, 0.4); }
.hub-band-bronze .hub-band-rank { color: #CD7F32; text-shadow: 0 0 6px rgba(205, 127, 50, 0.4); }

.hub-band-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.hub-band-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hub-band-name {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 245, 200, 0.95);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-band-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: rgba(255, 215, 0, 0.5);
  letter-spacing: 0.04em;
}
.hub-band-genre {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.hub-band-dot { opacity: 0.5; }
.hub-band-tracks { opacity: 0.85; }

.hub-band-plays {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  padding-right: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.hub-band-plays-val {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 215, 0, 0.85);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.hub-band-plays-lbl {
  font-size: 8.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.4);
}

.hub-band-arrow {
  font-size: 15px;
  color: rgba(255, 215, 0, 0.35);
  flex-shrink: 0;
  transition: color 0.18s, transform 0.18s;
}
.hub-band:hover .hub-band-arrow {
  color: rgba(255, 215, 0, 0.85);
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .hub-band { gap: 10px; padding: 10px 12px; }
  .hub-band-avatar { width: 34px; height: 34px; font-size: 12px; }
  .hub-band-name { font-size: 13px; }
  .hub-band-meta { font-size: 9.5px; }
  .hub-band-plays-val { font-size: 12px; }
  .hub-band-plays-lbl { font-size: 7.5px; }
  .hub-band-arrow { font-size: 13px; }
}
.hub-t3-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .13s ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.hub-t3-row:hover  { background: rgba(255, 215, 0, 0.05); }
.hub-t3-row:active { background: rgba(255, 215, 0, 0.09); }

.hub-t3-medal {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.hub-t3-name {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 245, 200, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-t3-me {
  font-size: 10px;
  color: rgba(255, 215, 0, 0.38);
  margin-left: 6px;
}
.hub-t3-plays {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 215, 0, 0.48);
  flex-shrink: 0;
}

/* Bloc 3 — CTA unique */
.hub-cta-solo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 14px 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: #08060e;
  background: #FFD700;
  border-radius: 5px;
  text-decoration: none;
  transition: filter .18s ease, transform .18s ease;
}
.hub-cta-solo:hover  { filter: brightness(1.07); transform: translateY(-1px); }
.hub-cta-solo:active { transform: none; filter: brightness(.98); }

/* Responsive */
@media (max-width: 900px) {
  .community-hub { margin: 28px 20px 0; padding: 24px 22px 20px; }
}
@media (max-width: 600px) {
  .community-hub  { margin: 20px 16px 0; padding: 20px 18px 18px; }
  .hub-stats-line { font-size: 12px; gap: 6px; }
  .hub-t3-name    { font-size: 14px; }
  .hub-t3-medal   { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SPRINT MOBILE — Responsive iPhone / Android / Safari Mobile / Chrome Mobile
   Breakpoints : 860px · 640px · 480px · 390px
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Base : éviter tout débordement horizontal ──────────────────────────── */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
img, video, svg { max-width: 100%; }

/* ── 860px : Tablette / grands téléphones paysage ──────────────────────── */
@media (max-width: 860px) {
  header { padding: 14px 20px; gap: 8px; }
  .hero { padding: 36px 20px 24px; }
  .playlists-grid { padding: 0 20px; gap: 16px; margin-bottom: 32px; }
  .hitmix-section { padding: 0 20px; margin-bottom: 40px; }
  .hitmix-card { padding: 28px 24px; gap: 28px; }
  .selection-officielle-header { padding: 0 20px; }
  .community-hub { margin: 28px 20px 0; }
  .watt-section { margin: 0 20px 40px; }
}

/* ── 640px : Téléphone paysage / portrait standard ──────────────────────── */
@media (max-width: 640px) {

  /* ── Header ── */
  header { padding: 12px 14px; gap: 6px; }
  .logo-text { font-size: 13px; letter-spacing: .2em; }
  .support-btn { display: none; }
  .mix-toggle-btn { padding: 6px 10px; font-size: 9px; letter-spacing: .12em; }
  .library-toggle-btn { padding: 6px 10px; font-size: 9px; letter-spacing: .12em; gap: 5px; }

  /* ── Hero ── */
  .hero { padding: 28px 16px 20px; }
  .hero-sub { font-size: 9px; letter-spacing: .18em; }

  /* ── Grille playlists : 2 colonnes ── */
  .playlists-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 16px;
    gap: 12px;
    margin-bottom: 24px;
  }
  .playlist-card { aspect-ratio: 2 / 3; }
  .card-content { padding: 16px 14px; }
  .card-neon { font-size: clamp(14px, 4.5vw, 22px); }
  .card-subtitle { font-size: 9px; margin-bottom: 12px; }
  .card-quick-play { width: 44px; height: 44px; } /* touch target min 44px */

  /* ── HIT MIX ── */
  .hitmix-section { padding: 0 16px; margin-bottom: 28px; }
  .hitmix-card { padding: 20px 16px; gap: 14px; min-height: auto; }
  .hitmix-title { font-size: clamp(22px, 7.5vw, 40px); }
  .hitmix-sub { font-size: 9px; letter-spacing: .18em; }
  .hitmix-play { display: none; }
  .hitmix-card .card-quick-play {
    opacity: .65;
    transform: scale(.9);
  }

  /* ── Player mobile simplifié ── */
  :root { --player-h: 72px; }
  body { padding-bottom: 72px; }
  #player { height: 72px; padding: 0 12px; gap: 8px; }
  .player-controls { gap: 10px; }
  .player-track-name { font-size: 12px; }
  .player-playlist-name { display: none; }
  .player-time { display: none; }
  .player-mode-tag { display: none; }
  #btn-loop { display: none; }
  .ctrl-btn.ctrl-add-mix { display: none; }
  .player-progress { min-width: 0; flex: 1; }
  .progress-bar { height: 30px; } /* zone tactile agrandie */
  .ctrl-btn svg { width: 16px; height: 16px; }
  .ctrl-btn.play-pause svg { width: 22px; height: 22px; }

  /* ── Panneaux latéraux : pleine largeur ── */
  .track-panel,
  .mix-panel { width: 100vw; max-width: 100vw; }
  .panel-header { padding: 20px 16px 14px; }
  .track-item { padding: 10px 16px; }
  .mix-panel-header { padding: 20px 16px 14px; }
  .mix-track-item { padding: 9px 16px; }

  /* ── Auth modal ── */
  .modal-box { padding: 24px 16px; }

  /* ── Community hub ── */
  .selection-officielle-header { padding: 0 16px; }
  .community-hub { margin: 24px 16px 0; }
  .hub-header { padding: 14px 16px; gap: 10px; }
  .hub-stats-row { grid-template-columns: repeat(2, 1fr); }
  .hub-stat { padding: 12px 8px; }
  .hub-stat-val { font-size: 18px; }
  .hub-stat-lbl { font-size: 8px; letter-spacing: .1em; }
  .hub-panel { padding: 14px 16px; }
  .hub-cta { padding: 14px 16px; }
  .hub-cta-inner { padding: 14px 16px; }

  /* ── WATT section legacy ── */
  .watt-section { margin: 0 16px 32px; }
  .watt-header { padding: 18px 20px; }
  .watt-ranking,
  .watt-info { padding: 18px 20px; }
}

/* ── 480px : Portrait standard / petits Android ─────────────────────────── */
@media (max-width: 480px) {

  /* Grille 1 colonne */
  .playlists-grid { grid-template-columns: 1fr; }
  .playlist-card { aspect-ratio: 16 / 9; min-height: 160px; }
  .card-content { padding: 16px; }

  /* Header auth : hide name */
  .user-name { display: none; }

  /* Hub stats toujours 2×2 */
  .hub-stat-val { font-size: 16px; }

  /* Modales full-width */
  .modal-box { width: 94vw; padding: 20px 14px; }
  .premium-features-grid { grid-template-columns: 1fr; gap: 8px; }

  /* Progress bar tactile */
  .progress-bar { height: 34px; }

  /* Contact/feedback textarea */
  .contact-textarea { min-height: 90px; }
}

/* ── 390px : iPhone 14/15 Pro, Pixel 8 ─────────────────────────────────── */
@media (max-width: 390px) {
  header { padding: 10px 12px; }
  .logo-text { font-size: 12px; letter-spacing: .15em; }
  .mix-toggle-btn { padding: 5px 8px; font-size: 8px; }
  .library-toggle-btn { padding: 5px 8px; font-size: 8px; gap: 4px; }
  .library-toggle-btn svg { width: 10px; height: 10px; }

  .hero { padding: 22px 12px 16px; }

  .playlists-grid { padding: 0 12px; gap: 10px; }
  .hitmix-section { padding: 0 12px; }
  .hitmix-card { padding: 16px 12px; }

  .community-hub { margin: 20px 12px 0; }
  .hub-header { flex-wrap: wrap; gap: 8px; }
  .hub-logo-text { font-size: 13px; letter-spacing: .2em; }
  .hub-tagline { display: none; }
  .hub-join-btn { font-size: 8px; padding: 6px 10px; }

  /* Player encore plus compact */
  #player { padding: 0 10px; gap: 6px; }
  .player-controls { gap: 8px; }
  .player-track-name { font-size: 11px; }
}

/* ── iOS Safari : safe area + touch optimisations ───────────────────────── */

/* Safe area pour notch iPhone (iOS 11+) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  :root { --player-h: calc(80px + env(safe-area-inset-bottom)); }
  body { padding-bottom: var(--player-h); }
  #player {
    padding-bottom: env(safe-area-inset-bottom);
    height: var(--player-h);
  }
  @media (max-width: 640px) {
    :root { --player-h: calc(72px + env(safe-area-inset-bottom)); }
  }
}

/* Touch-action sur les zones cliquables — évite délais 300ms iOS */
.progress-bar,
.playlist-card,
.card-quick-play,
.ctrl-btn,
.track-item,
.hub-rank-row,
.hub-recent-row { touch-action: manipulation; }

/* Pas de callout sur tap long (sélection texte) */
.ctrl-btn,
.card-quick-play,
.hub-cta-btn { -webkit-tap-highlight-color: transparent; }

/* Scroll smooth pour panneaux latéraux (iOS) */
.track-list,
.mix-track-list { -webkit-overflow-scrolling: touch; }

/* ── HUB EMPTY STATE ─────────────────────────────────────────── */
.hub-t3-empty {
  font-size: 12px;
  color: rgba(200,180,255,.4);
  padding: 14px 0 6px;
  text-align: center;
}
.hub-t3-empty-link {
  color: rgba(200,180,255,.65);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,180,255,.2);
}

/* ══════════════════════════════════════════════════════════════════
   WATT CONTROL CENTER — AGENT PANEL
   ══════════════════════════════════════════════════════════════════ */

/* ── Toggle button (header) ──────────────────────────────────────── */
.agent-toggle-btn {
  position: relative;
  background: none;
  border: 1px solid rgba(255,200,0,.2);
  color: rgba(255,200,0,.5);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: all .25s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.agent-toggle-btn:hover {
  border-color: rgba(255,200,0,.55);
  color: #ffd700;
  box-shadow: 0 0 10px rgba(255,200,0,.12);
}
.agent-toggle-btn svg { opacity: .7; flex-shrink: 0; }
.agent-toggle-btn:hover svg { opacity: 1; }

/* ── Panel shell ─────────────────────────────────────────────────── */
.agent-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(400px, 100vw);
  height: 100vh;
  background: #05050a;
  border-left: 1px solid rgba(255,200,0,.1);
  z-index: 100;
  transition: right .4s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--player-h);
  overflow: hidden;
}
.agent-panel.open { right: 0; }

/* ── Panel header ────────────────────────────────────────────────── */
.agent-panel-header {
  padding: 22px 20px 16px;
  border-bottom: 1px solid rgba(255,200,0,.08);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.agent-panel-title {
  flex: 1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #050505;
  text-shadow: 0 0 6px #ffd700, 0 0 14px #ffaa00, 0 0 26px #ff8800;
  display: flex;
  align-items: center;
  gap: 7px;
}
.agent-panel-close,
.agent-refresh-btn {
  background: none;
  border: none;
  color: rgba(255,200,0,.35);
  cursor: pointer;
  font-size: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: color .2s, background .2s;
  flex-shrink: 0;
}
.agent-panel-close:hover,
.agent-refresh-btn:hover {
  color: #ffd700;
  background: rgba(255,200,0,.07);
}

/* ── Tab navigation ──────────────────────────────────────────────── */
.agent-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,200,0,.08);
  flex-shrink: 0;
}
.agent-tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,220,100,.3);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 11px 0;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.agent-tab-btn:hover { color: rgba(255,220,100,.65); }
.agent-tab-btn.active {
  color: #ffd700;
  border-bottom-color: #ffd700;
}

/* ── Scrollable body ─────────────────────────────────────────────── */
.agent-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* ── Loading dots ────────────────────────────────────────────────── */
.agent-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 0;
}
.agent-loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,200,0,.3);
  animation: agentPulse 1.2s ease-in-out infinite;
}
.agent-loading-dot:nth-child(2) { animation-delay: .2s; }
.agent-loading-dot:nth-child(3) { animation-delay: .4s; }
@keyframes agentPulse {
  0%, 80%, 100% { transform: scale(.8); opacity: .4; }
  40%           { transform: scale(1.15); opacity: 1; }
}

/* ── Error state ─────────────────────────────────────────────────── */
.agent-error {
  text-align: center;
  padding: 40px 16px;
  color: rgba(255,180,100,.5);
  font-size: 12px;
  line-height: 1.8;
}
.agent-error-icon { font-size: 24px; margin-bottom: 10px; }
.agent-error-sub  { font-size: 11px; color: rgba(255,180,100,.3); margin-top: 4px; }
.agent-retry-btn {
  margin-top: 14px;
  background: none;
  border: 1px solid rgba(255,180,100,.25);
  color: rgba(255,180,100,.55);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.agent-retry-btn:hover { border-color: rgba(255,180,100,.55); color: rgba(255,180,100,.9); }

/* ── Empty state ─────────────────────────────────────────────────── */
.agent-empty {
  text-align: center;
  padding: 40px 16px;
  color: rgba(255,220,100,.25);
  font-size: 12px;
  line-height: 1.9;
}
.agent-empty-icon { font-size: 28px; margin-bottom: 10px; display: block; }
.agent-empty-sub  { font-size: 11px; color: rgba(255,220,100,.18); margin-top: 4px; }
.agent-cta-link   { color: rgba(255,200,0,.55); text-decoration: none; border-bottom: 1px solid rgba(255,200,0,.2); font-size: 11px; }
.agent-cta-link:hover { color: #ffd700; }

/* ── Section title ───────────────────────────────────────────────── */
.agent-section-title {
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,200,0,.4);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 10px;
}
.agent-section-title:first-child { margin-top: 4px; }

/* ── Stats row (Cockpit) ─────────────────────────────────────────── */
.agent-stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.agent-stat-card {
  flex: 1;
  background: rgba(255,200,0,.04);
  border: 1px solid rgba(255,200,0,.1);
  border-radius: 4px;
  padding: 12px 8px;
  text-align: center;
}
.agent-stat-val {
  font-size: 20px;
  font-weight: 900;
  color: #ffd700;
  line-height: 1;
  letter-spacing: -.02em;
}
.agent-stat-lbl {
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,200,0,.3);
  margin-top: 5px;
}

/* ── Ranking list (Cockpit) ──────────────────────────────────────── */
.agent-rank-list { display: flex; flex-direction: column; gap: 4px; }
.agent-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 4px;
  background: rgba(255,200,0,.02);
  border: 1px solid rgba(255,200,0,.06);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.agent-rank-row:hover {
  background: rgba(255,200,0,.06);
  border-color: rgba(255,200,0,.15);
}
.agent-medal    { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }
.agent-rank-num { font-size: 10px; font-weight: 700; color: rgba(255,200,0,.35); width: 22px; text-align: center; flex-shrink: 0; letter-spacing: .05em; }
.agent-rank-info { flex: 1; min-width: 0; }
.agent-rank-name  { font-size: 12px; font-weight: 600; color: rgba(255,240,180,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.agent-rank-genre { font-size: 9px; color: rgba(255,200,0,.3); letter-spacing: .12em; text-transform: uppercase; }
.agent-rank-plays { font-size: 10px; color: rgba(255,200,0,.55); flex-shrink: 0; }
.agent-rank-tracks { font-size: 9px; color: rgba(255,200,0,.3); flex-shrink: 0; }
.agent-full-link {
  display: block;
  text-align: center;
  margin: 16px 0 4px;
  font-size: 10px;
  color: rgba(255,200,0,.4);
  text-decoration: none;
  letter-spacing: .15em;
  transition: color .2s;
}
.agent-full-link:hover { color: #ffd700; }

/* ── Track list (Monitoring) ─────────────────────────────────────── */
.agent-track-list { display: flex; flex-direction: column; gap: 4px; }
.agent-track-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 4px;
  background: rgba(255,200,0,.02);
  border: 1px solid rgba(255,200,0,.06);
  cursor: pointer;
  transition: background .2s;
}
.agent-track-row:hover { background: rgba(255,200,0,.06); }
.agent-track-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,200,0,.15);
  color: #ffd700;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.agent-track-info   { flex: 1; min-width: 0; }
.agent-track-name   { font-size: 12px; font-weight: 600; color: rgba(255,240,180,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-track-meta   { font-size: 10px; color: rgba(255,200,0,.35); margin-top: 2px; }
.agent-track-artist { color: rgba(255,220,120,.5); }
.agent-track-genre  { color: rgba(255,200,0,.3); }
.agent-track-date   { font-size: 9px; color: rgba(255,200,0,.25); text-align: right; flex-shrink: 0; line-height: 1.5; }
.agent-track-time   { color: rgba(255,200,0,.18); }
.agent-track-plays  { font-size: 9px; color: rgba(255,200,0,.4); flex-shrink: 0; }

/* ── Collab list (Inbox) ─────────────────────────────────────────── */
.agent-inbox-count {
  background: #ffd700;
  color: #050505;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: 4px;
}
.agent-collab-list { display: flex; flex-direction: column; gap: 8px; }
.agent-collab-row {
  padding: 12px;
  border-radius: 5px;
  background: rgba(255,200,0,.03);
  border: 1px solid rgba(255,200,0,.09);
}
.agent-collab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.agent-collab-from  { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; }
.agent-collab-name  { color: rgba(255,220,120,.8); text-decoration: none; font-weight: 600; }
.agent-collab-name:hover { color: #ffd700; }
.agent-collab-arrow { color: rgba(255,200,0,.3); font-size: 10px; }
.agent-collab-to    { color: rgba(255,220,100,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-collab-meta  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.agent-collab-date  { font-size: 9px; color: rgba(255,200,0,.25); }
.agent-collab-status {
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  font-weight: 600;
}
.agent-collab-status.pending  { background: rgba(255,200,0,.12);  color: #ffd700; }
.agent-collab-status.seen     { background: rgba(100,180,255,.1); color: rgba(100,180,255,.7); }
.agent-collab-status.accepted { background: rgba(50,220,100,.1);  color: rgba(50,220,100,.7); }
.agent-collab-status.declined { background: rgba(255,80,80,.1);   color: rgba(255,80,80,.6); }
.agent-collab-msg {
  font-size: 11px;
  color: rgba(255,240,200,.4);
  line-height: 1.6;
  font-style: italic;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .agent-panel { width: 100vw; max-width: 100vw; }
  .agent-toggle-btn { padding: 6px 10px; font-size: 9px; letter-spacing: .12em; }
  .agent-stats-row { gap: 5px; }
  .agent-stat-val { font-size: 16px; }
}
.hub-t3-empty-link:hover { color: rgba(200,180,255,.9); }

/* ── AGENT PANEL — Onglet DNA Classifier ─────────────────────────────────── */

/* Formulaire d'entrée */
.agent-dna-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.agent-dna-input {
  background: rgba(255,200,0,.04);
  border: 1px solid rgba(255,200,0,.15);
  border-radius: 4px;
  color: rgba(255,240,180,.85);
  font-family: inherit;
  font-size: 12px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .2s;
}
.agent-dna-input::placeholder { color: rgba(255,200,0,.25); }
.agent-dna-input:focus { border-color: rgba(255,200,0,.5); }
.agent-dna-btn {
  background: rgba(255,200,0,.1);
  border: 1px solid rgba(255,200,0,.3);
  border-radius: 4px;
  color: #ffd700;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 11px;
  cursor: pointer;
  transition: all .2s;
}
.agent-dna-btn:hover:not(:disabled) { background: rgba(255,200,0,.18); border-color: rgba(255,200,0,.6); }
.agent-dna-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Carte résultat ADN */
.agent-dna-card {
  border: 1px solid rgba(255,200,0,.15);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 4px;
}
.agent-dna-badge {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 10px;
}
.agent-dna-playlist {
  font-size: 11px;
  color: rgba(255,240,180,.5);
  margin-bottom: 4px;
}
.agent-dna-playlist strong { font-weight: 700; }
.agent-dna-mood {
  font-size: 11px;
  color: rgba(255,220,100,.4);
  font-style: italic;
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Jauge de confiance */
.agent-dna-confidence { margin-bottom: 12px; }
.agent-dna-conf-label {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,200,0,.35);
  margin-bottom: 5px;
}
.agent-dna-conf-label span { color: rgba(255,200,0,.7); font-weight: 700; }
.agent-dna-conf-bar {
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  overflow: hidden;
}
.agent-dna-conf-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* Score bars par ADN */
.agent-dna-scores { display: flex; flex-direction: column; gap: 5px; }
.agent-dna-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
}
.agent-dna-score-label {
  width: 100px;
  flex-shrink: 0;
  color: rgba(255,220,100,.35);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.agent-dna-score-row.winner .agent-dna-score-label { color: rgba(255,220,100,.75); font-weight: 700; }
.agent-dna-score-bar-wrap {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.05);
  border-radius: 99px;
  overflow: hidden;
}
.agent-dna-score-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
}
.agent-dna-score-pct {
  width: 28px;
  text-align: right;
  color: rgba(255,200,0,.4);
  flex-shrink: 0;
}
.agent-dna-score-row.winner .agent-dna-score-pct { color: rgba(255,200,0,.85); }

/* Prompt Suno */
.agent-suno-box {
  background: rgba(255,200,0,.03);
  border: 1px solid rgba(255,200,0,.1);
  border-radius: 5px;
  padding: 12px;
  position: relative;
}
.agent-suno-prompt {
  font-size: 11px;
  color: rgba(255,240,200,.6);
  line-height: 1.7;
  padding-right: 70px;
}
.agent-suno-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,200,0,.1);
  border: 1px solid rgba(255,200,0,.25);
  border-radius: 3px;
  color: rgba(255,200,0,.7);
  font-size: 9px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  white-space: nowrap;
}
.agent-suno-copy:hover { background: rgba(255,200,0,.2); color: #ffd700; }

/* Tags de style */
.agent-suno-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.agent-suno-tag {
  font-size: 9px;
  letter-spacing: .1em;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid rgba(255,200,0,.2);
  color: rgba(255,200,0,.5);
  cursor: pointer;
  transition: all .2s;
}
.agent-suno-tag:hover { border-color: rgba(255,200,0,.5); color: #ffd700; }
.agent-suno-tag.copied { border-color: rgba(80,220,120,.5); color: rgba(80,220,120,.8); }

/* Méta ligne */
.agent-dna-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 9px;
  color: rgba(255,200,0,.3);
  margin: 10px 0 4px;
  letter-spacing: .08em;
}
.agent-dna-method {
  font-size: 9px;
  color: rgba(255,200,0,.18);
  letter-spacing: .08em;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER — luminosité discrète et uniforme
   Tous les éléments partagent la même intensité (color + opacity identiques)
   pour un rendu cohérent. Discret mais lisible.
   ───────────────────────────────────────────────────────────────────────── */
.smyle-footer {
  padding: 32px 48px calc(var(--player-h, 96px) + 24px);
  text-align: center;
}
.smyle-footer-line {
  display: inline-block;
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Même couleur / même opacité pour TOUT le texte du footer */
  color: rgba(200, 170, 255, 0.42);
  line-height: 1.9;
}
.smyle-footer-line,
.smyle-footer-line * {
  color: rgba(200, 170, 255, 0.42);
  font-size: 10.5px;
  letter-spacing: .22em;
}
.smyle-footer-link {
  cursor: pointer;
  transition: color 0.18s ease, text-shadow 0.18s ease;
}
.smyle-footer-link:hover {
  color: rgba(225, 200, 255, 0.85) !important;
  text-shadow: 0 0 10px rgba(170, 0, 255, 0.4);
}
.smyle-footer-tag {
  font-style: italic;
  /* Garde exactement la même intensité — le style italique suffit comme
     différenciation visuelle, pas besoin de baisser l'opacité */
}
@media (max-width: 600px) {
  .smyle-footer { padding: 24px 18px calc(var(--player-h, 96px) + 20px); }
  .smyle-footer-line,
  .smyle-footer-line * { font-size: 9.5px; letter-spacing: .16em; }
}

/* ── Boutons globaux like / add-to-playlist (partagés marketplace + profil + modal) ── */
.like-btn,
.add-to-pl-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  flex: 0 0 24px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
  vertical-align: middle;
  font-family: inherit;
  font-weight: 400;
}
.add-to-pl-btn:hover {
  color: #cc88ff;
  border-color: rgba(204,136,255,.45);
  background: rgba(204,136,255,.06);
}
.like-btn::before { content: "\2661"; font-size: 14px; }
.like-btn:hover {
  color: #ff7799;
  border-color: rgba(255,119,153,.35);
  background: rgba(255,119,153,.05);
}
.like-btn.liked::before { content: "\2665"; }
.like-btn.liked {
  color: #ff5577;
  border-color: rgba(255,85,119,.5);
  background: rgba(255,85,119,.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMYLE MINI PLAYER BAR — styles DÉPLACÉS vers ui/player/mini-bar.css
   (2026-06-11). La mini-bar injecte elle-même sa feuille : elle est ainsi
   stylée sur TOUTES les pages (library/artiste ne chargent pas style.css —
   la barre s'affichait nue en texte brut). Ne pas re-déclarer .smb-* ici.
   ═══════════════════════════════════════════════════════════════════════════ */