/* Habillage commun des lecteurs replay / enregistrement.
   La barre vit DANS l'image et s'efface pendant la lecture. */
.sp-ui{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 22%,transparent 58%,rgba(4,6,16,.88) 100%);
}
.sp-ui.is-quiet{background:linear-gradient(180deg,transparent 70%,rgba(4,6,16,.35))}
.sp-bar,.sp-big{transition:opacity .22s ease}
.sp-ui.is-quiet .sp-bar{opacity:0;pointer-events:none}
.vodx-stage:hover .sp-ui .sp-bar,
.sp-ui:focus-within .sp-bar,
.sp-ui.is-paused .sp-bar{opacity:1;pointer-events:auto}
.sp-ui.is-ad{display:none}
.sp-hit{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;pointer-events:auto}
.sp-big{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:86px;height:86px;border-radius:50%;border:0;cursor:pointer;pointer-events:auto;z-index:2;
  color:#061018;font-size:1.7rem;font-weight:900;
  background:linear-gradient(135deg,#3ce0ff,#ff54c9);
  box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 0 8px rgba(255,255,255,.08);
}
.sp-big[hidden]{display:none}
.sp-flash{
  position:absolute;top:42%;width:34%;padding:18px 0;border-radius:16px;text-align:center;
  font-weight:900;letter-spacing:.04em;color:#fff;background:rgba(6,8,18,.45);
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .2s;
}
.sp-flash.on{opacity:1}
.sp-flash-l{left:6%}
.sp-flash-r{right:6%}
.sp-resume{
  position:absolute;left:14px;bottom:78px;z-index:3;pointer-events:auto;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 10px;border-radius:12px;
  background:rgba(8,10,22,.82);border:1px solid rgba(60,224,255,.28);
  color:#e8f7ff;font-size:.78rem;font-weight:700;backdrop-filter:blur(8px);
}
.sp-resume[hidden]{display:none}
.sp-resume button{
  border:0;border-radius:8px;cursor:pointer;font:800 .72rem inherit;padding:6px 10px;
}
.sp-resume .go{background:linear-gradient(135deg,#3ce0ff,#7aa7ff);color:#061018}
.sp-resume .no{background:rgba(255,255,255,.08);color:#d5dcf0}
.sp-bar{
  position:relative;z-index:2;pointer-events:auto;
  display:flex;flex-direction:column;align-items:stretch;gap:2px;
  padding:0 10px 8px;
}
.sp-row{display:flex;align-items:center;gap:6px;min-width:0}
.sp-grow{flex:1}
.sp-ico{
  width:36px;height:36px;border-radius:10px;border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.06);font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;
}
.sp-ico:hover{background:rgba(255,255,255,.14)}
.sp-time{
  font:700 .75rem/1 ui-monospace,Menlo,Consolas,monospace;color:#d5deef;
  font-variant-numeric:tabular-nums;min-width:92px;
}
.sp-track{
  position:relative;height:18px;width:100%;cursor:pointer;touch-action:none;
}
.sp-track i,.sp-line i{
  position:absolute;left:0;height:100%;border-radius:99px;pointer-events:none;
}
.sp-rail,.sp-line{
  position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);
  border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;
}
.sp-buf{background:rgba(255,255,255,.28);width:0}
.sp-played{
  background:linear-gradient(90deg,#3ce0ff,#ff54c9);width:0;
  box-shadow:0 0 12px rgba(255,84,201,.45);
}
.sp-thumb{
  position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);left:0;box-shadow:0 0 0 4px rgba(255,84,201,.25);pointer-events:none;
}
.sp-tip{
  position:absolute;bottom:18px;transform:translateX(-50%);
  padding:3px 7px;border-radius:7px;background:#0b1020;color:#fff;
  font:700 .68rem/1.2 ui-monospace,Menlo,Consolas,monospace;pointer-events:none;display:none;
}
.sp-vol{width:72px;flex:0 0 72px;accent-color:#3ce0ff;cursor:pointer}
.sp-pop{
  position:absolute;right:52px;bottom:52px;z-index:5;pointer-events:auto;
  display:none;min-width:148px;padding:6px;
  background:rgba(8,10,22,.96);border:1px solid rgba(150,160,210,.28);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.sp-pop.open{display:block}
.sp-pop button{
  display:flex;width:100%;justify-content:space-between;align-items:center;
  background:transparent;border:0;color:#c9d2ea;font:700 .8rem inherit;
  padding:8px 10px;border-radius:8px;cursor:pointer;
}
.sp-pop button:hover,.sp-pop button.on{background:rgba(60,224,255,.1);color:#3ce0ff}
.sp-line{
  position:absolute;left:0;right:0;bottom:0;top:auto;height:3px;transform:none;
  opacity:0;transition:opacity .2s;pointer-events:none;z-index:2;
}
.sp-ui.is-quiet .sp-line{opacity:1}
@media(max-width:640px){
  .sp-vol{display:none}
  .sp-time{min-width:0;font-size:.68rem}
  .sp-big{width:72px;height:72px}
  .sp-resume{left:8px;right:8px;bottom:70px}
}
@media(prefers-reduced-motion:reduce){
  .sp-ui,.sp-flash,.sp-line{transition:none}
}