:root{
  --bg:#f6f4ef;--surface:#fff;--sunk:#ece8df;--fg:#1d1f1c;--muted:#5d625b;--line:#d9d4c8;
  --accent:#0b6b4f;--accent-soft:#dcefe6;--on-accent:#fff;
  --bad:#b3261e;--bad-soft:#fbe3e1;--mid:#8a5a00;--mid-soft:#fbefd5;
  --r:14px;--f:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121412;--surface:#1c1f1c;--sunk:#262a26;--fg:#eceee9;--muted:#a4aaa1;--line:#353a34;
  --accent:#4cc79b;--accent-soft:#183a2e;--on-accent:#06281c;
  --bad:#ff8a80;--bad-soft:#3d1c1a;--mid:#f0c060;--mid-soft:#3a2e12;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.45 var(--f);background:var(--bg);color:var(--fg);min-height:100dvh;padding-bottom:calc(120px + env(safe-area-inset-bottom))}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 16px 10px;max-width:640px;margin:auto}
.brand{display:flex;gap:10px;align-items:center}
.brand img{border-radius:9px}
h1{font-size:1.3rem;margin:0}
.brand p{margin:0;color:var(--muted);font-size:.8rem}
h2{font-size:1.15rem;margin:0 0 12px}
h3{font-size:1rem;margin:18px 0 6px}
.tabs{display:flex;gap:6px;max-width:640px;margin:4px auto 0;padding:0 16px}
.tabs button{flex:1;font:600 .95rem var(--f);padding:10px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
main{max-width:640px;margin:auto;padding:12px 16px}
input[type=search],input,select{width:100%;font:inherit;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
input[type=radio]{width:auto}
#recherche{margin-bottom:10px}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.item{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;cursor:pointer}
.item:active{transform:scale(.99)}
.av{flex:none;width:42px;height:42px;border-radius:99px;display:grid;place-items:center;font-weight:800;background:var(--accent-soft);color:var(--accent)}
.txt{flex:1;display:grid;min-width:0}
.txt b,.txt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txt small{color:var(--muted)}
.emp{font:600 .72rem ui-monospace,monospace;color:var(--muted)}
.vide{color:var(--muted);text-align:center;padding:28px 12px;border:1px dashed var(--line);border-radius:var(--r)}
.actions{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%);max-width:640px;margin:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 .95rem var(--f);padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.danger{color:var(--bad)}
.btn.big{flex:1;padding:16px;font-size:1rem}
.actions .btn.big:last-child{flex:.6}
.icon-btn{font-size:1.4rem;line-height:1;width:44px;height:44px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.row{display:flex;gap:8px;margin-top:14px}
.row.wrap{flex-wrap:wrap}
.row .btn{flex:1}
dialog{border:0;border-radius:18px;padding:18px;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:var(--surface);color:var(--fg)}
dialog::backdrop{background:rgb(0 0 0/.55)}
dialog.plein{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:calc(14px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom))}
label{display:grid;gap:4px;font-weight:600;font-size:.9rem;margin-top:10px}
fieldset.cats{border:0;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
fieldset.cats legend{font-weight:600;font-size:.9rem;margin-bottom:4px}
fieldset.cats label{display:flex;align-items:center;gap:6px;margin:0;padding:8px 12px;border:1px solid var(--line);border-radius:99px;font-weight:500}
.aide{color:var(--muted);font-size:.88rem}
.erreur{color:var(--bad);font-weight:600}
code{font-size:.8em;word-break:break-all}
.alerte{padding:10px 12px;border-radius:10px;margin:8px 0;font-weight:600;font-size:.92rem}
.alerte.ok{background:var(--accent-soft);color:var(--accent)}
.alerte.bad{background:var(--bad-soft);color:var(--bad)}
.alerte.mid{background:var(--mid-soft);color:var(--mid)}
.details{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:12px 0;font-size:.92rem}
.details dt{color:var(--muted)}
.details dd{margin:0;font-weight:600;word-break:break-all}
.cam{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:1}
.cam video{width:100%;height:100%;object-fit:cover}
.viseur{position:absolute;inset:16%;border:3px solid rgb(255 255 255/.85);border-radius:16px;box-shadow:0 0 0 999px rgb(0 0 0/.25)}
.cle-tete{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cle-tete h2{margin:0;font-size:1.4rem}
.cle-sous{color:var(--muted);margin:4px 0 12px}
.qr{background:#fff;border-radius:16px;padding:10px;max-width:420px;margin:auto}
.qr svg{display:block;width:100%;height:auto}
.empreinte{text-align:center;color:var(--muted);margin:10px 0}
.empreinte b{font:700 1.05rem ui-monospace,monospace;color:var(--fg);letter-spacing:.06em}
.montant-box{max-width:420px;margin:auto}
.puces{padding-left:18px}
.puces li{margin:6px 0}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:99px;font-weight:600;transition:.2s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
a{color:var(--accent)}
[hidden]{display:none!important}

.hbtns{display:flex;gap:8px}
.perso{max-width:420px;margin:8px auto 0}
label.check{display:flex;align-items:flex-start;gap:8px;font-weight:500}
label.check input{margin-top:3px;width:18px;height:18px;flex:none}
.duo{display:grid;gap:6px;margin:12px 0}
.duo>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.duo p{margin:0;overflow-wrap:anywhere;hyphens:auto;padding:10px;border-radius:12px;font-size:.88rem;line-height:1.35;background:var(--bg)}
.duo>div>p:first-child{background:#e3f1ea}
.duo>div>p:last-child{background:#fdf1dc}
.duo-h b{padding:6px 10px;font-size:.95rem}
@media (prefers-color-scheme:dark){.duo>div>p:first-child{background:#173a2e}.duo>div>p:last-child{background:#3a2e17}}
.duo>.duo-star{grid-template-columns:1fr}
.duo-star p{background:transparent!important;border:2px solid #0b6b4f;font-size:.95rem!important}