@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800&display=swap');

/* ══ TOKENS — LIGHT (défaut) ════════════════════════════════════════ */
:root {
  --c1: #00d4ff;
  --c2: #6b5cff;
  --grad: linear-gradient(135deg, #00d4ff 0%, #6b5cff 100%);
  --grad-text: linear-gradient(135deg, #00d4ff 0%, #6b5cff 100%);
  --grad-subtle: linear-gradient(135deg, rgba(0,212,255,.10), rgba(107,92,255,.10));
  --accent-s: rgba(107,92,255,.09);

  --bg:      #ffffff;
  --bg2:     #f8f8fb;
  --bg3:     #f1f1f6;
  --panel:   rgba(0,0,0,.04);
  --panel-h: rgba(0,0,0,.07);

  --tx:  #0d0d14;
  --tx2: #62627a;
  --tx3: #a8a8be;

  --bd:  rgba(0,0,0,.08);
  --bd2: rgba(0,0,0,.13);

  --shadow-card: 0 2px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lift: 0 8px 36px rgba(107,92,255,.18);
  --shadow-glow: 0 6px 24px rgba(107,92,255,.38);

  --r:   14px;
  --r-s:  10px;
  --r-xs: 6px;
  --side: 240px;
  --player-h: 76px;
}

/* ══ TOKENS — DARK ══════════════════════════════════════════════════ */
body.theme-dark {
  --bg:      #0b0b10;
  --bg2:     #111118;
  --bg3:     #17171f;
  --panel:   rgba(255,255,255,.04);
  --panel-h: rgba(255,255,255,.08);

  --tx:  #eeeef5;
  --tx2: #8888a0;
  --tx3: #4a4a62;

  --bd:  rgba(255,255,255,.07);
  --bd2: rgba(255,255,255,.13);

  --shadow-card: 0 4px 20px rgba(0,0,0,.5);
  --shadow-lift: 0 8px 36px rgba(107,92,255,.28);
}

body.theme-dark .topbar        { background: rgba(11,11,16,.92); }
body.theme-dark .now-playing   { background: rgba(11,11,16,.95); }
body.theme-dark .search        { background: var(--bg2); }
body.theme-dark .tb-btn:not(.tb-btn-cta):hover { background: var(--panel-h); color: var(--tx); }

/* ══ RESET ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--tx);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; outline: none; box-shadow: none;
  color: inherit;
}
button:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
img { display: block; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 4px; }

/* ══ LAYOUT ═════════════════════════════════════════════════════════ */
.app-shell { display: flex; min-height: 100vh; }

/* ══ SIDEBAR ════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--bd);
  z-index: 60;
  transition: background .2s, border-color .2s;
}
.sidebar-top {
  flex: 1;
  overflow-y: auto;
  padding: 28px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* Brand */
.brand { display: flex; align-items: center; gap: 11px; color: var(--tx); width: 100%; }
.brand-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--grad);
  display: grid; place-items: center;
  font-size: 16px; color: #fff;
  flex-shrink: 0;
  box-shadow: var(--shadow-glow);
}
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.brand-name span {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Nav */
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tx3);
  padding: 0 12px; margin-bottom: 6px;
}
nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-s);
  color: var(--tx2);
  font-weight: 500; font-size: 16.5px;
  transition: background .12s, color .12s;
}
nav a .icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; opacity: .75; }
nav a:hover { color: var(--tx); background: var(--panel-h); }
nav a.active { color: var(--c2); background: var(--accent-s); font-weight: 700; }
nav a.active .icon { opacity: 1; }
body.theme-dark nav a.active { color: var(--c1); }

/* Sidebar bottom — langue + dropdown */
.sidebar-bottom { padding: 16px 20px; position: relative; }
.lang-wrap { position: relative; }
.lang {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--bd);
  color: var(--tx2);
  border-radius: var(--r-s);
  padding: 10px 14px;
  font-size: 14px; font-weight: 500;
  text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .12s, border-color .12s;
  cursor: pointer;
}
.lang:hover { background: var(--panel-h); border-color: var(--bd2); }
.lang-arrow { font-size: 11px; opacity: .6; transition: transform .2s; }
.lang-open .lang-arrow { transform: rotate(180deg); }
.lang-dropdown {
  position: absolute;
  bottom: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg);
  border: 1px solid var(--bd2);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  display: none;
  z-index: 100;
}
.lang-open .lang-dropdown { display: block; }
.lang-dropdown a {
  display: block; padding: 10px 14px;
  font-size: 14px; font-weight: 500; color: var(--tx2);
  transition: background .1s, color .1s;
}
.lang-dropdown a:hover { background: var(--panel-h); color: var(--tx); }
.lang-dropdown a.active { color: var(--c2); font-weight: 700; }

/* ══ MAIN COLUMN ════════════════════════════════════════════════════ */
.main-col { margin-left: var(--side); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

/* ══ TOPBAR ══════════════════════════════════════════════════════════ */
.topbar {
  position: fixed; left: var(--side); right: 0; top: 0; height: 60px;
  display: flex; align-items: center; padding: 0 32px; gap: 12px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  z-index: 50; transition: background .2s, border-color .2s;
}
.search {
  flex: 1; height: 42px;
  background: var(--bg2); border: 1px solid var(--bd);
  border-radius: 999px;
  display: flex; align-items: center; gap: 10px; padding: 0 18px;
  transition: border-color .15s, box-shadow .15s;
}
.search:focus-within { border-color: rgba(107,92,255,.4); box-shadow: 0 0 0 3px rgba(107,92,255,.08); }
.search-icon { color: var(--tx3); font-size: 15px; }
.search input {
  width: 100%; border: 0; outline: 0; background: transparent;
  color: var(--tx); font: 400 14.5px 'Inter';
}
.search input::placeholder { color: var(--tx3); }

.topbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tb-btn {
  height: 38px; padding: 0 18px; border-radius: 999px;
  background: transparent; border: 1px solid var(--bd2);
  color: var(--tx2); font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 6px;
  transition: all .12s; white-space: nowrap;
}
.tb-btn:hover { color: var(--tx); background: var(--panel); }
.tb-btn.theme-toggle { width: 38px; padding: 0; border-radius: 50%; justify-content: center; font-size: 16px; }
.tb-btn-cta { background: var(--grad); border: 0; color: #fff; font-weight: 700; box-shadow: var(--shadow-glow); }
.tb-btn-cta:hover { opacity: .88; color: #fff; background: var(--grad); }

/* ══ CONTENT ════════════════════════════════════════════════════════ */
.content { flex: 1; padding: 76px 34px 48px; }

/* ══ HERO ════════════════════════════════════════════════════════════ */
.hero {
  margin-top: 24px; border-radius: var(--r);
  padding: 58px 58px 58px 64px;
  background: linear-gradient(135deg, rgba(0,212,255,.07) 0%, rgba(107,92,255,.12) 60%, rgba(107,92,255,.03) 100%), var(--bg3);
  border: 1px solid rgba(107,92,255,.13);
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  overflow: hidden; position: relative; min-height: 290px;
}
.hero-text { flex: 1; position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c2); margin-bottom: 18px;
}
.hero-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c1);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero h1 {
  font-size: clamp(36px, 4vw, 60px); font-weight: 800;
  line-height: 1.08; letter-spacing: -.045em; margin-bottom: 18px; color: var(--tx);
}
.grad-text { background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { font-size: 16px; color: var(--tx2); max-width: 480px; line-height: 1.7; margin-bottom: 30px; font-weight: 400; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad); color: #fff; padding: 13px 28px;
  border-radius: 999px; font-weight: 700; font-size: 15px; border: 0;
  box-shadow: var(--shadow-glow); transition: opacity .15s, transform .15s; letter-spacing: -.01em;
}
.btn-primary:hover { opacity: .85; transform: translateY(-1px); }
.hero-stack {
  display: grid; grid-template-columns: repeat(2, 120px); gap: 12px;
  transform: rotate(5deg) translateY(-6px); flex-shrink: 0; position: relative; z-index: 1;
}
.hero-mini-card {
  width: 120px; height: 120px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--bd2); box-shadow: var(--shadow-card); background: var(--bg3);
}
.hero-mini-card img { width:100%; height:100%; object-fit:cover; }

/* ══ SECTION ════════════════════════════════════════════════════════ */
.section { margin-top: 56px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.section-title { display: flex; align-items: center; gap: 16px; }
.section-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad); display: grid; place-items: center;
  font-size: 20px; flex-shrink: 0;
  box-shadow: var(--shadow-glow); color: #fff;
}
.section-title h2 { font-size: 23px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; color: var(--tx); }
.section-title p { font-size: 14.5px; color: var(--tx2); margin-top: 2px; font-weight: 400; }
.btn-ghost {
  font-size: 15px; font-weight: 600; color: var(--tx2);
  border: 1px solid var(--bd2); border-radius: 999px; padding: 8px 18px;
  background: transparent; transition: all .12s; letter-spacing: -.01em;
}
.btn-ghost:hover { color: var(--tx); border-color: var(--c2); background: var(--accent-s); }

