:root{
  --ink:#111111; --paper:#FFFFFF; --header:#F3ECDC; --header-2:#E6DDC8; --card:#FFFFFF;
  --grid-min:#E6EDF5; --grid-maj:#D3DFEC; --hair:#111111; --hair-soft:#CDD3DB;
  --muted:#6C7480; --red:#B11226; --red-dark:#7F0E1C;
  --ui:Inter,"Helvetica Neue",Arial,sans-serif;
  --xs:4px; --s:8px; --m:16px; --l:24px; --xl:32px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--ui);color:var(--ink);background:var(--paper);overflow:hidden}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;position:relative;
  background-image:linear-gradient(var(--grid-min) 1px,transparent 1px),linear-gradient(90deg,var(--grid-min) 1px,transparent 1px),linear-gradient(var(--grid-maj) 1px,transparent 1px),linear-gradient(90deg,var(--grid-maj) 1px,transparent 1px);
  background-size:8px 8px,8px 8px,40px 40px,40px 40px}

header{background:var(--header);color:var(--ink);padding:calc(var(--m) + env(safe-area-inset-top)) var(--m) 12px;flex-shrink:0;border-bottom:2px solid var(--ink)}
.lockup{display:flex;align-items:center;gap:13px}
.wm{line-height:1}
.wm .name{font-weight:900;font-size:31px;letter-spacing:-1px}
.wm .sub{font-weight:600;font-size:9px;letter-spacing:3.4px;margin-top:3px}
.proj{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px;padding-top:11px;border-top:1px solid var(--header-2)}
.proj .selp{cursor:pointer}
.proj .lab{font-size:9px;letter-spacing:2px;color:var(--muted);font-weight:600}
.proj .val{font-weight:700;font-size:15px;margin-top:3px;display:flex;align-items:center;gap:6px}
.proj .val .cv{color:var(--red);font-size:12px}
.proj .date{font-size:11px;color:var(--muted);text-align:right;text-transform:capitalize}

.scroll{flex:1;overflow-y:auto;padding:var(--l) var(--m) calc(var(--l) + env(safe-area-inset-bottom));min-height:0;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:0}

.home-btn{display:flex;align-items:center;gap:var(--m);width:100%;background:var(--card);border:1px solid var(--hair);padding:0 var(--m);height:56px;margin-bottom:12px;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;letter-spacing:.3px}
.home-btn .num{font-weight:800;font-size:13px;color:var(--red);min-width:24px;letter-spacing:.5px}
.home-btn.primary{background:var(--ink);color:#fff;position:relative}
.home-btn.primary .num{color:#fff}
.home-btn.primary::after{content:"";position:absolute;right:-1px;top:10px;bottom:10px;width:6px;background:var(--red)}
.home-btn:active{transform:translateY(1px)}

.row{display:flex;gap:12px;margin:var(--xl) 0 var(--s)}
.mini{flex:1;background:var(--card);border:1px solid var(--hair-soft);padding:10px var(--m);cursor:pointer}
.mini .n{font-weight:800;font-size:28px;letter-spacing:-1px}
.mini.alert{border-color:var(--red)} .mini.alert .n{color:var(--red)}
.mini .l{font-size:10px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-top:2px;font-weight:600}

.eyebrow{font-size:10px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;font-weight:700;margin:var(--xl) 0 var(--m);display:flex;align-items:center;gap:10px}
.eyebrow:first-child{margin-top:0}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--hair-soft)}

.card{background:var(--card);border:1px solid var(--hair);padding:13px 15px;margin-bottom:12px;position:relative;cursor:pointer}
.card.flag{padding-left:19px}
.card.flag::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:7px;background:var(--red)}
.card .cref{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .ref{font-size:11px;font-weight:600;letter-spacing:1px}
.card .co{font-size:11px;font-weight:800;letter-spacing:1.6px;text-align:right}
.card .title{font-size:15px;font-weight:700;margin:7px 0 5px;line-height:1.25}
.card .meta{font-size:11px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-weight:500}
.card .meta .dot{color:var(--hair-soft)}
.card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:11px;gap:8px}
.card .due{font-size:11px;color:var(--muted);font-weight:500}
.card .due.late{color:var(--red);font-weight:700}
.card .thumb{width:100%;height:120px;object-fit:cover;border:1px solid var(--hair);margin:8px 0 2px;display:block}

