/* =========================================================
   WanaLike FM — fm-theme.css (single source of truth)
   ========================================================= */

/* ========== TOKENS ========== */
:root{
  --wl-bg:#020617;
  --wl-bg-alt:#02091b;

  --wl-accent:#38bdf8;
  --wl-accent2:#a855f7;
  --wl-accent-soft:rgba(56,189,248,.30);

  --wl-text:#e5e7eb;
  --wl-text-muted:#9ca3af;

  --wl-card:rgba(15,23,42,.90);
  --wl-border:rgba(148,163,229,.22);

  --wl-radius:18px;
  --wl-shadow:0 20px 60px rgba(15,23,42,.85);

  /* largeur de la zone droite (LIVE + cluster) */
  --wl-footer-right: 420px;

  /* largeur du cluster (progress + volume + viz) */
  --wl-footer-cluster: 320px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{
  height:100%;
  overflow-x:hidden;
}

body.wl-body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Inter",sans-serif;
  background:radial-gradient(circle at top,#020617 0,#000 60%);
  color:var(--wl-text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ========== CONTAINER ========== */
.container{
  max-width:1080px;
  margin:0 auto;
  padding:0 1.25rem;
}

.wl-main{
  max-width:1080px;
  margin:0 auto;
  padding:2rem 1.25rem 6rem;
}

/* ========== HEADER ========== */
.wl-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(18px);
  background:linear-gradient(to bottom, rgba(15,23,42,.95), rgba(15,23,42,.30));
  border-bottom:1px solid rgba(148,163,229,.30);
}

.wl-header__inner{
  max-width:1080px;
  margin:0 auto;
  padding:.75rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.wl-logo{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  color:var(--wl-text);
  font-weight:700;
}

.wl-logo__mark{
  width:28px;height:28px;border-radius:999px;
  border:2px solid var(--wl-accent);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.9rem;
}

.wl-nav{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

.wl-nav__link{
  color:var(--wl-text-muted);
  text-decoration:none;
  font-size:.9rem;
}
.wl-nav__link:hover{ color:var(--wl-text); }

/* ========== BUTTONS ========== */
.wl-btn{
  border-radius:999px;
  padding:.62rem 1.3rem;
  font-size:.92rem;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  user-select:none;
}

.wl-btn--primary{
  background:linear-gradient(to right,var(--wl-accent),var(--wl-accent2));
  color:#0b1120;
  font-weight:800;
}

.wl-link{
  color:rgba(229,231,235,.85);
  text-decoration:none;
  border-bottom:1px solid rgba(56,189,248,.25);
}
.wl-link:hover{ color:#fff; border-bottom-color:rgba(56,189,248,.55); }

/* ========== HERO ========== */
.fm-hero{
  max-width:1080px;
  margin:0 auto;
  padding:2.5rem 1.25rem 2rem;
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:2rem;
  align-items:center;
}

.fm-hero-left{ min-width:0; }
.fm-hero-right{ min-width:0; }

.fm-kicker{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.75rem;
  color:var(--wl-accent);
  font-weight:800;
}

.fm-title{
  font-size:clamp(2.1rem,3vw,2.9rem);
  margin:.55rem 0 .6rem;
  font-weight:900;
  letter-spacing:-.02em;
}

.fm-subtitle{
  color:rgba(226,232,240,.75);
  max-width:44rem;
  line-height:1.55;
}

.fm-cta{
  margin-top:1.2rem;
  display:flex;
  gap:.85rem;
  flex-wrap:wrap;
  align-items:center;
}

/* Visualizer canvas (legacy direct canvas) */
.wl-visualizer{
  width:100%;
  height:360px;
  display:block;
  border-radius:22px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--wl-border);
  box-shadow:var(--wl-shadow);
}

/* =========================================================
   HERO VISUALIZER WRAPPER — placeholder ALWAYS by default
   (wrapper .wl-hero-viz)
   ========================================================= */
.wl-hero-viz{
  position:relative;
  width:100%;
  height:360px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--wl-border);
  box-shadow:var(--wl-shadow);
  background:rgba(255,255,255,.02);
}

/* ✅ Placeholder par défaut (même si JS/classes se perdent) */
.wl-hero-viz::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("/assets/img/WanalikeFMbackground.png");
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.05);
  opacity:.90;
  pointer-events:none;
}

.wl-hero-viz canvas{
  width:100%;
  height:100%;
  display:block;
  opacity:0;              /* caché tant que pas playing */
  pointer-events:none;
}

/* Playing: show canvas, hide placeholder */
.wl-hero-viz.is-playing::before{ opacity:0; }
.wl-hero-viz.is-playing canvas{
  opacity:1;
  pointer-events:auto;
}

/* ========== VINYL HERO ========== */
.vinyl-hero{
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:18px;
}

.vinyl{
  position:relative;
  width:280px;
  height:280px;
  flex:0 0 auto;
}

.vinyl__disc,
.vinyl__label{
  position:absolute;
  inset:0;
  border-radius:999px;
  transform:translateX(92px);
  transform-origin:center;
}

.vinyl__disc{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 30%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.80) 100%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,0) 2px 7px);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}