/* ══ SLIDER ════════════════════════════════════════════════════════ */
.slider-shell { position: relative; }
.radio-row { display: flex; gap: 18px; overflow: hidden; scroll-behavior: smooth; padding: 4px 2px 6px; }
.radio-row .radio-card { flex: 0 0 calc((100% - 90px) / 6); min-width: 0; }
.slide-arrows { display: flex; gap: 5px; margin-top: 10px; justify-content: flex-end; }
.slide-arrows button {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--bd2); background: transparent;
  color: var(--tx2); font-size: 17px; display: grid; place-items: center; transition: all .12s;
}
.slide-arrows button:hover { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--shadow-glow); }

/* ══ RADIO CARD ════════════════════════════════════════════════════ */
.radio-card { color: var(--tx); position: relative; }
.cover {
  aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden;
  background: var(--bg3); border: 1px solid var(--bd);
  position: relative; transition: border-color .2s, box-shadow .2s;
}
.cover img { width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.cover-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.38);
  display: grid; place-items: center; opacity: 0; transition: opacity .2s; border-radius: inherit;
}
.play-icon {
  width: 56px; height: 56px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-size: 22px; color: var(--c2);
  box-shadow: 0 4px 20px rgba(0,0,0,.35); transform: scale(.72); transition: transform .2s;
}
.radio-card:hover .cover { border-color: rgba(107,92,255,.3); box-shadow: var(--shadow-lift); }
.radio-card:hover .cover img { transform: scale(1.04); }
.radio-card:hover .cover-overlay { opacity: 1; }
.radio-card:hover .play-icon { transform: scale(1); }

.radio-card b {
  display: block; margin-top: 11px;
  font-size: 15.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.015em;
}
.radio-card small { font-size: 14px; color: var(--tx2); font-weight: 400; margin-top: 3px; display: block; }

/* Rank badge — plus grand et visible */
.rank {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  font-size: 15px; font-weight: 800;
  background: var(--grad);
  color: #fff; border-radius: 7px;
  padding: 5px 12px;
  box-shadow: 0 3px 10px rgba(107,92,255,.5);
  letter-spacing: .02em;
  min-width: 28px; text-align: center;
}

/* ══ GRIDS ════════════════════════════════════════════════════════ */
/* .radio-grid définie plus bas dans une règle unique et propre */

/* ══ GENRE GRID ════════════════════════════════════════════════════ */
.genre-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.genre {
  height: 102px; border-radius: var(--r-s); padding: 16px;
  display: flex; align-items: flex-end;
  color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: -.01em;
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .2s, box-shadow .2s;
}
.genre::before { content: ''; position: absolute; inset: 0; background: var(--img); opacity: .75; transition: opacity .2s; }
.genre span { position: relative; z-index: 1; }
.genre:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.genre:hover::before { opacity: .9; }

/* ══ RADIO PAGE ════════════════════════════════════════════════════ */
.radio-bg { position: fixed; inset: 0; background-size: cover; background-position: center; filter: blur(90px) saturate(.4); opacity: .08; transform: scale(1.2); z-index: 0; }
.radio-hero { display: grid; grid-template-columns: 250px 1fr 280px; gap: 34px; align-items: start; padding-top: 24px; position: relative; z-index: 1; }
.radio-cover { width: 100%; aspect-ratio: 1; border-radius: var(--r); object-fit: cover; border: 1px solid var(--bd2); box-shadow: var(--shadow-lift); }
.radio-info { padding-top: 4px; }
.breadcrumb { font-size: 12.5px; color: var(--tx3); font-weight: 500; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.breadcrumb span { opacity: .5; }
.radio-info h1 { font-size: clamp(30px, 3.5vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin-bottom: 12px; }
.radio-meta { font-size: 14px; color: var(--tx2); margin-bottom: 26px; display: flex; align-items: center; gap: 8px; font-weight: 400; }
.radio-meta strong { background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
.actions { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; }
.play-btn {
  display: flex; align-items: center; gap: 9px;
  background: var(--grad); color: #fff; border: 0;
  border-radius: 999px; padding: 13px 28px;
  font: 700 15px 'Inter'; box-shadow: var(--shadow-glow);
  transition: opacity .15s, transform .15s; letter-spacing: -.01em;
}
.play-btn:hover { opacity: .85; transform: translateY(-1px); }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--bd2); background: transparent; color: var(--tx2); font-size: 17px; display: grid; place-items: center; transition: all .12s; }
.icon-btn:hover { color: var(--tx); background: var(--panel); }
.glass-card { background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r); padding: 22px; }
.glass-card h2 { font-size: 15px; font-weight: 700; margin-bottom: 9px; letter-spacing: -.01em; }
.glass-card p { font-size: 14px; color: var(--tx2); line-height: 1.65; font-weight: 400; }
.side-list { display: flex; flex-direction: column; gap: 2px; }
.side-list a { display: grid; grid-template-columns: 46px 1fr; gap: 11px; align-items: center; color: var(--tx2); padding: 9px 8px; border-radius: var(--r-s); transition: all .12s; font-weight: 500; font-size: 14px; }
.side-list a:hover { color: var(--tx); background: var(--panel); }
.side-list img { width: 46px; height: 46px; border-radius: var(--r-xs); object-fit: cover; }
.listeners { display: flex; gap: 12px; align-items: center; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--bd); display: grid; place-items: center; font-size: 21px; }

