/* XBeat Player */
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --accent:#e30613;
  --bg:#0a0a0a;
  --panel:rgba(18,18,18,.62);
  --line:rgba(255,255,255,.09);
  --txt:#f5f5f5;
  --muted:#a3a3a3;
  --dim:#6b6b6b;
  --radius:14px;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--txt);
  font:400 16px/1.45 "Barlow",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}

/* --- fond --- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden}
.bg-img{
  position:absolute;inset:-12%;
  background:radial-gradient(60% 50% at 30% 35%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%) center/cover no-repeat;
  filter:blur(60px) saturate(1.25);opacity:.55;
  transition:background-image 1.2s ease,opacity 1.2s ease;
  transform:scale(1.1);
}
.bg-img.has-img{opacity:.5}
.bg-shade{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 0%,transparent 0%,rgba(10,10,10,.55) 55%,var(--bg) 100%),
  linear-gradient(180deg,rgba(10,10,10,.35),rgba(10,10,10,.85))}

.app{
  position:relative;z-index:1;min-height:100%;
  display:flex;flex-direction:column;
  max-width:1180px;margin:0 auto;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}

/* --- en-tête --- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand img{width:36px;height:36px;border-radius:8px;object-fit:cover;background:#111}
.brand-txt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand-txt strong{font:700 1.2rem/1 var(--cond);letter-spacing:.06em;text-transform:uppercase}
.brand-txt small{font-size:.72rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.top-right{display:flex;align-items:center;gap:10px}
.live{
  display:inline-flex;align-items:center;gap:7px;
  font:700 .78rem/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;
  padding:7px 11px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);
}
.live i{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.live.on{color:#fff;border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.live.on i{background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.lang button{background:none;border:0;padding:6px 9px;font:600 .72rem/1 var(--cond);letter-spacing:.08em;color:var(--dim)}
.lang button[aria-pressed="true"]{color:#fff;background:rgba(255,255,255,.08)}

/* --- scène --- */
.stage{
  --art:clamp(260px,44vh,440px);
  flex:1;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;
  align-items:center;align-content:center;padding:28px 0;
}
.now{display:grid;grid-template-columns:var(--art) minmax(0,1fr);grid-template-areas:"art meta" "art controls";
  grid-template-rows:1fr auto;gap:0 40px;align-items:center}
