/* Télécommande téléphone — préfixe .vlr */
.vlr{--bg:#0b1220;--card:#172235;--line:#334155;--ink:#f8fafc;--mut:#94a3b8;--blue:#2563eb;--red:#b91c1c;--ok:#22c55e;--warn:#f59e0b;
  color:var(--ink);background:var(--bg);border-radius:18px;padding:14px;max-width:560px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,sans-serif;
  min-height:calc(100dvh - 170px);display:flex;flex-direction:column}
.vlr *{box-sizing:border-box}.vlr [hidden]{display:none!important}
.vlr-pane{display:flex;flex-direction:column;gap:12px;flex:1}
.vlr-pair{align-items:center;text-align:center;justify-content:center;padding:12px 6px}
.vlr-hero{font-size:64px;line-height:1}.vlr h2{margin:0;font-size:1.3rem}.vlr p{margin:0;color:#cbd5e1;line-height:1.45}
.vlr-btn{border:0;border-radius:14px;padding:14px 12px;font:inherit;font-weight:650;color:#fff;background:#334155;min-height:52px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.vlr-btn:active:not(:disabled){transform:scale(.97)}.vlr-btn:disabled{opacity:.4}
.vlr-primary{background:var(--blue)}.vlr-sec{background:#334155}.vlr-danger{background:#7f1d1d}.vlr-on{background:#b45309}
.vlr-scan{width:100%;font-size:1.1rem;min-height:64px}
.vlr-scanner{width:100%;position:relative}.vlr-scanner video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;background:#000;display:block}
.vlr-reticle{position:absolute;inset:18% 18% 64px;border:3px solid #fff8;border-radius:18px;pointer-events:none}
.vlr-scanner .vlr-btn{width:100%;margin-top:10px}
.vlr-msg{min-height:1.2em;font-size:.92rem}.vlr-bad{color:#fca5a5!important}
.vlr-manual{width:100%;text-align:left;color:var(--mut)}.vlr-manual summary{cursor:pointer;padding:8px 0;text-align:center}
.vlr-manual label{display:block;font-size:.85rem;margin-top:8px}
.vlr-manual input{width:100%;padding:12px;border-radius:10px;border:1px solid #475569;background:#0f172a;color:#fff;margin:4px 0;font-size:16px}
.vlr-manual .vlr-btn{width:100%;margin-top:8px}
.vlr-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:#0f172a;font-size:.9rem}
.vlr-dot{width:10px;height:10px;border-radius:50%;background:var(--warn)}
.vlr-bar[data-state=ok] .vlr-dot{background:var(--ok)}.vlr-bar[data-state=bad] .vlr-dot{background:#ef4444}
.vlr-conn{flex:1}.vlr-link{background:none;border:0;color:var(--mut);text-decoration:underline;font:inherit;font-size:.85rem;padding:6px}
.vlr-banner{background:#3b2a06;border:1px solid #92610a;color:#fde68a;border-radius:12px;padding:12px;font-size:.9rem;line-height:1.4}
.vlr-banner.vlr-info{background:#0f2a4a;border-color:#1d4f91;color:#bfdbfe}
.vlr-banner .vlr-btn{margin:10px 8px 0 0;min-height:44px;padding:10px 14px}
.vlr-now{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px}
.vlr-nowhead{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.vlr-pos{color:var(--mut);font-size:.85rem;white-space:nowrap}
.vlr-text{margin-top:8px;color:#cbd5e1;font-size:.95rem;line-height:1.4;max-height:6.5em;overflow:hidden;white-space:pre-wrap}
.vlr-blackmark{color:#fbbf24;font-weight:700;letter-spacing:.1em}
.vlr-pad{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;flex:1;min-height:200px}
.vlr-big{font-size:2.4rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:20px}
.vlr-big small{font-size:.85rem;font-weight:600;opacity:.9}
.vlr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vlr-zoom{display:flex;align-items:center;gap:6px;background:#334155;border-radius:14px;padding:0 4px}.vlr-zoom .vlr-btn{background:transparent;min-width:46px;padding:10px}.vlr-zoom b{flex:1;text-align:center;font-size:.95rem}
.vlr-queue{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 12px;color:#cbd5e1}.vlr-queue summary{padding:12px 0;cursor:pointer;font-weight:600}
.vlr-qlist{list-style:none;margin:0 0 8px;padding:0;max-height:38vh;overflow:auto;display:grid;gap:6px}
.vlr-qlist button{width:100%;text-align:left;background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:10px;padding:12px;font:inherit;min-height:46px}
.vlr-qlist .vlr-cur{border-color:var(--blue);background:#12285a;font-weight:650}.vlr-empty{color:var(--mut);padding:8px}
@media (max-height:640px){.vlr-pad{min-height:140px}.vlr-big{font-size:1.8rem}}

/* Vue « Télécommande » dans l'application : entrée de navigation visible surtout sur téléphone */
.nav-remote{display:none}
@media(max-width:720px){
  .nav-remote{display:flex}
  .nav-item.nav-remote{order:-1;background:#2563eb22;border:1px solid #2563eb66;border-radius:10px;font-weight:700}
  body[data-view=remote] .topbar{display:none}
  body[data-view=remote] .main-area{padding:0 8px}
  body[data-view=remote] .footer{display:none}
  .vlr{border-radius:14px;min-height:calc(100dvh - 120px);margin-top:8px}
}
/* Dans la vue Télécommande, l'aperçu flottant de projection du PC et les toasts n'ont pas lieu d'être (ils couvraient l'écran du téléphone) */
body[data-view=remote] .vlp,body[data-view=remote] #vlToast{display:none!important}
body[data-view=remote] .disk-banner{display:none!important}

.vlr-send{margin-top:2px}.vlr-send input,.vlr-send textarea,.vlr-send select{width:100%;margin:0 0 8px;padding:12px;border-radius:10px;border:1px solid #475569;background:#0f172a;color:#fff;font:inherit;font-size:16px}
.vlr-send textarea{resize:vertical;min-height:120px}
.vlr-sendrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.vlr-sendrow .vlr-paste{grid-column:1/-1}
.vlr-sendmsg{margin:0 0 10px;font-size:.9rem;min-height:1.2em}

.vlr-badge{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:#94a3b8;margin-bottom:6px}.vlr-on-air{color:#4ade80}
.vlr-now{background:linear-gradient(#111c30,#0c1424)}
.vlr-text{text-align:center;color:#f1f5f9;font-size:1.05rem;min-height:3.6em;display:flex;align-items:center;justify-content:center}
.vlr-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.vlr-dgrid select{width:100%;padding:12px;border-radius:10px;border:1px solid #475569;background:#0f172a;color:#fff;font:inherit;font-size:16px;min-height:52px}
.vlr-tmsg{display:grid;gap:8px;margin-bottom:8px}.vlr-tmsg input[type=text],.vlr-tmsg input:not([type]){width:100%;padding:12px;border-radius:10px;border:1px solid #475569;background:#0f172a;color:#fff;font:inherit;font-size:16px}
.vlr-chk{display:flex;gap:8px;align-items:center}.vlr-chk input{width:20px;height:20px}
.vlr-dispmsg{margin:0 0 10px;font-size:.9rem;min-height:1.2em}