/* ══ FOOTER ════════════════════════════════════════════════════════ */
.site-footer { margin-top: 0; padding: 48px 34px 32px; border-top: 1px solid var(--bd); background: var(--bg2); display: grid; grid-template-columns: 1.6fr 2fr; gap: 40px; transition: background .2s; }
.footer-col-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand-name { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -.025em; }
.footer-brand-name .brand-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; font-size: 14px; color: #fff; flex-shrink: 0; box-shadow: 0 3px 12px rgba(107,92,255,.4); }
.footer-brand-name span { background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.footer-desc { font-size: 15px; color: var(--tx2); line-height: 1.65; max-width: 265px; font-weight: 400; }
.footer-col h4 { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); margin-bottom: 15px; }
.footer-col a { display: block; font-size: 15px; font-weight: 400; color: var(--tx2); padding: 5px 0; transition: color .12s; }
.footer-col a:hover { color: var(--tx); }
.footer-bottom { grid-column: 1 / -1; border-top: 1px solid var(--bd); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--tx3); font-size: 14px; }
.socials { display: flex; gap: 5px; }
.socials span { width: 32px; height: 32px; border-radius: 7px; background: transparent; border: 1px solid var(--bd2); display: grid; place-items: center; font-size: 14px; cursor: pointer; transition: all .12s; }
.socials span:hover { background: var(--grad); border-color: transparent; color: #fff; }

/* ══ NOW PLAYING ════════════════════════════════════════════════════ */
.now-playing {
  position: fixed; left: var(--side); right: 0; bottom: 0; height: var(--player-h);
  background: rgba(255,255,255,.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--bd);
  display: flex; align-items: center; gap: 16px; padding: 0 28px;
  z-index: 55; transition: background .2s, border-color .2s;
}
.np-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-card); }
.np-thumb-link { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.np-thumb-link:hover { transform: scale(1.05); box-shadow: 0 6px 22px rgba(0,0,0,.35); }

/* ── Onglet "agrandir" sur la bordure haute ── */
.np-expand-tab {
  position: absolute; top: -15px; right: 104px;
  width: 42px; height: 24px; border-radius: 10px 10px 0 0;
  background: var(--bg2); border: 1px solid var(--bd); border-bottom: 0;
  color: var(--tx2); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 -4px 12px rgba(0,0,0,.12); transition: color .12s, transform .12s;
}
.np-expand-tab:hover { color: var(--c1); transform: translateY(-2px); }

/* ── Volume ── */
.np-volume { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.np-volume-btn {
  width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 0;
  color: var(--tx2); font-size: 16px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .12s, background .12s;
}
.np-volume-btn:hover { color: var(--tx); background: var(--panel); }
.np-volume-pop {
  width: 0; opacity: 0; overflow: hidden; margin-left: 0;
  transition: width .18s ease, opacity .18s ease, margin-left .18s ease;
  display: flex; align-items: center;
}
.np-volume:hover .np-volume-pop,
.np-volume:focus-within .np-volume-pop { width: 90px; opacity: 1; margin-left: 4px; }
.np-volume-pop input[type=range] { width: 90px; accent-color: var(--c1); cursor: pointer; }

/* ── Fermer ── */
.np-close {
  width: 36px; height: 36px; border-radius: 50%; background: transparent; border: 0;
  color: var(--tx3); font-size: 15px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: color .12s, background .12s;
}
.np-close:hover { color: #ef4444; background: rgba(239,68,68,.1); }

.np-info { flex: 1; min-width: 0; }
.np-info small { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; }
.np-info b { font-size: 16px; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.015em; color: var(--tx); }
.np-wave { display: flex; align-items: center; gap: 3px; height: 26px; flex-shrink: 0; }
.np-wave span { width: 3px; background: var(--grad); border-radius: 3px; animation: wave 1.4s ease-in-out infinite; }
.np-wave span:nth-child(1){height:30%;animation-delay:0s}
.np-wave span:nth-child(2){height:70%;animation-delay:.14s}
.np-wave span:nth-child(3){height:45%;animation-delay:.28s}
.np-wave span:nth-child(4){height:90%;animation-delay:.42s}
.np-wave span:nth-child(5){height:55%;animation-delay:.56s}
.np-wave span:nth-child(6){height:35%;animation-delay:.70s}
.np-wave span:nth-child(7){height:65%;animation-delay:.84s}
body.audio-paused .np-wave span { animation-play-state: paused; opacity: .35; }
@keyframes wave {0%,100%{transform:scaleY(.25)} 50%{transform:scaleY(1)}}
.np-play { width: 44px; height: 44px; border-radius: 50%; background: var(--grad); border: 0; color: #fff; font-size: 16px; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-glow); transition: opacity .15s, transform .15s; }
.np-play:hover { opacity: .85; transform: scale(1.07); }

/* ══ NOW PLAYING — VUE PLEIN ÉCRAN ═════════════════════════════════ */
.np-full {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.np-full.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
body.full-player-open { overflow: hidden; }
.np-full-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(ellipse 900px 600px at 15% 10%, rgba(0,212,255,.16) 0%, transparent 60%),
    radial-gradient(ellipse 800px 600px at 85% 90%, rgba(107,92,255,.18) 0%, transparent 60%);
}
.np-full-top {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px;
}
.np-full-collapse, .np-full-close {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--bd); color: var(--tx2); font-size: 16px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color .12s, background .12s;
}
.np-full-collapse:hover { color: var(--tx); background: var(--panel); }
.np-full-close:hover { color: #ef4444; background: rgba(239,68,68,.1); }
.np-full-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx2); display: flex; align-items: center; gap: 8px;
}
.np-full-eyebrow i { color: #22c55e; font-size: 9px; }
.np-full-body {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 20px 24px 48px; text-align: center;
}
.np-full-cover {
  width: min(46vw, 380px); height: min(46vw, 380px); border-radius: 28px; object-fit: cover;
  box-shadow: 0 30px 90px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}
.np-full-meta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.np-full-live {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #22c55e;
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3);
  border-radius: 999px; padding: 5px 14px;
}
.np-full-live i { font-size: 8px; }
.np-full-meta h2 { font-size: clamp(22px, 3.4vw, 32px); font-weight: 800; letter-spacing: -.03em; color: var(--tx); max-width: 600px; }
.np-full-wave { display: flex; align-items: center; gap: 4px; height: 36px; }
.np-full-wave span { width: 4px; background: var(--grad); border-radius: 4px; animation: wave 1.4s ease-in-out infinite; }
.np-full-wave span:nth-child(odd) { animation-delay: .12s; }
.np-full-wave span:nth-child(1){height:35%} .np-full-wave span:nth-child(2){height:75%} .np-full-wave span:nth-child(3){height:50%}
.np-full-wave span:nth-child(4){height:95%} .np-full-wave span:nth-child(5){height:60%} .np-full-wave span:nth-child(6){height:40%}
.np-full-wave span:nth-child(7){height:80%} .np-full-wave span:nth-child(8){height:55%} .np-full-wave span:nth-child(9){height:30%}
body.audio-paused .np-full-wave span { animation-play-state: paused; opacity: .35; }
.np-full-controls { display: flex; align-items: center; justify-content: center; gap: 28px; }
.np-full-side-btn {
  width: 48px; height: 48px; border-radius: 50%; background: var(--bg2); border: 1px solid var(--bd);
  color: var(--tx2); font-size: 18px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .12s, background .12s, border-color .12s;
}
.np-full-side-btn:hover { color: var(--tx); border-color: var(--c2); background: var(--panel); }
.np-full-play {
  width: 76px; height: 76px; border-radius: 50%; background: var(--grad); border: 0; color: #fff;
  font-size: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-glow); transition: transform .12s, opacity .12s;
}
.np-full-play:hover { transform: scale(1.06); opacity: .92; }
.np-full-volume { display: flex; align-items: center; gap: 12px; width: min(70vw, 280px); color: var(--tx3); font-size: 14px; }
.np-full-volume input[type=range] { flex: 1; accent-color: var(--c1); cursor: pointer; }
@media (max-width: 640px) {
  .np-expand-tab { right: 70px; }
  .np-full-cover { width: 72vw; height: 72vw; border-radius: 22px; }
  .np-full-controls { gap: 20px; }
  .np-full-play { width: 66px; height: 66px; font-size: 22px; }
}

/* ══ RESPONSIVE ════════════════════════════════════════════════════ */
@media(max-width:1280px){
  .radio-row .radio-card{flex-basis:calc((100% - 54px)/4)}
  .radio-grid{grid-template-columns:repeat(4,1fr)}
  .genre-grid{grid-template-columns:repeat(4,1fr)}
  .site-footer{grid-template-columns:1fr 1fr}
}
@media(max-width:1060px){
  :root{--side:0px}
  .sidebar{transform:translateX(-100%)}
  .main-col{margin-left:0}
  .topbar{left:0}
  .search{max-width:58vw}
  .radio-hero{grid-template-columns:1fr}
  .radio-cover{max-width:200px}
  .hero{padding:32px}
  .hero-stack{display:none}
  .now-playing{left:0}
}
@media(max-width:680px){
  .radio-grid{grid-template-columns:repeat(2,1fr)}
  .radio-row .radio-card{flex-basis:calc((100% - 18px)/2)}
  .genre-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:30px}
  .site-footer{grid-template-columns:1fr;padding:32px 18px 26px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .topbar{padding:0 18px}
  .search{max-width:calc(100vw - 120px)}
  .content{padding:72px 18px 40px}
}

/* ══ DASHBOARD RADIOS + MODALE ═════════════════════════════════════ */
.dashboard-head { align-items: center; }
.dash-add-btn { min-height: 42px; }
.alert { margin-bottom: 20px; padding: 14px 16px; border-radius: 18px; font-weight: 800; border: 1px solid var(--bd); }
.alert-ok { background: rgba(34,197,94,.12); color: #16a34a; }
.alert-error { background: rgba(239,68,68,.12); color: #ef4444; }
.empty-state {
  min-height: 360px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background:
    radial-gradient(circle at 20% 0%, rgba(0,212,255,.16), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(107,92,255,.18), transparent 32%),
    var(--bg2);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 42px 24px;
}
.empty-state > * { max-width: 420px; }
.empty-icon { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 22px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: var(--shadow-glow); }
.empty-state h3 { font-size: 26px; letter-spacing: -.04em; margin-bottom: 8px; }
.empty-state p { color: var(--tx2); margin-bottom: 22px; }
.my-radio-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
.manage-radio-card { padding: 12px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--bg2); box-shadow: var(--shadow-card); }
.manage-radio-card .cover { margin-bottom: 12px; }
.manage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.manage-actions form { margin: 0; }
.manage-actions .tb-btn { width: 100%; justify-content: center; height: 38px; padding: 0 10px; font-size: 13px; }
.danger-btn:hover { background: rgba(239,68,68,.12) !important; color: #ef4444 !important; border-color: rgba(239,68,68,.25) !important; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 120; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-backdrop.is-open { display: flex; }
.modal-card { width: min(760px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--bd2); border-radius: 24px; background: var(--bg); box-shadow: 0 30px 120px rgba(0,0,0,.45); padding: 24px; position: relative; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bd); background: var(--bg2); color: var(--tx2); font-size: 24px; line-height: 1; }
.modal-close:hover { color: var(--tx); background: var(--panel-h); }
.modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-right: 42px; }
.modal-head h2 { font-size: 24px; letter-spacing: -.04em; }
.modal-head p { color: var(--tx2); font-size: 14px; }
.nice-form { display: grid; gap: 16px; }
.fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 800; color: var(--tx); }
.field input, .field textarea, .field select {
  width: 100%; border: 1px solid var(--bd2); background: var(--bg2); color: var(--tx);
  border-radius: 14px; padding: 13px 14px; outline: none; font: 500 14px 'Inter', system-ui, sans-serif;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input[type=file] { padding: 11px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(107,92,255,.55); box-shadow: 0 0 0 4px rgba(107,92,255,.12); background: var(--bg); }
.field select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238a8a99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field select option { background: var(--bg2); color: var(--tx); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
body.modal-open { overflow: hidden; }

/* Le player reste fermé tant qu'aucune radio n'est lancée */
.now-playing { transform: translateY(calc(100% + 2px)); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease, background .2s, border-color .2s; }
.now-playing.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

@media(max-width:680px){
  .dashboard-head { align-items: flex-start; }
  .dashboard-head .dash-add-btn { width: 100%; justify-content: center; }
  .fields-row { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .tb-btn { width: 100%; justify-content: center; }
}

/* Correctif pochettes radios importées */
.admin-radio-thumb, .admin-radio-thumb img { width:48px!important; height:48px!important; max-width:48px!important; max-height:48px!important; object-fit:cover!important; border-radius:14px; overflow:hidden; }

/* Correctifs largeur et recherche instantanée */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
body, button, input, textarea, select, .tb-btn, .footer-col a { font-family: 'Poppins', system-ui, sans-serif !important; }
.main-col { width: calc(100% - var(--side)); max-width: calc(100% - var(--side)); overflow-x: hidden; }
.content { width: 100%; max-width: none; margin: 0; overflow-x: hidden; }
.topbar { overflow: visible; }
.topbar .search { position: relative; max-width: 100%; }
.brand-logo-img { width: 100%; max-width: 100%; height: auto; max-height: 64px; object-fit: contain; object-position: left center; }
.footer-logo-img { max-width: 165px; max-height: 42px; object-fit: contain; }
.footer-bottom a { color: var(--c1); font-weight: 800; }
.live-search-results {
  position: absolute; left: 32px; right: 360px; top: 52px; z-index: 80;
  display: none; padding: 8px; border-radius: 18px;
  background: rgba(24,24,30,.86); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 70px rgba(0,0,0,.38); backdrop-filter: blur(22px);
  max-height: 430px; overflow: auto;
}
.live-search-results.is-open { display: block; }
.live-search-item { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 12px; color: #fff; }
.live-search-item:hover { background: rgba(255,255,255,.08); }
.live-search-item img { width: 38px; height: 38px; object-fit: cover; border-radius: 9px; flex-shrink: 0; display: block; background: var(--c1); }
.live-search-item b { display:block; font-size: 14px; line-height: 1.2; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.live-search-item small { display:block; color: rgba(255,255,255,.62); font-size: 11.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:2px; }
.live-search-more, .live-search-empty { display:block; padding: 9px 10px; color: rgba(255,255,255,.82); font-weight: 700; font-size: 13px; }
.slider-shell { width: 100%; overflow: hidden; }
.radio-row { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; align-items: flex-start; }
.radio-row::-webkit-scrollbar { display:none; }
.radio-row .radio-card { flex: 0 0 calc((100% - 90px) / 6) !important; width: auto !important; max-width: none !important; }
.genre-grid { width: 100% !important; max-width: 100% !important; display:grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; gap: 12px !important; overflow: hidden !important; }
.genre { width:100% !important; min-width:0 !important; max-width:100% !important; height: 92px !important; padding: 14px 16px !important; }
.genre span { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 1280px){ .radio-row .radio-card{flex-basis:calc((100% - 54px)/4)!important;} .live-search-results{right:220px;} }
@media (max-width: 900px){ .radio-row .radio-card{flex-basis:calc((100% - 36px)/3)!important;} }
@media (max-width: 760px){ .main-col{width:100%;max-width:100%;}.content{padding-left:18px;padding-right:18px}.radio-row .radio-card{flex-basis:calc((100% - 18px)/2)!important}.live-search-results{left:18px;right:18px;top:56px}.genre-grid{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))!important;} }

/* ── Grille radios (accueil slider + page recherche) — règle UNIQUE et propre ── */
.radio-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 24px;
  align-items: start;
}
.radio-card { min-width: 0; max-width: 100%; overflow: hidden; }
.radio-card .cover,
.manage-radio-card .cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--c1);
}
.radio-card .cover img,
.manage-radio-card .cover img,
.radio-cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.radio-card b,
.radio-card small {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .radio-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; }
}