.vinyl__label{
  inset:40%;
  background:radial-gradient(circle, rgba(56,189,248,.92), rgba(168,85,247,.88));
}

.vinyl__cover{
  position:absolute;
  left:-18%;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  height:100%;
  border-radius:22px;

  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  border:1px solid rgba(148,163,229,.25);
  backdrop-filter:blur(10px);
  box-shadow:0 22px 60px rgba(0,0,0,.35);

  display:grid;
  place-items:center;
  padding:18px;
  overflow:hidden;
}

.vinyl__cover::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at top, rgba(2,6,23,.10), rgba(2,6,23,.65));
  pointer-events:none;
}

.vinyl__cover-inner{
  position:relative;
  display:grid;
  gap:10px;
  text-align:center;
}

.vinyl__tag{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-weight:900;
  letter-spacing:.12em;
  font-size:12px;
  color:rgba(56,189,248,.95);
}

.vinyl__name{
  font-weight:950;
  font-size:18px;
  line-height:1.15;
  max-width:18ch;
}

.vinyl__disc,
.vinyl__label{
  animation:vinylSpin 7s linear infinite;
  animation-play-state:paused;
}

.vinyl.is-playing .vinyl__disc,
.vinyl.is-playing .vinyl__label{
  animation-play-state:running;
}

@keyframes vinylSpin{
  to { transform:translateX(92px) rotate(360deg); }
}

/* ========== SECTIONS ========== */
.wl-section{ padding:3.5rem 0; }

.wl-section-kicker{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  color:var(--wl-accent);
  font-weight:900;
  margin-bottom:.4rem;
}

.wl-section-title{
  font-size:clamp(1.5rem,2vw,2rem);
  margin:0 0 .75rem;
  font-weight:950;
}

.wl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin-top:1.25rem;
}

.wl-card{
  background:var(--wl-card);
  border-radius:var(--wl-radius);
  padding:1.05rem 1.1rem;
  border:1px solid var(--wl-border);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.wl-card h3{ margin:.2rem 0 .35rem; }
.wl-card p{ margin:0; color:rgba(226,232,240,.76); }

/* ========== LATEST LIST UI ========== */
.latest-list{ display:grid; gap:14px; margin-top:18px; }

.latest-item{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:92px 1fr 140px;
  gap:18px;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(148,163,229,.18);
}

.latest-cover{
  width:92px;height:92px;border-radius:16px;
  background:rgba(255,255,255,.05);
  position:relative;
}

.latest-num{
  position:absolute;
  left:10px; top:10px;
  font-weight:950;
  opacity:.85;
}

.latest-title{ font-weight:950; font-size:18px; }

.chip{
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(56,189,248,.14);
  border:1px solid rgba(56,189,248,.25);
  font-size:12px;
}

.latest-controls{ display:inline-flex; gap:10px; margin-top:10px; }

.icon-btn{
  border:0;
  background:transparent;
  color:rgba(229,231,235,.92);
  cursor:pointer;
  font-size:16px;
}

.latest-bar{
  height:3px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  margin-top:12px;
  overflow:hidden;
}
.latest-bar__fill{ width:28%; height:100%; background:rgba(56,189,248,.75); }

.latest-right{
  display:grid;
  justify-items:end;
  align-content:start;
  gap:10px;
  opacity:.9;
}

.latest-vinyl{
  position:absolute;
  right:12px;
  top:12px;
  opacity:.22;
  pointer-events:none;
}

/* ========== PODCASTS GRID ========== */
.podcasts-grid{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:18px;
  margin-top:18px;
}

.pod-days{ display:grid; gap:10px; }

.day{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(148,163,229,.18);
  color:rgba(229,231,235,.9);
  cursor:pointer;
  text-align:left;
}
.day.is-active{ border-color:rgba(56,189,248,.55); }

.pod-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.pod-card{
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(148,163,229,.18);
  padding:14px;
  display:grid;
  gap:10px;
}

.pod-card__media{ display:grid; place-items:center; padding:10px; }

.pod-time{ font-weight:800; opacity:.85; }
.pod-title{ font-weight:950; font-size:18px; }
.pod-rj{ opacity:.8; }

/* =========================================================
   FOOTER PLAYER — LIVE / Glow (FIXED LAYOUT)
   ========================================================= */

:root{
  --wl-footer-max: 1400px;
  --wl-footer-pad: 16px;

  /* largeur max de la colonne droite (progress + live + volume + viz) */
  --wl-footer-right: 520px;

  /* largeur max du cluster interne */
  --wl-footer-cluster: 420px;
}

.wl-player{
  position:fixed;
  left:0; right:0; bottom:0;
  height:82px;

  background:linear-gradient(to top, rgba(2,6,23,.96), rgba(2,6,23,.88));
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(56,189,248,.28);
  z-index:999;

  box-shadow:
    0 -18px 60px rgba(56,189,248,.08),
    0 -24px 90px rgba(168,85,247,.06);
}

.wl-player::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.75;
  background:
    radial-gradient(1200px 140px at 20% 0%, rgba(56,189,248,.12), transparent 55%),
    radial-gradient(900px 120px at 80% 0%, rgba(168,85,247,.10), transparent 60%);
}

