:root{--bg:#f3f4f6;--card:#fff;--ink:#1f2937;--mute:#6b7280;--line:#e5e7eb;--acc:#1d4ed8;--acc2:#dbeafe;--ok:#047857;--warn:#b45309;--bad:#b91c1c;--side:#1e293b}
*{box-sizing:border-box}
body{margin:0;font:14px/1.4 "Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
#app{display:flex;min-height:100vh;background:linear-gradient(to right,var(--side) 210px,var(--bg) 210px)}
#side{width:210px;background:var(--side);color:#cbd5e1;padding:12px 0;position:sticky;top:0;height:100vh;flex-shrink:0;overflow:auto}
#side .brand{color:#fff;padding:6px 16px 16px;font-size:17px;line-height:1.2}
#side a{display:block;padding:9px 16px;cursor:pointer;color:#cbd5e1;text-decoration:none}
#side a:hover{background:#334155}
#side a.on{background:var(--acc);color:#fff}
#dirstate{margin:16px 12px;font-size:12px;padding:8px;border-radius:6px;background:#334155}
#dirstate button{margin-top:6px;width:100%}
main{flex:1;padding:20px 24px;min-width:0}
h1{font-size:22px;margin:0 0 14px}
h2{font-size:16px;margin:18px 0 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row>label{flex:1;min-width:150px}
label{display:block;font-size:12px;color:var(--mute)}
label input,label select,label textarea{display:block;width:100%;margin-top:2px}
input,select,textarea{font:inherit;padding:6px 8px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;color:var(--ink)}
input:disabled,select:disabled,textarea:disabled{background:#f9fafb;color:#374151}
textarea{resize:vertical}
button{font:inherit;padding:7px 12px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;cursor:pointer;color:var(--ink)}
button:hover{background:#f1f5f9}
button.p{background:var(--acc);border-color:var(--acc);color:#fff}
button.p:hover{background:#1e40af}
button.ok{background:var(--ok);border-color:var(--ok);color:#fff}
button.bad{color:var(--bad);border-color:#fca5a5}
button.sm{padding:3px 7px;font-size:12px}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.bar .sp{flex:1}
table.list{width:100%;border-collapse:collapse;background:#fff}
table.list th,table.list td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.list th{font-size:12px;color:var(--mute);font-weight:600;background:#f9fafb}
table.list tr.click:hover td{background:#eff6ff;cursor:pointer}
.r{text-align:right!important}
.badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:#e5e7eb}
.b-brouillon{background:#e5e7eb}.b-envoye{background:#dbeafe;color:#1e40af}.b-accepte{background:#d1fae5;color:#065f46}
.b-refuse{background:#fee2e2;color:#991b1b}.b-facture{background:#ede9fe;color:#5b21b6}.b-validee{background:#fef3c7;color:#92400e}
.b-payee{background:#d1fae5;color:#065f46}.b-partielle{background:#ffedd5;color:#9a3412}
.mute{color:var(--mute)}
.lines{width:100%;border-collapse:collapse}
.lines th{font-size:12px;color:var(--mute);text-align:left;padding:4px;background:#f9fafb;border-bottom:1px solid var(--line)}
.lines td{padding:3px;border-bottom:1px solid var(--line);vertical-align:top}
.lines input,.lines textarea,.lines select{width:100%;padding:4px 5px}
.rt{min-height:32px;padding:4px 5px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;white-space:pre-wrap;word-break:break-word;outline:none;font:inherit}
.rt:focus{border-color:#2563eb;box-shadow:0 0 0 2px #bfdbfe}
.rt[data-disabled]{background:#f9fafb;color:#374151}
.rt:empty:before{content:attr(data-ph);color:#9ca3af}
label .rt{display:block;margin-top:2px}
.fmtbar{float:right;margin-top:-2px}.fmtbar button{padding:0 6px;font-size:12px}
.lines tr.section td{background:#eff6ff}
.lines tr.section input{font-weight:700;text-transform:uppercase}
.lines tr.texte td{background:#fffbeb}
.lines .num{width:34px;color:var(--mute);text-align:center;padding-top:8px}
.lines .act{white-space:nowrap;width:96px}
.tot{margin-left:auto;width:320px}
.tot div{display:flex;justify-content:space-between;padding:3px 0}
.tot .big{font-weight:700;font-size:16px;border-top:2px solid var(--ink);margin-top:4px;padding-top:6px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px}
.kpi b{display:block;font-size:20px;margin-top:4px}
.hidden{display:none!important}
#modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:flex-start;justify-content:center;padding-top:6vh;z-index:10}
#modal .box{background:#fff;border-radius:10px;width:min(760px,94vw);max-height:86vh;overflow:auto;padding:18px}
#toast{position:fixed;bottom:18px;right:18px;background:#111827;color:#fff;padding:10px 16px;border-radius:6px;z-index:20}
.warnbox{background:#fffbeb;border:1px solid #fcd34d;padding:10px 12px;border-radius:6px;margin-bottom:12px}
.lockbox{background:#f0fdf4;border:1px solid #86efac;padding:10px 12px;border-radius:6px;margin-bottom:12px}
.pick{border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin-bottom:6px;cursor:pointer}
.pick:hover{background:#eff6ff;border-color:#93c5fd}
.saved{font-size:12px;color:var(--ok)}

@media (max-width:800px){
  #app{flex-direction:column;background:var(--bg)}
  #side{width:100%;height:auto;position:sticky;top:0;z-index:5;display:flex;overflow-x:auto;padding:4px 0;white-space:nowrap}
  #side .brand{padding:6px 10px;font-size:14px}#side .brand div{display:none}
  #side a{padding:10px 10px;flex-shrink:0}
  #dirstate{display:none}
  main{padding:14px 12px}
  .lines thead,.lines tr>th{font-size:11px}
  .lines .act{width:auto}
  .tot{width:100%}
  #modal .box{width:100%;max-height:92vh;padding:14px}
}
body.ro .warnbox{display:none}
#legallinks a{display:inline;padding:0;color:#94a3b8}#legallinks a:hover{background:none;text-decoration:underline}


/* Appli installée (PWA) et mode hors ligne */
#pwainstall{color:#fde68a!important;font-weight:600}
#offbar{background:#fef3c7;color:#92400e;border-bottom:1px solid #fcd34d;padding:8px 14px;font-size:13px;text-align:center}
#offbar.back{background:#d1fae5;color:#065f46;border-color:#6ee7b7}
html.pwa body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
@supports (-webkit-touch-callout:none){@media (max-width:800px){input,select,textarea,.rt{font-size:16px}}}
#offbar.abo{background:#eff6ff;color:#1e3a8a;border-color:#bfdbfe}
#offbar.abo.fin{background:#fef3c7;color:#92400e;border-color:#fcd34d}
#offbar .sm{margin-left:8px}