/* Correctifs radio.php + recherche */
.radio-hero .radio-cover {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 0 !important;
}
.official-site-row { margin-top: 22px !important; }
.official-site-btn {
  margin-top: 8px;
  background: var(--grad) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: var(--shadow-glow);
}
.favorite-btn.is-active,
.card-fav.is-active {
  background: var(--grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--shadow-glow);
}
/* ── Pages recherche & suggestions : mêmes réglages que .radio-grid, juste l'espacement diffère ── */
.radio-suggestions-section .radio-grid,
.search-results-grid {
  gap: 30px 26px;
  margin-top: 6px;
}
.search-results-grid { margin-top: 34px; }
@media (max-width: 760px) {
  .radio-suggestions-section .radio-grid,
  .search-results-grid { gap: 22px 16px; }
}

/* ── Pochettes sans image (placeholder) : fond uni le temps du chargement ── */
.cover img,
.radio-cover,
.side-list img,
.live-search-item img,
.np-thumb {
  background: var(--c1);
}
.cover:has(img[src*="default-cover.php"]),
img[src*="default-cover.php"] {
  border-radius: 0;
}
.field input[list] { padding-right: 38px; }
.pretty-file {
  display:flex; align-items:center; justify-content:center; min-height:58px;
  border:1px dashed var(--bd2); border-radius:18px; background:var(--bg2);
  color:var(--tx2); font-weight:800; cursor:pointer; transition:.16s;
}
.pretty-file:hover { border-color:var(--c1); color:var(--tx); background:var(--panel); }
.pretty-file input { display:none; }
.form-cover-preview { width:86px; height:86px; border-radius:18px; object-fit:cover; margin-top:12px; border:1px solid var(--bd2); }
.multi-select { position:relative; }
.multi-select summary {
  list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center;
  padding:0 14px; border:1px solid var(--bd); border-radius:14px; background:var(--bg2); color:var(--tx);
  font-weight:700;
}
.multi-select summary::-webkit-details-marker { display:none; }
.multi-select-panel {
  margin-top:8px; max-height:210px; overflow:auto; padding:10px;
  border:1px solid var(--bd); border-radius:16px; background:var(--bg2); display:grid; gap:7px;
}
.multi-select-panel label { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--tx2); }
.multi-select-panel input { width:auto; accent-color:var(--c1); }
.manage-actions { flex-wrap:wrap; }

/* Correctifs thème sombre, logos clair/foncé et footer avec player */
.logo-for-light { display: inline-block; }
.logo-for-dark { display: none; }
body.theme-dark .logo-for-light { display: none !important; }
body.theme-dark .logo-for-dark { display: inline-block !important; }
body.player-open .main-col { padding-bottom: var(--player-h); }
body.player-open .site-footer { padding-bottom: calc(32px + var(--player-h)); }
.card-fav.fav-hidden-on-favorites { display:none !important; }

