:root { --fond:#14171c; --carte:#1e232b; --bord:#323a45; --texte:#eef1f4; --doux:#9aa6b3; --feu:#ff6b2c; --vert:#3ecf8e; --jaune:#f5c04a; --rouge:#ff5a52; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; background:var(--fond); color:var(--texte); font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
#app { max-width:760px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 20px); }
h1 { font-size:24px; margin:4px 0 2px; } h2 { font-size:15px; margin:18px 0 8px; color:var(--doux); text-transform:uppercase; letter-spacing:.04em; }
p { margin:6px 0; } .doux { color:var(--doux); font-size:14px; }
input,select { width:100%; padding:13px; font-size:16px; color:var(--texte); background:var(--carte); border:1px solid var(--bord); border-radius:10px; }
button { font:inherit; font-weight:600; color:var(--texte); background:var(--carte); border:1px solid var(--bord); border-radius:10px; padding:12px 14px; min-height:46px; cursor:pointer; }
button.go { background:var(--feu); border-color:var(--feu); color:#190a02; width:100%; font-size:17px; padding:15px; }
button.lien { background:none; border:none; color:var(--doux); padding:6px 0; min-height:0; font-weight:500; }
button:disabled { opacity:.45; }
.carte { background:var(--carte); border:1px solid var(--bord); border-radius:12px; padding:12px 14px; margin:10px 0; }
.res { display:block; width:100%; text-align:left; margin-top:6px; font-weight:500; }
.grille { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.grille b { display:block; font-size:12px; color:var(--doux); font-weight:500; }
.marque { font-size:11px; font-weight:700; padding:2px 7px; border-radius:20px; margin-left:6px; vertical-align:1px; }
.reel { background:#143a2b; color:var(--vert); } .invente { background:#40310f; color:var(--jaune); }
#plan { height:260px; border-radius:12px; margin:10px 0; background:#222; }
.pin { width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 3px #000; }
.rang { display:flex; gap:8px; align-items:center; } .rang > * { flex:1; }
.haut { position:sticky; top:0; z-index:5; background:var(--fond); display:flex; align-items:center; gap:10px; padding:6px 0; }
.heure { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
.etat { flex:1; font-size:13px; color:var(--doux); line-height:1.25; }
canvas { display:block; width:100%; height:380px; border-radius:12px; background:#0b0e14; touch-action:manipulation; }
.compteurs { display:flex; gap:6px; margin:8px 0; } .compteurs div { flex:1; background:var(--carte); border:1px solid var(--bord); border-radius:9px; padding:5px 7px; font-size:12px; color:var(--doux); }
.compteurs b { display:block; color:var(--texte); font-size:16px; font-variant-numeric:tabular-nums; }
.compteurs .mal b { color:var(--rouge); }
.onglets { display:flex; gap:6px; margin:10px 0 8px; } .onglets button { flex:1; min-height:40px; padding:8px; } .onglets .actif { background:var(--texte); color:var(--fond); }
.ordres { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ordres button { text-align:left; font-size:14px; line-height:1.2; }
.ordres small { display:block; font-weight:400; color:var(--doux); font-size:12px; margin-top:2px; }
.radio { max-height:260px; overflow:auto; font-size:14px; } .radio p { margin:0 0 7px; } .radio .grave { color:var(--jaune); } .radio i { font-style:normal; color:var(--doux); font-variant-numeric:tabular-nums; }
.barre { position:sticky; bottom:0; display:flex; gap:8px; padding:10px 0; background:var(--fond); } .barre button { flex:1; }
.erreur { color:var(--rouge); font-size:14px; min-height:20px; margin:6px 0; }
.voile { position:fixed; inset:0; z-index:1000; background:#000a; display:flex; align-items:flex-end; }
.feuille { background:var(--fond); width:100%; max-width:760px; margin:0 auto; border-radius:16px 16px 0 0; padding:16px 16px calc(env(safe-area-inset-bottom) + 16px); max-height:85vh; overflow:auto; }
.feuille .ordres { margin-top:8px; }
.point { display:flex; gap:9px; padding:8px 0; border-bottom:1px solid var(--bord); } .point:last-child { border:0; } .point span { font-size:17px; } .point b { display:block; font-size:15px; }
.note { font-size:40px; font-weight:800; white-space:nowrap; }
ol { padding-left:20px; margin:6px 0; } li { margin-bottom:6px; }
a.bouton, label.bouton { display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; font-weight:600; font-size:15px; color:var(--texte); background:var(--carte); border:1px solid var(--bord); border-radius:10px; padding:10px; min-height:46px; cursor:pointer; }
.vues { margin-top:8px; } .vues > * { font-size:13px; }
.code-salle { font-size:36px; font-weight:800; letter-spacing:.14em; text-align:center; margin:6px 0; font-variant-numeric:tabular-nums; }
canvas.apercu { height:auto; aspect-ratio:16/9; background:#000; }
.fen { display:grid; grid-template-columns:48px 1fr 1fr 1fr; gap:6px; align-items:center; } .fen span { font-size:13px; color:var(--doux); }
.fen button { min-height:44px; padding:4px; font-size:14px; } .fen .actif { outline:2px solid var(--feu); }
.niveau { display:flex; align-items:center; gap:10px; margin-top:10px; } .niveau b { width:84px; font-size:15px; } .niveau span { flex:1; text-align:center; font-size:22px; letter-spacing:2px; color:var(--feu); } .niveau button { width:58px; font-size:24px; padding:6px; }
[hidden] { display:none !important; }
#rappel.tard { color:var(--rouge); font-weight:700; }
.unite { display:grid; grid-template-columns:1fr auto; gap:4px 8px; padding:9px 0; border-bottom:1px solid var(--bord); align-items:center; }
.unite small { display:block; color:var(--doux); font-size:12px; } .unite select { grid-column:1 / -1; padding:8px; font-size:14px; }
.statut { font-size:13px; color:var(--jaune); font-variant-numeric:tabular-nums; } .statut.ici { color:var(--vert); font-weight:700; }
.coche { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--bord); font-size:15px; } .coche:last-child { border:0; }
.coche input { width:24px; height:24px; flex:none; accent-color:var(--vert); } .coche span { flex:1; } .coche i { font-style:normal; color:var(--doux); font-size:13px; font-variant-numeric:tabular-nums; }
.assigne { grid-column:1 / -1; text-align:left; font-size:14px; font-weight:500; min-height:40px; padding:8px 10px; }
.geo { background:#f4f4f2; border-radius:10px; padding:6px; color:#14171c; display:grid; gap:4px; }
.geo .t3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; } .geo .m { display:grid; grid-template-columns:.8fr .9fr 2fr .9fr .8fr; gap:4px; }
.zone { background:#fff; border:1px solid #c8c8c4; border-radius:6px; min-height:42px; padding:3px; display:flex; flex-wrap:wrap; gap:3px; align-items:center; align-content:center; justify-content:center; cursor:pointer; }
.zone i { font-style:normal; font-weight:700; font-size:13px; width:100%; text-align:center; }
.bande.b3 { background:#3f9a6a; color:#fff; } .bande.b5 { background:#f39ccb; }
.bande, .rangee { min-height:38px; } .rangee { justify-content:flex-start; } .rangee i { width:auto; margin-right:8px; font-weight:600; }
.cote { display:grid; gap:4px; } .bat { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.bat .zone { min-height:64px; border:0; border-radius:2px; } .qa { background:#1f8a3b; color:#fff; } .qb { background:#3a6fe0; color:#fff; } .qc { background:#ffee58; } .qd { background:#e2231a; color:#fff; }
.puce { min-height:30px; padding:2px 6px; font-size:12px; font-weight:800; background:#14171c; color:#fff; border:1px solid #fff; border-radius:6px; }
.feuille label.doux { display:block; margin-top:8px; }
.bande.rehab { background:#2e6b4f; color:#fff; }
.prio { display:grid; grid-template-columns:1fr auto; gap:4px 8px; padding:9px 0; border-bottom:1px solid var(--bord); align-items:center; } .prio:last-child { border:0; }
.prio i { font-style:normal; color:var(--doux); font-size:13px; font-variant-numeric:tabular-nums; }
.prio div { grid-column:1 / -1; display:grid; grid-template-columns:repeat(6, 1fr); gap:5px; } .prio button { min-height:40px; padding:4px; } .prio button.actif { background:var(--feu); border-color:var(--feu); color:#190a02; }