.wl-player__inner{
  height:100%;
  max-width:var(--wl-footer-max);
  margin:0 auto;

  display:grid;
  /* 1) cover  2) play  3) meta (flex)  4) right (bounded) */
  grid-template-columns: auto auto minmax(0, 1fr) minmax(280px, var(--wl-footer-right));
  align-items:center;
  gap:14px;

  padding:0 var(--wl-footer-pad);
  position:relative;
}

/* Cover */
.wl-player__cover{
  width:58px; height:58px;
  border-radius:14px;
  padding:2px;
  background:linear-gradient(135deg, rgba(56,189,248,.35), rgba(168,85,247,.25));
  box-shadow:
    0 12px 32px rgba(0,0,0,.35),
    0 0 24px rgba(56,189,248,.10);
}

.wl-player__cover-img{
  width:100%; height:100%;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(148,163,229,.18);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Play button */
.wl-player__btn{
  height:46px;
  width:46px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.32);
  background:
    radial-gradient(circle at 30% 30%, rgba(56,189,248,.18), transparent 45%),
    rgba(255,255,255,.03);
  color:rgba(229,231,235,.95);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:16px;
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 18px rgba(56,189,248,.08);
}

.wl-player.is-playing .wl-player__btn{
  border-color:rgba(56,189,248,.55);
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 26px rgba(56,189,248,.16),
    0 0 36px rgba(168,85,247,.10);
}

/* Meta */
.wl-player__meta{
  min-width:0;
  overflow:hidden;
}

.wl-player__title{
  font-size:14px;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wl-player__sub{
  font-size:12px;
  opacity:.75;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}

/* RIGHT ZONE
   IMPORTANT: on ne colle PLUS tout à droite.
   On “ancre” la zone au début de sa colonne (proche du titre). */
.wl-player__right{
  width:100%;
  justify-self:start;     /* <-- clé: colle la zone vers la gauche (près du meta) */
  align-self:center;

  display:flex;
  justify-content:flex-start;
}

/* Tools row (conteneur principal) */
.wl-player__tools{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;

  /* Au lieu de pousser à droite, on garde compact */
  justify-content:flex-start;
}

/* LIVE badge */
.wl-live{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(148,163,229,.20);
  color:rgba(229,231,235,.88);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

.wl-live__dot{
  width:8px; height:8px;
  border-radius:999px;
  background:rgba(148,163,229,.55);
  box-shadow:0 0 0 rgba(56,189,248,0);
}

.wl-player.is-playing .wl-live{
  border-color:rgba(56,189,248,.40);
  background:rgba(56,189,248,.08);
}

.wl-player.is-playing .wl-live__dot{
  background:rgba(56,189,248,.95);
  box-shadow:0 0 16px rgba(56,189,248,.35);
  animation: wlPulse 1.1s ease-in-out infinite;
}

.wl-player.is-buffering .wl-live{
  border-color:rgba(168,85,247,.45);
  background:rgba(168,85,247,.08);
}

.wl-player.is-error .wl-live{
  border-color:rgba(239,68,68,.55);
  background:rgba(239,68,68,.10);
}

@keyframes wlPulse{
  0%,100%{ transform:scale(1); opacity:.9; }
  50%{ transform:scale(1.25); opacity:1; }
}

/* Cluster: progress au-dessus du volume/viz */
.wl-player__cluster{
  width:100%;
  max-width:var(--wl-footer-cluster);

  display:grid;
  grid-template-rows:auto auto;
  gap:10px;
}

/* Progress/activity bar (FULL width with TRACK restored) */
.wl-player__progress{
  width:100%;
  height:4px;
  background:rgba(255,255,255,.10); /* <-- la “barre normale” manquante */
  border-radius:999px;
  overflow:hidden;
}

.wl-player__progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,.60), rgba(168,85,247,.45));
  transition:width .18s linear;
}

.wl-player.is-playing .wl-player__progress-fill{
  box-shadow:0 0 18px rgba(56,189,248,.10);
}

/* Cluster row: icon + volume + mini viz */
.wl-player__cluster-row{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* <-- pareil: compact, pas collé au bord droit */
  gap:12px;
}

.wl-vol-ico{
  color:rgba(229,231,235,.86);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  opacity:.92;
}

/* Volume */
.wl-volume{
  width:100px;
  height:4px;
  accent-color:var(--wl-accent);
}

/* Mini viz */
.wl-player__viz{
  width:140px;
  height:46px;
  position:relative;
  opacity:.92;
}
.wl-player__viz canvas{ width:100%; height:100%; display:block; }

/* ========== RESPONSIVE ========== */
@media (max-width: 980px){
  :root{
    --wl-footer-right: 420px;
    --wl-footer-cluster: 340px;
  }
}

@media (max-width: 820px){
  .wl-player__viz{ display:none; }
  :root{
    --wl-footer-right: 340px;
    --wl-footer-cluster: 220px;
  }
}

@media (max-width: 560px){
  .wl-live{ display:none; }
  :root{
    --wl-footer-right: 300px;
    --wl-footer-cluster: 220px;
  }
}