:root{--bg:#0E1417;--bg2:#121A1F;--surface:#16212A;--surface2:#1C2832;--line:#26343F;--line2:#33485A;--ink:#E8EFF4;--muted:#8DA0AE;--faint:#5C6F7C;--amber:#F5A524;--amber-d:#3A2A0E;--green:#2FD08A;--green-d:#0F2B22;--red:#FF5D63;--red-d:#2E1417;--slate:#7C909E;--cyan:#54B9EE;--cyan-d:#0E2433;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);height:100dvh;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}
  .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
  input,textarea,button,select{font-family:inherit}
  header{flex:0 0 auto;background:var(--bg2);border-bottom:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;gap:12px}
  .brand{display:flex;flex-direction:column;gap:2px;min-width:0}
  .brand .name{font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1;display:flex;align-items:center;gap:7px}
  .pulse{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(245,165,36,.5)}70%{box-shadow:0 0 0 7px rgba(245,165,36,0)}100%{box-shadow:0 0 0 0 rgba(245,165,36,0)}}
  .brand .sub{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
  .stats{margin-left:auto;display:flex;gap:14px}
  .stat{text-align:right;line-height:1}.stat .v{font-family:var(--mono);font-size:18px;font-weight:600}.stat .l{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:3px}
  .stat .v.ok{color:var(--green)}.stat .v.bad{color:var(--red)}.stat .v.am{color:var(--amber)}
  .usermenu{display:flex;align-items:center;gap:8px}
  .role-chip{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 11px 5px 7px}
  .role-chip .av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:700}
  .role-chip.r-admin .av{background:#2a1530;color:#d98be0}.role-chip.r-ctrl .av{background:var(--amber-d);color:var(--amber)}.role-chip.r-bur .av{background:var(--cyan-d);color:var(--cyan)}
  .role-chip .who{font-size:12px;line-height:1.1}.role-chip .who small{display:block;font-family:var(--mono);font-size:8px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
  .logout{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:9px;width:32px;height:32px;cursor:pointer;font-size:14px}
  .tabs{flex:0 0 auto;display:flex;background:var(--bg2);border-bottom:1px solid var(--line);overflow-x:auto}
  .tabs button{flex:1;min-width:92px;background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:11px 6px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
  .tabs button.active{color:var(--ink);border-bottom-color:var(--amber)}
  main{flex:1 1 auto;display:flex;min-height:0;position:relative}
  .map-wrap{flex:1 1 60%;position:relative;min-width:0}
  #map{position:absolute;inset:0;background:#0a0f12}
  .side{flex:0 0 360px;max-width:42%;background:var(--bg2);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
  .map-fab{position:absolute;z-index:500;bottom:18px;right:14px}
  .fab{background:var(--amber);color:#1a1304;border:none;border-radius:13px;padding:11px 14px;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)}
  .legend{position:absolute;z-index:500;top:12px;left:12px;background:rgba(18,26,31,.92);border:1px solid var(--line);border-radius:11px;padding:9px 11px;backdrop-filter:blur(6px)}
  .legend .row{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:3px 0}
  .legend .dot{width:9px;height:9px;border-radius:50%}
  .add-banner{position:absolute;z-index:600;top:12px;left:50%;transform:translateX(-50%);background:var(--amber);color:#1a1304;font-weight:700;font-size:12px;padding:8px 14px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.4);display:none;align-items:center;gap:8px}
  .add-banner .x{cursor:pointer;font-weight:700;opacity:.7}
  .panel-head{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 14px 8px;border-bottom:1px solid var(--line)}
  .panel-head h2{margin:0;font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .seg{margin-left:auto;display:flex;background:var(--surface);border:1px solid var(--line);border-radius:9px;overflow:hidden}
  .seg button{background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;cursor:pointer}
  .seg button.active{background:var(--surface2);color:var(--ink)}
  .list{flex:1 1 auto;overflow-y:auto;padding:8px}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:11px 12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,transform .05s;position:relative;overflow:hidden}
  .card:hover{border-color:var(--line2)}.card:active{transform:scale(.995)}
  .card .stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--slate)}
  .card.s-present .stripe{background:var(--green)}.card.s-absent .stripe{background:var(--red)}.card.s-pending .stripe{background:var(--slate)}
  .card .top{display:flex;align-items:flex-start;gap:8px}.card .nm{font-size:14px;font-weight:600;line-height:1.2}.card .addr{font-size:11px;color:var(--muted);margin-top:2px}
  .badge{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;border:1px solid;white-space:nowrap}
  .badge.present{color:var(--green);border-color:#1e5e45;background:var(--green-d)}.badge.absent{color:var(--red);border-color:#6e2a2d;background:var(--red-d)}.badge.pending{color:var(--slate);border-color:#3a4a55;background:#1a242c}
  .card .meta{display:flex;align-items:center;gap:10px;margin-top:9px;font-family:var(--mono);font-size:10px;color:var(--faint);flex-wrap:wrap}
  .card .meta .g{color:var(--muted)}.card .qbadge{color:var(--cyan)}
  .card .rmk{margin-top:7px;font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 8px;line-height:1.35}
  .empty{text-align:center;color:var(--faint);font-size:12px;padding:36px 16px;line-height:1.6}
  .fullview{flex:1 1 100%;overflow-y:auto;display:none;padding:16px}
  body.view-dash #dash,body.view-hist #histView,body.view-users #usersView,body.view-plan #planView{display:block}
  body.view-dash .map-wrap,body.view-dash .side,body.view-hist .map-wrap,body.view-hist .side,body.view-users .map-wrap,body.view-users .side,body.view-plan .map-wrap,body.view-plan .side{display:none}
  .dhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .dhead h1{font-size:20px;margin:0;font-weight:700}
  .dhead .when{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
  .dhead .exp{margin-left:auto;display:flex;gap:8px}
  .dhead .exp button,.datenav button{background:var(--surface);border:1px solid var(--line2);color:var(--ink);font-size:11px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:8px 12px;border-radius:9px;cursor:pointer}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
  .kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
  .kpi .l{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .kpi .v{font-family:var(--mono);font-size:30px;font-weight:600;margin-top:8px;line-height:1}.kpi .v small{font-size:14px;color:var(--faint)}
  .kpi.ring{display:flex;align-items:center;gap:14px}.kpi.ring .txt .v{font-size:26px;margin-top:2px}
  .grid2{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-bottom:16px}
  @media(max-width:900px){.grid2{grid-template-columns:1fr}}
  .block{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:16px}
  .block h3{margin:0 0 10px;font-size:12px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
  .block h3 .cnt{margin-left:auto;font-size:11px;color:var(--faint)}
  .alert{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;margin-bottom:7px;background:var(--bg);border:1px solid var(--line)}
  .alert.absent{border-color:#5a2528;background:var(--red-d)}.alert.pending{border-color:#34424c}.alert.late{border-color:#5a4218;background:var(--amber-d)}
  .alert .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto}
  .alert.absent .ic{background:#3a181a;color:var(--red)}.alert.pending .ic{background:#1f2a32;color:var(--slate)}.alert.late .ic{background:#3a2a0e;color:var(--amber)}
  .alert .info{flex:1;min-width:0}.alert .info .a1{font-size:13px;font-weight:600}.alert .info .a2{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:2px}
  .alert .t{font-family:var(--mono);font-size:11px;color:var(--muted)}
  .alert .resend{background:var(--surface);border:1px solid var(--line2);color:var(--cyan);border-radius:8px;padding:6px 9px;font-size:11px;cursor:pointer;white-space:nowrap}
  .vrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.vrow:last-child{border-bottom:none}
  .vrow .va{width:30px;height:30px;border-radius:8px;background:var(--amber-d);color:var(--amber);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:12px;flex:0 0 auto}
  .vrow .vn{flex:1;min-width:0}.vrow .vn .n{font-size:13px;font-weight:600}.vrow .vn .s{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:1px}
  .barwrap{flex:0 0 120px}.bar{height:7px;border-radius:4px;background:#22303a;overflow:hidden}.bar>i{display:block;height:100%;border-radius:4px}.barwrap .pct{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:right;margin-top:3px}
  .qchip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 10px;margin:0 6px 6px 0;font-size:12px}.qchip b{font-family:var(--mono)}.qchip .d{display:flex;gap:4px;margin-left:2px}.qchip .d span{font-family:var(--mono);font-size:11px;padding:0 5px;border-radius:5px}
  .datenav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .datenav input[type=date]{background:var(--surface);border:1px solid var(--line2);color:var(--ink);border-radius:9px;padding:7px 10px;font-family:var(--mono);font-size:12px;color-scheme:dark}
  .datenav button.day{width:34px;padding:8px 0;text-align:center;font-size:14px}
  .datenav button.act{border-color:var(--amber);color:var(--amber)}
  #histSearch{flex:1;min-width:160px;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:8px 11px;font-size:13px;outline:none}
  #histSearch:focus{border-color:var(--line2)}
  /* planning */
  .plansite{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:12px;margin-bottom:10px}
  .plansite .ph{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
  .plansite .ph .nm{font-size:14px;font-weight:600}
  .plansite .ph .qq{font-family:var(--mono);font-size:11px;color:var(--cyan)}
  .plansite .ph .gg{font-family:var(--mono);font-size:11px;color:var(--muted)}
  .plansite .ph .edit{margin-left:auto;background:none;border:1px solid var(--line2);color:var(--muted);border-radius:8px;padding:5px 9px;font-size:11px;cursor:pointer}
  .slots{display:flex;gap:8px;flex-wrap:wrap}
  .slot{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line2);border-radius:11px;padding:9px 13px;min-width:70px;cursor:pointer;transition:.12s}
  .slot:hover{border-color:var(--ink)}
  .slot .tm{font-family:var(--mono);font-size:14px;font-weight:700}
  .slot .lab{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
  .slot.present{border-color:#1e5e45;background:var(--green-d)}.slot.present .tm,.slot.present .lab{color:var(--green)}
  .slot.absent{border-color:#6e2a2d;background:var(--red-d)}.slot.absent .tm,.slot.absent .lab{color:var(--red)}
  .slot.retard{border-color:#5a4218;background:var(--amber-d)}.slot.retard .tm,.slot.retard .lab{color:var(--amber)}
  .slot.avenir{opacity:.65}.slot.avenir .lab{color:var(--faint)}
  .slot .at{font-family:var(--mono);font-size:9px;color:var(--faint)}
  /* users */
  .urow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}.urow:last-child{border-bottom:none}
  .urow .ua{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:13px;flex:0 0 auto}
  .urow .ua.controleur{background:var(--amber-d);color:var(--amber)}.urow .ua.bureau{background:var(--cyan-d);color:var(--cyan)}.urow .ua.admin{background:#2a1530;color:#d98be0}
  .urow .un{flex:1;min-width:0}.urow .un .n{font-size:14px;font-weight:600}.urow .un .s{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:2px}
  .rbadge{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1px solid}
  .rbadge.controleur{color:var(--amber);border-color:#5a4218;background:var(--amber-d)}.rbadge.bureau{color:var(--cyan);border-color:#1d4459;background:var(--cyan-d)}.rbadge.admin{color:#d98be0;border-color:#4a2452;background:#2a1530}
  .udel{background:none;border:1px solid var(--red-d);color:var(--red);border-radius:8px;padding:7px 11px;cursor:pointer;font-size:12px}
  .uform{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  @media(max-width:680px){.uform{grid-template-columns:1fr}}
  .uform .full{grid-column:1/-1}
  .uform label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:5px}
  .uform input,.uform select{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:10px 11px;font-size:14px;outline:none;color-scheme:dark}
  .uform input:focus,.uform select:focus{border-color:var(--amber)}
  .scrim{position:fixed;inset:0;background:rgba(6,10,12,.66);backdrop-filter:blur(3px);z-index:1000;display:none;align-items:flex-end;justify-content:center}
  .scrim.open{display:flex}
  .sheet{width:100%;max-width:480px;background:var(--bg2);border:1px solid var(--line);border-bottom:none;border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));animation:rise .22s cubic-bezier(.2,.8,.2,1);max-height:88dvh;overflow-y:auto}
  @keyframes rise{from{transform:translateY(30px);opacity:.4}to{transform:translateY(0);opacity:1}}
  .grab{width:38px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 14px}
  .sheet h3{margin:0;font-size:18px;font-weight:700}.sheet .sub2{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .sheet .sub2 .g{font-family:var(--mono);color:var(--amber);background:var(--amber-d);padding:1px 7px;border-radius:5px;font-size:10px}.sheet .sub2 .q{font-family:var(--mono);color:var(--cyan);background:var(--cyan-d);padding:1px 7px;border-radius:5px;font-size:10px}
  .laststamp{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:9px 11px;font-family:var(--mono);font-size:11px;color:var(--muted)}
  .choice{display:flex;gap:10px;margin-top:16px}
  .choice button{flex:1;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:14px;padding:16px 0;font-size:15px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:.12s}
  .choice button .ic{font-size:20px;line-height:1}
  .choice button.pick-present.on{border-color:var(--green);background:var(--green-d);color:var(--green)}.choice button.pick-absent.on{border-color:var(--red);background:var(--red-d);color:var(--red)}
  .field{margin-top:14px}.field label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:6px}
  textarea,.sheet input[type=text]{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:11px;color:var(--ink);font-size:14px;padding:11px 12px;resize:none;outline:none}
  textarea{min-height:64px}
  .sheet-actions{display:flex;gap:10px;margin-top:18px}
  .btn{flex:1;border:none;border-radius:13px;padding:14px 0;font-size:14px;font-weight:700;cursor:pointer}
  .btn.primary{background:var(--amber);color:#1a1304}.btn.primary:disabled{opacity:.4;cursor:not-allowed}
  .btn.sec{background:var(--surface);color:var(--muted);border:1px solid var(--line);flex:0 0 auto;padding:14px 18px}
  .btn.danger{background:none;color:var(--red);border:1px solid var(--red-d);flex:0 0 auto;padding:14px 16px}
  .timeline{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;max-height:160px;overflow-y:auto}
  .timeline .ti{display:flex;gap:8px;font-size:11px;color:var(--muted);padding:5px 0;align-items:flex-start}.timeline .ti .d{font-family:var(--mono);color:var(--faint);flex:0 0 88px}
  .login{position:fixed;inset:0;z-index:1500;background:radial-gradient(120% 80% at 50% 0%,#15222b 0%,var(--bg) 60%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
  .login .logo{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700;margin-bottom:5px}
  .login .tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:28px;text-align:center}
  .loginbox{width:320px;max-width:90vw;background:var(--surface);border:1px solid var(--line2);border-radius:18px;padding:22px}
  .loginbox h2{margin:0 0 16px;font-size:15px}
  .loginbox label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;margin:0 0 6px}
  .loginbox input{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--ink);border-radius:11px;padding:12px;font-size:15px;outline:none;margin-bottom:14px}
  .loginbox input:focus{border-color:var(--amber)}
  .loginbox button{width:100%;background:var(--amber);color:#1a1304;border:none;border-radius:12px;padding:13px;font-weight:700;font-size:15px;cursor:pointer}
  .loginerr{color:var(--red);font-size:12px;margin-bottom:12px;min-height:16px}
  .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);z-index:2000;background:var(--surface2);border:1px solid var(--line2);color:var(--ink);padding:11px 16px;border-radius:12px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 8px 24px rgba(0,0,0,.5)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.toast .st{width:9px;height:9px;border-radius:50%}
  .pin{position:relative;width:30px;height:30px;transform:translate(-50%,-100%)}
  .pin .body{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid rgba(255,255,255,.85);box-shadow:0 3px 8px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
  .pin .body span{transform:rotate(45deg);font-family:var(--mono);font-size:11px;font-weight:700;color:#0c1216}
  .pin.s-present .body{background:var(--green)}.pin.s-absent .body{background:var(--red)}.pin.s-pending .body{background:var(--slate)}
  .leaflet-popup-content-wrapper{background:var(--surface);color:var(--ink);border-radius:12px;border:1px solid var(--line2)}.leaflet-popup-tip{background:var(--surface);border:1px solid var(--line2)}
  .leaflet-popup-content{margin:11px 13px;font-size:13px}.leaflet-popup-content .pp-addr{color:var(--muted);font-size:11px;margin-top:2px}
  .leaflet-popup-content button{margin-top:9px;width:100%;background:var(--amber);color:#1a1304;border:none;border-radius:9px;padding:8px;font-weight:700;cursor:pointer}
  .leaflet-control-attribution{background:rgba(14,20,23,.7)!important;color:var(--faint)!important}.leaflet-control-attribution a{color:var(--muted)!important}
  @media(max-width:760px){.stats{display:none}.side{position:absolute;inset:0;flex:none;max-width:none;width:100%;z-index:400;display:none}body.view-list .side{display:flex}body.view-list .map-wrap{visibility:hidden}}

/* Sélection d'affiliation (rôles multiples) dans la création d'utilisateur */
.rolepick{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;cursor:pointer;font-size:13px;color:var(--ink);flex:1;min-width:150px}
.rolepick input{width:16px;height:16px;accent-color:var(--amber);cursor:pointer}
.rolepick:hover{border-color:var(--amber)}