/* ============================================================
   POINTAGE CHANTIER — DEMSEY
   Feuille autonome (mêmes tokens que fiche.css, sans dépendance)
   ============================================================ */
:root{
  --o:#ee7d31; --o-dk:#d96a1f; --o-sf:#fdeee1;
  --ink:#2c2e30; --anthra:#3a3c3e; --soft:#7c7a75;
  --line:#e3e0d9; --line2:#d3cfc6;
  --bg:#f4f2ee; --card:#ffffff; --grey:#f1f0ed;
  --ok:#2f7d46; --ok-sf:#e6f2e9;
  --no:#c0392b; --no-sf:#fbeae8;
  --wa:#b7791f; --wa-sf:#fdf3e0;
  --shadow:0 1px 2px rgba(44,46,48,.06),0 6px 18px rgba(44,46,48,.05);
  --font:Arial,"Liberation Sans",Helvetica,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh;
  -webkit-text-size-adjust:100%;}

/* ---------- structure ---------- */
.topbar{background:var(--anthra);color:#fff;padding:env(safe-area-inset-top) 0 0;position:sticky;top:0;z-index:40;}
.topbar .row{display:flex;align-items:center;gap:12px;padding:11px 15px;max-width:1100px;margin:0 auto;}
.topbar .logo img{display:block;height:38px;width:auto;background:#fff;border-radius:8px;padding:4px 8px;}
.topbar .ttl{font-size:12px;color:#cfcdc8;line-height:1.25;min-width:0;flex:1;}
.topbar .ttl b{color:#fff;display:block;font-size:14.5px;}
.topbar .tools{display:flex;gap:7px;flex:0 0 auto;}
/* bouton accueil — même dessin que les apps IRVE (fiche.css) */
.homebtn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:9px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;
  font-size:20px;line-height:1;flex:0 0 auto;margin-right:2px;}
.homebtn:active{background:rgba(255,255,255,.25);}
.iconbtn{background:rgba(255,255,255,.12);border:none;color:#fff;font-size:12.5px;font-weight:bold;
  border-radius:9px;padding:9px 11px;cursor:pointer;white-space:nowrap;}
.iconbtn:active{background:rgba(255,255,255,.26);}
.iconbtn.on{background:var(--o);}
.wrap{max-width:760px;margin:0 auto;padding:16px 15px 90px;}
.wrap.wide{max-width:1180px;}

/* ---------- bandeau état ---------- */
.ovr{font-size:11.5px;text-align:center;padding:5px 12px;background:#2b2d2f;color:#cfcdc8;}
.ovr.off{background:#7a4a12;color:#ffe9d2;}
.ovr.err{background:#7d2820;color:#ffd9d4;}

/* ---------- cartes ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:16px;
  box-shadow:var(--shadow);margin-bottom:13px;}
.card h2{margin:0 0 3px;font-size:15.5px;color:var(--anthra);}
.card .sub{font-size:12.5px;color:var(--soft);margin:0;line-height:1.45;}
.sec-h{font-size:12px;font-weight:bold;letter-spacing:.06em;text-transform:uppercase;
  color:var(--soft);margin:22px 3px 9px;}

/* ---------- identité du pointeur ---------- */
.me{display:flex;align-items:center;gap:13px;}
.ava{width:46px;height:46px;border-radius:50%;background:var(--o-sf);color:var(--o-dk);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:bold;}
.ava.big{width:62px;height:62px;font-size:21px;}
.me .nm{display:block;font-size:17px;font-weight:bold;line-height:1.2;}
.me .rl{display:block;font-size:12.5px;color:var(--soft);}

/* ---------- chantier détecté ---------- */
.chx{display:flex;align-items:center;gap:12px;padding:13px;border-radius:12px;
  background:var(--grey);border:1.5px solid var(--line);cursor:pointer;}
.chx.gps{background:var(--ok-sf);border-color:#bcd9c6;}
.chx.far{background:var(--wa-sf);border-color:#e9d5aa;}
.chx.none{background:var(--no-sf);border-color:#eec4bd;}
.chx .pin{width:34px;height:34px;flex:0 0 auto;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:#fff;border:1px solid var(--line);}
.chx .pin svg{width:19px;height:19px;}
.chx .info{min-width:0;flex:1;}
.chx .info .n{display:block;font-size:15px;font-weight:bold;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chx .info .m{display:block;font-size:12px;color:var(--soft);margin-top:2px;}
.chx .chg{font-size:12px;font-weight:bold;color:var(--o);flex:0 0 auto;}

/* ---------- gros bouton de pointage ---------- */
.clock{width:100%;border:none;border-radius:18px;padding:26px 18px;cursor:pointer;color:#fff;
  font-family:inherit;display:block;text-align:center;box-shadow:0 6px 20px rgba(44,46,48,.14);}
.clock .big{font-size:27px;font-weight:bold;letter-spacing:.01em;display:block;line-height:1.15;}
.clock .sml{font-size:13.5px;opacity:.9;display:block;margin-top:6px;}
.clock:active{transform:scale(.985);}
.clock[disabled]{opacity:.45;cursor:default;}
.clock.in{background:linear-gradient(160deg,#3d9a5c,#2f7d46);}
.clock.out{background:linear-gradient(160deg,#e8894a,#d96a1f);}

/* ---------- session en cours ---------- */
.live{text-align:center;padding:18px 12px 4px;}
.live .t{font-size:42px;font-weight:bold;color:var(--anthra);line-height:1;font-variant-numeric:tabular-nums;}
.live .l{font-size:12.5px;color:var(--soft);margin-top:7px;}
.live .l b{color:var(--ink);}

/* ---------- champs ---------- */
.fld{margin-bottom:13px;}
.fld:last-child{margin-bottom:0;}
label{display:block;font-size:12.5px;font-weight:bold;color:var(--ink);margin:0 0 5px;}
label .opt{font-weight:normal;color:var(--soft);}
input[type=text],input[type=number],input[type=tel],input[type=email],input[type=password],
input[type=date],input[type=time],textarea,select{
  width:100%;font:inherit;font-size:16px;border:1.5px solid var(--line2);border-radius:10px;
  padding:11px 12px;background:#fff;color:var(--ink);}
textarea{min-height:74px;resize:vertical;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--o);box-shadow:0 0 0 3px var(--o-sf);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.hint{font-size:11.5px;color:var(--soft);margin-top:4px;line-height:1.4;}

/* pastilles de choix (tâches) */
.opts{display:flex;flex-wrap:wrap;gap:7px;}
.chip{border:1.5px solid var(--line2);background:#fff;border-radius:999px;padding:8px 13px;
  font-size:13px;cursor:pointer;font-family:inherit;color:var(--ink);}
.chip.on{background:var(--o);border-color:var(--o);color:#fff;font-weight:bold;}

/* pas rapides (pause / trajet) */
.steps{display:flex;align-items:center;gap:9px;}
.steps .val{flex:1;text-align:center;font-size:19px;font-weight:bold;font-variant-numeric:tabular-nums;}
.steps button{width:46px;height:46px;flex:0 0 auto;border:1.5px solid var(--line2);background:#fff;
  border-radius:12px;font-size:21px;font-weight:bold;color:var(--anthra);cursor:pointer;font-family:inherit;}
.steps button:active{background:var(--grey);}

/* ---------- boutons ---------- */
.btn{border:none;border-radius:12px;padding:13px 16px;font-size:14.5px;font-weight:bold;
  cursor:pointer;font-family:inherit;}
.btn.primary{background:var(--o);color:#fff;}
.btn.sec{background:#fff;color:var(--ink);border:1.5px solid var(--line2);}
.btn.ghost{background:transparent;color:var(--o);padding:9px 4px;}
.btn.danger{background:var(--no-sf);color:var(--no);border:1.5px solid #eec4bd;}
.btn.full{width:100%;display:block;}
.btn[disabled]{opacity:.5;cursor:default;}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;}
.btnrow .btn{flex:1;min-width:130px;}

/* ---------- liste des pointages ---------- */
.plist{display:flex;flex-direction:column;gap:9px;}
.pit{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line2);
  border-radius:12px;padding:12px 13px;cursor:pointer;display:flex;gap:11px;align-items:center;}
.pit.ouvert{border-left-color:var(--o);background:var(--o-sf);}
.pit.complet{border-left-color:var(--ok);}
.pit.valide{border-left-color:#5a7d8f;background:#f6f8f9;}
.pit .d{flex:0 0 auto;text-align:center;width:44px;}
.pit .d .j{display:block;font-size:18px;font-weight:bold;line-height:1;}
.pit .d .m{display:block;font-size:10.5px;color:var(--soft);text-transform:uppercase;}
.pit .c{min-width:0;flex:1;}
.pit .c .n{display:block;font-size:14px;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pit .c .h{display:block;font-size:12px;color:var(--soft);margin-top:2px;}
.pit .r{flex:0 0 auto;text-align:right;}
.pit .r .tot{font-size:16px;font-weight:bold;font-variant-numeric:tabular-nums;}
.tag{display:inline-block;font-size:10.5px;font-weight:bold;padding:2px 8px;border-radius:999px;
  background:var(--grey);color:var(--soft);}
.tag.ouvert{background:var(--o);color:#fff;}
.tag.ok{background:var(--ok-sf);color:var(--ok);}
.tag.valide{background:#e6ecf0;color:#42606f;}
.tag.retro{background:var(--wa-sf);color:var(--wa);}
.tag.warn{background:var(--no-sf);color:var(--no);}
.tag.dirty{background:var(--wa-sf);color:var(--wa);}
.empty{text-align:center;color:var(--soft);font-size:13px;padding:26px 14px;line-height:1.5;}

/* ---------- alertes ---------- */
.alert{border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.45;margin-bottom:13px;}
.alert.warn{background:var(--wa-sf);border:1px solid #e9d5aa;color:#7a5410;}
.alert.bad{background:var(--no-sf);border:1px solid #eec4bd;color:#8d2b1e;}
.alert.info{background:var(--o-sf);border:1px solid #f3d3b8;color:#8a4a12;}
.alert b{display:block;margin-bottom:2px;}

/* ---------- grille employés (borne) ---------- */
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px;}
.ecard{background:var(--card);border:1.5px solid var(--line);border-radius:15px;padding:16px 12px;
  text-align:center;cursor:pointer;box-shadow:var(--shadow);}
.ecard:active{transform:scale(.98);border-color:var(--o);}
.ecard .ava{margin:0 auto 9px;}
.ecard .n{display:block;font-size:14.5px;font-weight:bold;line-height:1.25;}
.ecard .s{display:block;font-size:11.5px;color:var(--soft);margin-top:4px;}
.ecard.here{border-color:var(--ok);background:var(--ok-sf);}

/* ---------- pavé PIN ---------- */
.pad{max-width:290px;margin:0 auto;}
.pad .dots{display:flex;justify-content:center;gap:14px;margin:16px 0 20px;}
.pad .dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--line2);background:#fff;}
.pad .dot.on{background:var(--anthra);border-color:var(--anthra);}
.pad .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.pad .keys button{aspect-ratio:1/1;border:1.5px solid var(--line2);background:#fff;border-radius:16px;
  font-size:24px;font-weight:bold;font-family:inherit;color:var(--ink);cursor:pointer;}
.pad .keys button:active{background:var(--grey);}
.pad .keys button.f{font-size:14px;color:var(--soft);}
.pad .msg{text-align:center;font-size:13px;min-height:20px;margin-top:14px;color:var(--no);}

/* ---------- modale ---------- */
.ov{position:fixed;inset:0;background:rgba(30,32,34,.55);z-index:90;display:flex;
  align-items:flex-end;justify-content:center;padding:0;}
@media(min-width:640px){.ov{align-items:center;padding:22px;}}
.sheet{background:var(--bg);width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;
  border-radius:18px 18px 0 0;overflow:hidden;}
@media(min-width:640px){.sheet{border-radius:18px;}}
.sheet .sh{padding:15px 17px;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:11px;}
.sheet .sh h3{margin:0;font-size:16px;flex:1;color:var(--anthra);}
.sheet .sb{padding:15px 17px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;}
.sheet .sf{padding:13px 17px calc(13px + env(safe-area-inset-bottom));background:var(--card);
  border-top:1px solid var(--line);display:flex;gap:9px;}
.sheet .sf .btn{flex:1;}
.xbtn{background:none;border:none;font-size:24px;line-height:1;color:var(--soft);cursor:pointer;padding:0 4px;}

/* ---------- photos ---------- */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;}
.thumb{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--grey);}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb.pending{opacity:.6;}
.thumb .del{position:absolute;top:3px;right:3px;width:23px;height:23px;border-radius:50%;border:none;
  background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:1;cursor:pointer;}
.photo-add{aspect-ratio:1/1;border:2px dashed var(--line2);border-radius:10px;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--soft);cursor:pointer;}

/* ---------- récap (tableau) ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);}
table.rc{border-collapse:collapse;width:100%;font-size:13px;min-width:620px;}
table.rc th,table.rc td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;}
table.rc th{background:var(--grey);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--soft);position:sticky;top:0;z-index:2;}
table.rc td.num,table.rc th.num{text-align:right;font-variant-numeric:tabular-nums;}
table.rc tr.emp td{background:#fbfaf8;font-weight:bold;}
table.rc tr.tot td{background:var(--anthra);color:#fff;font-weight:bold;border-bottom:none;}
table.rc tbody tr:hover td{background:var(--o-sf);}
table.rc td.z{color:var(--line2);}
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;}
.filters .fld{margin:0;flex:1;min-width:145px;}
.wk{display:flex;align-items:center;gap:9px;}
.wk .lbl{font-size:15px;font-weight:bold;flex:1;text-align:center;}
.wk button{width:42px;height:42px;border:1.5px solid var(--line2);background:#fff;border-radius:11px;
  font-size:17px;cursor:pointer;font-family:inherit;color:var(--anthra);}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px;text-align:center;}
.kpi .v{font-size:22px;font-weight:bold;font-variant-numeric:tabular-nums;line-height:1.1;}
.kpi .k{font-size:11.5px;color:var(--soft);margin-top:3px;}
.kpi.warn .v{color:var(--wa);}
.kpi.bad .v{color:var(--no);}

/* ---------- guide d'import : maquettes des écrans ProGBat ---------- */
.guide{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:13px;}
.guide summary{cursor:pointer;font-size:13.5px;font-weight:bold;color:var(--anthra);list-style:none;}
.guide summary::-webkit-details-marker{display:none;}
.guide summary::before{content:"▸ ";color:var(--o);}
.guide[open] summary::before{content:"▾ ";}
.guide ol{margin:12px 0 0;padding-left:20px;font-size:13px;line-height:1.55;}
.guide li{margin-bottom:9px;}
.guide a{color:var(--o-dk);}
.shot{margin:7px 0 2px;border:1px solid var(--line2);border-radius:9px;overflow:hidden;
  font-size:11.5px;font-family:var(--font);}
.gb-side{background:#141c33;color:#c9d1e4;padding:6px 0;}
.gb-side div{padding:6px 11px;display:flex;align-items:center;gap:8px;}
.gb-side .on{background:#2f5bea;color:#fff;font-weight:bold;}
.gb-side .sub{padding-left:30px;font-size:11px;}
.gb-side .sub.pick{color:#fff;font-weight:bold;}
.gb-side i{width:11px;height:11px;border-radius:3px;background:currentColor;opacity:.45;flex:0 0 auto;}
.gb-bar{background:#eef1f9;padding:11px;display:flex;align-items:center;gap:7px;justify-content:flex-end;}
.gb-bar .ic{width:28px;height:28px;border-radius:50%;border:1px solid #ccd3e6;background:#fff;
  display:flex;align-items:center;justify-content:center;color:#5b6480;flex:0 0 auto;}
.gb-bar .ic svg{width:14px;height:14px;}
.gb-bar .ic.hi{border:2px solid var(--o);color:var(--o-dk);box-shadow:0 0 0 3px var(--o-sf);}
.gb-bar .new{background:#1aa06d;color:#fff;border-radius:7px;padding:7px 11px;font-weight:bold;white-space:nowrap;}
.shot .cap{background:var(--grey);color:var(--soft);padding:5px 9px;font-size:10.5px;border-top:1px solid var(--line);}

/* ---------- écran de garde ---------- */
.gate{max-width:420px;margin:40px auto;padding:0 16px;}
.boot{text-align:center;padding:60px 16px;color:var(--soft);font-size:13px;}
.hidden{display:none !important;}