/* Poste de travail à trois volets : estimations, saisie, résultat. Charte de scaliance.com : orange C95A23, ardoise 4A5656, crème F2EFE8, Area Normal. La teinte orangée marque ce qui se saisit. */
@font-face{font-family:"Area Normal";src:url("brand/AreaNormal-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Area Normal";src:url("brand/AreaNormal-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
:root{
  color-scheme:light;
  --bg:#f2efe8;--panel:#fbfaf6;--ink:#4a5656;--muted:#667171;--line:#ddd8cc;--soft:#ece8de;
  --hero:#4a5656;--hero-ink:#ffffff;--hero-muted:#d3d9d6;--hero-line:#667171;
  --edit:#fbf1e7;--edit-line:#e6c6ab;--edit-label:#a5481a;
  --pos:#2f7d5b;--neg:#b23a2e;--warn:#a5651a;--pos-h:#b6ecd2;--neg-h:#ffc4ba;--warn-h:#f8d6a8;
  --sel:#e8e3d7;--btn:#c95a23;--btn-ink:#ffffff;--accent:#c95a23;--accent-ink:#a5481a;
  --font:"Area Normal","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:13px;line-height:1.4;font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
header{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--panel);border-bottom:1px solid var(--line)}
.logo{height:22px;width:auto;display:block}
.tname{color:var(--muted);font-size:12px}
.status{margin-left:auto;font-size:11.5px;color:var(--muted)}
main{display:grid;grid-template-columns:270px minmax(0,1fr) 350px;gap:16px;align-items:start;padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1560px;margin-inline:auto}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
h2{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:500}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.full{grid-column:1/-1}
label{display:block;font-weight:500;font-size:11.5px;margin-bottom:5px}
input[type=text],input[type=number],input[type=search],select{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.ed label{color:var(--edit-label)}
.ed input{background:var(--edit);border-color:var(--edit-line)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.seg{display:flex;background:var(--soft);padding:3px;border-radius:9px;gap:3px;margin-bottom:14px}
.seg button{flex:1;padding:8px;border:0;background:transparent;border-radius:7px;font-weight:500;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.lab-row{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.link{border:0;background:none;padding:0;font-size:11px;font-weight:500;text-decoration:underline;cursor:pointer;color:var(--accent-ink)}
.hint{font-size:11px;color:var(--muted);margin:5px 0 0}
/* Liste */
#list{display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 210px);overflow:auto;margin-top:10px}
.row{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:8px 9px;cursor:pointer}
.row:hover{background:var(--soft)}
.row.on{background:var(--sel)}
.row b{display:block;font-weight:500;overflow-wrap:anywhere}
.row small{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}
.vers{display:flex;flex-direction:column;margin:0 0 6px 9px;border-left:2px solid var(--line);padding-left:6px}
.vers button{border:0;background:none;text-align:left;font-size:11px;padding:3px 6px;border-radius:5px;cursor:pointer;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.vers button:hover{background:var(--soft)}
.vers button.on{color:var(--ink);font-weight:500;background:var(--sel)}
.btn{padding:7px 10px;border-radius:8px;font-weight:500;cursor:pointer;border:1px solid var(--line);background:var(--panel)}
.btn:hover{background:var(--soft)}
.btn.main{background:var(--btn);color:var(--btn-ink);border-color:var(--btn);border-radius:999px;letter-spacing:.02em}
.btn.main:hover{opacity:.88;background:var(--btn)}
.btn.danger{color:var(--neg)}
.btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.btns .wide{grid-column:1/-1}
/* Résultat */
.hero{background:var(--hero);color:var(--hero-ink);border-radius:12px;padding:16px}
.hero .k{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--hero-muted)}
.hero .big{font-size:28px;font-weight:500;letter-spacing:-.01em;margin:2px 0 14px}
.hero .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-top:1px solid var(--hero-line);padding-top:12px}
.hero .v{font-size:15.5px;font-weight:500;margin-top:2px}
.pct{display:inline-block;font-size:11px;font-weight:500;background:rgba(0,0,0,.2);border-radius:5px;padding:1px 6px;margin-top:3px}
.pct.g{color:var(--pos-h)}.pct.a{color:var(--warn-h)}.pct.r{color:var(--neg-h)}
.hero .sub{border-top:1px solid var(--hero-line);margin-top:12px;padding-top:10px;display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--hero-muted)}
.hero .sub b{color:var(--hero-ink);font-weight:500;white-space:nowrap}
.line{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed var(--line)}
.line span:first-child{color:var(--muted)}
.line span:last-child{font-weight:500;white-space:nowrap}
.line.dont{border:0;padding:1px 0 1px 12px;font-size:11.5px}
.line.dont span:last-child{font-weight:500;color:var(--muted)}
.tot{background:var(--soft);border:0;border-radius:6px;padding:7px 8px;margin:4px 0}
.grand{border:0;border-top:2px solid var(--accent);margin-top:8px;padding-top:9px;font-size:14px}
.pos{color:var(--pos)}.neg{color:var(--neg)}
.old{margin:12px 0 0;font-size:11px;color:var(--muted);background:var(--soft);padding:8px 10px;border-radius:7px}
#notice{font-size:11.5px;margin:10px 0 0;color:var(--muted);min-height:1em}
.confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11.5px;grid-column:1/-1}
@media (max-width:1240px){main{grid-template-columns:minmax(0,1fr) 340px}.lst{grid-column:1/-1}#list{max-height:230px}}
@media (max-width:800px){main{grid-template-columns:minmax(0,1fr)}.grid2{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:no-preference){.row,.btn{transition:background .12s}}
html,body{margin:0}
body{min-height:100vh}
.nomargin{margin:0}.mb4{margin-bottom:4px}.mt10{margin-top:10px}.mt14{margin-top:14px}
.impbtn{margin:0;text-align:center;font-size:13px;font-weight:500;cursor:pointer}
.gate{display:grid;place-items:center;padding:64px 16px}
.gatebox{max-width:420px;width:100%;display:flex;flex-direction:column;gap:12px}
.gatebox h1{margin:0;font-size:19px}
.gatebox p{margin:0;color:var(--muted)}
#logout{font-size:11.5px}
textarea{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font:inherit;color:inherit;resize:vertical;min-height:48px}
.gatelogo{height:26px;width:auto;align-self:flex-start;margin-bottom:6px}
.totals{margin-top:10px;background:var(--soft);border-radius:8px;padding:9px 10px;font-size:11.5px}
.totals div{display:flex;justify-content:space-between;gap:8px}
.totals b{font-weight:500;white-space:nowrap}
.badge{display:inline-block;font-size:10px;color:var(--accent-ink);margin-left:6px}
.foot{padding:4px 16px 20px;text-align:center;font-size:10.5px;color:var(--muted)}
.hero .sub + .sub{border-top:0;margin-top:0;padding-top:4px}
.niveau{margin:10px 0 0;font-size:11.5px;line-height:1.35}
.niveau.g{color:var(--pos-h)}.niveau.a{color:var(--warn-h)}.niveau.r{color:var(--neg-h)}