.st{font-size:10px;font-weight:800;letter-spacing:.8px;padding:3px 8px;text-transform:uppercase;white-space:nowrap;border:1px solid var(--ink);display:inline-block}
.st.brouillon,.st.demande{border-style:dotted;color:var(--muted);border-color:var(--muted)}
.st.transmettre{background:var(--ink);color:#fff}
.st.transmis,.st.rebouche,.st.reporte{background:var(--muted);color:#fff;border-color:var(--muted)}
.st.cours,.st.avalider{background:var(--header);color:var(--ink)}
.st.bloque,.st.refuse{background:var(--red-dark);color:#fff;border-color:var(--red-dark)}
.st.retard,.st.areprendre{background:var(--red);color:#fff;border-color:var(--red)}
.st.verifier,.st.valide{background:#fff;color:var(--ink);position:relative;padding-right:14px}
.st.verifier::after,.st.valide::after{content:"";position:absolute;right:0;top:0;bottom:0;width:5px;background:var(--red)}
.st.clos,.st.realise,.st.closr{background:var(--ink);color:#fff}

.filters{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px;margin-bottom:var(--s)}
.filters::-webkit-scrollbar{height:0}
.chip{flex-shrink:0;font-size:12px;font-weight:700;padding:8px 13px;border:1px solid var(--hair);background:#fff;color:var(--ink);cursor:pointer;letter-spacing:.3px}
.chip.on{background:var(--ink);color:#fff} .chip.on.red{background:var(--red);border-color:var(--red)}

.search{display:flex;align-items:center;gap:10px;border:1px solid var(--hair);background:#fff;padding:0 14px;height:46px;margin-bottom:14px}
.search input{border:none;outline:none;flex:1;font-family:var(--ui);font-size:15px;background:none}
.search .ic{color:var(--muted);font-size:17px}

.sheet-head{background:var(--header);color:var(--ink);margin:calc(-1*var(--l)) calc(-1*var(--m)) var(--l);padding:var(--m);border-bottom:2px solid var(--ink)}
.sheet-head .ref{font-size:12px;font-weight:600;letter-spacing:1px;color:var(--muted)}
.sheet-head .co{font-size:14px;font-weight:800;letter-spacing:2px;margin-top:5px}
.sheet-head .ti{font-size:20px;font-weight:800;margin-top:9px;line-height:1.2;letter-spacing:-.3px}
.photo{aspect-ratio:4/3;border:1px solid var(--ink);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:var(--m);background:#efe9dd}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .ph{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#e7e2d6 0 14px,#efe9dd 14px 28px)}
.photo .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(17,17,17,.85);color:#fff;font-size:11px;padding:6px 9px;z-index:3;display:flex;justify-content:space-between;font-weight:500}
.photostrip{display:flex;gap:10px;overflow-x:auto;margin-bottom:var(--m);padding-bottom:6px}
.photostrip::-webkit-scrollbar{height:0}
.photostrip .pt{flex-shrink:0;width:120px;height:120px;border:1px solid var(--ink);object-fit:cover;cursor:pointer;background:#efe9dd}
.photostrip .addp{flex-shrink:0;width:120px;height:120px;border:1px dashed var(--hair);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--red);cursor:pointer;background:#fff}
.photos2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:var(--m)}
.photos2 .photo{aspect-ratio:1;margin:0}
.photos2 .tag{position:absolute;top:0;left:0;background:var(--ink);color:#fff;font-size:9px;font-weight:800;letter-spacing:1px;padding:3px 7px;z-index:4}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px var(--m);font-size:13px;margin-bottom:var(--m)}
.kv .k{color:var(--muted);font-size:11px;letter-spacing:.5px;text-transform:uppercase;align-self:center;font-weight:600}
.kv .v{font-weight:600}
.action-box{background:#fff;border:1px solid var(--ink);border-left:5px solid var(--red);padding:13px 15px;margin-bottom:var(--m)}
.action-box .k{font-size:10px;letter-spacing:2px;color:var(--red);text-transform:uppercase;font-weight:700}
.action-box .v{font-size:15px;font-weight:700;margin-top:5px}

.tl{margin-bottom:var(--m)}
.tl .ev{display:flex;gap:12px;font-size:12px;margin-bottom:9px;position:relative;padding-left:14px}
.tl .ev::before{content:"";position:absolute;left:0;top:4px;width:7px;height:7px;background:var(--ink)}
.tl .ev.now::before{background:var(--red)}
.tl .dt{color:var(--muted);min-width:58px;font-weight:600}
.tl .ww{font-weight:600}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;font-family:var(--ui);font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.5px;border:1px solid var(--ink);margin-bottom:12px;background:#fff;color:var(--ink)}
.btn.primary{background:var(--ink);color:#fff;position:relative}
.btn.primary::after{content:"";position:absolute;right:-1px;top:9px;bottom:9px;width:6px;background:var(--red)}
.btn.secondary{background:#fff;color:var(--ink)}
.btn.critical{background:var(--red-dark);color:#fff;border-color:var(--red-dark)}
.btn:active{transform:translateY(1px)}
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--s)}
.btn-grid .btn{margin-bottom:0;height:48px;font-size:13px}

.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cat{background:#fff;border:1px solid var(--ink);padding:15px 13px;cursor:pointer;min-height:80px;display:flex;flex-direction:column;justify-content:space-between}
.cat:active{transform:translateY(1px)}
.cat .cn{font-weight:800;font-size:13px;color:var(--red);letter-spacing:.5px}
.cat .cl{font-size:13px;font-weight:700;line-height:1.2;margin-top:7px}

label.lbl{font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;font-weight:700;display:block;margin:var(--m) 0 7px}
.field{width:100%;border:1px solid var(--hair);background:#fff;padding:13px 14px;font-family:var(--ui);font-size:15px;font-weight:500;color:var(--ink)}
select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
textarea.field{resize:none;min-height:64px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.delaybar,.seg{display:flex;gap:8px;flex-wrap:wrap}
.delaybar .d{flex:1;border:1px solid var(--hair);background:#fff;padding:11px 0;text-align:center;font-weight:700;font-size:13px;cursor:pointer}
.delaybar .d.on{background:var(--ink);color:#fff}
.seg .o{border:1px solid var(--hair);background:#fff;padding:9px 12px;font-weight:700;font-size:12px;cursor:pointer}
.seg .o.on{background:var(--ink);color:#fff}
.ghost{border:1px dashed var(--hair);background:#fff;height:54px;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14px;cursor:pointer;color:var(--ink)}
.ghost .pl{color:var(--red);font-size:20px;line-height:1}

.lrow{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--hair);padding:14px 15px;margin-bottom:10px;cursor:pointer;gap:10px}
.lrow .ti{font-weight:700;font-size:15px}
.lrow .desc{font-weight:500;font-size:12px;color:var(--muted);margin-top:3px}
.lrow .chev{color:var(--muted);font-size:18px;font-weight:700;flex-shrink:0}
.lrow .code{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--red);flex-shrink:0}
.lrow .del{color:var(--red);cursor:pointer;font-weight:800;flex-shrink:0;padding:0 4px}

.chk{display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid var(--hair);padding:12px;margin-bottom:8px;cursor:pointer}
.chk.on{border-left:5px solid var(--red)}
.chk .box{width:18px;height:18px;border:1px solid var(--ink);flex-shrink:0;margin-top:1px}
.chk.on .box{background:var(--red);border-color:var(--red)}
.chk .t{font-size:13px;font-weight:600;line-height:1.3}
.chk .s{font-size:11px;color:var(--muted);margin-top:2px;font-weight:500}

.doc{background:#fff;border:1px solid var(--ink);padding:18px;margin-bottom:var(--m)}
.doc .dh{font-weight:900;font-size:16px;letter-spacing:.3px;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:10px}
.doc .dl{display:flex;gap:8px;font-size:12px;margin-bottom:4px}
.doc .dl .k{color:var(--muted);min-width:62px;font-weight:600}
.doc .dsec{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin:13px 0 6px}
.doc .dsec.red{color:var(--red)}
.doc ol{margin:0 0 0 18px;font-size:13px;font-weight:600}
.doc ol li{margin-bottom:3px}
.doc ul{margin:0 0 0 18px;font-size:13px;font-weight:600;color:var(--red)}
.doc .body{font-size:13px;line-height:1.5;font-weight:500;white-space:pre-line}

nav{flex-shrink:0;display:flex;background:var(--header);border-top:2px solid var(--ink);padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;background:none;border:none;color:var(--muted);font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.5px;padding:10px 4px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative}
nav button.on{color:var(--ink)}
nav button.on::before{content:"";position:absolute;top:-2px;left:22%;right:22%;height:3px;background:var(--red)}
nav .ico{font-size:16px;line-height:1}

.topbar{display:flex;align-items:center;gap:var(--s);margin-bottom:var(--l)}
.back{background:#fff;border:1px solid var(--ink);width:38px;height:38px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.topbar .tt{font-size:16px;font-weight:800;letter-spacing:-.2px}
.banner{background:var(--header);border:1px solid var(--ink);padding:10px 13px;font-size:12px;font-weight:600;margin-bottom:var(--m);display:flex;gap:8px;align-items:center;line-height:1.4}
.banner .b{color:var(--red);font-weight:800}
.footnote{margin-top:var(--xl);padding-top:var(--m);border-top:1px solid var(--hair-soft);display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:var(--muted);font-weight:700}
.hint{font-size:12px;color:var(--muted);margin:var(--s) 0 var(--m);line-height:1.45;font-weight:500}

/* modal */
.modal{position:fixed;inset:0;background:rgba(17,17,17,.55);display:flex;align-items:flex-end;justify-content:center;z-index:200}
.modal .sheet{background:var(--paper);width:100%;max-width:520px;max-height:88vh;overflow-y:auto;border-top:3px solid var(--red);padding:var(--l) var(--m) calc(var(--l) + env(safe-area-inset-bottom))}
.modal .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--m)}
.modal .mh .tt{font-size:18px;font-weight:800}
.modal .mh .x{font-size:22px;cursor:pointer;color:var(--muted);padding:4px}

/* annotation */
.annot{position:fixed;inset:0;background:var(--ink);z-index:300;display:flex;flex-direction:column}
.annot .stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;touch-action:none}
.annot canvas{max-width:100%;max-height:100%;touch-action:none;background:#222}
.annot .tools{background:var(--header);border-top:2px solid var(--ink);display:flex;flex-wrap:wrap;gap:6px;padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));align-items:center}
.annot .tools button{border:1px solid var(--ink);background:#fff;font-weight:700;font-size:12px;padding:9px 11px;cursor:pointer;min-width:42px}
.annot .tools button.on{background:var(--ink);color:#fff}
.annot .tools .sw{width:26px;height:26px;border:2px solid #fff;cursor:pointer;padding:0}
.annot .tools .sw.on{outline:2px solid var(--red);outline-offset:1px}
.annot .topa{display:flex;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:var(--ink);color:#fff;align-items:center}
.annot .topa b{font-weight:800;letter-spacing:1px}
.annot .topa button{background:none;border:none;color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.annot .topa .save{color:var(--red)}

.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;border-left:5px solid var(--red);padding:12px 16px;font-size:13px;font-weight:600;opacity:0;transition:.25s;z-index:400;max-width:88%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hidden{display:none !important}
.install{background:var(--ink);color:#fff;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;font-size:13px;font-weight:600}
.install button{background:var(--red);color:#fff;border:none;padding:8px 12px;font-weight:700;cursor:pointer}
.install .no{background:none;color:var(--hair-soft)}

/* chips de pré-remplissage */
.chipwrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.pchip,.nchip,.vchip{border:1px solid var(--hair);background:#fff;color:var(--ink);font-family:var(--ui);font-weight:700;font-size:12px;padding:9px 12px;cursor:pointer;letter-spacing:.2px;transition:background .12s,color .12s,border-color .12s}
.pchip:active,.vchip:active,.nchip:active{background:var(--red);border-color:var(--red);color:#fff}
.nchip.on{background:var(--red);border-color:var(--red);color:#fff}
.titlerow{display:flex;gap:8px;align-items:stretch}
.titlerow .field{flex:1}
.auto{border:1px solid var(--hair);background:#fff;color:var(--ink);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:0 14px;cursor:pointer}
.auto:active{background:var(--red);border-color:var(--red);color:#fff}
.quickrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.qbtn{border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:.6px;padding:11px 14px;cursor:pointer}
.qbtn:active{background:var(--red);border-color:var(--red)}

/* en-tête compact (formulaires) */
header.compact{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:8px}
header.compact .proj{display:none}
header.compact .sub{display:none}
header.compact .logo{width:30px;height:23px}
header.compact .wm .name{font-size:20px;letter-spacing:-.5px}
.wm .name .hproj{font-weight:600;color:var(--muted);font-size:13px;letter-spacing:0}
header:not(.compact) .wm .name .hproj{display:none}

/* grille atténuée en saisie */
#app.saisie{--grid-min:#EEF2F7;--grid-maj:#E6ECF4}

/* animations */
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.viewin{animation:viewin .22s cubic-bezier(.2,.7,.2,1)}
.modal{animation:mfade .18s ease}
.modal .sheet{animation:msheet .26s cubic-bezier(.2,.8,.2,1)}
@keyframes mfade{from{opacity:0}to{opacity:1}}
@keyframes msheet{from{transform:translateY(100%)}to{transform:none}}
.home-btn,.btn,.cat,.lrow,.card,.qbtn{transition:transform .08s ease}

/* carnet : carte entreprise */
.ent{background:#fff;border:1px solid var(--hair);padding:14px 15px;margin-bottom:14px}
.ent .enth{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.ent .entn{color:var(--red);font-weight:900;font-size:19px;letter-spacing:.3px}
.ent .corps{background:var(--ink);color:#fff;font-weight:800;font-size:11px;letter-spacing:1px;padding:5px 10px;text-transform:uppercase;text-align:right}
.ent .mailrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--hair-soft)}
.ent .mailrow:first-of-type{border-top:none}
.ent .mailrow .env{color:var(--muted);font-size:13px}
.ent .mailrow .addr{flex:1;font-size:14px;font-weight:500;word-break:break-all}
.ent .mailrow .del{color:var(--red);font-weight:800;cursor:pointer;padding:0 4px}
.ent .entbtns{display:flex;gap:10px;margin-top:12px}
.ent .ebtn{flex:1;border:1px solid var(--hair);background:#fff;color:var(--ink);font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.5px;padding:12px 0;cursor:pointer}
.ent .ebtn.mut{color:var(--muted);border-color:var(--hair-soft)}
.ent .ebtn:active{background:var(--ink);color:#fff}

/* pastille de nature sur les cartes */
.ntag{display:inline-block;margin-left:8px;font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:2px 7px;border:1px solid var(--hair-soft);color:var(--muted);vertical-align:middle}
.ntag.off{background:var(--red);border-color:var(--red);color:#fff}

/* grille de cotes (relevé) */
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* chips d'échéance qualitative : un peu plus compacts */
.delaybar.qd{margin-top:8px}
.delaybar.qd .d{flex:none;padding:9px 11px;font-size:12px;font-weight:600;letter-spacing:0}

/* boutons "reprendre" (clairs) + marquage rapide tournée */
.qbtn.alt{background:#fff;color:var(--ink)}
.qbtn.alt:active{background:var(--red);border-color:var(--red);color:#fff}
.qmark{display:flex;gap:8px;margin:-6px 0 14px}
.qmark button{flex:1;border:1px solid var(--hair-soft);background:#fff;color:var(--muted);font-family:var(--ui);font-weight:700;font-size:12px;padding:8px 0;cursor:pointer}
.qmark button:active{background:var(--red);border-color:var(--red);color:#fff}

/* V5 — tableau de bord */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.kpi{background:#fff;border:1px solid var(--hair);padding:14px 16px;cursor:pointer}
.kpi .kn{font-size:30px;font-weight:900;line-height:1;letter-spacing:-1px}
.kpi .kl{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.kpi.red{border-color:var(--red)}.kpi.red .kn{color:var(--red)}
.barrow{padding:8px 0;cursor:pointer;border-bottom:1px solid var(--hair-soft)}
.barrow .bl{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:5px}
.barrow .bar{height:8px;background:#EAEFF5;overflow:hidden}
.barrow .bar span{display:block;height:100%;background:var(--ink)}

/* écran de verrou PIN */
.lock{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;gap:6px}
.lock .lockwm{font-family:var(--ui);font-weight:900;font-size:40px;letter-spacing:-1px;margin-bottom:8px}
.lock .pinf{max-width:200px;text-align:center;font-size:28px;letter-spacing:10px}
.lock .btn{max-width:240px}

/* bouton secondaire en ligne (projets) */
.rowbtn{border:1px solid var(--hair);background:#fff;color:var(--ink);font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.5px;padding:7px 10px;cursor:pointer;margin-left:8px}
.rowbtn:active{background:var(--red);border-color:var(--red);color:#fff}

/* V6 — punch-list sur plan */
.tools{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.tool{border:1px solid var(--hair);background:#fff;color:var(--ink);font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:.4px;padding:9px 12px;cursor:pointer}
.tool.on{background:var(--red);border-color:var(--red);color:#fff}
.planwrap{border:1px solid var(--hair);background:#fff;line-height:0;touch-action:none;overflow:hidden}
.planwrap canvas{display:block;width:100%;touch-action:none}
.planview{width:100%;border:1px solid var(--hair);margin-bottom:10px}
.planmini{display:flex;align-items:center;gap:10px;border:1px solid var(--hair);background:#fff;padding:8px;margin-bottom:10px;cursor:pointer}
.planmini img{width:64px;height:48px;object-fit:cover;border:1px solid var(--hair-soft);background:#f3f3f3}
.planmini span{font-size:13px;font-weight:600}

/* V7 — refonte */
.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.home-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px 10px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font-family:var(--ui);font-weight:800;font-size:16px;letter-spacing:.5px;cursor:pointer}
.home-cta .ic{font-size:26px;line-height:1}
.home-cta.primary{background:var(--ink);color:#fff}
.home-cta:active{background:var(--red);border-color:var(--red);color:#fff}
.echbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.echbar .d{flex:1;min-width:64px;text-align:center;border:1px solid var(--hair);background:#fff;padding:11px 8px;font-weight:700;font-size:14px;cursor:pointer}
.echbar .d.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.echbar.qd .d{font-size:12px;font-weight:600;min-width:auto}
.lbl .opt{font-weight:500;color:var(--muted);letter-spacing:0;text-transform:none}
details.details{border-top:1px solid var(--hair);margin-top:14px;padding-top:6px}
details.details>summary{list-style:none;cursor:pointer;font-family:var(--ui);font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:8px 0}
details.details>summary::-webkit-details-marker{display:none}
details.details>summary::before{content:'▸ ';color:var(--red)}
details.details[open]>summary::before{content:'▾ '}
details.details.sub{border-top:1px dashed var(--hair);margin-top:10px}
details.details.sub>summary{font-size:11px}

/* V7.001 — éditeur plan zoom */
.planwrap{max-height:62vh}
.planwrap canvas{touch-action:none}

/* V7.002 — swipe + bannières */
.swipe{position:relative;overflow:hidden;margin-bottom:10px}
.swipe .card{margin-bottom:0;position:relative;z-index:1;background:#fff;touch-action:pan-y;will-change:transform}
.swipe-bg{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 20px;font-family:var(--ui);font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .12s}
.swipe-bg.left{left:0;right:0;justify-content:flex-start;background:var(--red)}
.swipe-bg.right{left:0;right:0;justify-content:flex-end;background:var(--ink)}
.swipe.on-left .swipe-bg.left{opacity:1}
.swipe.on-right .swipe-bg.right{opacity:1}
.swipe.lvl2 .swipe-bg.right{background:var(--red)}
.banner.warn{background:#FBE9EC;border-left:3px solid var(--red)}

/* ===================== V8.000 — TEMPLATES DE SUJET ===================== */
.tools.tpl{display:flex;margin:0 0 14px;border:1.5px solid var(--ink);border-radius:10px;overflow:hidden}
.tools.tpl .tool{flex:1;padding:10px 4px;background:#fff;border:0;border-right:1.5px solid var(--ink);font-family:var(--ui);font-weight:700;font-size:13px;color:var(--ink);cursor:pointer}
.tools.tpl .tool:last-child{border-right:0}
.tools.tpl .tool.on{background:var(--ink);color:#fff}
.tpl-central{margin-top:2px}
.frise{display:flex;align-items:center;gap:6px;margin:4px 0 12px;flex-wrap:wrap}
.frise .step{font-family:var(--ui);font-weight:700;font-size:12px;color:#6C7480;padding:5px 11px;border:1.5px solid #CDD3DB;border-radius:20px}
.frise .step.on{color:var(--ink);border-color:var(--ink)}
.frise .step.cur{background:var(--red);border-color:var(--red);color:#fff}
.frise .sep{color:#9AA1AB;font-weight:800}
.warnbox{background:#FFF6E5;border-left:3px solid #E0A100;padding:9px 12px;border-radius:6px;font-size:13px;font-weight:600;color:#7A5A00;margin:0 0 12px}
.incpuce{margin-top:6px;font-size:12px;font-weight:700;color:var(--red)}