.art-wrap{grid-area:art;position:relative;width:var(--art)}
.art{
  position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:#141414;
  box-shadow:0 30px 80px -20px color-mix(in srgb,var(--accent) 55%,transparent),0 10px 30px rgba(0,0,0,.6);
  border:1px solid var(--line);
}
.art > img{width:100%;height:100%;object-fit:cover;display:block;animation:fade .8s ease}
.art-fallback{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 35%,#141414),#0d0d0d 70%)}
.art-fallback img{width:46%;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.viz{display:block;width:100%;height:64px;margin-top:14px}

.meta{grid-area:meta;min-width:0;align-self:end}
.kicker{margin:0 0 6px;display:flex;align-items:center;gap:12px;
  font:600 .82rem/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.listeners{color:var(--muted);letter-spacing:.08em;font-weight:600}
.listeners::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--dim);margin-right:10px;vertical-align:middle}
.show{margin:0;font:700 clamp(2.2rem,4.2vw,3.8rem)/.95 var(--cond);text-transform:uppercase;letter-spacing:.01em;
  overflow-wrap:anywhere}
.track{margin:12px 0 0;font-size:clamp(1rem,1.6vw,1.2rem);color:#d6d6d6;font-weight:500;min-height:1.45em;overflow-wrap:anywhere}

.controls{grid-area:controls;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:24px}
.play{
  position:relative;width:84px;height:84px;border-radius:50%;border:0;background:var(--accent);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 12px 34px -6px color-mix(in srgb,var(--accent) 75%,transparent);
  transition:transform .15s ease,box-shadow .2s ease;
}
.play:hover{transform:scale(1.05)}
.play:active{transform:scale(.97)}
.play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.play svg{width:38px;height:38px;fill:currentColor;grid-area:1/1}
.play .i-pause,.play .spin{display:none}
.play.is-playing .i-play{display:none}
.play.is-playing .i-pause{display:block}
.play.is-loading .i-play,.play.is-loading .i-pause{display:none}
.play.is-loading .spin{display:block;grid-area:1/1;width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.status{margin:0;font-size:.85rem;color:var(--muted);min-height:1.2em}

.row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.vol{display:flex;align-items:center;gap:8px}
.icon-btn{background:none;border:0;padding:4px;width:34px;height:34px;color:var(--muted);border-radius:8px}
.icon-btn:hover{color:#fff}
.icon-btn svg{width:24px;height:24px;fill:currentColor}
.icon-btn .x{display:none}
.icon-btn.muted .wave{display:none}
.icon-btn.muted .x{display:block}
input[type=range]{-webkit-appearance:none;appearance:none;width:130px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,#fff var(--p,90%),rgba(255,255,255,.18) var(--p,90%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:0}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

.quality{display:flex;gap:4px;padding:3px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.quality button{border:0;background:none;padding:6px 11px;border-radius:7px;color:var(--muted);
  font:600 .85rem/1 var(--cond);letter-spacing:.06em}
.quality button small{font-size:.66rem;opacity:.7;margin-left:2px}
.quality button[aria-checked="true"]{background:var(--accent);color:#fff}
.quality button:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* --- historique --- */
.history{align-self:stretch;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  align-self:stretch;contain:size;overflow:auto}
.history h2{margin:0 0 12px;font:700 1rem/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.history ol{list-style:none;margin:0;padding:0}
.history li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);animation:fade .5s ease}
.history li:first-child{border-top:0}
.h-img{width:42px;height:42px;border-radius:7px;object-fit:cover;background:#1a1a1a}
.h-ph{width:42px;height:42px;border-radius:7px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 45%,#1a1a1a),#151515)}
.h-txt{min-width:0}
.h-track{font-weight:500;font-size:.92rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.h-show{font-size:.76rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-time{font:600 .8rem/1 var(--cond);color:var(--dim);letter-spacing:.04em}
.empty{margin:0;color:var(--dim);font-size:.88rem}

/* --- pied --- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:.84rem;color:var(--dim)}
.site-link{text-decoration:none;color:var(--muted)}
.site-link:hover{color:#fff}
.install{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid var(--line);
  padding:8px 14px;border-radius:99px;font-weight:600;font-size:.85rem}
.install svg{width:18px;height:18px}
.install:hover{background:rgba(255,255,255,.14)}
.ios-hint{margin:0}

/* --- responsive --- */
/* Écran moyen / tablette : lecteur en 2 colonnes, historique en dessous */
@media (max-width:1100px){
  .stage{--art:min(34vw,320px,calc(100vh - 170px));grid-template-columns:minmax(0,1fr);gap:28px}
  .history{contain:none;max-height:340px}
}
/* Téléphone + popup : tout empilé et centré, la pochette s'adapte à la hauteur
   pour que le bouton lecture et la qualité restent visibles sans défiler */
@media (max-width:700px){
  .stage{--art:max(130px,min(78vw,340px,calc(100vh - 400px)));padding:16px 0 20px;gap:22px}
  .now{grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "meta" "controls";grid-template-rows:auto;
    justify-items:center;text-align:center;gap:0}
  .meta{width:100%;margin-top:14px}
  .kicker{justify-content:center}
  .show{font-size:clamp(1.7rem,8vw,2.6rem)}
  .track{margin-top:8px}
  .controls{align-items:center;padding-top:14px;gap:10px}
  .play{width:70px;height:70px}
  .play svg{width:32px;height:32px}
  .row{justify-content:center}
  .viz{height:44px;margin-top:10px}
  .history{max-height:none}
  .foot{justify-content:center}
}
/* Paysage bas (téléphone couché, popup large et basse) : pochette à gauche */
@media (max-height:560px) and (min-width:560px){
  .stage{--art:max(120px,calc(100vh - 150px));padding:12px 0}
  .now{grid-template-columns:var(--art) minmax(0,1fr);grid-template-areas:"art meta" "art controls";
    grid-template-rows:1fr auto;justify-items:start;text-align:left;gap:0 28px}
  .kicker{justify-content:flex-start}
  .controls{align-items:flex-start}
  .row{justify-content:flex-start}
  .viz{display:none}
}
@media (max-width:420px){
  .brand-txt small{display:none}
  input[type=range]{width:100px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition:none!important}
}
/* Très grand écran : plus de place pour le titre de l'émission */
@media (min-width:1500px){
  .app{max-width:1380px}
  .stage{grid-template-columns:minmax(0,1fr) 380px;gap:64px}
}
/* Mini popup (ex. 320×500) : tout tient sans défiler */
@media (max-width:559px) and (max-height:620px), (max-width:340px){
  .app{padding-top:10px}
  .brand img{width:30px;height:30px}
  .brand-txt strong{font-size:1rem}
  .live{padding:5px 8px;font-size:.68rem}
  .lang button{padding:5px 7px}
  .stage{--art:max(110px,min(78vw,300px,calc(100vh - 285px)));padding:10px 0 16px;gap:18px}
  .viz{display:none}
  .meta{margin-top:10px}
  .kicker{font-size:.7rem;margin-bottom:4px}
  .show{font-size:clamp(1.35rem,7vw,2rem)}
  .track{font-size:.9rem;margin-top:4px}
  .controls{padding-top:10px;gap:6px}
  .play{width:56px;height:56px}
  .play svg{width:26px;height:26px}
  .status{font-size:.75rem}
  .row{flex-wrap:nowrap;gap:10px}
  input[type=range]{width:64px}
  .icon-btn{width:28px;height:28px;padding:2px}
  .quality button{padding:5px 8px;font-size:.78rem}
}