/* Refonte dashboard + compte utilisateur */
.account-badge {
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  justify-content: center;
  border-color: rgba(107,92,255,.28) !important;
  background: linear-gradient(135deg, rgba(107,92,255,.14), rgba(0,212,255,.08)) !important;
}
.account-badge i { font-size: 19px; }
.account-badge-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-badge:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(0,0,0,.16); }
.dashboard-radios .my-radio-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
  overflow: visible !important;
}
.dashboard-radios .manage-radio-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  min-height: 164px;
  border-radius: 28px;
  border: 1px solid var(--bd);
  background:
    radial-gradient(circle at 15% 0%, rgba(107,92,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    var(--bg2);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.dashboard-radios .manage-radio-card:hover {
  transform: translateY(-3px);
  border-color: rgba(107,92,255,.36);
  box-shadow: var(--shadow-lift);
}
.dashboard-radios .manage-cover-link { display: block; min-width: 0; }
.dashboard-radios .manage-radio-card .cover {
  width: 132px !important;
  height: 132px !important;
  max-width: 132px !important;
  max-height: 132px !important;
  margin: 0 !important;
  border-radius: 24px !important;
  background: var(--c1) !important;
  overflow: hidden !important;
}
.dashboard-radios .manage-radio-card .cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.manage-radio-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.manage-radio-title {
  display: block;
  color: var(--tx);
  font-size: 19px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manage-radio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.manage-radio-meta span {
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: rgba(255,255,255,.05);
  color: var(--tx2);
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manage-radio-main p {
  margin-top: 10px;
  color: var(--tx2);
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dashboard-radios .manage-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-top: 0;
  align-items: center;
}
.dashboard-radios .manage-actions .tb-btn {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 13px;
}
.dashboard-radios .manage-actions form { margin: 0; }
.dashboard-radios .danger-btn { min-width: 42px; color: #ef4444; }
.account-card {
  border: 1px solid var(--bd);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 0%, rgba(0,212,255,.12), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(107,92,255,.16), transparent 34%),
    var(--bg2);
  box-shadow: var(--shadow-card);
  padding: 26px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.account-avatar {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  font-size: 40px;
  font-weight: 900;
  box-shadow: var(--shadow-glow);
}
.account-form { min-width: 0; }
@media (max-width: 900px) {
  .dashboard-radios .my-radio-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 680px) {
  .dashboard-radios .manage-radio-card { grid-template-columns: 98px minmax(0,1fr); border-radius: 22px; gap: 12px; }
  .dashboard-radios .manage-radio-card .cover { width: 98px !important; height: 98px !important; max-width: 98px !important; max-height: 98px !important; border-radius: 18px !important; }
  .manage-radio-title { font-size: 16px; }
  .manage-radio-main p { display: none; }
  .dashboard-radios .manage-actions { grid-template-columns: 1fr 1fr; }
  .dashboard-radios .manage-actions form { grid-column: 1 / -1; }
  .account-card { grid-template-columns: 1fr; padding: 20px; }
  .account-avatar { width: 74px; height: 74px; border-radius: 22px; font-size: 30px; }
}

/* Dashboard radios : disposition plus propre en liste de gestion */
.dashboard-radios .my-radio-grid {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  max-width: 1080px;
}
.dashboard-radios .manage-radio-card {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  min-height: 140px !important;
  padding: 16px 18px !important;
  border-radius: 26px !important;
  overflow: visible !important;
}
.dashboard-radios .manage-radio-card .cover {
  width: 112px !important;
  height: 112px !important;
  max-width: 112px !important;
  max-height: 112px !important;
  border-radius: 22px !important;
}
.dashboard-radios .manage-radio-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}
.dashboard-radios .manage-radio-main p {
  max-width: 560px;
  -webkit-line-clamp: 2;
}
.dashboard-radios .manage-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  justify-content: flex-end;
  align-items: center;
  min-width: 292px;
}
.dashboard-radios .manage-actions .tb-btn {
  width: auto !important;
  min-width: 92px;
  white-space: nowrap;
}
.dashboard-radios .manage-actions form { flex: 0 0 auto; }
.dashboard-radios .danger-btn {
  min-width: 104px !important;
  color: #ff4d5e !important;
  border-color: rgba(255,77,94,.30) !important;
  background: rgba(255,77,94,.08) !important;
}
.dashboard-radios .danger-btn:hover { background: rgba(255,77,94,.14) !important; }

/* Mon compte : sans badge initiale + complexité mot de passe */
.account-card.account-card-no-avatar {
  display: block !important;
  max-width: 920px;
}
.account-card.account-card-no-avatar .account-form { width: 100%; }
.password-meter {
  width: 100%;
  height: 8px;
  margin-top: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--bd);
}
.password-meter span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  transition: width .2s ease;
}
.password-meter-label {
  display: block;
  margin-top: 7px;
  color: var(--tx2);
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 820px) {
  .dashboard-radios .manage-radio-body { grid-template-columns: 1fr !important; align-items: start; }
  .dashboard-radios .manage-actions { justify-content: flex-start; min-width: 0; flex-wrap: wrap !important; }
}
@media (max-width: 560px) {
  .dashboard-radios .manage-radio-card { grid-template-columns: 86px minmax(0,1fr) !important; padding: 12px !important; }
  .dashboard-radios .manage-radio-card .cover { width: 86px !important; height: 86px !important; border-radius: 18px !important; }
  .dashboard-radios .manage-actions .tb-btn { min-width: 0; }
}

/* Mon compte : container pleine largeur */
.account-section { width: 100%; }

/* ── Bandeau espace membre : onglets et bannière SANS encadré ──
   Ni les onglets ni la bannière ne sont posés dans une carte/boîte : ils flottent
   directement sur la page, comme le reste du site. Seul l'onglet actif a un fond.
   L'avatar chevauche le bas de la bannière en position absolue ; le nom et le
   statut sont en dehors de la bannière, donc jamais dessinés sur la photo. ── */
.account-tabnav {
  display: flex; gap: 8px; width: 100%; overflow-x: auto; justify-content: space-between;
  background: transparent; border: none;
  padding: 0 0 18px; margin-bottom: 26px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.account-tabnav::-webkit-scrollbar { display: none; }
.account-tabnav a {
  display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  padding: 10px 72px; border-radius: 999px; font-weight: 700; font-size: 15px;
  color: var(--tx2); text-decoration: none; transition: background .12s, color .12s;
}
.account-tabnav a:hover { color: var(--tx); }
.account-tabnav a.active { background: var(--bg2); color: var(--c1); }

.account-hero { position: relative; }
.account-banner {
  height: 132px; border-radius: var(--r);
  background:
    radial-gradient(circle at 8% 0%, rgba(0,212,255,.10), transparent 38%),
    radial-gradient(circle at 92% 0%, rgba(107,92,255,.16), transparent 38%),
    var(--bg2);
  background-size: cover; background-position: center;
}
.account-avatar-circle {
  position: absolute; left: 4px; bottom: -50px;
  width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--bg3); border: 4px solid var(--bg);
  display: flex; align-items: center; justify-content: center; color: var(--tx3); font-size: 34px;
  z-index: 2;
}
.account-avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.account-avatar-circle { cursor: pointer; text-decoration: none; }
.avatar-edit-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,.62); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; text-align: center; line-height: 1.3;
  opacity: 0; transition: opacity .15s;
}
.avatar-edit-overlay i { font-size: 16px; }
a.account-avatar-circle:hover .avatar-edit-overlay,
a.account-avatar-circle:focus-visible .avatar-edit-overlay { opacity: 1; }
/* Toujours en flux normal APRÈS .account-hero (jamais de marge négative) :
   le texte ne peut donc jamais remonter sur la bannière. */
.account-id-text { padding: 16px 0 26px 122px; min-width: 0; }
.account-id-text h2 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--tx); line-height: 1.2; }
.account-status { font-size: 13.5px; font-weight: 700; }
.account-status.is-asleep { color: #8b8bf5; }
.account-status.is-active { color: var(--tx2); }
.account-status.is-expert { color: #f59e0b; }
.account-status.is-listening-suffix { color: #22c55e; }
@media (max-width: 560px) {
  .account-tabnav { justify-content: flex-start; }
  .account-banner { height: 108px; }
  .account-avatar-circle { left: 0; bottom: -38px; width: 74px; height: 74px; font-size: 26px; border-width: 3px; }
  .account-id-text { padding: 12px 0 20px 88px; }
  .account-id-text h2 { font-size: 19px; }
}

/* ── Mes listes ── */
.lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.list-card { background: var(--bg2); border: 1px solid var(--bd); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow-card); }
.list-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.list-card-head b { font-size: 15.5px; color: var(--tx); font-weight: 700; }
.list-card-count { font-size: 12.5px; font-weight: 700; color: var(--tx2); background: var(--bg3); border: 1px solid var(--bd); border-radius: 999px; padding: 2px 10px; flex-shrink: 0; }
.list-card-bar { height: 6px; border-radius: 999px; background: var(--bg3); overflow: hidden; margin-bottom: 14px; }
.list-card-bar span { display: block; height: 100%; background: var(--grad); border-radius: inherit; transition: width .2s; }
.list-card-pin { margin: 0; }
.list-pin-btn { background: none; border: none; color: var(--c1); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 7px; }
.list-pin-btn:hover { text-decoration: underline; }
.list-pin-btn.is-pinned { color: var(--tx2); }

/* ── Mes réglages : cartes premium + zones de dépôt cliquables ── */
.settings-form { display: grid; gap: 24px; max-width: none; }
.settings-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) {
  .settings-row-2 { grid-template-columns: 1fr; }
}
.settings-card {
  border: 1px solid var(--bd); border-radius: 22px; padding: 28px;
  background:
    radial-gradient(circle at 14% 0%, rgba(0,212,255,.10), transparent 36%),
    radial-gradient(circle at 90% 10%, rgba(107,92,255,.13), transparent 34%),
    var(--bg2);
  box-shadow: var(--shadow-card);
}
.settings-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.settings-card-head h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--tx); }
.settings-card-head p { font-size: 13.5px; color: var(--tx2); margin-top: 2px; font-weight: 400; }
.settings-card .fields-row:not(:last-child) { margin-bottom: 16px; }
.settings-card > .field:not(:last-child) { margin-bottom: 16px; }
.settings-locale-field { max-width: 320px; }

