*{box-sizing:border-box;margin:0;padding:0}
:root{--red:#e50914;--bg:#0b0b0d;--card:#17171b}
body{background:var(--bg);color:#eee;font-family:system-ui,Segoe UI,Roboto,sans-serif}
[hidden]{display:none!important}
.nav{position:fixed;top:0;left:0;right:0;z-index:5;padding:18px 4%;background:linear-gradient(#000c,transparent)}
.logo{color:var(--red);font-weight:800;letter-spacing:3px}
.hero{min-height:70vh;display:flex;align-items:flex-end;padding:0 4% 60px;
  background:linear-gradient(0deg,var(--bg) 5%,transparent 60%),
  radial-gradient(circle at 70% 30%,#2a2a33,#050506 70%)}
.hero-inner{max-width:560px}
.hero h1{font-size:clamp(2.5rem,7vw,5rem);letter-spacing:6px;margin-bottom:10px}
.meta{color:#46d369;font-weight:600;margin-bottom:10px}
.desc{color:#ccc;line-height:1.5;margin-bottom:22px}
.btn{border:0;border-radius:4px;padding:11px 26px;font-size:1rem;font-weight:700;cursor:pointer}
.btn.primary{background:#fff;color:#000}.btn.primary:hover{background:#ddd}
.btn.ghost{background:#fff2;color:#fff}.btn.ghost:hover{background:#fff4}
.episodes{padding:10px 4% 60px}
.episodes h2{margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{background:var(--card);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .2s}
@media (hover:hover){.card:hover{transform:scale(1.04)}}
.card:active{opacity:.8}
.thumb{aspect-ratio:16/9;background:#222 center/cover;display:flex;align-items:center;justify-content:center;position:relative}
.thumb .num{font-size:3.5rem;font-weight:800;color:#fff3}
.card .info{padding:12px}
.card .info b{display:block;text-transform:capitalize}
.card .info small{color:#999}
.empty{color:#aaa;line-height:1.8}.empty code{background:#222;padding:2px 6px;border-radius:3px}
.player{position:fixed;inset:0;background:#000;z-index:10;display:flex;flex-direction:column}
.player-bar{display:flex;align-items:center;gap:16px;padding:12px 20px;background:#000}
#playerTitle{font-weight:600;text-transform:capitalize}
video{flex:1;width:100%;min-height:0;background:#000}
.next{position:absolute;right:max(20px,env(safe-area-inset-right));top:calc(64px + env(safe-area-inset-top))}
.player-bar{padding-top:max(12px,env(safe-area-inset-top))}
.btn{min-height:44px}
@media (max-width:700px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .hero{min-height:55vh;padding-bottom:36px}
  .thumb .num{font-size:2.5rem}
}
@media (orientation:landscape) and (max-height:500px){
  .hero{min-height:85vh}
  .player-bar{padding:6px 16px}
}

.season{grid-column:1/-1;font-size:1.15rem;margin:14px 0 0;color:#ddd}
.season:first-child{margin-top:0}

.foot{padding:20px 4% 30px;text-align:center}
.foot a{color:#555;font-size:.8rem;text-decoration:none}.foot a:hover{color:#999}
dialog{margin:auto;border:0;border-radius:10px;background:#1a1a1f;color:#eee;padding:24px;width:min(340px,90vw)}
dialog::backdrop{background:#000a}
dialog form{display:flex;flex-direction:column;gap:12px}
dialog input{padding:11px;border-radius:4px;border:1px solid #333;background:#0b0b0d;color:#eee;font-size:1rem}
dialog .row{display:flex;gap:10px;justify-content:flex-end}
.err{color:#ff6b6b;font-size:.9rem;min-height:1.1em}

/* --- Recherche, page détail, options du lecteur --- */
.logo{text-decoration:none}
.episodes-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.episodes-head h2{margin:0}
#search{flex:0 1 320px;min-width:180px;padding:10px 14px;border-radius:999px;border:1px solid #333;background:#15151a;color:#eee;font-size:1rem}
#search:focus{outline:2px solid var(--red);border-color:transparent}
a.card{display:block;color:inherit;text-decoration:none}
.detail{min-height:100vh;padding:80px 4% 40px;background:radial-gradient(circle at 80% 0,#1d1d24,var(--bg) 60%)}
.detail-body{display:flex;gap:32px;margin-top:24px;flex-wrap:wrap}
.detail-poster{flex:0 1 480px;width:100%;max-width:480px;aspect-ratio:16/9;border-radius:10px;background:#222 center/cover;
  display:flex;align-items:center;justify-content:center;font-size:5rem;font-weight:800;color:#fff3}
.detail-info{flex:1 1 320px;min-width:0}
.kicker{color:#999;margin-bottom:6px}
.detail-info h1{font-size:clamp(1.8rem,4vw,2.8rem);text-transform:capitalize;margin-bottom:10px}
.summary{color:#ccc;line-height:1.6;margin:14px 0;max-width:62ch}
.langs{color:#999;margin-bottom:20px;font-size:.95rem}
.opts{margin-left:auto;display:flex;gap:8px;align-items:center}
.opts .cast{margin-left:0}
.opts select{background:#fff2;color:#fff;border:0;border-radius:4px;padding:10px 8px;font-size:.95rem}
.opts select option{color:#000}
.foot{display:flex;gap:18px;justify-content:center}