:root{
  --brand:#6F8F14;--brand-b:#84A82A;--ink:#16181c;--mut:#6b7066;--line:#e7e9e4;--bg:#f5f6f3;--card:#fff;
  --side:#1b1e24;--side-mut:#8a9099;--ok:#2f9e44;--warn:#e8873b;--err:#c0392b;--soft:#eef3e0;--radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;font-size:14.5px}
a{color:inherit;text-decoration:none}
h1{font-size:20px;font-weight:600}h2{font-size:16px;font-weight:600}h3{font-size:14px;font-weight:600}
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
/* ---- SIDEBAR ---- */
.side{background:var(--side);color:#fff;display:flex;flex-direction:column;padding:16px 12px calc(14px + env(safe-area-inset-bottom));position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.brand{font-size:20px;font-weight:700;letter-spacing:.5px;padding:6px 12px 20px;display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand small{display:block;font-size:9px;font-weight:500;letter-spacing:2px;color:var(--side-mut);text-transform:uppercase;margin-top:-2px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--brand-b);box-shadow:0 0 0 4px rgba(132,168,42,.25)}
.nav{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:6px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav-i{flex:0 0 auto}
.nav-i{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--side-mut);font-weight:500;transition:.12s}
.nav-i:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-i.on{background:var(--brand);color:#fff}
.nav-i .ic{font-size:16px;width:20px;text-align:center;filter:grayscale(.2)}
.nav-i.foot{margin-top:8px;border-top:1px solid rgba(255,255,255,.08);border-radius:0;padding-top:16px}
/* ---- TOPBAR ---- */
.main{display:flex;flex-direction:column;min-width:0}
.top{height:60px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:10}
.tools{display:flex;align-items:center;gap:16px}
.soc select{border:1px solid var(--line);border-radius:9px;padding:8px 12px;font:inherit;background:#fff;color:var(--ink);font-weight:500;cursor:pointer}
.me{display:flex;align-items:center;gap:10px}
.me .av{width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--brand);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:12px}
.me a{color:var(--mut);font-size:18px}
.content{padding:24px;max-width:1200px;width:100%}
/* ---- COMPOSANTS ---- */
.flash{padding:11px 15px;border-radius:10px;margin-bottom:16px;font-weight:500}
.flash.ok{background:var(--soft);color:#40620a}.flash.err{background:#fdeceb;color:var(--err)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.app{grid-template-columns:64px 1fr}.brand small,.nav-i span:not(.ic){display:none}.brand{font-size:0}.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card .hd{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
.card .hd h2{display:flex;align-items:center;gap:9px}
.card .hd .n{background:var(--soft);color:#40620a;font-size:12px;font-weight:700;border-radius:20px;padding:1px 9px}
.card .bd{padding:6px 16px 12px}
.empty{color:var(--mut);padding:14px 0;font-style:italic}
/* rangée d'item (dashboard/listes) */
.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .who{font-weight:600}.row .sub{color:var(--mut);font-size:13px}
.row .rt{margin-left:auto;display:flex;align-items:center;gap:8px}
.tag{font-size:11px;font-weight:700;border-radius:20px;padding:2px 9px;background:var(--soft);color:#40620a;white-space:nowrap}
.tag.warn{background:#fdf0e4;color:#a95a12}.tag.err{background:#fdeceb;color:var(--err)}.tag.mut{background:#eef0ec;color:var(--mut)}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;font-weight:600;border:none;border-radius:9px;padding:9px 14px;cursor:pointer;font:inherit;font-weight:600}
.btn:hover{background:var(--brand-b)}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.gh{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.gh:hover{border-color:var(--brand);color:var(--brand);background:#fff}
/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
@media(max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
.kpi .v{font-size:26px;font-weight:700;line-height:1}.kpi .l{color:var(--mut);font-size:12.5px;margin-top:5px}
.kpi.hot .v{color:var(--err)}
/* tables */
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);padding:11px 16px;border-bottom:1px solid var(--line);background:#fafbf9}
td{padding:12px 16px;border-bottom:1px solid var(--line)}tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbf9}
.pagehd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:16px}
.search{flex:1;max-width:340px}
.search input{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font:inherit}
/* jalons chantier */
.jal{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.jal .j{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mut)}
.jal .d{width:9px;height:9px;border-radius:50%;background:#d4d7d0}
.jal .d.ok{background:var(--ok)}.jal .d.now{background:var(--warn)}
/* forms */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;max-width:640px}
.f{margin-bottom:15px}.f label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin-bottom:5px}
.f input,.f select,.f textarea{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:9px;font:inherit}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--brand)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seg{display:inline-flex;background:#f0f1ee;border-radius:10px;padding:3px;gap:3px;margin-bottom:4px}
.seg label{padding:8px 14px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;color:var(--mut)}
.seg input{display:none}.seg input:checked+span{color:#fff}
.seg label:has(input:checked){background:var(--ink);color:#fff}
/* login */
body.bare{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--side)}
.login{background:#fff;border-radius:16px;padding:34px;width:360px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.login .lb{font-size:24px;font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.login .lb .dot{width:12px;height:12px;border-radius:50%;background:var(--brand-b)}
.login p.s{color:var(--mut);font-size:13px;margin-bottom:22px}
.login .btn{width:100%;justify-content:center;padding:12px;margin-top:6px}
.login .hint{margin-top:16px;font-size:12px;color:var(--mut);text-align:center;background:var(--soft);border-radius:9px;padding:9px}
.ph{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);padding:48px;text-align:center;color:var(--mut)}
.ph .e{font-size:40px;display:block;margin-bottom:10px}

/* ============ DEVIS ============ */
.pagehd{flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip-f{padding:7px 13px;border-radius:20px;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--mut);background:#fff}
.chip-f.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* liste devis */
.dlist{display:flex;flex-direction:column;gap:8px}
.dcard{display:grid;grid-template-columns:112px 1fr auto auto;gap:6px 14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.dcard:hover{border-color:var(--brand)}
.dl-num b{display:block;font-weight:700}.dl-num span{font-size:12px;color:var(--mut)}
.dl-cli{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-mt{font-weight:700;white-space:nowrap}.dl-st{white-space:nowrap}
/* formulaire devis */
.form-devis{max-width:780px}
.lignes{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.ligne{background:#fafbf9;border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:9px}
.l-des{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit}
.l-nums{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap}
.mini{display:flex;flex-direction:column;font-size:10px;letter-spacing:.3px;color:var(--mut);font-weight:700;text-transform:uppercase;gap:3px}
.mini input,.mini select{padding:8px 9px;border:1px solid var(--line);border-radius:7px;font:inherit;background:#fff}
.l-qte{width:56px}.l-pu{width:88px}.l-tva{width:66px}
.l-tot{margin-left:auto;font-weight:700;white-space:nowrap;align-self:center;padding-bottom:3px}
.l-x{background:none;border:none;color:var(--mut);cursor:pointer;font-size:15px;align-self:center;padding:6px}
.l-x:hover{color:var(--err)}
.ligne-add{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0 18px}
.l-cat{padding:9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;flex:1;min-width:190px}
.totaux{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.totaux div{display:flex;justify-content:space-between;gap:26px;min-width:230px}
.totaux span{color:var(--mut)}.totaux .ttc b{font-size:20px;color:var(--brand)}.totaux .ttc span{color:var(--ink);font-weight:600}
.actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
/* fiche devis */
.dv-card{max-width:780px}
.dv-head{display:flex;justify-content:space-between;gap:14px;padding:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dv-num{font-size:20px;font-weight:700}.dv-meta{text-align:right}
.dv-actions{display:flex;gap:8px;flex-wrap:wrap}
.dv-lines{padding:4px 16px}
.dv-lh{display:grid;grid-template-columns:1fr auto 110px;gap:14px;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--mut);padding:9px 0;border-bottom:1px solid var(--line)}
.dv-lh .r{text-align:right}
.dv-lr{display:grid;grid-template-columns:1fr auto 110px;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dv-lr:last-child{border-bottom:none}
.dv-lr .des{font-weight:600;min-width:0}.dv-lr .det{color:var(--mut);font-size:13px;white-space:nowrap}
.dv-lr .r{text-align:right}.dv-lr .tot{font-weight:700;white-space:nowrap}
.dv-tot{padding:14px 16px;border-top:2px solid var(--line);display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.dv-tot div{display:flex;justify-content:space-between;gap:26px;min-width:230px}
.dv-tot span{color:var(--mut)}.dv-tot .ttc b{font-size:20px;color:var(--brand)}.dv-tot .ttc span{color:var(--ink);font-weight:600}
.hint-mut{color:var(--mut);font-size:13px;margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;max-width:780px}

/* ============ RESPONSIVE tablette + mobile ============ */
@media(max-width:900px){.content{padding:18px}}
@media(max-width:640px){
  .crumb h1{font-size:17px}
  .top{padding:0 14px}
  .soc select{max-width:132px}
  .content{padding:14px}
  .dcard{grid-template-columns:1fr auto;row-gap:4px}
  .dl-num{grid-column:1;grid-row:1}
  .dl-st{grid-column:2;grid-row:1;justify-self:end}
  .dl-cli{grid-column:1/-1;grid-row:2;white-space:normal}
  .dl-mt{grid-column:1/-1;grid-row:3;font-size:16px}
  .dv-head{flex-direction:column}.dv-meta{text-align:left}
  .dv-lh{display:none}
  .dv-lr{grid-template-columns:1fr auto;gap:4px 12px}
  .dv-lr .des{grid-column:1/-1}
  .dv-lr .det{grid-column:1;font-size:12px}
  .dv-lr .tot{grid-column:2;justify-self:end}
  .totaux div,.dv-tot div{min-width:100%}
}

/* ============ CHANTIERS ============ */
.chlist{display:flex;flex-direction:column;gap:12px}
.chcard{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.chcard:hover{border-color:var(--brand)}
.ch-top{display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:12px}
.ch-id{font-size:15px}.ch-id b{font-weight:700}
.ch-meta{display:flex;align-items:center;gap:12px}.ch-meta b{white-space:nowrap}
.track{display:flex;gap:6px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:20px;background:#f4f5f2}
.step .d{width:10px;height:10px;border-radius:50%;background:#cdd0ca;flex:0 0 auto}
.step .lb{color:var(--mut);white-space:nowrap;font-size:12px}
.step .dt{color:var(--mut);font-size:11px;opacity:.75}
.step.done{background:var(--soft)}.step.done .d{background:var(--ok)}.step.done .lb{color:#40620a;font-weight:600}
.step.now{background:#fdf0e4}.step.now .d{background:var(--warn);box-shadow:0 0 0 3px rgba(232,135,59,.2)}.step.now .lb{color:#a95a12;font-weight:600}
.ch-pose{margin-top:10px;font-size:13px;color:var(--mut)}
.ch-head-card{padding:16px}
.ch-hh{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ch-num{font-size:20px;font-weight:700}.ch-mt{font-size:18px;font-weight:700;margin-top:4px}
.jalons{display:flex;flex-direction:column;gap:8px;max-width:560px}
.jrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 14px;margin:0}
.jrow.now{border-color:var(--warn);background:#fffaf5}.jrow.done{background:#fbfdf7}
.jbtn{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:#fff;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;padding:0}
.jrow.done .jbtn{background:var(--ok);border-color:var(--ok)}.jrow.now .jbtn{border-color:var(--warn)}
.jinfo{flex:1;min-width:0}.jl{font-weight:600}.jt{font-size:12px;color:var(--mut)}
.ch-pose-card{margin-top:18px;padding:16px}
.poseform{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.poseform label{font-weight:600;font-size:13px}
.poseform input[type=date]{padding:8px 11px;border:1px solid var(--line);border-radius:9px;font:inherit}

/* ============ INTERVENTIONS / BON ============ */
.iv-head{padding:16px}
.iv-hh{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.iv-type{font-size:17px;font-weight:700}
.iv-notes{margin-top:10px;background:#fafbf9;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13px;color:var(--mut)}
.bon-bd{padding:14px 16px}
.bon-sec{margin-bottom:12px}
.bon-lb{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--mut);font-weight:700;margin-bottom:3px}
.bon-tx{font-size:14px}
.sigs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.sig img{max-width:100%;border:1px solid var(--line);border-radius:8px;background:#fff}
.sig-in label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin-bottom:5px}
.pad{border:1px dashed var(--line);border-radius:8px;background:#fff;touch-action:none;width:100%;max-width:340px;height:130px;display:block;margin-bottom:8px;cursor:crosshair}
.cloture-cta{margin-top:18px;padding:16px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--soft);border-color:var(--brand)}
.avis-msg{background:#fafbf9;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:13.5px;margin-bottom:12px;white-space:pre-line}
.avis-send{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.avis-warn{font-size:11.5px;color:var(--mut);background:#fff7ed;border:1px solid #f5d9b8;border-radius:8px;padding:8px 10px;line-height:1.4}
@media(max-width:560px){.sigs{grid-template-columns:1fr}.cloture-cta{flex-direction:column;align-items:stretch}}

/* ============ RELANCES ============ */
.rbd{padding:4px 16px 10px}
.rrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:none}
.ri{font-size:19px;flex:0 0 auto;width:26px;text-align:center}
.rc{flex:1;min-width:0}
.rc .who{font-weight:600}.rc .sub{color:var(--mut);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ra{display:flex;align-items:center;gap:6px;flex:0 0 auto;justify-content:flex-end}
.ra form{margin:0}
.rb{display:inline-flex;align-items:center;justify-content:center;padding:6px 11px;border-radius:8px;font-size:12px;font-weight:700;background:var(--soft);color:#40620a;border:none;cursor:pointer;font-family:inherit;white-space:nowrap}
.rb:hover{background:#e2ecc9}
.rb.wa{background:#25D366;color:#fff}.rb.wa:hover{background:#20bd5a}
.rb.gh{background:#fff;border:1px solid var(--line);color:var(--mut)}
.rb.ok{background:var(--ink);color:#fff;width:32px;padding:6px 0}.rb.ok:hover{background:#000}
@media(max-width:560px){
  .rrow{flex-wrap:wrap}
  .rc{flex-basis:calc(100% - 38px)}
  .ra{flex-basis:100%;justify-content:flex-start;padding-left:38px;margin-top:2px}
}

/* ============ FACTURES ============ */
.pay-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.pay-form input{flex:1;min-width:110px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit}
.pay-form select{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff}
.facturx-card .bd{padding:14px 16px}

/* ============ PARAMÈTRES ============ */
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.ptab{padding:9px 14px;border-radius:10px;font-weight:600;font-size:13.5px;color:var(--mut);background:#fff;border:1px solid var(--line)}
.ptab:hover{border-color:var(--brand);color:var(--brand)}
.ptab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.form h3{font-size:15px;font-weight:700}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.pager{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:18px}
.pager .pg{color:var(--mut);font-size:13px}
.mentions{padding:12px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--mut);line-height:1.5}

/* ============ PORTAIL CLIENT PRO ============ */
body.portail{background:var(--bg)}
.pt-app{min-height:100vh;display:flex;flex-direction:column}
.pt-top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.pt-in{max-width:960px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:22px;height:60px}
.pt-brand{font-weight:700;font-size:17px;display:flex;align-items:center;gap:9px;white-space:nowrap}
.pt-brand small{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--mut);text-transform:uppercase}
.pt-brand .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.pt-nav{display:flex;gap:4px;flex:1;overflow-x:auto}
.pt-i{padding:8px 13px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--mut);white-space:nowrap}
.pt-i:hover{background:var(--bg);color:var(--ink)}
.pt-i.on{background:var(--brand);color:#fff}
.pt-me{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:13px;white-space:nowrap}
.pt-me a{font-size:17px}
.pt-content{flex:1;max-width:960px;width:100%;margin:0 auto;padding:24px 20px}
.pt-title{margin-bottom:16px}
.pt-foot{max-width:960px;width:100%;margin:0 auto;padding:16px 20px 26px;color:var(--mut);font-size:12px;border-top:1px solid var(--line)}
@media(max-width:640px){.pt-in{flex-wrap:wrap;height:auto;padding:10px 14px;gap:8px}.pt-nav{order:3;flex-basis:100%}.pt-me{margin-left:auto}.pt-content{padding:18px 14px}}