/* 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; }

/* ========== BASE = MODE PORTRAIT (téléphone) : design d'origine intact ========== */
.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); }

/* ==========================================================================
   MODE PAYSAGE — colonne gauche en UNITÉS VIEWPORT (zéro débordement,
   identique sur PC, Tesla, tablette Android, téléphone tourné)
   ========================================================================== */
@media (orientation: landscape) {
  #app { padding-bottom:0; }

  #screen-categories, #screen-shows, #screen-episodes { padding-bottom:96px; }
  #screen-categories .categories-grid,
  #screen-shows .shows-list,
  #screen-episodes .episodes-list { max-width:980px; }

  #screen-radio.active, #screen-podcast.active {
    --col1: min(46vw, calc(100vh - 40px));
    --col1: min(46vw, calc(100dvh - 40px));
    display:grid;
    grid-template-columns: var(--col1) minmax(0,1fr);
    grid-template-rows:auto auto auto auto 1fr auto;
    gap:12px 28px;
    height:100vh;
    height:100dvh;
    max-height:100vh;
    max-height:100dvh;
    overflow:hidden;
    padding:16px 28px;
  }

  #screen-radio .player-col, #screen-podcast .player-col { display:contents; }

  #screen-radio .app-header, #screen-podcast .app-header {
    grid-column:2; grid-row:1;
    max-width:none; margin:0; padding-bottom:8px;
  }

    #screen-radio .artwork-container, #screen-podcast .artwork-container {
    grid-column:1; grid-row:1 / -1;
    width:100%; height:100%;
    aspect-ratio:auto;
    margin:0;
    border-radius:20px;
    background:transparent;
    box-shadow:none;
    overflow:hidden;
  }
  #screen-radio .artwork, #screen-podcast .artwork {
    object-fit:cover;   /* remplit toute la colonne : haut ET bas alignés avec la colonne droite */
  }

  /* Pochette : boîte fixe = colonne viewport, image contenue (jamais rognée, jamais débordante) */
  /*#screen-radio .artwork-container, #screen-podcast .artwork-container {
    grid-column:1; grid-row:1 / -1;
    width:100%; height:100%;
    aspect-ratio:auto;
    margin:0;
    border-radius:20px;
    background:transparent;
    box-shadow:none;
    object-position: 50% 100%;
  }

  #screen-radio .artwork, #screen-podcast .artwork {
    object-fit: contain;
    object-position: 50% 100%;   /* pochette posée en bas → base alignée sur le bouton play */
  }
  */

  #screen-radio .info-box, #screen-podcast .info-box { grid-column:2; grid-row:2; }
  #screen-radio .progress-row, #screen-podcast .progress-row { grid-column:2; grid-row:3; }
  #screen-radio .vu-row, #screen-podcast .vu-row { grid-column:2; grid-row:4; height:clamp(52px, 16vh, 110px); }
  #screen-radio .controls-row, #screen-podcast .controls-row { grid-column:2; grid-row:6; margin-top:0; }

  .app-header h1 { font-size:1.4rem; }
  .info-title { font-size:1.25rem; }
  .info-subtitle { font-size:0.95rem; }
  .btn-play { width:min(96px, 18vh); height:min(96px, 18vh); }
  .btn-play svg { width:52%; height:52%; }
  .btn-small { width:min(52px, 10vh); height:min(52px, 10vh); }
  .btn-small svg { width:50%; height:50%; }
  .btn-icon { width:min(48px, 9vh); height:min(48px, 9vh); }
  .btn-icon svg { width:50%; height:50%; }
}

/* Paysage très bas (téléphone tourné) : compact */
@media (orientation: landscape) and (max-height: 450px) {
  #screen-radio.active, #screen-podcast.active { gap:8px 16px; padding:10px 16px; }
  .app-header { padding-bottom:4px; }
  .app-header h1 { font-size:1.1rem; }
  .info-box { padding:8px 12px; }
  .info-title { font-size:1rem; }
  .info-subtitle { font-size:0.8rem; }
  .vu-row { height:44px; }
}