.settings-card-ico {
  width: 46px; height: 46px; border-radius: 15px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px;
  box-shadow: var(--shadow-glow);
}
.settings-card-ico-blue   { background: linear-gradient(135deg,#00d4ff,#6b5cff); }
.settings-card-ico-green  { background: linear-gradient(135deg,#22c55e,#16a34a); }
.settings-card-ico-orange { background: linear-gradient(135deg,#f59e0b,#ef4444); }

/* Bannière + avatar superposé, comme l'aperçu réel du profil */
.settings-banner-zone { position: relative; }
.upload-zone { display: block; cursor: pointer; }
.upload-zone-banner {
  height: 168px; border-radius: 18px; overflow: hidden; position: relative;
  background: var(--bg3); border: 1px solid var(--bd);
}
.upload-zone-banner .upload-zone-preview {
  width: 100%; height: 100%; background-size: cover; background-position: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--tx3); font-size: 13px; font-weight: 600;
}
.upload-zone-banner .upload-zone-preview i { font-size: 26px; }
.upload-zone-avatar {
  position: absolute; left: 24px; bottom: -32px; width: 96px; height: 96px;
}
.upload-zone-avatar .upload-zone-preview {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--bg3); border: 4px solid var(--bg2);
  display: flex; align-items: center; justify-content: center; color: var(--tx3); font-size: 30px;
  box-shadow: var(--shadow-card);
}
.upload-zone-avatar .upload-zone-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-zone-overlay {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(0,0,0,.58); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; text-align: center; opacity: 0; transition: opacity .15s;
}
.upload-zone-avatar .upload-zone-overlay { border-radius: 50%; font-size: 0; }
.upload-zone-overlay i { font-size: 17px; }
.upload-zone:hover .upload-zone-overlay,
.upload-zone:focus-within .upload-zone-overlay { opacity: 1; }
.settings-media-captions {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 44px;
  font-size: 12.5px; color: var(--tx3); font-weight: 600;
}
.field-hint { display: block; color: var(--tx3); font-size: 12px; }

.settings-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 18px; border-top: 1px solid var(--bd);
}
@media (max-width: 640px) {
  .settings-card { padding: 20px; border-radius: 18px; }
  .upload-zone-banner { height: 120px; }
  .upload-zone-avatar { width: 76px; height: 76px; left: 16px; bottom: -24px; }
  .settings-media-captions { flex-direction: column; gap: 4px; margin-top: 36px; }
  .settings-actions { flex-direction: column-reverse; }
  .settings-actions .tb-btn { width: 100%; justify-content: center; }
}

.account-section .account-card.account-card-no-avatar {
  width: 100%;
  max-width: none !important;
}
.account-section .section-head { width: 100%; }
.account-section .section-ico i { font-size: 19px; line-height: 1; }
.account-section .fields-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.account-section .modal-actions { justify-content: flex-end; }
@media (max-width: 760px) {
  .account-section .fields-row { grid-template-columns: 1fr; }
}

/* Correctif alignement Mon compte : évite que le champ de confirmation soit étiré vers le bas par la barre de complexité */
.account-section .field {
  align-content: start;
}
.account-section .fields-row {
  align-items: start;
}






/* ═══════════════════════════════════════════════════════════════════ */
/* ══ LMS — SECTIONS & SLIDER (style TuneIn/TuneRadios)            ══ */
/* ═══════════════════════════════════════════════════════════════════ */

/* ── Section ── */
.lms-section { margin-top: 52px; }
.lms-section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 22px; gap: 16px;
}
.lms-section-title { display: flex; align-items: center; gap: 16px; }
.lms-section-ico {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.lms-section-title h2 {
  font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--tx); line-height: 1.2;
}
.lms-section-title p { font-size: 14px; color: var(--tx2); margin-top: 3px; font-weight: 400; }
.lms-see-all {
  flex-shrink: 0; margin-top: 4px;
  font-size: 13px; font-weight: 600; color: var(--tx2);
  border: 1px solid var(--bd2); border-radius: 50px;
  padding: 8px 18px;
  transition: color .12s, border-color .12s, background .12s;
  white-space: nowrap;
}
.lms-see-all:hover { color: var(--tx); border-color: var(--c2); background: var(--accent-s); }

/* ── Slider ── */
.lms-slider-wrap { position: relative; }
.lms-slider {
  display: flex; gap: 18px;
  overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
  scrollbar-width: none; padding: 4px 2px 14px;
}
.lms-slider::-webkit-scrollbar { display: none; }

/* ── Card ── */
.lms-card {
  flex: 0 0 calc((100% - 90px) / 7);
  min-width: 110px;
  display: flex; flex-direction: column; gap: 0;
  text-decoration: none; color: var(--tx);
}
.lms-card-cover {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: 16px; overflow: hidden;
  background: var(--bg3); border: 1px solid var(--bd);
  margin-bottom: 10px;
  transition: box-shadow .2s, border-color .2s;
}
.lms-card:hover .lms-card-cover { box-shadow: 0 6px 28px rgba(0,0,0,.22); border-color: var(--bd2); }
.lms-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .22s; }
.lms-card:hover .lms-card-cover img { transform: scale(1.05); }
.lms-card-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff;
  background: rgba(0,0,0,.38); border-radius: 16px;
  opacity: 0; transition: opacity .18s;
}
.lms-card:hover .lms-card-play { opacity: 1; }
.lms-rank {
  position: absolute; top: 9px; left: 9px;
  min-width: 28px; height: 28px; border-radius: 50%;
  background: var(--c2); color: #fff;
  font-size: 11.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.lms-card-name {
  font-size: 13px; font-weight: 700; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
  line-height: 1.35; margin-bottom: 2px;
}
.lms-card-sub {
  font-size: 12.5px; color: var(--tx2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}

/* ── Flèches (en bas à droite comme la ref) ── */
.lms-arrows {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 4px;
}
.lms-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--bd2);
  color: var(--tx2); font-size: 20px; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
}
.lms-arrow:hover { background: var(--panel-h); color: var(--tx); border-color: var(--c2); }

/* ── Genre grid ── */
.lms-genre-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
.lms-genre {
  position: relative; overflow: hidden; height: 90px;
  border-radius: 14px; display: flex; align-items: flex-end;
  padding: 12px 15px; font-size: 13.5px; font-weight: 700;
  color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--gc1), var(--gc2));
  transition: transform .18s, box-shadow .18s;
}
.lms-genre::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 65%); }
.lms-genre span { position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.lms-genre:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.28); }

/* ── 404 ── */
.lms-not-found { text-align: center; padding: 80px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lms-not-found-ico { font-size: 56px; }
.lms-not-found h2 { font-size: 24px; font-weight: 800; color: var(--tx); }
.lms-not-found p { color: var(--tx2); font-size: 15px; }

/* ═══════════════════════════════════════════════════════════════════ */
/* ══ PAGE RADIO (style TuneRadios)                                 ══ */
/* ═══════════════════════════════════════════════════════════════════ */

.rp-wrap { padding-top: 4px; }

/* Breadcrumb */
.rp-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--tx3); margin-bottom: 26px; padding-top: 4px;
}
.rp-breadcrumb a { color: var(--tx3); transition: color .12s; }
.rp-breadcrumb a:hover { color: var(--tx2); }
.rp-breadcrumb span { opacity: .45; font-size: 11px; }
.rp-bc-current { color: var(--tx2); }

/* Layout 3 colonnes */
.rp-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
}

/* ── Colonne gauche ── */
.rp-left { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.rp-cover {
  width: 100%; aspect-ratio: 1;
  border-radius: 18px; object-fit: cover; display: block;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
}
.rp-play-row {
  display: flex; align-items: center; gap: 16px;
  justify-content: center; width: 100%;
}
.rp-play-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--grad); color: #fff;
  font-size: 22px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, box-shadow .12s, opacity .12s;
  box-shadow: var(--shadow-glow);
  flex-shrink: 0;
}
.rp-play-circle:hover { transform: scale(1.08); opacity: .9; }
.rp-action-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--bd);
  color: var(--tx2); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  transition: border-color .12s, color .12s, background .12s, box-shadow .12s;
  flex-shrink: 0;
}
.rp-action-btn:hover { border-color: var(--c2); color: var(--tx); background: var(--panel); }
.rp-action-btn.is-active {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-glow);
}

/* ── Colonne centre ── */
.rp-center { min-width: 0; }
.rp-name {
  font-size: clamp(26px, 3vw, 38px); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.1;
  color: var(--tx); margin-bottom: 6px;
}
.rp-listeners {
  font-size: 13px; color: var(--tx3); margin-bottom: 28px;
  font-weight: 500;
}

