:root { --rouge:#e63946; --fond:#f4f4f6; --carte:#fff; --texte:#1d1d1f; --gris:#6e6e73; --vert:#2e9e5b; --orange:#e08a1e; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--fond); color:var(--texte); font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif; font-size:17px; }
body { display:flex; flex-direction:column; min-height:100vh; padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
header { position:sticky; top:0; z-index:10; background:var(--carte); padding:calc(10px + env(safe-area-inset-top)) 14px 10px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 1px 0 rgba(0,0,0,.08); }
header h1 { font-size:1.15rem; margin:0; }
header .qui { font-size:.85rem; color:var(--gris); }
main { flex:1; padding:12px 12px 20px; }
.ecran { display:none; } .ecran.actif { display:block; }
nav.bas { position:fixed; left:0; right:0; bottom:0; display:flex; background:var(--carte); box-shadow:0 -1px 0 rgba(0,0,0,.08); padding-bottom:env(safe-area-inset-bottom); z-index:10; }
nav.bas button { flex:1; background:none; border:0; padding:10px 4px 8px; font-size:.8rem; color:var(--gris); display:flex; flex-direction:column; align-items:center; gap:2px; }
nav.bas button .ico { font-size:1.4rem; } nav.bas button.actif { color:var(--rouge); font-weight:600; }
.carte { background:var(--carte); border-radius:14px; padding:14px; margin:10px 0; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.carte h2 { font-size:1.05rem; margin:0 0 8px; } .carte p { margin:6px 0; }
.muet { color:var(--gris); font-size:.9rem; }
.btn { display:block; width:100%; border:0; border-radius:12px; padding:15px 12px; font-size:1.05rem; font-weight:600; background:var(--rouge); color:#fff; margin:8px 0; }
.btn.sec { background:#e9e9ee; color:var(--texte); } .btn.vert { background:var(--vert); } .btn.petit { padding:10px; font-size:.95rem; margin:4px 0; }
.btn:disabled { opacity:.5; }
input, select, textarea { width:100%; font-size:17px; padding:13px 12px; border:1px solid #d2d2d7; border-radius:10px; background:#fff; margin:6px 0 10px; }
label { font-size:.9rem; color:var(--gris); }
.badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:.8rem; font-weight:600; }
.badge.vert { background:#e3f5ea; color:var(--vert); } .badge.orange { background:#fdf0dc; color:var(--orange); } .badge.gris { background:#ececf0; color:var(--gris); }
.erreur { background:#fde8e8; color:#b00020; padding:10px 12px; border-radius:10px; margin:8px 0; }
.succes { background:#e3f5ea; color:#1f7a44; padding:10px 12px; border-radius:10px; margin:8px 0; }
#zone { position:relative; background:#000; border-radius:14px; overflow:hidden; }
#video { width:100%; display:block; max-height:62vh; object-fit:cover; }
#viseur { position:absolute; left:5%; right:5%; top:30%; height:40%; border:2px solid rgba(255,80,80,.9); border-radius:8px; pointer-events:none; }
#viseur:after { content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:rgba(255,80,80,.7); }
#etat { position:absolute; left:0; right:0; top:0; padding:6px 10px; font-size:.85rem; background:rgba(0,0,0,.55); color:#fff; }
.ligne { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #eee; }
.ligne:last-child { border-bottom:0; }
.ligne input[type=checkbox] { width:26px; height:26px; margin:0; }
.ligne .txt { flex:1; } .ligne .txt small { color:var(--gris); }
.ligne input[type=number] { width:86px; margin:0; padding:9px 8px; }
.seg { display:flex; gap:6px; margin:6px 0 10px; }
.seg button { flex:1; border:1px solid #d2d2d7; background:#fff; border-radius:10px; padding:12px; font-size:1rem; }
.seg button.actif { background:var(--rouge); color:#fff; border-color:var(--rouge); }
.liste .item { padding:12px 0; border-bottom:1px solid #eee; display:flex; gap:10px; align-items:center; }
.liste .item:last-child { border-bottom:0; } .liste .item .txt { flex:1; }
.total { font-size:1.2rem; font-weight:700; margin:8px 0; }
.plan li { margin:4px 0; }
.spin { text-align:center; color:var(--gris); padding:16px; }