@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
:root{--b600:#185FA5;--b800:#0C447C;--b900:#042C53;--y400:#F5C200;--g50:#EAF3DE;--g200:#97C459;--g600:#3B6D11;--r50:#FCEBEB;--r200:#F09595;--r600:#A32D2D;--font:'DM Sans',sans-serif;--mono:'Space Mono',monospace;--sb-w:236px;--sb-w-rail:68px;--muted:#5b6675;}
body{font-family:var(--font);font-size:14px;background:#f0f2f5;min-height:100vh;}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#fff;padding:1.5rem;}
.login-card{width:100%;max-width:380px;background:#fff;border:.5px solid #e5e5e5;border-radius:12px;padding:2rem 1.75rem;box-shadow:0 4px 24px rgba(0,0,0,.07);}
.login-appname{font-family:var(--mono);font-size:15px;font-weight:700;color:#111;letter-spacing:.1em;text-transform:uppercase;text-align:center;}
.login-sub{font-size:11px;color:#5b6675;text-align:center;margin-top:2px;margin-bottom:1.5rem;}
.lf-g{display:flex;flex-direction:column;gap:4px;margin-bottom:.7rem;}
.lf-lbl{font-size:11px;font-weight:500;color:#666;}
.lf-inp{height:38px;padding:0 11px;border-radius:8px;border:.5px solid #e5e5e5;background:#f8f8f8;color:#111;font-size:13px;font-family:var(--font);outline:none;width:100%;transition:all .15s;}
.lf-inp:focus{border-color:var(--b600);box-shadow:0 0 0 3px rgba(24,95,165,.1);background:#fff;}
.btn-login{width:100%;height:40px;background:var(--b600);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:.6rem;transition:background .15s;}
.btn-login:hover{background:var(--b800);}
.btn-login:disabled{background:#aaa;cursor:not-allowed;}
.login-demo{font-size:10px;color:#5b6675;text-align:center;margin-top:.5rem;}
.login-err{background:var(--r50);border:.5px solid var(--r200);color:var(--r600);font-size:12px;padding:8px 10px;border-radius:8px;margin-bottom:.6rem;display:none;}
.app{display:none;flex-direction:column;min-height:100vh;padding-left:var(--sb-w);transition:padding-left .2s ease;}
.app.on{display:flex;}
.topbar{background:#fff;height:52px;display:flex;align-items:center;padding:0 1.25rem;gap:.6rem;border-bottom:1px solid #e5e5e5;flex-shrink:0;position:sticky;top:0;z-index:90;}
.brand-wrap{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.brand-stripe{width:5px;height:26px;border-radius:3px;background:var(--y400);}
.brand-name{font-family:var(--mono);font-size:12px;font-weight:700;color:#fff;letter-spacing:.1em;text-transform:uppercase;}
.brand-sub{font-size:9px;color:var(--y400);font-family:var(--mono);letter-spacing:.06em;}
.nav-pills{display:flex;flex-direction:column;gap:3px;padding:10px;overflow-y:auto;flex:1;}
.npill{background:transparent;border:none;color:rgba(255,255,255,.6);font-size:13px;font-family:var(--font);font-weight:500;padding:10px 13px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:11px;transition:all .15s;white-space:nowrap;width:100%;text-align:left;position:relative;}
.npill:hover{background:rgba(255,255,255,.06);color:#fff;}
.npill i{font-size:18px;flex-shrink:0;width:20px;text-align:center;}
.np-lbl{flex:1;}
.npill.active{background:rgba(245,194,0,.13);color:var(--y400);}
.npill.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--y400);}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:10px;flex-shrink:0;}
.user-pill{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);padding:3px 9px 3px 3px;border-radius:20px;}
.user-av{width:26px;height:26px;border-radius:50%;background:var(--y400);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#111;}
.user-name{font-size:11px;color:rgba(255,255,255,.8);}
.user-role{font-size:9px;color:var(--y400);font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;}
.btn-logout{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.45);padding:4px 8px;border-radius:5px;font-size:10px;cursor:pointer;font-family:var(--font);display:flex;align-items:center;gap:3px;transition:all .15s;}
.btn-logout:hover{border-color:var(--r200);color:var(--r200);}
.page{display:none;padding:1.25rem 1.5rem;max-width:1180px;margin:0 auto;width:100%;}
.page.active{display:block;}
.g2{display:grid;grid-template-columns:1fr 340px;gap:1.1rem;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;}
@media(max-width:900px){.g2{grid-template-columns:1fr;}.g4{grid-template-columns:1fr 1fr;}}
/* ─── SIDEBAR — navigation latérale ──────────────────────── */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sb-w);background:#111;border-right:3px solid var(--y400);display:flex;flex-direction:column;z-index:200;transition:width .2s ease,transform .2s ease;}
.sb-head{display:flex;align-items:center;gap:9px;height:52px;padding:0 14px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.08);}
.sb-collapse{margin-left:auto;background:transparent;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:18px;display:flex;align-items:center;padding:4px;border-radius:6px;transition:all .15s;}
.sb-collapse:hover{color:var(--y400);background:rgba(255,255,255,.06);}
.sb-foot{margin-top:auto;padding:10px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:9px;flex-shrink:0;}
.sb-version{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.3);text-align:center;letter-spacing:.5px;}
.sb-foot .user-pill{width:100%;}
.sb-actions{display:flex;align-items:center;gap:6px;}
.sb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150;opacity:0;visibility:hidden;transition:opacity .2s;}
.sb-burger{display:none;background:transparent;border:none;color:#111;cursor:pointer;font-size:22px;padding:2px;align-items:center;}
.page-title{font-size:15px;font-weight:600;color:#111;}
/* Rôle « utilisateur » = consultation seule : masque toutes les actions de gestion */
body.role-ro .admin-only{display:none!important;}
body.dark .topbar{background:#171a24;border-color:#2a2d3a;}
body.dark .sb-burger{color:#dde1ee;}
body.dark .page-title{color:#dde1ee;}
/* Mode rail (replié) — desktop */
body.sb-collapsed .app{padding-left:var(--sb-w-rail);}
body.sb-collapsed .sidebar{width:var(--sb-w-rail);}
body.sb-collapsed .brand-wrap{display:none;}
body.sb-collapsed .np-lbl,body.sb-collapsed .btn-logout span,body.sb-collapsed .lang-btn-sm,body.sb-collapsed .sb-foot .user-pill>div:last-child,body.sb-collapsed .sb-version{display:none;}
body.sb-collapsed .npill{justify-content:center;padding:10px 0;gap:0;}
body.sb-collapsed .sb-head{justify-content:center;padding:0;}
body.sb-collapsed #sb-chevron{transform:rotate(180deg);}
body.sb-collapsed .sb-foot{align-items:center;}
body.sb-collapsed .sb-actions{flex-direction:column;}
@media(max-width:900px){.g2{grid-template-columns:1fr;}.g4{grid-template-columns:1fr 1fr;}}
/* Sous 1024px — la sidebar devient un tiroir (drawer) */
@media(max-width:1023px){
  body.sb-collapsed .app,.app{padding-left:0;}
  body.sb-collapsed .sidebar,.sidebar{width:var(--sb-w);transform:translateX(-100%);box-shadow:4px 0 24px rgba(0,0,0,.35);}
  body.sb-open .sidebar{transform:translateX(0);}
  body.sb-open .sb-overlay{opacity:1;visibility:visible;}
  .sb-collapse{display:none;}
  .sb-burger{display:flex;}
  .page{padding:1rem .9rem;}
  body.sb-collapsed .brand-wrap,body.sb-collapsed .np-lbl,body.sb-collapsed .btn-logout span,body.sb-collapsed .lang-btn-sm,body.sb-collapsed .sb-foot .user-pill>div:last-child{display:revert;}
  body.sb-collapsed .npill{justify-content:flex-start;padding:10px 13px;gap:11px;}
  body.sb-collapsed .sb-head{justify-content:space-between;padding:0 14px;}
  body.sb-collapsed .sb-actions{flex-direction:row;}
  body.sb-collapsed .sb-foot{align-items:stretch;}
}
@media(min-width:1024px){.sb-overlay{display:none;}}
.card{background:#fff;border:.5px solid #e5e5e5;border-radius:12px;padding:1.1rem 1.25rem;margin-bottom:.9rem;}
.card-title{font-size:12px;font-weight:600;color:#111;display:flex;align-items:center;gap:6px;margin-bottom:.9rem;}
.card-title i{font-size:14px;color:var(--b600);}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg.full{grid-column:1/-1;}
.flbl{font-size:11px;color:#666;font-weight:500;}
.fi{height:33px;padding:0 9px;border-radius:8px;border:.5px solid #e5e5e5;background:#fff;color:#111;font-size:12px;font-family:var(--font);outline:none;width:100%;}
.fi:focus{border-color:var(--b600);box-shadow:0 0 0 3px rgba(24,95,165,.1);}
.fid{font-family:var(--mono);font-size:11px;background:#E6F1FB;color:#0C447C;border-color:#B5D4F4;font-weight:700;}
.ph-zone{border:1.5px dashed #e5e5e5;border-radius:8px;padding:1.1rem;text-align:center;cursor:pointer;background:#f8f8f8;transition:all .15s;}
.ph-zone:hover{border-color:var(--b600);background:#E6F1FB;}
.ph-zone img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid #85B7EB;display:none;margin:0 auto;}
.ph-ic{width:52px;height:52px;border-radius:50%;background:#E6F1FB;display:flex;align-items:center;justify-content:center;margin:0 auto 5px;}
.ph-ic i{font-size:22px;color:var(--b600);}
.ph-txt{font-size:11px;color:var(--muted);}
.bp{background:var(--b600);color:#fff;border:none;padding:0 1rem;height:34px;border-radius:8px;font-size:12px;font-family:var(--font);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s;white-space:nowrap;}
.bp:hover{background:var(--b800);}
.bs{background:transparent;color:var(--b600);border:.5px solid #e5e5e5;padding:0 1rem;height:34px;border-radius:8px;font-size:12px;font-family:var(--font);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.bs:hover{background:#E6F1FB;}
.bd{background:transparent;color:var(--r600);border:.5px solid var(--r200);padding:0 .7rem;height:26px;border-radius:8px;font-size:10px;font-family:var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:3px;}
.btn-row{display:flex;gap:6px;margin-top:.75rem;justify-content:flex-end;flex-wrap:wrap;}
.badge-outer{background:#fff;border-radius:12px;width:100%;max-width:320px;margin:0 auto;border:1px solid #ddd;box-shadow:0 4px 16px rgba(0,0,0,.1);overflow:hidden;position:relative;}
.badge-topbar{height:8px;background:linear-gradient(90deg,#111 55%,var(--y400) 55%);}
.badge-inner{padding:14px 16px;}
.badge-logos-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;}
.asr-side{flex:1;min-width:0;display:flex;align-items:center;cursor:pointer;}
.asr-side img{width:100%;height:auto;max-height:38px;object-fit:contain;object-position:left center;display:block;}
.thor-side{flex-shrink:0;display:flex;align-items:center;cursor:pointer;justify-content:center;}
.thor-side img{height:36px;width:auto;max-width:100px;object-fit:contain;display:block;}
.badge-div{height:1.5px;background:linear-gradient(90deg,var(--y400),#111);margin-bottom:12px;}
.badge-content{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;}
.badge-photo{width:80px;height:80px;border-radius:8px;background:#f0f0f0;border:1.5px solid #ddd;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.badge-photo i{font-size:30px;color:#ccc;}
.badge-photo img{width:100%;height:100%;object-fit:cover;display:none;}
.badge-info{flex:1;}
.badge-nm{font-size:13px;font-weight:800;color:#111;text-transform:uppercase;line-height:1.2;margin-bottom:2px;}
.badge-fn{font-size:10px;color:#555;margin-bottom:3px;}
.badge-dp{font-size:9px;font-weight:700;color:#0C447C;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.badge-id-tag{font-family:var(--mono);font-size:9px;font-weight:700;color:#111;background:#FFFBEA;border:1px solid var(--y400);padding:2px 7px;border-radius:3px;display:inline-block;}
.badge-bc-row{border-top:1px solid #eee;padding-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;}
.badge-footer-wave{height:28px;position:relative;overflow:hidden;}
.badge-footer-text{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:6.5px;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:2px;}
.tbl{width:100%;font-size:12px;border-collapse:collapse;}
.tbl th{text-align:left;font-size:10px;font-family:var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding:0 6px 7px;border-bottom:.5px solid #e5e5e5;}
.tbl td{padding:8px 6px;border-bottom:.5px solid #e5e5e5;color:#111;vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:#f8f8f8;}
.av{width:26px;height:26px;border-radius:50%;background:#E6F1FB;border:1px solid #B5D4F4;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:#0C447C;flex-shrink:0;}
.agr{display:flex;align-items:center;gap:6px;}
.sbadge{font-size:10px;font-family:var(--mono);padding:2px 6px;border-radius:3px;font-weight:700;}
.sa{background:var(--g50);color:var(--g600);}.sb{background:var(--r50);color:var(--r600);}
.metric{background:#f8f8f8;border-radius:8px;padding:.9rem;}
.metric-lbl{font-size:10px;color:var(--muted);margin-bottom:3px;}
.metric-val{font-size:22px;font-weight:700;}
.mv-b{color:var(--b600);}.mv-g{color:var(--g600);}.mv-r{color:var(--r600);}
.vigile-hero{background:#111;border-radius:12px;padding:1.25rem;text-align:center;margin-bottom:.9rem;border:2px solid var(--y400);}
.vh-title{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--y400);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.25rem;}
.vh-sub{font-size:11px;color:rgba(255,255,255,.45);}
.scan-zone{border:2px dashed #85B7EB;border-radius:12px;padding:1.75rem;text-align:center;cursor:pointer;transition:all .2s;background:#E6F1FB;}
.scan-zone:hover{border-color:var(--b600);background:#B5D4F4;}
.scan-ic{width:60px;height:60px;border-radius:50%;background:var(--b600);display:flex;align-items:center;justify-content:center;margin:0 auto 9px;}
.scan-ic i{font-size:26px;color:#fff;}
.scan-lbl{font-size:14px;color:#0C447C;font-weight:600;}
.scan-sub{font-size:11px;color:var(--muted);margin-top:3px;}
.res-box{border-radius:10px;padding:1.1rem;text-align:center;margin-top:.9rem;}
.res-ok{background:var(--g50);border:2px solid var(--g200);}.res-no{background:var(--r50);border:2px solid var(--r200);}
.res-ico{font-size:38px;margin-bottom:6px;}
.res-title{font-size:17px;font-weight:800;margin-bottom:3px;font-family:var(--mono);}
.res-ok .res-title{color:var(--g600);}.res-no .res-title{color:var(--r600);}
.res-sub{font-size:12px;color:#5b6675;}
.res-id{font-family:var(--mono);font-size:11px;margin-top:3px;}
.res-ok .res-id{color:var(--g600);}.res-no .res-id{color:var(--r600);}
.man-row{display:flex;gap:6px;margin-top:.9rem;}
.man-row input{flex:1;height:34px;padding:0 9px;border-radius:8px;border:.5px solid #e5e5e5;background:#fff;color:#111;font-size:12px;font-family:var(--font);outline:none;}
.log-row{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:.5px solid #e5e5e5;font-size:11px;}
.log-row:last-child{border-bottom:none;}
.ld{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.ld-in{background:var(--g200);}.ld-out{background:#85B7EB;}.ld-no{background:var(--r200);}
.lt{font-size:9px;font-family:var(--mono);font-weight:700;flex-shrink:0;}
.lt-in{color:var(--g600);}.lt-out{color:var(--b600);}.lt-no{color:var(--r600);}
.ch-row{display:flex;align-items:center;gap:7px;font-size:11px;margin-bottom:5px;}
.ch-lbl{min-width:90px;color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ch-track{flex:1;background:#f0f0f0;border-radius:3px;height:12px;overflow:hidden;}
.ch-fill{height:100%;border-radius:3px;background:var(--b600);transition:width .5s;}
.ch-num{min-width:18px;text-align:right;font-family:var(--mono);font-size:10px;}
.tabs{display:flex;border-bottom:.5px solid #e5e5e5;margin-bottom:.9rem;}
.tab{font-size:12px;font-weight:500;padding:6px 11px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--font);display:flex;align-items:center;gap:4px;white-space:nowrap;}
.tab.active{color:var(--b600);border-bottom-color:var(--b600);}
.cbadge{background:#E6F1FB;color:#0C447C;font-size:9px;font-family:var(--mono);padding:1px 5px;border-radius:8px;}
.toast{position:fixed;bottom:1rem;right:1rem;background:#0C447C;color:#fff;padding:9px 14px;border-radius:8px;font-size:12px;display:flex;align-items:center;gap:7px;opacity:0;transform:translateY(5px);transition:all .22s;pointer-events:none;z-index:500;max-width:300px;}
.toast.show{opacity:1;transform:translateY(0);}
.toast.ok{background:#1a6b3c;}.toast.err{background:var(--r600);}
.net-banner{position:fixed;top:0;left:0;right:0;background:var(--r600);color:#fff;font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;z-index:600;transform:translateY(-100%);transition:transform .25s ease;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.25);}
.net-banner.show{transform:translateY(0);}
.net-banner i{font-size:16px;flex-shrink:0;}
.mo{position:fixed;inset:0;background:rgba(0,0,0,.48);display:none;align-items:center;justify-content:center;z-index:400;}
.mo.open{display:flex;}
.mo-card{background:#fff;border-radius:12px;padding:1.4rem;max-width:350px;width:90%;box-shadow:0 12px 40px rgba(0,0,0,.2);}
.mo-title{font-size:13px;font-weight:700;color:var(--r600);margin-bottom:.65rem;display:flex;align-items:center;gap:5px;}
.mo-body{font-size:12px;color:#666;margin-bottom:1rem;line-height:1.6;}
.mo-actions{display:flex;gap:7px;justify-content:flex-end;}
.pr-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:.5px solid #e5e5e5;}
.pr-row:last-child{border-bottom:none;}
.sec-lbl{font-size:10px;font-family:var(--mono);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--b600);margin-bottom:.6rem;}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;}
.srch-row{display:flex;gap:8px;margin-bottom:.9rem;}
.srch-inp{flex:1;height:33px;padding:0 9px;border-radius:8px;border:.5px solid #e5e5e5;background:#fff;color:#111;font-size:12px;font-family:var(--font);outline:none;}
.srch-inp:focus{border-color:var(--b600);}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
@keyframes scanFlash{0%{opacity:0;transform:scale(.96);}60%{opacity:1;transform:scale(1.02);}100%{transform:scale(1);}}
/* Dark mode */
body.dark{background:#12151c;--muted:#9aa4b2;}
body.dark .card{background:#1e2230;border-color:#2a2d3a;color:#dde1ee;}
body.dark .card-title{color:#dde1ee;}
body.dark .tbl th{color:#666;border-color:#2a2d3a;}
body.dark .tbl td{color:#ccc;border-color:#2a2d3a;}
body.dark .fi{background:#171a24;border-color:#2a2d3a;color:#dde1ee;}
body.dark .srch-inp{background:#171a24;border-color:#2a2d3a;color:#dde1ee;}
body.dark .flbl,.dark .ch-lbl,.dark .sec-lbl{color:var(--muted);}
body.dark .vigile-hero{background:linear-gradient(135deg,#0b1529,#152444);}
body.dark .scan-zone{background:#171a24;border-color:#2a2d3a;}
body.dark .man-row input{background:#171a24;border-color:#2a2d3a;color:#dde1ee;}
body.dark .pr-row{border-color:#2a2d3a;}
body.dark .log-row{border-color:#2a2d3a;}
body.dark .tabs{border-color:#2a2d3a;}
body.dark .tab{color:var(--muted);}
body.dark .tab.active{color:var(--b600);}
body.dark .mo-card{background:#1e2230;color:#dde1ee;}
body.dark .mo-body{color:var(--muted);}
body.dark .ph-zone{background:#171a24;border-color:#2a2d3a;}
body.dark .metric{background:#171a24;border-color:#2a2d3a;}
body.dark .ch-track{background:#2a2d3a;}
body.dark .bs{color:#8ab4f8;border-color:#2a2d3a;}
body.dark .bs:hover{background:#1e2a40;}
body.dark .sbadge{opacity:.9;}
body.dark .badge-outer{background:#1e2230;border-color:#2a2d3a;}
/* Dark toggle */
.dark-btn{background:transparent;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.45);padding:4px 9px;border-radius:6px;font-size:11px;cursor:pointer;font-family:var(--font);display:flex;align-items:center;gap:4px;transition:all .15s;white-space:nowrap;}
.dark-btn:hover{border-color:var(--y400);color:var(--y400);}
/* Auto-refresh indicator */
.refresh-pill{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.07);padding:3px 9px;border-radius:20px;font-size:10px;font-family:var(--mono);color:rgba(255,255,255,.4);cursor:pointer;transition:all .15s;}
.refresh-pill:hover{background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);}
.refresh-pill .rdot{width:6px;height:6px;border-radius:50%;background:var(--g200);flex-shrink:0;}
.refresh-pill .rdot.active{animation:pulse 1.5s infinite;}
/* Vigile stats bar */
.vstat-bar{display:flex;gap:.7rem;margin-bottom:.9rem;flex-wrap:wrap;}
.vstat{background:#fff;border:.5px solid #e5e5e5;border-radius:10px;padding:.6rem .9rem;display:flex;align-items:center;gap:.7rem;flex:1;min-width:110px;}
body.dark .vstat{background:#1e2230;border-color:#2a2d3a;}
.vstat-ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.vstat-val{font-size:20px;font-weight:700;font-family:var(--mono);color:#111;line-height:1;}
body.dark .vstat-val{color:#dde1ee;}
.vstat-lbl{font-size:10px;color:var(--muted);margin-top:1px;}
/* Scan result v2 avec photo */
.res-v2{border-radius:10px;padding:.9rem 1rem;display:flex;align-items:center;gap:.9rem;animation:scanFlash .28s ease-out;}
.res-v2.res-ok{background:var(--g50);border:.5px solid #7abf50;}
.res-v2.res-no{background:var(--r50);border:.5px solid var(--r200);}
.res-v2.res-vis{background:#FFFBEA;border:.5px solid var(--y400);}
body.dark .res-v2.res-ok{background:#0e2218;border-color:#2a6640;}
body.dark .res-v2.res-no{background:#210e0e;border-color:#6a2a2a;}
body.dark .res-v2.res-vis{background:#1e1a06;border-color:#6b5c00;}
.res-avatar{width:58px;height:58px;border-radius:8px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;}
.res-avatar img{width:100%;height:100%;object-fit:cover;}
.res-avatar.ok-av{background:var(--g600);}
.res-avatar.no-av{background:var(--r600);}
.res-avatar.vis-av{background:#B8860B;}
.res-main{flex:1;min-width:0;}
.res-type{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono);}
.res-type.ok{color:var(--g600);}
.res-type.no{color:var(--r600);}
.res-type.vis{color:#B8860B;}
.res-name{font-size:14px;font-weight:700;color:#111;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.dark .res-name{color:#dde1ee;}
.res-dept{font-size:11px;color:var(--muted);margin-top:1px;}
.res-bid{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px;}
/* Sticker véhicule */
.sticker-outer{background:#fff;border-radius:10px;border:1.5px solid #ddd;box-shadow:0 4px 16px rgba(0,0,0,.1);overflow:hidden;max-width:300px;margin:0 auto;position:relative;}
.sticker-top{height:7px;background:linear-gradient(90deg,#111 55%,var(--y400) 55%);}
.sticker-body{padding:10px 12px 0;}
.sticker-footer{height:22px;position:relative;overflow:hidden;}
.sticker-footer-txt{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:6px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:1.5px;}
.sticker-logos{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.sticker-id{font-family:var(--mono);font-size:22px;font-weight:700;color:#111;text-align:center;letter-spacing:.12em;margin:6px 0 4px;}
.sticker-plate{font-family:var(--mono);font-size:12px;font-weight:700;background:#FFFBEA;border:1.5px solid var(--y400);border-radius:4px;padding:3px 10px;text-align:center;color:#111;display:inline-block;}
.sticker-info{font-size:10px;color:#555;text-align:center;margin-top:3px;}
.sticker-div{height:1px;background:linear-gradient(90deg,var(--y400),#111);margin:7px 0;}
.sticker-bc{display:flex;align-items:center;justify-content:center;gap:6px;}
/* Véhicule info card dans scan */
.veh-card{border-radius:10px;border:.5px solid #e5e5e5;padding:.85rem;display:flex;gap:.9rem;align-items:center;background:#f8f8f8;margin-top:.7rem;}
body.dark .veh-card{background:#171a24;border-color:#2a2d3a;}
.veh-photo{width:62px;height:52px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#e0e0e0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.veh-photo img{width:100%;height:100%;object-fit:cover;}
.veh-plate{font-family:var(--mono);font-size:13px;font-weight:700;background:#FFFBEA;border:1.5px solid var(--y400);border-radius:4px;padding:2px 8px;color:#111;display:inline-block;}
.auth-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:12px;font-family:var(--mono);}
.auth-badge.ok{background:var(--g50);color:var(--g600);}
.auth-badge.no{background:var(--r50);color:var(--r600);}
/* Vigile sub-tabs */
.vtabs{display:flex;gap:4px;margin-bottom:.9rem;}
.vtab{flex:1;padding:8px;border-radius:8px;border:1px solid #e5e5e5;background:#f8f8f8;cursor:pointer;text-align:center;font-size:12px;font-weight:500;color:var(--muted);font-family:var(--font);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px;}
.vtab.active{background:#E6F1FB;border-color:var(--b600);color:var(--b600);}
body.dark .vtab{background:#1e2230;border-color:#2a2d3a;color:#666;}
body.dark .vtab.active{background:#0d1e36;border-color:var(--b600);color:#8ab4f8;}
.cam-overlay{position:relative;margin-top:.5rem;border-radius:10px;overflow:hidden;background:#000;}
.cam-overlay video{width:100%;display:block;border-radius:10px;}
.cam-reticle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:140px;border:2px solid var(--y400);border-radius:8px;pointer-events:none;}
.cam-close{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;}
/* Langue toggle */
.lang-toggle{display:flex;justify-content:center;gap:6px;margin-top:.75rem;}
.lang-btn{background:transparent;border:.5px solid #ddd;color:#5b6675;font-size:10px;font-family:var(--mono);font-weight:700;padding:3px 9px;border-radius:4px;cursor:pointer;letter-spacing:.06em;transition:all .15s;}
.lang-btn.active{background:var(--b600);color:#fff;border-color:var(--b600);}
.lang-btn:hover:not(.active){background:#f0f2f5;color:#555;}
.lang-btn-sm{background:transparent;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.4);font-size:10px;font-family:var(--mono);font-weight:700;padding:3px 7px;border-radius:4px;cursor:pointer;letter-spacing:.06em;transition:all .15s;}
.lang-btn-sm.active{background:rgba(245,194,0,.15);color:var(--y400);border-color:rgba(245,194,0,.3);}
.lang-btn-sm:hover:not(.active){background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);}
body.dark .lang-btn{border-color:#2a2d3a;color:#555;}
body.dark .lang-btn.active{background:var(--b600);color:#fff;border-color:var(--b600);}

/* ═══════════════════════════════════════════════════════════════
   AUDIT UX — raffinements accessibilité & terrain (lots B / C / D)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Lot C · Focus clavier visible sur les éléments interactifs ─── */
.bp:focus-visible,.bs:focus-visible,.bd:focus-visible,.btn-login:focus-visible,
.tab:focus-visible,.vtab:focus-visible,.dark-btn:focus-visible,.lang-btn:focus-visible,
.btn-logout:focus-visible,.sb-collapse:focus-visible,.refresh-pill:focus-visible,
.scan-zone:focus-visible,.ph-zone:focus-visible{
  outline:2px solid var(--b600);outline-offset:2px;border-radius:8px;
}
.npill:focus-visible,.lang-btn-sm:focus-visible{outline:2px solid var(--y400);outline-offset:-2px;}

/* ─── Lot D · Retour visuel anti double-clic sur les actions primaires ─── */
.bp.is-busy{opacity:.6;pointer-events:none;}

/* ─── Lot B · Confort tactile & terrain (téléphones / tablettes) ───
   Vigiles : scan à la barrière, gants, plein soleil, à une seule main. */
@media (max-width:1023px){
  /* 16px : empêche le zoom automatique de Safari iOS au focus d'un champ */
  .fi,.srch-inp,.lf-inp,.man-row input{font-size:16px;min-height:44px;}
  .bp,.bs{min-height:44px;}
  .bd{min-height:34px;}
  .tab{padding:11px 13px;}
  .vtab{min-height:46px;}
  input[type=checkbox]{width:22px!important;height:22px!important;}
  /* Plancher de lisibilité des petits textes d'information en extérieur */
  .metric-lbl,.vstat-lbl,.scan-sub,.flbl,.lt,.ch-lbl{font-size:12px;}
  .res-name{font-size:15px;}
}

/* ─── Lot D · Respect du « mouvement réduit » du système ───
   Neutralise les animations infinies ; l'alarme d'évacuation reste visible
   (couleur + overlay), seul le clignotement/la pulsation est calmé. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}