:root{--hov:#F7F4EF;--sel:#EDE7DE;--wash:#F7F4EF;--bg:#EFEBE4;--card:#fff;--ink:#1E2322;--ink2:#5B6563;--ink3:#8E9794;--line:#DFD8CE;
 --atelier:#db8c65;--design:var(--acc,#3a7c88);--maison:#345c72;--crayon:#bf6d62}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.5 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
header{display:flex;align-items:center;gap:12px;position:relative;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:5}
.pjbox{position:relative}
.pjbtn{font:inherit;font-weight:600;background:transparent!important;color:inherit;border:0!important;border-radius:999px;padding:6px 14px!important;display:inline-flex;align-items:center;gap:9px;max-width:min(44vw,380px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;position:relative;text-align:left}
.pjbtn::after{content:"";position:static;flex:none;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.pjmenu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:min(80vw,420px);background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.22);padding:6px;z-index:60;display:none;max-height:70vh;overflow:auto}
.pjbox.open .pjmenu{display:block}
.pjmenu a{display:block;padding:8px 12px;border-radius:8px;font-size:13.5px;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pjmenu a:hover{background:var(--line2)}
.pjmenu a.on,.pjmenu a.on:hover{background:#2a2e30;color:#fff}
.wordmark{font-weight:700;font-size:18px;letter-spacing:-.02em}
.wordmark small{font-weight:500;color:var(--ink3);font-size:12px;margin-left:8px}
.avbtn{width:30px;height:30px;border-radius:50%;overflow:hidden;border:1px solid var(--line);padding:0;background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.spacer{flex:1}
.who{font-size:12.5px;color:var(--ink2)}
main{max-width:1020px;margin:0 auto;padding:20px 18px 60px;display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:18px}
@media(max-width:760px){main{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:18px;overflow:hidden}
.hd{display:flex;align-items:baseline;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.hd h2{font-size:13.5px;font-weight:600}
.hd .sub{font-size:11.5px;color:var(--ink3)}
.pad{padding:14px 16px}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:7px 13px;font:inherit;font-size:13px;cursor:pointer}
.btn:hover{border-color:#cfc9c0}
.btn.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.sm{padding:4px 9px;font-size:12px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:baseline}
label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);margin:12px 0 4px}
input,select,textarea{width:100%;font:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
select,::picker(select){appearance:base-select}
select{white-space:nowrap}
::picker(select){border-radius:10px;border:1px solid var(--line);background:var(--card);box-shadow:0 14px 40px rgba(0,0,0,.14);padding:4px;margin-top:4px}
select option{padding:6px 10px;border-radius:6px;cursor:pointer}
select option{background:var(--card);color:var(--ink)}
select option:hover,select option:focus{background:var(--hov)}
select option:checked{background:var(--sel);font-weight:600}
input:focus,select:focus,textarea:focus{outline:2px solid #d8d2c8;border-color:#cfc9c0}
.entrow{display:flex;gap:8px;flex-wrap:wrap}
.entbtn{flex:1;min-width:100px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;padding:9px 6px;font:inherit;font-size:12.5px;cursor:pointer;text-align:center}
.entbtn.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:600}
.qrow{display:flex;gap:8px}
.qbtn{flex:1;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;padding:8px 4px;font:inherit;cursor:pointer;text-align:center}
.qbtn b{display:block;font-size:14px}
.qbtn small{color:var(--ink3);font-size:11px}
.qbtn.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cal{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{font-size:10.5px;color:var(--ink3);font-weight:500;padding:4px 0;text-transform:uppercase}
.cal td{text-align:center;padding:2px;height:52px;vertical-align:top}
.day{width:100%;height:100%;border:1px solid transparent;border-radius:9px;background:none;font:inherit;color:var(--ink);cursor:pointer;padding:4px 2px}
.day:hover{border-color:var(--line)}
.day.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.day.today .num{font-weight:700;text-decoration:underline}
.day .num{font-size:12.5px}
.day .hh{display:block;font-size:10.5px;color:var(--bg);background:var(--ink);border-radius:6px;margin-top:3px;padding:0 2px}
.day.off{opacity:.45}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px}
.stat{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.stat .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.stat .v{font-size:19px;font-weight:700;margin-top:2px}
.stat .s{font-size:11.5px;color:var(--ink3)}
table.hist{width:100%;border-collapse:collapse}
table.hist td{padding:8px 16px;border-top:1px solid var(--line);font-size:13px}
table.hist td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{padding:22px 16px;color:var(--ink3);font-size:13px;text-align:center}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 14px}
.chip{font-size:12px;border:1px solid var(--line);border-radius:99px;padding:3px 10px;color:var(--ink2)}
#login{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:50}
#login .box{width:min(360px,92vw);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:9px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:60}
.mnav{display:flex;align-items:center;gap:8px}
.mnav b{font-size:13.5px;min-width:130px;text-align:center;text-transform:capitalize}
.menuwrap{position:relative}
.menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.12);display:none;min-width:210px;z-index:45;overflow:hidden}
#appmenu{min-width:274px}
#appmenu a{white-space:nowrap}
.menu .grp,.chmenu .grp{margin-top:11px}
.menu a{display:block;padding:10px 14px;color:var(--ink);text-decoration:none;font-size:13px}
.menu a:hover{background:var(--hov)}
.menu a.here{font-weight:600;background:var(--sel)}
.menu .grp{padding:8px 14px 2px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}

.del{color:#9c3f3f;cursor:pointer;font-size:12px;background:none;border:none;font-family:inherit}

/* ===== Style « Aethos », même charte que le Hub, bascule partagée ===== */
body.aethos{--bg:#EFEBE4;--card:#ffffff;--ink:#1E2322;--ink2:#5B6563;--ink3:#8E9794;--line:#DFD8CE}
body.aethos header{background:#1E2322;border-bottom:none;color:#fff}
body.aethos .wordmark{color:#fff}
/* En Classique l'en-tete est noir, le petit nom s'ecrit donc en blanc. Epure et
   Studio portent aussi la classe « aethos » mais ont un en-tete clair : la regle
   y rendait le nom de l'application blanc sur blanc, donc invisible. */
body.aethos:not(.t-epure):not(.t-studio) .wordmark small{color:rgba(255,255,255,.55)}
body.aethos .who{color:rgba(255,255,255,.7)}
body.aethos header .btn{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
body.aethos header .btn:hover{background:rgba(255,255,255,.12)}
body.aethos header .avbtn{border-color:rgba(255,255,255,.45);background:transparent;color:#fff}
body.aethos .card{border:none;border-radius:18px;box-shadow:0 2px 12px rgba(42,46,48,.08)}
body.aethos .btn{border-radius:999px}
body.aethos .btn:hover{border-color:var(--acc,#3a7c88);background:#fdefe8}
body.aethos .btn.pri{background:var(--acc,#3a7c88);border-color:var(--acc,#3a7c88);color:#fff;font-weight:600}
body.aethos .btn.pri:hover{background:#e05a28}
body.aethos .entbtn,body.aethos .qbtn{border-radius:12px}
body.aethos .entbtn.on,body.aethos .qbtn.on{border-color:var(--acc,#3a7c88);box-shadow:inset 0 0 0 1px var(--acc,#3a7c88)}
body.aethos .day{border-radius:11px}
body.aethos .day.sel{border-color:var(--acc,#3a7c88);box-shadow:inset 0 0 0 1px var(--acc,#3a7c88)}
body.aethos .day .hh{background:var(--acc,#3a7c88)}


/* ===== Thèmes supplémentaires ===== */
body.t-nuit{--hov:#2c2f31;--sel:#3a3f43;--wash:#26292c;--bg:#191b1d;--card:#232628;--ink:#eceae5;--ink2:#c2bfb8;--ink3:#9b988f;--line:#34383b;--line2:#2c2f31;--ok:#5abf8a;--okbg:#1e3228;--warn:#d9a75a;--warnbg:#372e1c;--neut:#9a958d;--neutbg:#2c2f31}
body.t-nuit header{background:#101214}
body.t-nuit input,body.t-nuit select{background:#2b2e31;color:var(--ink);border-color:#3d4144}
body.t-nuit .card{box-shadow:0 2px 14px rgba(0,0,0,.5)}
body.t-nuit .btn.pri{background:var(--acc,#3a7c88);border-color:var(--acc,#3a7c88);color:#fff}
body.t-nuit label{color:var(--ink2)}
body.t-nuit ::placeholder{color:#918e86}
body.t-nuit .qbtn small{color:var(--ink2)}
body.t-nuit .qbtn{border-color:#41454a}
body.t-nuit .entbtn{border-color:#41454a}
body.t-nuit .qbtn:hover,body.t-nuit .entbtn:hover{background:var(--hov)}
body.t-nuit input::-webkit-calendar-picker-indicator{filter:invert(.8)}

/* ---------- Épuré : la clarté des sites Apple et Pixel. Beaucoup de blanc, des angles très arrondis,
   pas de traits durs, une seule couleur d'action, une typographie serrée et sombre. ---------- */
body.t-epure{--bg:#f5f5f7;--card:#ffffff;--ink:#1d1d1f;--ink2:#424245;--ink3:#86868b;
 --line:#e5e5ea;--line2:#f1f1f4;--acc:#3a7c88;--hov:#f0f0f3;--wash:#fafafb;--sel:#E4EEF0;--rad:14px;
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 letter-spacing:-.011em}

/* ---------- Studio : l'entre-deux. Ni le noir de Classique, ni le blanc froid d'Épuré.
   Un gris chaud de papier, des encres profondes mais pas noires, des traits doux.
   Il reprend les formes d'Épuré (angles arrondis, chrome léger) et n'en change
   que la palette : le corps porte donc les deux classes. ---------- */
body.t-studio{--bg:#F1F0EC;--card:#FFFFFF;--ink:#262A2C;--ink2:#565E61;--ink3:#8D9499;
 --line:#E1DFD9;--line2:#EDEBE5;--acc:#3a7c88;--hov:#EDEBE6;--wash:#FAF9F6;--sel:#E4EEF0;--rad:12px;
 letter-spacing:-.005em}
body.t-studio .card{box-shadow:0 1px 2px rgba(38,42,44,.04),0 8px 22px -18px rgba(38,42,44,.30)}

body.t-epure h1,body.t-epure h2,body.t-epure h3,body.t-epure h4{letter-spacing:-.022em;font-weight:600}
body.t-epure .card,body.t-epure .hcard,body.t-epure .gc{border:0;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05)}
body.t-epure .kpi{border:0;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 18px rgba(0,0,0,.045)}
body.t-epure .modal{border:0;border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.18)}
body.t-epure .btn,body.t-epure .rbtn{border-radius:980px;border-color:var(--line);font-weight:500}
body.t-epure .btn:hover,body.t-epure .rbtn:hover{background:var(--hov);border-color:#dcdce1}
body.t-epure .btn.pri{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:500}
body.t-epure .btn.pri:hover{background:#2f6a76;border-color:#2f6a76}
body.t-epure input,body.t-epure select,body.t-epure textarea{border-radius:12px;border-color:var(--line);background:var(--card)}
body.t-epure input:focus,body.t-epure select:focus,body.t-epure textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(65,123,116,.18);outline:0}
body.t-epure .seg{border-radius:980px;background:var(--hov);border:0;padding:2px}
body.t-epure .seg button{border-radius:980px;border:0;font-weight:500}
body.t-epure .seg button.on{background:var(--acc);color:#fff;font-weight:600;box-shadow:none}
body.t-epure .pill,body.t-epure .tag,body.t-epure .oc-tag,body.t-epure .chip,body.t-epure .st,body.t-epure .ct{border-radius:980px}
body.t-epure table th{background:transparent;border-bottom:1px solid var(--line);color:var(--ink3);font-weight:500;text-transform:none;letter-spacing:0}
body.t-epure table tr.tot td,body.t-epure table tr.tot th{background:transparent;border-top:1px solid var(--line)}
body.t-epure .hd{border-bottom:1px solid var(--line2)}
body.t-epure .sub{color:var(--ink3)}
body.t-epure .ico{border-radius:980px}
body.t-epure .swrow .sw i,body.t-epure .sw i{border-radius:980px}
body.t-epure table td{border-bottom:1px solid var(--line2)}
body.t-epure table td,body.t-epure table th{border-left:0;border-right:0}
body.t-epure .hint,body.t-epure .empty{border-radius:12px;color:var(--ink3)}
body.t-epure .menu,body.t-epure .ctx,body.t-epure .chmenu,body.t-epure .pjmenu{border-radius:14px;border:0;box-shadow:0 12px 40px rgba(0,0,0,.16)}
body.t-epure a{color:var(--ink)}
body.t-epure .rowlink{color:var(--ink)}
body.t-epure a:hover{color:var(--ink)}
body.t-epure header{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);color:var(--ink)}
body.t-epure .wordmark,body.t-epure .who,body.t-epure .logo{color:var(--ink);font-weight:600;letter-spacing:-.022em}
body.t-epure header .btn,body.t-epure header .avbtn,body.t-epure header select{color:var(--ink);border-color:var(--line);background:var(--card)}
body.t-epure header .btn:hover{background:var(--hov)}

body.t-calque{--bg:#f7f5f0;--card:#fdfcf9;--ink:#26241f;--ink2:#565248;--ink3:#8f8a7f;--line:#d8d2c4;--line2:#eae5da}
body.t-calque header{background:var(--bg);border-bottom:1px solid var(--ink);color:var(--ink)}
body.t-calque .wordmark,body.t-calque .who{color:var(--ink)}
body.t-calque header .btn,body.t-calque header .avbtn{color:var(--ink);border-color:rgba(38,36,31,.35);background:transparent}
body.t-calque .card{border:1px solid var(--line);border-radius:4px;box-shadow:none}
body.t-calque .btn{border-radius:3px}
body.t-calque .btn.pri{background:#35635E;border-color:#35635E;color:#fff}
body.t-beton{--bg:#e6e6e3;--card:#f2f2ef;--ink:#141414;--ink2:#3b3b39;--ink3:#6f6f6c;--line:#bdbdb7;--line2:#d8d8d3}
body.t-beton header{background:#141414}
body.t-beton .card{border:1.5px solid #141414;border-radius:0;box-shadow:5px 5px 0 rgba(20,20,20,.85)}
body.t-beton .btn,body.t-beton input,body.t-beton select{border-radius:0}
body.t-beton .btn.pri{background:#ff4f00;border-color:#141414;color:#141414;font-weight:700}
body.t-riviera{--bg:#f6f2e8;--card:#fffdf8;--ink:#2c3226;--ink2:#535a48;--ink3:#8b9080;--line:#e0dac6;--line2:#eee9da}
body.t-riviera header{background:#3d4a33}
body.t-riviera .btn.pri{background:#c4562e;border-color:#c4562e;color:#fff}

/* ===== Thème Affiche ===== */
body.t-affiche{--bg:#efede7;--card:#ffffff;--ink:#101010;--ink2:#33322e;--ink3:#6f6d66;--line:#101010;--line2:#e2dfd6}
body.t-affiche header{background:#101010}
body.t-affiche .card{border:2px solid #101010;border-radius:14px;box-shadow:6px 6px 0 #101010}
body.t-affiche .btn{border:2px solid #101010;color:#101010;font-weight:700}
body.t-affiche header .btn{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
body.t-affiche .btn.pri{background:#e8262d;border-color:#101010;color:#fff}
body.t-affiche input,body.t-affiche select{border:1.5px solid #101010;background:#fff}
body.aethos header select{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:8px;padding:6px 9px;font-size:12.5px}
body.t-calque header select{color:var(--ink);border-color:rgba(38,36,31,.35);background:transparent;border-radius:3px}

/* ---------- métré ---------- */
main{max-width:none;margin:0;padding:16px 20px 60px;display:block}
.mqtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mqech{font-size:12px;color:var(--ink2)}
.mqwrap{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;align-items:start}
.mqmode{background:var(--acc);color:#fff;border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:10px}
.mqmode[hidden]{display:none}
.mqmode button{margin-left:auto;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;border-radius:999px;padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.mqbody{height:calc(100vh - 210px);min-height:400px;overflow:auto;background:#3a3f44;padding:12px;text-align:center;scrollbar-width:none;overscroll-behavior:contain}
.mqbody::-webkit-scrollbar{display:none}
.mqstage{position:relative;display:inline-block;margin:0 auto;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.35);text-align:left;transform-origin:top left;will-change:transform}
.mqstage canvas{display:block}
.mqstage svg{position:absolute;left:0;top:0;touch-action:none;cursor:crosshair}
.mqcat{display:flex;align-items:center;gap:9px;padding:8px 6px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.mqcat:hover{background:var(--hov)}
.mqcat.on{border-color:var(--acc,#e08214);background:color-mix(in srgb,var(--acc,#e08214) 8%,var(--card))}
.mqcat>i{width:14px;height:14px;border-radius:4px;flex:none}
.mqcat .mqn{flex:1;min-width:0;font-size:13.5px}
.mqcat .mqs{font-size:11.5px;color:var(--ink3)}
.mqsw{width:26px;height:26px;border-radius:7px;display:inline-block;cursor:pointer;border:2px solid transparent}
.mqsw.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--card) inset}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card);padding:2px}
.seg button{border:0;background:transparent;font:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;cursor:pointer;color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--card);font-weight:600}
.cell{display:inline-block;min-width:20px;outline:none;border-bottom:1px dashed transparent;padding:1px 2px}
.cell:hover{border-bottom-color:var(--line)}
.cell:focus{border-bottom-color:var(--ink);background:var(--wash)}
.num{text-align:right}
.hint{font-size:12px;color:var(--ink3)}
label.hint{display:inline-flex;text-transform:none;letter-spacing:0;margin:0;font-size:12px}
label.btn{display:inline-block;text-transform:none;letter-spacing:0;margin:0;font-size:13px;color:var(--ink)}
.secHd{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.ico{border:0;background:transparent;cursor:pointer;color:var(--ink3);font-size:15px;line-height:1;padding:2px 5px;border-radius:6px}
.ico:hover{background:var(--hov);color:var(--ink)}
.empty{padding:26px;text-align:center;color:var(--ink3);font-size:13px}
/* bibliothèque de plans */
.plgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.plcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);cursor:pointer;display:flex;flex-direction:column}
.plcard:hover{border-color:var(--ink3)}
.plcard .th{height:130px;background:var(--wash);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line)}
.plcard .th canvas,.plcard .th img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.plcard .bd2{padding:10px 12px}
.plcard b{display:block;font-size:12.5px;letter-spacing:.02em}
.plcard span{display:block;font-size:12.5px;color:var(--ink2);margin-top:2px;overflow-wrap:anywhere}
.plcard .mt2{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11px;color:var(--ink3)}
.plind{font-size:11px;font-weight:700;color:var(--acc,#e08214);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.drop{border:2px dashed var(--line);border-radius:14px;padding:26px;text-align:center;color:var(--ink3);font-size:13px;background:var(--wash)}
.drop.on{border-color:var(--acc,#e08214);color:var(--ink);background:color-mix(in srgb,var(--acc,#e08214) 7%,var(--card))}
.upl{font-size:12.5px;color:var(--ink2);margin-top:8px}
.upl div{padding:3px 0}
@media(max-width:900px){.mqwrap{grid-template-columns:1fr}.mqbody{height:56vh}main{padding:12px}}
:root{--acc:#3a7c88}
.modal-bg{position:fixed;inset:0;background:rgba(20,19,17,.45);display:flex;align-items:flex-start;justify-content:center;z-index:60;overflow:auto;padding:4vh 12px}
.modal{background:var(--card);border-radius:14px;max-width:560px;width:100%;padding:18px}
.modal label{display:block;font-size:11.5px;color:var(--ink3);margin:8px 0 3px}
.modal input,.modal select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card);color:var(--ink)}
.mact{display:flex;gap:8px;margin-top:16px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
table{width:100%;border-collapse:collapse}
th,td{padding:5px 6px;text-align:left;font-size:13px;border-bottom:1px solid var(--line)}
th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);font-weight:600}


/* signalétique de chantier pour les titres, chasse fixe pour ce qui se compte */
h1,h2,h3,h4,.hd h2,.sgroup,.seg button{font-family:"Barlow Semi Condensed","Arial Narrow",Arial,system-ui,sans-serif;letter-spacing:.005em}
h1,h2,h3,h4{font-weight:600}
.kpi .v,.num,.ct,td.num,.su-num{font-family:"Chivo Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
/* ---------- le menu latéral, repliable, le même dans toutes les applications ---------- */
.shell{display:flex;align-items:stretch;min-height:calc(100vh - 57px)}
.shell>main{flex:1;min-width:0}
nav.side{width:212px;flex:none;align-self:flex-start;position:sticky;top:57px;max-height:calc(100vh - 57px);min-height:calc(100vh - 57px);overflow-y:auto;background:var(--card);border-right:1px solid var(--line);padding:12px 10px 14px;display:flex;flex-direction:column;gap:1px;box-sizing:border-box}
nav.side .sh{padding:12px 11px 5px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
nav.side .sh:first-child{padding-top:2px}
nav.side button.nv{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer;text-decoration:none;background:none;border:0;text-align:left;width:100%;box-sizing:border-box}
nav.side a{display:flex;align-items:center;gap:9px;padding:6px 11px;border-radius:9px;font-size:13px;font-weight:500;color:var(--ink2);cursor:pointer;text-decoration:none;white-space:nowrap;overflow:hidden}
nav.side a .lb{overflow:hidden;text-overflow:ellipsis}
nav.side a .ic{flex:0 0 18px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:700;opacity:.85}
nav.side a .ic svg{width:18px;height:18px;display:block}
nav.side a:hover,nav.side button.nv:hover{background:var(--hov,#EDE7DE)}
nav.side a.on,nav.side button.nv.on{background:#1E2322;color:#fff}
nav.side .ct{margin-left:auto;font-size:11.5px;font-weight:700;opacity:.65}
nav.side .sp{flex:1;min-height:10px}
nav.side .act{margin:8px 1px 2px}
nav.side .act .btn{width:100%;justify-content:center}
.sidefold{position:fixed;left:212px;top:50%;transform:translateY(-50%);z-index:21;width:16px;height:44px;border:1px solid var(--line);border-left:0;border-radius:0 8px 8px 0;background:var(--card);color:var(--ink3);font-size:9px;cursor:pointer;padding:0;display:none;align-items:center;justify-content:center;box-shadow:2px 0 8px rgba(0,0,0,.06);transition:left .2s}
.sidefold:hover{color:var(--ink);background:var(--hov,#EDE7DE)}
.sidebg{display:none}
/* Replié, le menu ne disparaissait plus : il ne laissait rien derrière lui, et
   pour changer d'application il fallait le rouvrir ou passer par le ☰. Il se
   réduit maintenant à une colonne d'icônes, large comme un doigt : on garde la
   place et on garde l'accès. Le nom complet reste en infobulle. */
@media(min-width:901px){
 .sidefold{display:flex}
 body.sidefolded nav.side{width:54px;padding-left:7px;padding-right:7px}
 body.sidefolded nav.side a{justify-content:center;padding:9px 0}
 body.sidefolded nav.side a .lb,body.sidefolded nav.side .ct,body.sidefolded nav.side .act{display:none}
 body.sidefolded nav.side button.nv{justify-content:center;padding:9px 0}
 body.sidefolded nav.side button.nv .lb{display:none}
 /* les intitulés de section deviennent un simple filet */
 body.sidefolded nav.side .sh{height:1px;padding:0;margin:9px 5px 8px;background:var(--line);text-indent:-9999px;overflow:hidden}
 body.sidefolded .sidefold{left:54px}
}
@media(max-width:900px){
 nav.side{position:fixed;left:0;top:0;height:100vh;z-index:60;overflow-y:auto;transform:translateX(-105%);transition:transform .22s;box-shadow:0 0 30px rgba(0,0,0,.2);padding-top:16px}
 body.sideopen nav.side{transform:none}
 body.sideopen .sidebg{display:block;position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:59}
 .burger{display:block;position:fixed;left:0;top:118px;z-index:61;border:none;border-radius:0 10px 10px 0;background:#1E2322;color:#fff;padding:12px 10px 12px 7px;font-size:15px;font-weight:700;line-height:1;box-shadow:2px 2px 12px rgba(0,0,0,.28);opacity:.92;cursor:pointer}
}
@media(min-width:901px){.burger{display:none}}
body.nosidebar nav.side,body.nosidebar .sidefold,body.nosidebar .burger,body.nosidebar .sidebg{display:none!important}
body.t-nuit nav.side a.on,body.t-nuit nav.side button.nv.on{background:#ece8e0;color:#1c1f22}
/* Le sélecteur de style de l'en-tête suivait la règle sombre même en thème clair : blanc sur blanc.
   Cette règle passe en dernier, donc elle gagne quel que soit l'ordre des blocs au-dessus. */
body.t-epure header select,body.t-epure header .btn,body.t-epure header .avbtn,
body.t-epure .top select,body.t-epure .top .btn,body.t-epure .top .avbtn{color:var(--ink);border-color:var(--line);background:var(--card)}
body.t-epure header select:hover,body.t-epure .top select:hover{background:var(--hov,#EDE7DE)}

/* Sur un téléphone, l'en-tête doit garder son menu : les sélecteurs cèdent la place. */
@media(max-width:700px){
 header{padding:10px 12px;gap:8px}
 header .menuwrap{flex:none}
}
/* le reste de l'en-tête sur téléphone et tablette : la règle commune de hub-ui.css */