/* À propos */
.rp-about {
  background: var(--bg2); border: 1px solid var(--bd);
  border-radius: 16px; padding: 20px 24px;
}
.rp-about-head {
  font-size: 15px; font-weight: 700; color: var(--tx);
  margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.rp-about-edit { font-size: 14px; color: var(--tx3); text-decoration: none; transition: color .12s; }
.rp-about-edit:hover { color: var(--tx2); }
.rp-about-text { font-size: 14px; color: var(--tx2); line-height: 1.7; }
.rp-about-site { font-size: 13px; color: var(--tx3); margin-top: 12px; }
.rp-about-site a { color: var(--c1); }
.rp-about-site a:hover { text-decoration: underline; }
.rp-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.rp-tag {
  font-size: 12.5px; font-weight: 600; color: var(--tx2);
  background: var(--bg3); border: 1px solid var(--bd);
  border-radius: 50px; padding: 5px 14px;
  transition: background .12s, color .12s;
}
.rp-tag:hover { background: var(--panel-h); color: var(--tx); }

/* ── Auditeurs en direct (même style que "Pour vous") ── */
.live-listeners.lms-section { margin-top: 40px; }
.live-listeners-people { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 16px; }
.live-listener { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0; }
.live-listener-avatar {
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center; color: var(--tx3); font-size: 28px;
}
.live-listener-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-listener span { font-size: 13px; font-weight: 600; color: var(--tx2); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.live-listeners-empty-text { display: none; font-size: 13.5px; color: var(--tx3); }
.live-listeners.is-empty .live-listeners-people { display: none; }
.live-listeners.is-empty .live-listeners-empty-text { display: block; }
@media (max-width: 760px) {
  .live-listeners-people { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .live-listeners-people { grid-template-columns: repeat(3, 1fr); }
  .live-listener-avatar { width: 62px; height: 62px; font-size: 22px; }
}

/* ══ MODAL RADIO V2 (multi-onglets latéraux) ════════════════════════ */
.radio-modal-v2 {
  width: min(900px, 96vw); max-height: 92vh;
  border-radius: 24px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.rmv2-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px 20px; border-bottom: 1px solid var(--bd); flex-shrink: 0;
}
.rmv2-header h2 { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--tx); }
.rmv2-close {
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--bd);
  color: var(--tx2); font-size: 15px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .12s, background .12s; flex-shrink: 0;
}
.rmv2-close:hover { color: #ef4444; background: rgba(239,68,68,.1); }
.rmv2-body {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}
.rmv2-nav {
  width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px;
  padding: 18px 12px; border-right: 1px solid var(--bd); background: var(--bg2);
  overflow-y: auto;
}
.rmv2-nav-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px; border: 0;
  font-size: 14.5px; font-weight: 700; color: var(--tx2);
  background: transparent; cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.rmv2-nav-btn i { width: 18px; text-align: center; font-size: 15px; }
.rmv2-nav-btn:hover { background: var(--bg3); color: var(--tx); }
.rmv2-nav-btn.active { background: var(--bg3); color: var(--tx); }
.rmv2-panels { flex: 1; overflow-y: auto; padding: 24px 28px; min-width: 0; }
.rmv2-panel { display: none; }
.rmv2-panel.active { display: block; }

/* logo upload zone */
.rmv2-logo-row { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 22px; }
.rmv2-logo-zone {
  position: relative; width: 148px; height: 148px; border-radius: 20px; flex-shrink: 0;
  cursor: pointer; display: block; overflow: hidden;
}
.rmv2-logo-preview {
  width: 100%; height: 100%; border-radius: 20px; overflow: hidden;
  background: var(--bg3); border: 1px solid var(--bd);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--tx3); font-size: 38px; gap: 6px;
}
.rmv2-logo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rmv2-logo-zone .rmv2-logo-overlay {
  position: absolute; inset: 0; border-radius: 20px;
  background: rgba(0,0,0,.52); color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .14s;
}
.rmv2-logo-zone:hover .rmv2-logo-overlay { opacity: 1; }
.rmv2-logo-info {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.rmv2-logo-label { font-size: 14px; font-weight: 700; color: var(--tx); }
.rmv2-file-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 18px; border-radius: 12px; background: var(--bg3); border: 1px solid var(--bd2);
  font-size: 13.5px; font-weight: 700; color: var(--tx2); transition: color .12s, border-color .12s;
}
.rmv2-file-btn:hover { color: var(--tx); border-color: var(--c1); }
.rmv2-file-name { font-size: 12.5px; color: var(--tx3); }

/* field spacing in modal */
.rmv2-panel .field { margin-bottom: 16px; }
.rmv2-panel .fields-row { margin-bottom: 0; }
.rmv2-panel .fields-row .field { margin-bottom: 0; }
.rmv2-panel .fields-row { margin-bottom: 16px; }
.req { color: #ef4444; }
.field-label { font-size: 13px; font-weight: 800; color: var(--tx); display: block; margin-bottom: 6px; }

/* ── Genre badge picker ── */
.genre-picker {
  border: 1px solid var(--bd2); border-radius: 14px; overflow: hidden;
  background: var(--bg2); margin-bottom: 6px; position: relative;
}
.genre-picker-trigger {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 10px 42px 10px 14px; min-height: 46px; cursor: pointer;
}
.genre-picker-trigger::after {
  content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--tx3); font-size: 14px; transition: transform .15s; pointer-events: none;
}
.genre-picker.is-open .genre-picker-trigger::after { transform: translateY(-50%) rotate(180deg); }
.genre-picker-placeholder { font-size: 14px; color: var(--tx3); pointer-events: none; }
.genre-picker-search {
  display: none; width: 100%; border: 0; border-top: 1px solid var(--bd);
  background: var(--bg2); padding: 10px 14px; color: var(--tx);
  font: 500 14px 'Inter', system-ui, sans-serif; outline: none;
}
.genre-picker.is-open .genre-picker-search { display: block; }
.genre-picker-search::placeholder { color: var(--tx3); }
.genre-picker-list {
  display: none; max-height: 200px; overflow-y: auto;
  border-top: 1px solid var(--bd); padding: 6px 0;
}
.genre-picker.is-open .genre-picker-list { display: block; }
.genre-picker-item {
  padding: 9px 16px; font-size: 14px; cursor: pointer; color: var(--tx2);
  transition: background .1s, color .1s; display: flex; align-items: center; justify-content: space-between;
}
.genre-picker-item:hover { background: var(--bg3); color: var(--tx); }
.genre-picker-item.selected { color: var(--c1); font-weight: 700; }
.genre-picker-item.selected::after { content: '✓'; font-size: 13px; }
.genre-picker-item.hidden { display: none; }
.genre-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grad); color: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 700; line-height: 1;
}
.genre-tag-remove { cursor: pointer; font-size: 13px; opacity: .8; }
.genre-tag-remove:hover { opacity: 1; }

/* checkbox */
.rmv2-checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tx2); cursor: pointer; margin-top: 4px; }
.rmv2-checkbox input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--c1); cursor: pointer; }

/* social input prefix */
.rmv2-social-input { display: flex; border: 1px solid var(--bd2); border-radius: 14px; overflow: hidden; background: var(--bg2); }
.rmv2-social-prefix {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--bg3); border-right: 1px solid var(--bd); color: var(--tx3);
  font-size: 13px; white-space: nowrap; flex-shrink: 0;
}
.rmv2-social-input input { flex: 1; border: 0; background: transparent; padding: 13px 14px; color: var(--tx); font: 500 14px 'Inter', system-ui, sans-serif; outline: none; min-width: 0; }
.rmv2-social-field { margin-bottom: 12px !important; }

.rmv2-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 28px; border-top: 1px solid var(--bd); flex-shrink: 0;
  background: var(--bg);
}
@media (max-width: 680px) {
  .radio-modal-v2 { border-radius: 18px; max-height: 95vh; }
  .rmv2-nav { width: 52px; padding: 14px 6px; }
  .rmv2-nav-btn span, .rmv2-nav-btn { gap: 0; padding: 12px; justify-content: center; font-size: 0; }
  .rmv2-nav-btn i { font-size: 18px; width: auto; }
  .rmv2-panels { padding: 16px 14px; }
  .rmv2-logo-row { flex-direction: column; }
  .rmv2-logo-zone { width: 100%; height: 110px; }
  .rmv2-logo-preview { flex-direction: row; }
}


.rp-sidebar { display: none; }
.rp-sidebar-item {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 12px; align-items: center;
  padding: 10px 10px; border-radius: 12px;
  text-decoration: none; color: var(--tx2);
  transition: background .12s;
}
.rp-sidebar-item:hover { background: var(--panel-h); }
.rp-sidebar-item img {
  width: 56px; height: 56px; border-radius: 8px;
  object-fit: cover; border: 1px solid var(--bd); display: block;
}
.rp-sidebar-info { min-width: 0; }
.rp-sidebar-info b {
  font-size: 13.5px; font-weight: 700; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
  margin-bottom: 3px;
}
.rp-sidebar-info small {
  font-size: 12px; color: var(--tx3); display: block;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ══ HAMBURGER + SIDEBAR                                           ══ */
/* ═══════════════════════════════════════════════════════════════════ */
.hamburger {
  display: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--bd2); background: transparent; color: var(--tx);
  font-size: 19px; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; transition: background .12s; line-height: 1;
}
.hamburger:hover { background: var(--panel-h); }
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.52); backdrop-filter: blur(3px); z-index: 55;
}
.sidebar-overlay.is-open { display: block; }

