/* ===== commandes du lecteur : copie du lecteur de l'appli Android (Player.tsx, styles "st") =====
   --u = 1 px de l'appli sur un telephone couche ; agrandi par lEchelle() sur tablette / ordinateur */
.l-calque{--u:1px;--t:#5EEAD4;--tf:#2DD4BF;--sbx:var(--sb);background:none;display:block;font-family:Roboto,"Roboto Condensed",-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.l-calque.cache *{pointer-events:none!important}
.l-calque button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.l-calque svg{display:block}

/* coins turquoise (cFrame) */
.l-coins{position:absolute;inset:0;pointer-events:none}
.l-coins i{position:absolute;width:calc(26*var(--u));height:calc(26*var(--u));border:0 solid var(--t);opacity:.5}
.l-coins .tl{top:calc(10*var(--u));left:calc(10*var(--u) + var(--sl));border-top-width:2px;border-left-width:2px}
.l-coins .tr{top:calc(10*var(--u));right:calc(10*var(--u) + var(--sr));border-top-width:2px;border-right-width:2px}
.l-coins .bl{bottom:calc(10*var(--u) + var(--sbx));left:calc(10*var(--u) + var(--sl));border-bottom-width:2px;border-left-width:2px}
.l-coins .br{bottom:calc(10*var(--u) + var(--sbx));right:calc(10*var(--u) + var(--sr));border-bottom-width:2px;border-right-width:2px}

/* barre du haut (top) */
.l-haut{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:calc(10*var(--u));
  padding:calc(11*var(--u)) max(calc(16*var(--u)),var(--sr)) calc(11*var(--u)) max(calc(16*var(--u)),var(--sl));background:rgba(0,0,0,.45)}
.l-retour{color:#fff;font-size:calc(15*var(--u));font-weight:800;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;
  min-height:calc(36*var(--u));padding:0 calc(6*var(--u)) 0 0;flex:none}
.l-titre{flex:1;min-width:0;margin-left:calc(4*var(--u));color:#fff;font-size:calc(16*var(--u));font-weight:800;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-enlect{flex:none;border:1px solid rgba(94,234,212,.5);border-radius:calc(8*var(--u));padding:calc(5*var(--u)) calc(10*var(--u));
  color:var(--t);font-size:calc(12*var(--u));font-weight:800;letter-spacing:2px;line-height:1}
.l-heure{flex:none;color:#e7ebf0;font-size:calc(15*var(--u));font-weight:700;font-variant-numeric:tabular-nums;margin-left:calc(4*var(--u))}

/* pastilles (pill / pillOn / pillIco / pillBadge) */
.l-pill{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:calc(38*var(--u));height:calc(36*var(--u));
  padding:0 calc(10*var(--u));border-radius:calc(11*var(--u));background:rgba(18,18,26,.72);border:1px solid rgba(94,234,212,.35);color:var(--t)}
.l-pill svg{width:calc(17*var(--u));height:calc(17*var(--u))}
.l-pill.l-txt{font-size:calc(15*var(--u));font-weight:800;font-variant-numeric:tabular-nums}
.l-pill.on{border-color:var(--t);background:rgba(94,234,212,.22);color:#fff}
.l-pill:active{background:rgba(255,255,255,.14);border-color:#fff}
.l-badge{display:inline-block;color:currentColor;font-size:calc(11*var(--u));font-weight:900;line-height:1;
  border:1.5px solid currentColor;border-radius:4px;padding:calc(2*var(--u)) calc(3*var(--u))}

/* barre du bas (bottom) : chCtrls a gauche, pillRow a droite, chacun centre dans sa moitie */
.l-bas{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  padding:calc(14*var(--u)) max(calc(16*var(--u)),var(--sr)) calc(14*var(--u) + var(--sbx)) max(calc(16*var(--u)),var(--sl));background:rgba(0,0,0,.45)}
.l-zap,.l-pills{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}
.l-pills{gap:calc(6*var(--u))}
.l-zap{gap:calc(8*var(--u))}
.l-zbtn{height:calc(34*var(--u));padding:0 calc(14*var(--u));border-radius:calc(18*var(--u));background:rgba(255,255,255,.10);
  color:#fff;font-size:calc(14*var(--u));font-weight:800;white-space:nowrap}
.l-zbtn:active{background:rgba(255,255,255,.22)}
.l-zbtn.l-off{opacity:.3}

/* bandeau du direct (liveBar) */
.l-bandeau{position:absolute;left:0;right:0;bottom:calc(64*var(--u) + var(--sbx));display:flex;align-items:center;
  padding:calc(9*var(--u)) max(calc(16*var(--u)),var(--sr)) calc(9*var(--u)) max(calc(16*var(--u)),var(--sl));background:rgba(0,0,0,.42)}
.l-num{min-width:calc(38*var(--u));height:calc(30*var(--u));border-radius:calc(8*var(--u));background:var(--t);color:#1A1400;
  display:flex;align-items:center;justify-content:center;padding:0 calc(8*var(--u));margin-right:calc(12*var(--u));font-size:calc(15*var(--u));font-weight:900;flex:none}
.l-prog{flex:1;min-width:0}
.l-progt{color:#fff;font-size:calc(14*var(--u));font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-pbar{height:3px;border-radius:2px;background:rgba(255,255,255,.22);margin-top:calc(5*var(--u));overflow:hidden}
.l-pbar i{display:block;height:100%;border-radius:2px;background:var(--t)}
.l-suite{color:#b9b9c4;font-size:calc(11*var(--u));margin-top:calc(4*var(--u));white-space:pre;overflow:hidden;text-overflow:ellipsis}
.l-direct{flex:none;margin-left:calc(12*var(--u));border:1px solid #FF5A5A;border-radius:calc(20*var(--u));padding:calc(7*var(--u)) calc(14*var(--u));
  background:rgba(0,0,0,.4);color:#FF5A5A;font-size:calc(13*var(--u));font-weight:800;white-space:nowrap}

/* HUD central (hudCenter / hudSide / hudPlay dans l'anneau de progression) */
.l-hud{position:absolute;left:0;right:0;top:0;bottom:calc(120*var(--u) + var(--sbx));display:flex;align-items:center;justify-content:center;pointer-events:none}
.l-hud button,.l-hud .l-anneau{pointer-events:auto}
.l-anneau{position:relative;width:calc(104*var(--u));height:calc(104*var(--u));display:grid;place-items:center;flex:none}
.l-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.l-ring circle{fill:none;stroke-width:4}
.l-ring-fond{stroke:rgba(94,234,212,.18)}
.l-ring-val{stroke:var(--t);stroke-linecap:round}
.l-play{position:relative;width:calc(78*var(--u));height:calc(78*var(--u));border-radius:50%;background:rgba(16,30,28,.55);border:1px solid var(--t);
  color:var(--t);display:grid;place-items:center}
.l-play svg{width:calc(30*var(--u));height:calc(30*var(--u))}
.l-play:active{background:rgba(94,234,212,.22)}
.l-hud-live .l-play{background:rgba(16,30,28,.7)}
.l-saut{width:calc(58*var(--u));height:calc(60*var(--u));margin:0 calc(22*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;color:#dfe2e8}
.l-saut svg{width:calc(34*var(--u));height:calc(34*var(--u));filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.l-saut b{color:#cfd2da;font-size:calc(12*var(--u));font-weight:800;margin-top:calc(-1*var(--u));text-shadow:0 1px 3px #000}
.l-ep{width:calc(52*var(--u));height:calc(52*var(--u));margin:0 calc(12*var(--u));display:grid;place-items:center;color:#eef0f4}
.l-ep svg{width:calc(26*var(--u));height:calc(26*var(--u));filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.l-saut:active,.l-ep:active{opacity:.6}

/* barre de progression (seekWrap / track / thumb) */
.l-seek{position:absolute;left:calc(36*var(--u) + var(--sl));right:calc(36*var(--u) + var(--sr));bottom:calc(76*var(--u) + var(--sbx))}
.l-temps{display:flex;justify-content:space-between;margin:0 calc(10*var(--u)) calc(2*var(--u));font-size:calc(14*var(--u));font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000}
.l-ta{color:var(--t)}
.l-tb{color:#aeb2bd}
.l-piste{position:relative;height:calc(34*var(--u));margin:0 calc(10*var(--u));touch-action:none;cursor:pointer}
.l-fond{position:absolute;left:0;right:0;top:50%;height:7px;margin-top:-3.5px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.l-rempli{display:block;height:100%;width:0;border-radius:4px;background:var(--t)}
.l-pouce{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--t);border:2px solid #fff;
  box-shadow:0 0 6px var(--t);transition:width .12s,height .12s,margin .12s}
.l-piste.on .l-fond{height:11px;margin-top:-5.5px;border-radius:6px;background:rgba(255,255,255,.30)}
.l-piste.on .l-rempli{background:var(--tf)}
.l-piste.on .l-pouce{width:24px;height:24px;margin:-12px 0 0 -12px;background:var(--tf)}
.l-hint{position:absolute;left:50%;top:calc(-30*var(--u));transform:translateX(-50%);background:var(--t);color:#08201c;font-size:calc(13*var(--u));font-weight:900;
  padding:calc(4*var(--u)) calc(12*var(--u));border-radius:calc(12*var(--u));opacity:0;transition:opacity .15s;pointer-events:none}
.l-hint.on{opacity:1}

/* menu des pastilles (menu / menuHead / opt / optOn / optCheck) */
.l-menu{position:absolute;right:calc(14*var(--u) + var(--sr));bottom:calc(66*var(--u) + var(--sbx));width:calc(300*var(--u));max-width:calc(100% - 28*var(--u));
  max-height:min(calc(330*var(--u)),calc(100% - 66*var(--u) - var(--sbx) - 12px));display:flex;flex-direction:column;
  background:rgba(14,12,20,.985);border:1px solid rgba(255,255,255,.10);border-radius:calc(20*var(--u));overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.l-menu-h{flex:none;padding:calc(15*var(--u)) calc(18*var(--u)) calc(12*var(--u));border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:calc(4*var(--u));
  color:var(--t);font-size:calc(12*var(--u));font-weight:800;letter-spacing:1.6px;text-transform:uppercase}
.l-menu-corps{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(10*var(--u));overscroll-behavior:contain}
.l-opt{display:flex;align-items:center;width:calc(100% - 16*var(--u));margin:calc(5*var(--u)) calc(8*var(--u)) 0;padding:calc(12*var(--u)) calc(14*var(--u));
  border-radius:calc(12*var(--u));border-left:4px solid transparent;text-align:left;color:#e7e7ee;font-size:calc(14.5*var(--u));font-weight:600}
.l-opt span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-opt b{color:var(--t);font-size:calc(16*var(--u));font-weight:900;margin-left:calc(10*var(--u))}
.l-opt.on{background:rgba(94,234,212,.12);border-left-color:var(--t)}
.l-opt.on span{color:var(--t);font-weight:800}
.l-opt:active{background:rgba(94,234,212,.26)}

/* panneau Infos lecture */
.l-info{position:absolute;top:calc(64*var(--u));left:calc(24*var(--u) + var(--sl));width:calc(300*var(--u));max-width:calc(100% - 48*var(--u));
  max-height:calc(100% - 64*var(--u) - 140*var(--u) - var(--sbx));overflow:auto;background:rgba(10,14,20,.92);border-radius:calc(14*var(--u));
  padding:calc(14*var(--u));border:1px solid rgba(94,234,212,.4)}
.l-info-t{display:block;color:var(--t);font-weight:800;font-size:calc(14*var(--u));margin-bottom:calc(8*var(--u))}
.l-diag{display:flex;align-items:center;gap:calc(8*var(--u));background:rgba(255,255,255,.04);border-radius:calc(8*var(--u));padding:calc(8*var(--u));
  margin-bottom:calc(10*var(--u));font-size:calc(13*var(--u));font-weight:800}
.l-diag i{width:9px;height:9px;border-radius:50%;flex:none}
.l-info-l{display:flex;justify-content:space-between;gap:calc(10*var(--u));margin-bottom:calc(4*var(--u));font-size:calc(13*var(--u))}
.l-info-l span{color:#8b93a1}
.l-info-l b{color:#e7ebf0;font-weight:600;text-align:right}

/* erreur : seule la barre du haut reste (bouton Retour), le message d'erreur reste cliquable */
.ecran.enerreur .l-calque{pointer-events:none}
.ecran.enerreur .l-calque>:not(.l-haut){display:none}
.ecran.enerreur .l-calque:not(.cache) .l-haut button{pointer-events:auto}

/* format de l'image (Ajuster / Remplir / Etirer) */
.ecran.l-fit-cover video:not(.veille),.ecran.l-fit-cover canvas.soft{object-fit:cover}
.ecran.l-fit-fill video:not(.veille),.ecran.l-fit-fill canvas.soft{object-fit:fill}

/* taille des sous-titres (Aa) */
.lecteur.l-st14 video::cue{font-size:14px}
.lecteur.l-st18 video::cue{font-size:18px}
.lecteur.l-st24 video::cue{font-size:24px}
.lecteur.l-st30 video::cue{font-size:30px}

/* carton "episode suivant" aux couleurs du lecteur, au-dessus des barres */
.lecteur:not(.encart) .suivant,.lecteur.agrandi .suivant{border-color:rgba(94,234,212,.45);background:#12121b;border-radius:18px;bottom:calc(140px + var(--sb));z-index:2}
.lecteur:not(.encart) .suivant b,.lecteur.agrandi .suivant b{color:#5EEAD4}