:root{
  --red:#c0392b;
  --red-dim:rgba(192,57,43,.15);
  --white:rgba(255,255,255,.9);
  --muted:rgba(255,255,255,.45);
  --bg-ctrl:rgba(10,8,7,.92);
  --font-ui:'Syne',sans-serif;
  --font-mono:'DM Mono',monospace;
}

/* ── PLAYER SHELL ── */
.player{
  position:relative;
  width:100%;
  max-width:920px;
  background:#000;
  user-select:none;
  border-radius:4px;
  overflow:hidden;
}

.player video{
  width:100%;
  display:block;
  max-height:72vh;
  object-fit:contain;
  cursor:pointer;
}

/* ── OVERLAY (play central) ── */
.overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
.player.paused .overlay{opacity:1;pointer-events:all;}

.play-big{
  width:68px;height:68px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.8);
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding-left:3px;
  transition:transform .15s,background .2s,border-color .2s;
  backdrop-filter:blur(4px);
}
.play-big:hover{transform:scale(1.12);background:rgba(192,57,43,.65);border-color:var(--red);}

/* ── SKIP FLASH ── */
.skip-flash{
  position:absolute;
  top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s;
  color:#fff;
  font-size:12px;
  font-family:var(--font-ui);
  font-weight:600;
  letter-spacing:.08em;
}
.skip-flash.left{left:14%;}
.skip-flash.right{right:14%;}
.skip-flash .arc{font-size:28px;line-height:1;}
.skip-flash.show{opacity:1;}

/* ── CONTROLS ── */
.controls{
  position:absolute;
  bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.95) 60%);
  padding:36px 16px 12px;
  opacity:0;
  transition:opacity .28s;
}
.player:hover .controls,
.player.paused .controls{opacity:1;}

/* ── PROGRESS ── */
.progress{
  position:relative;
  height:4px;
  background:rgba(255,255,255,.14);
  cursor:pointer;
  margin-bottom:12px;
  border-radius:2px;
  transition:height .12s;
}
.progress:hover{height:6px;}
.progress-buf{
  position:absolute;top:0;left:0;height:100%;
  background:rgba(255,255,255,.2);
  border-radius:2px;
  pointer-events:none;
}
.progress-fill{
  position:absolute;top:0;left:0;height:100%;
  background:var(--red);
  border-radius:2px;
  pointer-events:none;
}
.progress-thumb{
  position:absolute;top:50%;
  transform:translate(-50%,-50%);
  width:13px;height:13px;
  border-radius:50%;
  background:#fff;
  pointer-events:none;
  opacity:0;
  box-shadow:0 0 0 2px rgba(192,57,43,.4);
  transition:opacity .12s;
}
.progress:hover .progress-thumb{opacity:1;}

/* ── TOOLTIP SURVOL PROGRESS ── */
.prog-tooltip{
  position:absolute;
  bottom:calc(100% + 10px);
  transform:translateX(-50%);
  background:var(--bg-ctrl);
  color:var(--white);
  font-family:var(--font-mono);
  font-size:11px;
  padding:3px 8px;
  border-radius:3px;
  pointer-events:none;
  opacity:0;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);
  transition:opacity .1s;
}
.progress:hover .prog-tooltip{opacity:1;}

/* ── BOTTOM BAR ── */
.bottom{display:flex;justify-content:space-between;align-items:center;}
.left,.right{display:flex;align-items:center;gap:4px;}

.btn{
  background:none;border:none;
  color:var(--white);
  cursor:pointer;
  font-size:16px;
  padding:5px 6px;
  opacity:.7;
  transition:opacity .15s,color .15s;
  line-height:1;
  border-radius:3px;
  font-family:var(--font-mono);
}
.btn:hover{opacity:1;}
.btn.on{color:var(--red);opacity:1;}
.btn-label{font-size:11px;font-family:var(--font-ui);font-weight:600;letter-spacing:.04em;}

/* ── VOLUME ── */
.vol-wrap{display:flex;align-items:center;gap:6px;}
.vol{
  -webkit-appearance:none;appearance:none;
  width:70px;height:3px;
  background:rgba(255,255,255,.25);
  border-radius:2px;
  outline:none;
  cursor:pointer;
  transition:width .2s;
}
.vol::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:11px;height:11px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
}
.vol:hover{width:90px;}

/* ── VOLUME INDICATOR ANIMÉ ── */
.vol-bars{
  display:flex;align-items:flex-end;gap:2px;
  height:14px;
  pointer-events:none;
}
.vol-bars span{
  width:3px;
  background:var(--white);
  border-radius:1px;
  transition:height .15s,background .15s;
}

/* ── TIMER ── */
.timer{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--muted);
  white-space:nowrap;
  margin-left:4px;
}
.timer em{color:var(--white);font-style:normal;}

/* ── SPEED MENU ── */
.speed-wrap{position:relative;}
.speed-menu{
  position:absolute;
  bottom:calc(100% + 8px);
  right:0;
  background:var(--bg-ctrl);
  border:1px solid rgba(255,255,255,.12);
  border-radius:5px;
  overflow:hidden;
  display:none;
  flex-direction:column;
  min-width:72px;
}
.speed-menu.open{display:flex;}
.speed-opt{
  padding:7px 14px;
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  letter-spacing:.04em;
  transition:background .1s,color .1s;
  text-align:center;
}
.speed-opt:hover{background:rgba(255,255,255,.07);color:var(--white);}
.speed-opt.active{color:var(--red);}

/* ── SOUS-TITRES MENU ── */
.sub-wrap{position:relative;}
.sub-menu{
  position:absolute;
  bottom:calc(100% + 8px);
  right:0;
  background:var(--bg-ctrl);
  border:1px solid rgba(255,255,255,.12);
  border-radius:5px;
  overflow:hidden;
  display:none;
  flex-direction:column;
  min-width:120px;
  max-width:200px;
}
.sub-menu.open{display:flex;}
.sub-opt{
  padding:7px 14px;
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  letter-spacing:.04em;
  transition:background .1s,color .1s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sub-opt:hover{background:rgba(255,255,255,.07);color:var(--white);}
.sub-opt.active{color:var(--red);}

/* ── AFFICHAGE SOUS-TITRES ── */
.sub-display{
  position:absolute;
  bottom:80px;
  left:50%;
  transform:translateX(-50%);
  max-width:85%;
  text-align:center;
  pointer-events:none;
}
.sub-display span{
  display:inline-block;
  background:rgba(0,0,0,.78);
  color:#fff;
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:600;
  padding:5px 14px;
  border-radius:3px;
  letter-spacing:.02em;
  line-height:1.5;
}

/* ── CHAPITRES ── */
.chapters-bar{
  position:absolute;
  top:0;left:0;height:100%;
  pointer-events:none;
}
.chapter-mark{
  position:absolute;
  top:0;height:100%;
  width:2px;
  background:rgba(255,255,255,.5);
}
.chapter-label{
  position:absolute;
  top:-22px;
  transform:translateX(-50%);
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--white);
  background:var(--bg-ctrl);
  padding:2px 6px;
  border-radius:2px;
  white-space:nowrap;
  opacity:0;
  transition:opacity .15s;
  pointer-events:none;
}
.progress:hover .chapter-label{opacity:1;}