:root { --fond:#111; --carte:#1c1c1e; --texte:#e6e6e6; --sourd:#9a9a9a; --accent:#3b82f6; --danger:#ef4444; --ok:#22c55e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--fond); color:var(--texte); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:16px; line-height:1.45; }
header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:#000; border-bottom:1px solid #222; }
.marque { color:#fff; font-weight:700; text-decoration:none; font-size:18px; }
nav a, nav button.lien { color:var(--sourd); margin-left:14px; text-decoration:none; }
nav a:hover, nav button.lien:hover { color:#fff; }
main { max-width:900px; margin:0 auto; padding:20px 16px 60px; }
body.plein main { max-width:none; padding:0; }
h1 { font-size:24px; margin:0 0 12px; } h2 { font-size:18px; margin:26px 0 10px; }
a { color:var(--accent); }
.carte { background:var(--carte); border:1px solid #2a2a2a; border-radius:10px; padding:16px; margin:12px 0; }
label { display:block; margin:10px 0; color:var(--sourd); }
label.case { display:flex; gap:8px; align-items:center; color:var(--texte); }
input:not([type=checkbox]), select, textarea { display:block; width:100%; margin-top:4px; padding:10px; border-radius:8px; border:1px solid #333; background:#0d0d0d; color:#fff; font-size:16px; font-family:inherit; }
textarea { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; }
button { padding:10px 16px; border-radius:8px; border:0; background:var(--accent); color:#fff; font-size:16px; cursor:pointer; margin-top:8px; }
button.secondaire { background:#333; } button.danger { background:var(--danger); }
button.lien { background:none; padding:0; margin:0; font-size:inherit; color:var(--accent); } button.lien.danger { color:var(--danger); }
form.inline { display:inline; }
.info { background:#14532d; border:1px solid #166534; padding:10px 14px; border-radius:8px; }
.erreur { background:#450a0a; border:1px solid #7f1d1d; padding:10px 14px; border-radius:8px; }
.note { color:var(--sourd); font-size:14px; } .petit { font-size:13px; color:var(--sourd); }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; } .centre { text-align:center; }
.danger { color:var(--danger); } .badge { background:#1e3a8a; color:#fff; font-size:11px; padding:2px 6px; border-radius:6px; vertical-align:middle; }
table { width:100%; border-collapse:collapse; margin:8px 0; } th, td { text-align:left; padding:8px 6px; border-bottom:1px solid #262626; vertical-align:top; } th { color:var(--sourd); font-weight:600; font-size:13px; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; } .actions form { margin:0; } .actions-inline form { margin-right:10px; }
.conditions h1 { font-size:20px; } .conditions ul { padding-left:20px; }
.lien-activation { word-break:break-all; font-size:15px; background:#000; padding:10px; border-radius:8px; }
.nav-admin { margin:-6px 0 14px; }
/* lecteur */
.barre { display:flex; gap:16px; align-items:center; padding:8px 12px; background:#000; font-size:14px; color:var(--sourd); }
.barre label { display:flex; gap:8px; align-items:center; margin:0; } .barre select { width:auto; margin:0; padding:6px; }
#scene { position:relative; background:#000; }
video { display:block; width:100%; max-height:calc(100vh - 100px); background:#000; }
#scene:fullscreen video { max-height:100vh; height:100vh; }
#controles { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:linear-gradient(transparent, rgba(0,0,0,.85)); transition:opacity .3s; }
#scene.calme #controles, #scene.calme #tc-pave { opacity:0; pointer-events:none; }
#controles button { background:none; border:0; color:#fff; font-size:20px; padding:4px 6px; margin:0; cursor:pointer; line-height:1; }
#controles select { width:auto; margin:0; padding:4px 6px; font-size:13px; background:rgba(0,0,0,.5); }
#controles input[type=range] { width:90px; margin:0; padding:0; }
#controles .espace { flex:1; }
#controles .direct { font-size:12px; font-weight:700; letter-spacing:.5px; color:#bbb; display:flex; align-items:center; gap:6px; }
#controles .direct .point { width:8px; height:8px; border-radius:50%; background:#666; }
#controles .direct.actif { color:#fff; } #controles .direct.actif .point { background:var(--danger); }
.grand-bouton { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:22px; padding:16px 28px; }
#voile[hidden] { display:none; }
#voile { position:fixed; inset:0; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:20px; }
#voile .msg { max-width:520px; text-align:center; } #voile h2 { color:var(--danger); font-size:26px; }
.bouton { display:inline-block; background:var(--accent); color:#fff; padding:10px 18px; border-radius:8px; text-decoration:none; margin-top:10px; }
/* compte : accordéon et modale */
details.accordeon { background:var(--carte); border:1px solid #2a2a2a; border-radius:10px; margin:18px 0; }
details.accordeon summary { cursor:pointer; padding:14px 16px; font-weight:600; list-style:none; display:flex; justify-content:space-between; }
details.accordeon summary::after { content:"＋"; color:var(--sourd); } details.accordeon[open] summary::after { content:"－"; }
details.accordeon summary::-webkit-details-marker { display:none; }
.accordeon-corps { padding:0 16px 16px; border-top:1px solid #2a2a2a; }
.rangee { display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media (max-width:640px) { .rangee { grid-template-columns:1fr; } }
.rangee h3 { font-size:15px; margin:14px 0 6px; }
.liste-nue { list-style:none; padding:0; margin:0 0 8px; } .liste-nue li { padding:4px 0; }
dialog { background:var(--carte); color:var(--texte); border:1px solid #333; border-radius:12px; padding:20px 24px; width:min(420px, 92vw); }
dialog::backdrop { background:rgba(0,0,0,.7); } dialog h2 { margin-top:0; }
/* accueil : grille de terminaux ; lecteur : bande de terminaux et télécommande */
.grille-pvr { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin-top:16px; }
.carte-pvr { display:block; background:var(--carte); border:1px solid #2a2a2a; border-radius:12px; overflow:hidden; text-decoration:none; color:var(--texte); transition:border-color .15s, transform .15s; }
.carte-pvr:hover { border-color:#555; transform:translateY(-2px); }
.carte-pvr.courant { border-color:var(--accent); }
.carte-pvr .vignette { position:relative; aspect-ratio:16/9; background:#000; }
.carte-pvr .vignette img { width:100%; height:100%; object-fit:cover; display:block; }
.carte-pvr .vide { display:flex; align-items:center; justify-content:center; height:100%; color:var(--sourd); font-size:14px; background:repeating-linear-gradient(45deg, #151515 0 10px, #111 10px 20px); }
.carte-pvr .badge-direct { position:absolute; top:8px; left:8px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; letter-spacing:.5px; }
.carte-pvr-nom { padding:10px 12px; font-weight:600; }
.sous-lecteur { max-width:1100px; margin:0 auto; padding:16px; }
.bloc { margin-bottom:22px; } .bloc h2 { margin:0 0 10px; }
.bande-pvr { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.bande-pvr .carte-pvr { flex:0 0 220px; scroll-snap-align:start; }
.bande-pvr .carte-pvr-nom { font-size:14px; padding:8px 10px; }
.tc-groupe { display:flex; gap:2px; align-items:center; } .tc-groupe.indispo { opacity:.35; }
#controles #c-poste { font-size:14px; font-weight:600; }
#tc-pave { position:absolute; right:12px; bottom:64px; width:200px; padding:10px; background:rgba(20,20,22,.94); border:1px solid #333; border-radius:12px; transition:opacity .3s; }
#tc-pave[hidden] { display:none; }
#tc-pave .tc-ecran { font-size:24px; min-height:40px; }
#tc-pave .tc-chiffre { padding:10px 0; font-size:18px; }
#tc-pave .petit { margin:8px 0 0; min-height:1em; }
.tc-ecran { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:28px; text-align:center; background:#000; border-radius:8px; padding:6px; margin-bottom:10px; letter-spacing:4px; min-height:44px; }
.tc-chiffres { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.tc-chiffre { margin:0; padding:14px 0; font-size:20px; background:#2a2a2a; }
.tc-chiffre.tc-ok { background:var(--accent); } .tc-chiffre.tc-effacer { background:#3a2a2a; }
.ok { color:var(--ok); } .erreur-inline { color:var(--danger); }
@media (max-width:640px) { #controles input[type=range] { display:none; } #controles #etat { display:none; } #tc-pave { right:6px; bottom:56px; } }