/* ── Footer col-group desktop ── */
.footer-col-group { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

/* ── Genres page header ── */
.genres-page-header { margin: 24px 0 28px; }
.genres-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx3); margin-bottom: 8px; }
.genres-title { font-size: clamp(26px,4vw,46px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: var(--tx); }
.genres-br { display: none; }

/* ═══════════════════════════════════════════════════════════════════ */
/* ══ RESPONSIVE                                                    ══ */
/* ═══════════════════════════════════════════════════════════════════ */

/* ≤ 1200px */
@media (max-width: 1200px) {
  .rp-layout { grid-template-columns: 180px 1fr; gap: 28px; }
  .lms-card { flex-basis: calc((100% - 72px)/5) !important; }
}

/* ≤ 1060px tablette */
@media (max-width: 1060px) {
  :root { --side: 0px; }
  .hamburger { display: flex; }
  .sidebar { width: 260px; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s; z-index: 60; }
  .sidebar.is-open { transform: translateX(0); box-shadow: 6px 0 48px rgba(0,0,0,.32); }
  .main-col { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; }
  .topbar { left: 0 !important; padding: 0 18px; gap: 10px; }
  .now-playing { left: 0 !important; }
  .lms-card { flex-basis: calc((100% - 54px)/4) !important; }
  .lms-genre-grid { grid-template-columns: repeat(4,1fr); }
  .rp-layout { grid-template-columns: 160px 1fr; gap: 24px; }
  .rp-sidebar { display: none; }
  .site-footer { grid-template-columns: 1.5fr 2fr; gap: 32px; padding: 40px 28px 28px; }
}

/* ≤ 900px */
@media (max-width: 900px) {
  .lms-card { flex-basis: calc((100% - 36px)/3) !important; }
  .lms-genre-grid { grid-template-columns: repeat(3,1fr); }
  .rp-layout { grid-template-columns: 140px 1fr; gap: 20px; }
  .rp-cover { border-radius: 14px; }
  .rp-play-circle { width: 54px; height: 54px; font-size: 18px; }
  .site-footer { grid-template-columns: 1fr; gap: 24px; padding: 36px 24px 24px; }
  .footer-brand { flex-direction: row; gap: 18px; align-items: flex-start; }
  .footer-col-group { grid-template-columns: repeat(3,1fr); }
  .dashboard-radios .my-radio-grid { grid-template-columns: 1fr !important; }
  .dashboard-radios .manage-radio-body { grid-template-columns: 1fr !important; }
  .dashboard-radios .manage-actions { justify-content: flex-start !important; flex-wrap: wrap !important; }
}

/* ≤ 680px mobile */
@media (max-width: 680px) {
  .topbar { height: 56px; padding: 0 12px; gap: 8px; }
  .search { flex: 1; min-width: 0; }
  /* Topbar : icône only sur mobile */
  .tb-cta-label { display: none; }
  .account-badge { display: flex !important; }
  .tb-btn:not(.theme-toggle):not(.tb-btn-cta):not(.account-badge) { display: none; }
  .tb-btn.tb-btn-cta { padding: 0 13px; font-size: 13px; height: 34px; }
  .topbar-right { gap: 6px; }
  .live-search-results { left: 12px !important; right: 12px !important; top: 58px !important; border-radius: 14px !important; }
  .content { padding: 66px 14px 40px; }

  /* Sections */
  .lms-section { margin-top: 36px; }
  .lms-section-head { flex-wrap: wrap; gap: 10px; }
  .lms-section-ico { width: 40px; height: 40px; font-size: 18px; border-radius: 11px; }
  .lms-section-title h2 { font-size: 18px; }
  .lms-section-title p { font-size: 12.5px; }
  .lms-see-all { font-size: 12px; padding: 7px 14px; }

  /* Cards : 2.5 visibles */
  .lms-card { flex-basis: calc((100% - 28px) / 2.4) !important; min-width: 100px; }
  .lms-card-cover { border-radius: 12px; }
  .lms-arrows { display: none; }

  /* ── Page radio : mobile complet ── */
  .rp-breadcrumb { font-size: 11.5px; gap: 5px; margin-bottom: 12px; overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; }
  .rp-breadcrumb::-webkit-scrollbar { display: none; }

  .rp-layout { grid-template-columns: 1fr; gap: 0; }

  /* Couverture : hero plein largeur en haut */
  .rp-left {
    flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 0;
  }
  .rp-cover {
    width: 100%; height: auto; aspect-ratio: 1; max-height: 54vw;
    border-radius: 18px; object-fit: cover; margin-bottom: 16px;
  }

  /* Titre avant les boutons sur mobile */
  .rp-name { font-size: 22px; letter-spacing: -.03em; margin-bottom: 8px; }

  /* Boutons play + actions en ligne horizontale */
  .rp-play-row {
    flex-direction: row; align-items: center; justify-content: flex-start;
    width: 100%; gap: 10px; margin-bottom: 18px;
  }
  .rp-play-circle { width: 52px; height: 52px; font-size: 18px; flex-shrink: 0; }
  .rp-action-btn  { width: 42px; height: 42px; font-size: 16px; border-width: 1.5px; }

  /* Chips pays / genre */
  .rp-meta-row { margin-bottom: 16px; gap: 6px; }
  .rp-meta-chip { font-size: 12px; padding: 5px 12px; }

  /* À propos */
  .rp-about { padding: 14px 15px; border-radius: 16px; margin-bottom: 20px; }
  .rp-about-head { font-size: 13.5px; }
  .rp-about-text { font-size: 13.5px; }
  .rp-tags { gap: 6px; }
  .rp-tag { font-size: 12px; padding: 4px 11px; }

  /* Ils écoutent : 3 par ligne sur mobile */
  .live-listeners.lms-section { margin-top: 24px; }
  .live-listeners-people { grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
  .live-listener-avatar { width: 58px; height: 58px; font-size: 20px; }

  /* Sections "Pour vous" */
  .rp-center .lms-section { margin-top: 28px; }
  .lms-section-head { margin-bottom: 12px; }

  /* Sidebar : 2 colonnes sous tout le contenu */
  
  
  .rp-sidebar-item img { width: 44px; height: 44px; border-radius: 8px; }
  .rp-sidebar-info b { font-size: 12.5px; -webkit-line-clamp: 2; }
  .rp-sidebar-info small { display: none; }

  /* Dashboard */
  .section-head.dashboard-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dash-add-btn { width: 100% !important; justify-content: center !important; }
  .dashboard-radios .my-radio-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .dashboard-radios .manage-radio-card { grid-template-columns: 84px minmax(0,1fr) !important; padding: 12px !important; border-radius: 20px !important; gap: 12px !important; min-height: 0 !important; }
  .dashboard-radios .manage-radio-card .cover { width: 84px !important; height: 84px !important; max-width: 84px !important; max-height: 84px !important; border-radius: 14px !important; }
  .manage-radio-title { font-size: 15px !important; }
  .manage-radio-main p { display: none !important; }
  .dashboard-radios .manage-radio-body { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 8px !important; grid-template-columns: unset !important; }
  .dashboard-radios .manage-actions { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; }
  .dashboard-radios .manage-actions .tb-btn { min-width: 0 !important; font-size: 12px !important; padding: 0 10px !important; height: 32px !important; border-radius: 10px !important; }
  .empty-state { min-height: 240px; padding: 28px 16px; }
  .modal-backdrop { padding: 12px; }
  .modal-card { border-radius: 18px; padding: 18px 14px; }
  .fields-row { grid-template-columns: 1fr !important; gap: 10px; }
  .modal-actions { flex-direction: column-reverse; gap: 8px; }
  .modal-actions .tb-btn { width: 100%; justify-content: center; }

  /* Footer */
  .site-footer { grid-template-columns: 1fr !important; gap: 24px !important; padding: 28px 16px 22px !important; }
  .footer-brand { flex-direction: column; gap: 8px; }
  .footer-col-group { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .footer-col h4 { font-size: 11px; margin-bottom: 8px; }
  .footer-col a { font-size: 14px; padding: 4px 0; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding-top: 16px !important; font-size: 13px !important; }

  /* Genres page */
  .genres-title { font-size: 24px; }
  .genres-br { display: inline; }

  /* Player */
  .now-playing { padding: 0 14px; gap: 10px; height: 62px; }
  .np-thumb { width: 40px; height: 40px; border-radius: 9px; }
  .np-info b { font-size: 13.5px; }
  .np-info small { font-size: 10px; }
  .np-wave { display: none; }
  .np-play { width: 40px; height: 40px; font-size: 15px; }
  .np-volume { display: none; }
  .np-expand-tab { right: 60px; }
}

/* ≤ 420px */
@media (max-width: 420px) {
  .content { padding: 62px 10px 36px; }
  .lms-genre-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .lms-genre { height: 72px; font-size: 12.5px; padding: 10px 12px; border-radius: 12px; }
  .lms-card { flex-basis: calc((100% - 14px) / 2) !important; }
  .footer-col-group { grid-template-columns: 1fr; }
  .rp-cover { max-height: 72vw; }
  .rp-name { font-size: 18px; }
  
}

@media (max-width: 480px) { .sidebar { width: min(82vw, 280px); } }

/* ── Social buttons footer ── */
.social-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--bd);
  color: var(--tx2); font-size: 14px; text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.social-btn:hover { background: var(--c2); color: #fff; border-color: var(--c2); }
.socials { display: flex; gap: 8px; }

/* ── rp breadcrumb sep ── */
.rp-bc-sep { font-size: 9px; color: var(--tx3); opacity: .5; }

/* ── rp meta chips ── */
.rp-meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.rp-meta-chip {
  font-size: 12.5px; font-weight: 600; color: var(--tx2);
  background: var(--bg2); border: 1px solid var(--bd);
  border-radius: 50px; padding: 5px 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.rp-live { color: #22c55e; border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.08); }
.rp-live i { font-size: 8px; }

/* ── Fond couleur dominante (page radio) ──────────────────────────── */
.rp-wrap { position: relative; }
.rp-bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  background:
    radial-gradient(ellipse 900px 600px at 18% 0%, var(--rp-glow-c1, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 700px 500px at 85% 15%, var(--rp-glow-c2, transparent) 0%, transparent 60%);
}
.rp-bg-glow.is-ready { opacity: .55; }
body.theme-light .rp-bg-glow.is-ready { opacity: .28; }

/* ── Garde-fou : aucun bouton/élément à dégradé bleu ne doit avoir de bordure visible ──
   border:0 (et non juste transparent) : un "border: Npx solid transparent" sur un fond
   dégradé + border-radius produit un fin liseré dû à l'anti-aliasing du navigateur. ── */
.tb-btn-cta,
.btn-primary,
.play-btn,
.rp-play-btn,
.rp-play-circle,
.section-ico,
.lms-section-ico,
.rank,
.lms-rank,
.favorite-btn.is-active,
.card-fav.is-active,
.rp-action-btn.is-active,
.slide-arrows button:hover {
  border: 0 !important;
}

/* ── Page radio : pleine largeur ─────────────────────────────────── */
.page-radio .content { padding-left: 0; padding-right: 0; }
.page-radio .rp-wrap { padding-left: 34px; padding-right: 34px; padding-top: 4px; }
@media(max-width:680px){
  .page-radio .rp-wrap { padding-left: 18px; padding-right: 18px; }
}

/* ── Blocs publicitaires ──────────────────────────────────────────── */
.lms-ad-block { width:100%; }
.lms-ad-placeholder {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 80px;
  border: 2px dashed rgba(107,92,255,.35);
  border-radius: 12px;
  color: rgba(107,92,255,.6);
  font-size: 13px; font-weight: 600;
  background: rgba(107,92,255,.04);
  margin: 16px 0;
}
.lms-ad-placeholder i { font-size: 18px; }
.lms-ad-wrap { padding: 0 0 8px; margin-top: 28px; }

/* Badge StreamRadio sur les fiches radio */
.rp-meta-chip-streamradio {
  color: #38bdf8;
  border-color: rgba(56,189,248,.28);
  background: rgba(56,189,248,.10);
}