/* CRITIQUE : hidden gagne toujours */
[hidden] { display: none !important; }

/* Thème adaptatif OS / navigateur */
:root {
  color-scheme: light dark;
  --bg: #F5F5F5; --surface: #FFFFFF; --surface-2: #E9E9EC;
  --text: #111111; --text-2: #555555; --outline: #D6D6DA;
  --primary: #4F378B; --on-primary: #FFFFFF;
  --sticky-bg: rgba(255,255,255,0.96); --shadow: rgba(0,0,0,0.18);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212; --surface: #1E1E1E; --surface-2: #2A2A2E;
    --text: #E6E1E5; --text-2: #A9A4AE; --outline: #444449;
    --primary: #4F378B; --on-primary: #D0BCFF;
    --sticky-bg: rgba(18,18,18,0.96); --shadow: rgba(0,0,0,0.5);
  }
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
svg { fill:currentColor; display:block; }
#app { min-height:100%; padding-bottom:100px; }

.screen { display:none; padding:16px; }
.screen.active { display:block; }

.app-header { display:flex; align-items:center; gap:10px; max-width:420px; margin:0 auto 16px auto; padding-bottom:10px; border-bottom:1px solid var(--outline); }
.app-header h1 { flex:1; font-size:1.25rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.back-btn { background:none; border:none; color:var(--primary); font-size:1.3rem; font-weight:700; cursor:pointer; padding:4px 10px; }
.live-badge { font-size:0.7rem; font-weight:800; color:#D32F2F; background:var(--surface-2); padding:4px 10px; border-radius:20px; white-space:nowrap; }

.player-col { max-width:420px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.artwork-container { width:100%; aspect-ratio:1; border-radius:16px; overflow:hidden; background:var(--surface-2); box-shadow:0 8px 24px var(--shadow); }
.artwork { width:100%; height:100%; object-fit:cover; display:block; }
.info-box { background:var(--surface); border:1px solid var(--outline); border-radius:12px; padding:12px 16px; text-align:center; }
.info-title { font-size:1.05rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.info-subtitle { font-size:0.85rem; color:var(--text-2); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.progress-row { display:flex; align-items:center; gap:8px; }
.time { font-size:0.72rem; color:var(--text-2); min-width:38px; text-align:center; font-variant-numeric:tabular-nums; }
.progress-row input[type="range"], .sticky-progress input[type="range"] { -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:2px; background:var(--outline); outline:none; cursor:pointer; }
.progress-row input[type="range"]::-webkit-slider-thumb, .sticky-progress input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; background:var(--on-primary); border-radius:50%; cursor:pointer; }
.progress-row input[type="range"]::-moz-range-thumb, .sticky-progress input[type="range"]::-moz-range-thumb { width:13px; height:13px; background:var(--on-primary); border-radius:50%; border:none; cursor:pointer; }

.vu-row { display:flex; align-items:center; gap:8px; height:76px; }
.vu-container { flex:1; height:100%; background:var(--surface); border:1px solid var(--outline); border-radius:10px; overflow:hidden; }
.vu-container canvas { width:100%; height:100%; display:block; }

.btn-icon { width:40px; height:40px; border-radius:50%; border:none; background:var(--surface-2); color:var(--text); font-size:1.1rem; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.btn-icon svg { width:20px; height:20px; }
.btn-icon.big { width:46px; height:46px; }
.btn-icon.big svg { width:24px; height:24px; }

.controls-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin-top:4px; }
.btn-play { width:84px; height:84px; border-radius:50%; border:none; background:var(--primary); color:var(--on-primary); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px var(--shadow); transition:transform 0.15s; }
.btn-play:active { transform:scale(0.94); }
.btn-play svg { width:44px; height:44px; }
.btn-small { justify-self:end; width:44px; height:44px; border-radius:50%; border:none; background:var(--surface-2); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.btn-small svg { width:22px; height:22px; }

.categories-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:700px; margin:0 auto; }
@media (min-width:600px){ .categories-grid { grid-template-columns:repeat(4,1fr); } }
.category-card { background:var(--surface); border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid var(--outline); }
.category-cover { width:100%; aspect-ratio:1; object-fit:cover; background:var(--surface-2); display:block; }
.category-name { padding:10px 12px; font-size:0.9rem; font-weight:600; text-align:center; }

.shows-list { display:flex; flex-direction:column; gap:12px; max-width:700px; margin:0 auto; }
.show-card { display:flex; gap:14px; background:var(--surface); border:1px solid var(--outline); border-radius:12px; padding:12px; cursor:pointer; }
.show-cover { width:78px; height:78px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--surface-2); }
.show-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.show-title { font-size:1.02rem; font-weight:600; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.show-desc { font-size:0.83rem; color:var(--text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.episodes-list { display:flex; flex-direction:column; gap:8px; max-width:700px; margin:0 auto; }
.episode-row { display:flex; align-items:center; gap:12px; padding:12px; background:var(--surface); border:1px solid var(--outline); border-radius:12px; }
.episode-row.playing { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.ep-play-btn { width:44px; height:44px; border-radius:50%; border:none; background:var(--primary); color:var(--on-primary); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ep-play-btn svg { width:22px; height:22px; }
.ep-thumb { width:48px; height:48px; border-radius:6px; object-fit:cover; flex-shrink:0; background:var(--surface-2); }
.ep-meta { flex:1; min-width:0; }
.ep-title { font-size:0.95rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ep-show { font-size:0.78rem; color:var(--text-2); margin-top:2px; }
.ep-info-btn { background:none; border:none; color:var(--text-2); cursor:pointer; padding:8px; font-size:1.15rem; }

.sticky-player { position:fixed; bottom:0; left:0; right:0; z-index:9999; display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--sticky-bg); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); border-top:1px solid var(--outline); box-shadow:0 -4px 20px var(--shadow); }
.sticky-artwork { width:46px; height:46px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--surface-2); }
.sticky-info { flex:1; min-width:0; }
.sticky-title { font-size:0.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-subtitle { font-size:0.75rem; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-progress { display:flex; align-items:center; margin-top:4px; }

.popup-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.popup-content { background:var(--surface); color:var(--text); border-radius:16px; max-width:500px; width:100%; max-height:80vh; overflow-y:auto; padding:20px; }
.popup-content h2 { margin-bottom:12px; }
.desc-html { color:var(--text-2); font-size:0.9rem; line-height:1.6; }
.desc-html img { max-width:100%; border-radius:8px; margin:8px 0; }
.popup-close { margin-top:16px; background:var(--primary); color:var(--on-primary); border:none; padding:10px 22px; border-radius:20px; cursor:pointer; font-weight:600; }

.loading { text-align:center; padding:40px; color:var(--text-2); }