: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;--acc:#3a7c88}
*{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}
.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}
/* Un peu de blanc sous la dernière ligne : sans cela le sujet ouvert, qui est beige, touchait
   le bord de la carte et l'on ne voyait plus où elle s'arrête. */
#main>.card{padding-bottom:10px}
#main>.card>.dirlist:last-child,#main>.card>.dirlongue:last-child{padding-bottom:2px}
.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}
.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:not(.on):not(.pri):hover{border-color:var(--acc,#3a7c88);background:#fdefe8}
.hd .btn.on:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
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}

/* ---- Direction ---- */
.dirtrop{padding:9px 17px;font-size:12.5px;color:#96691e;background:#f9f3e8;border-bottom:1px solid var(--line)}
.dirtheme{display:flex;align-items:center;gap:12px;padding:13px 17px;border-bottom:1px solid var(--line);cursor:pointer}
.dirtheme .q{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);display:block}
.dirtheme .t{font-size:16px;font-weight:600;color:var(--ink);line-height:1.35;margin-top:2px}
.dirtheme .t.vide{font-weight:400;color:var(--ink3);font-style:italic}
.dirtheme:hover{background:var(--wash)}
.pastq .r{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line2)}
.pastq .q{flex:none;font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--ink3);width:70px}
.pastq .t{font-size:13px;color:var(--ink)}
.dirlist{padding:4px 0}
.dirrow{display:flex;gap:12px;align-items:flex-start;padding:11px 17px;border-bottom:1px solid var(--line2);cursor:pointer}
.dirrow:hover{background:var(--line2)}
.dirrow .l{flex:1;min-width:0}
/* Le titre du sujet est ce qu'on cherche des yeux en arrivant : il ne doit pas peser autant
   qu'une ligne de tâche. */
.dirrow .int{font-size:16.5px;font-weight:700;line-height:1.28;color:var(--ink);letter-spacing:-.01em;margin-bottom:4px}
.dirlgrp>.h>b{font-size:15.5px}
.dirrow .pas{font-size:12.5px;color:var(--ink2);margin-top:3px;display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.dirrow .pas.vide{color:var(--ink3);font-style:italic}
.dirrow .r{display:flex;gap:8px;align-items:center;flex:none}
.dirrow .age{font-size:11px;color:var(--ink3);white-space:nowrap}
.dirrow.vieux .age{color:#96691e;font-weight:600}
.dirrow.tres{background:#fdf6f3}
.dirrow.tres .age{color:#9c3f3f;font-weight:700}
.dirrow.pale{opacity:.62}
.dirrow .n,.dirlgrp .n{font-size:10.5px;font-weight:700;background:var(--line2);color:var(--ink2);border-radius:999px;padding:1px 7px}
.dirgrp{padding:14px 17px 4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.nat{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--ink3);border:1px solid var(--line);border-radius:999px;padding:1px 7px;white-space:nowrap}
.k{font-size:10px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:1px 7px;white-space:nowrap;text-transform:uppercase}
.k.question{background:#eae7f3;color:#5a4a94}
.k.action{background:#e6efe8;color:#2e6b4c}
.k.conversation{background:#f6ece2;color:#96691e}
.dirstill{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 17px 13px;border-bottom:1px solid var(--line2);background:#fdf6f3;font-size:12.5px;color:#9c3f3f}
.dirwake,.dirnud{border-bottom:1px solid var(--line);background:var(--line2)}
.dirnud .t{padding:9px 17px 2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.dirnudrow{display:flex;gap:9px;align-items:baseline;padding:6px 17px;font-size:12.5px;cursor:pointer}
.dirnudrow:hover{background:var(--card)}
.dirnudrow .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dirnudrow .who{font-size:11px;color:var(--ink3);white-space:nowrap}
.dirnudrow .d{font-size:11px;color:#9c3f3f;white-space:nowrap}
.dirnudmore{padding:4px 17px 10px;font-size:11.5px;color:var(--ink3);cursor:pointer;text-decoration:underline}
.dirwakerow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:9px 17px;font-size:12.5px;color:var(--ink2)}
.dirwhy{font-size:12.5px;color:var(--ink2);line-height:1.5;background:var(--line2);border-radius:10px;padding:9px 12px;margin:0 0 14px}
.dirsec{margin-bottom:14px}
.dirsech{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.dirsech b{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.dirvide{font-size:12.5px;color:var(--ink3);font-style:italic;padding:3px 0 5px}
.dirkid{display:flex;gap:9px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--line2)}
.dirkid .ck{flex:none;width:18px;height:18px;margin-top:1px;border:1px solid var(--line);border-radius:5px;background:var(--card);cursor:pointer;font-size:11px;line-height:1;color:#2e6b4c;padding:0}
.dirkid.ok{opacity:.55}
.dirkid.ok .tx{text-decoration:line-through}
.dirkid.pale{opacity:.6}
.dirkid .tx{flex:1;min-width:0;font-size:13px;line-height:1.4}
.dirkid .due{font-size:11px;color:var(--ink3);margin-left:8px;white-space:nowrap}
.dirkid .due.late,.dirlrow .d.late{color:#9c3f3f;font-weight:600}
.dirkid .ans{font-size:12px;color:var(--ink2);margin-top:3px;padding-left:9px;border-left:2px solid var(--line)}
.dirkid .mn,.dirlrow .mn{flex:none;border:0;background:transparent;color:var(--ink3);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px}
.dirkid .first{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc,#3a7c88);margin-top:3px}
.p{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;cursor:pointer;border:1px solid rgba(0,0,0,.12)}
.p1{background:#c2553f}.p2{background:#d8b26a}.p3{background:#cfd4d2}
.dirlongue{padding:4px 0 8px}
.dirlgrp{border-bottom:1px solid var(--line)}
.dirlgrp .h{display:flex;gap:9px;align-items:center;padding:10px 17px 6px;cursor:pointer}
.dirlgrp .h b{font-size:13px}
.dirlgrp .on{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2e6b4c}
.dirlgrp .off{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.dirlgrp.pale{opacity:.72}
.dirlrow{display:flex;gap:9px;align-items:baseline;padding:5px 17px;font-size:12.5px;cursor:pointer}
.dirlrow:hover{background:var(--line2)}
.dirlrow .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dirlrow .d{font-size:11px;color:var(--ink3);white-space:nowrap}
.dirlog{padding:6px 0}
.dirlogrow{display:flex;gap:14px;padding:11px 17px;border-bottom:1px solid var(--line2)}
.dirlogrow .d{flex:none;width:88px;font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.dirlogrow .c{flex:1;min-width:0}
.dirlogrow .q{font-size:12.5px;color:var(--ink2)}
.dirlogrow .a{font-size:13.5px;font-weight:600;line-height:1.4;margin-top:2px}
.dirlogrow .w{font-size:12.5px;color:var(--ink2);margin-top:3px;padding-left:9px;border-left:2px solid var(--line)}
.dirlogrow .m{font-size:11px;color:var(--ink3);margin-top:4px}
.hz{font-size:10.5px;font-weight:600;color:#5a4a94;background:#eae7f3;border-radius:999px;padding:1px 7px;white-space:nowrap}
.hz.passe{color:#96691e;background:#f6efe2}
.dircal{padding:12px 17px 16px}
.dircal .nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.dircal .nav .m{font-size:13px;font-weight:600;text-transform:capitalize;min-width:126px;text-align:center}
.dircal .lg{font-size:11px;color:var(--ink2);display:inline-flex;align-items:center;gap:4px}
.dircal .lgd{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:11.5px;color:var(--ink3);margin:0 0 11px}
.dircal .lgd b{font-weight:600}
@media(min-width:1100px){.tcald{min-height:140px}}
.dircal .dirgrp{padding:16px 0 4px}
.dircalrow{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line2);font-size:12.5px;cursor:pointer}
.dircalrow:hover{background:var(--line2)}
.dircalrow .d{flex:none;width:82px;color:var(--ink3);font-variant-numeric:tabular-nums;font-size:11.5px}
.dircalrow .d.late{color:#9c3f3f}
.dircalrow .t{flex:none;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;width:132px}
.dircalrow .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dircalrow .who{font-size:11px;color:var(--ink3);white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){
 .dircal{padding:10px 12px 14px}
 .dircal .tcalg .tchip{display:none}
 .dircalrow{flex-wrap:wrap;row-gap:2px}
 .dircalrow .who{display:none}
}
/* le panneau déplié, dans le flux */
.dirpan{border-top:1px solid var(--line);background:var(--line2);padding:14px 17px 16px}
.dirpanh{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dirpanh b{font-size:14.5px}
.dirpanh .s{font-size:11.5px;color:var(--ink3);margin-top:2px}
.dirpanf{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.dircols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:start}
.dirsec{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 12px 8px}
.dirkid .mv{display:inline-flex;gap:1px;flex:none;align-self:flex-start;margin-top:1px}
/* Les flèches ne servent qu'au moment où l'on range : elles s'effacent le reste du temps pour
   laisser la largeur au texte, et restent visibles là où il n'y a pas de survol. */
@media(hover:hover){.dirkid .mv{opacity:0;transition:opacity .12s}.dirkid:hover .mv,.dirkid:focus-within .mv{opacity:1}}
.dirkid .mv button{border:0;background:transparent;color:var(--ink3);cursor:pointer;font-size:12px;line-height:1;padding:2px 3px;border-radius:5px}
.dirkid .mv button:hover:not(:disabled){background:var(--line2);color:var(--ink)}
.dirkid .mv button:disabled{opacity:.25;cursor:default}
.dirkid .mv button.on{color:#e0a33d}
.dirkid.pin{background:#fdfaf2;border-radius:7px}
.dur{font-size:10.5px;font-weight:600;color:#3f66a0;background:#e6edf6;border-radius:999px;padding:1px 7px;margin-left:8px;white-space:nowrap}
.rec{font-size:10.5px;font-weight:600;color:#2e6b4c;background:#e6efe8;border-radius:999px;padding:1px 7px;margin-left:6px;white-space:nowrap}
.ia{font-size:9.5px;font-weight:700;letter-spacing:.05em;color:#5a4a94;background:#eae7f3;border-radius:999px;padding:1px 6px;margin-left:6px}
.pinico{color:#e0a33d;font-size:11px;flex:none}
.dirlvide{padding:7px 17px 9px;font-size:12.5px;color:var(--ink3);font-style:italic;cursor:pointer}
.dirlgrp .n.vide{background:transparent;color:var(--ink3);font-weight:400;font-style:italic}
/* les propositions de l'assistant */
/* La note : on la lit dans la fenêtre comme on la lira sur le papier. */
.modal.note{max-width:min(760px,95vw)}
.ndoc{max-height:62vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:16px 20px;background:var(--card);margin-top:4px}
.ndoc h1{font-size:17px;margin:0 0 3px}
.ndoc h2{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);margin:16px 0 4px}
.ndoc h3{font-size:13px;margin:0 0 3px}
.ndoc .sub{color:var(--ink3);font-size:12px;margin-bottom:11px}
.ndoc .lede{font-size:13.5px;line-height:1.55;margin:0 0 4px}
.ndoc p{font-size:12.5px;line-height:1.6;margin:4px 0}
.ndoc ul{margin:4px 0 8px;padding-left:18px;font-size:12.5px;line-height:1.55}
.ndoc .opt{border:1px solid var(--line);border-radius:9px;padding:10px 13px;margin:9px 0}
.ndoc .pc{margin:4px 0}
.ndoc .pc b{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.ndoc .cout{color:var(--ink2)}
.ndoc.papier ol{margin:4px 0 8px;padding-left:20px;font-size:12.5px;line-height:1.55}
.ndoc.papier .enc{border:1px solid var(--line);border-radius:8px;padding:9px 12px;margin:7px 0;background:var(--wash)}
.ndoc.papier .ch .f{margin:9px 0}
.ndoc.papier .ch label{display:block;font-size:11.5px;font-weight:600;margin-bottom:3px;text-transform:none;letter-spacing:0;color:var(--ink)}
.ndoc.papier .ch label i{font-weight:400;font-style:normal;color:var(--ink3);margin-left:6px;text-transform:none}
.ndoc.papier .ch .box{border:1px solid var(--line);border-radius:6px;background:var(--wash)}
.ndoc.papier table{border-collapse:collapse;width:100%;margin:7px 0;font-size:11.5px}
.ndoc.papier th,.ndoc.papier td{border:1px solid var(--line);padding:5px 7px;text-align:left;vertical-align:top}
.ndoc.papier th{background:var(--line2);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.ndoc.papier .vide{font-size:10.5px;color:var(--ink3);margin:-2px 0 8px}
.ndoc.papier .sig{margin-top:22px;display:flex;gap:26px}
.ndoc.papier .sig div{flex:1;border-top:1px solid var(--ink);padding-top:4px;font-size:10.5px;color:var(--ink3);min-height:52px}
.dirkid .doit a.dc{border-color:#cfc6ea;color:#5a4a94;background:#f6f4fb}
.mact .gardee{font-size:11.5px;color:var(--ink3);align-self:center;padding:0 4px}
.dlist .r{display:flex;gap:9px;align-items:center;padding:9px 0;border-top:1px solid var(--line2)}
.dlist .c{flex:1;min-width:0}
.dlist .c b{display:block;font-size:13px;font-weight:600}
.dlist .c .m{font-size:11px;color:var(--ink3)}
.nwait{color:var(--ink3);font-size:13px;padding:16px 2px}
.nerr{color:#9c3f3f;font-size:13px;padding:10px 0}
.dirrow[draggable],.dirkid[draggable]{-webkit-user-drag:element}
.dirrow.dz,.dirkid.dz{box-shadow:inset 0 2px 0 var(--acc,#3a7c88)}
.dirkid.dz{border-radius:6px}
/* Le retrait dit ce qui dépend de quoi, et le filet de couleur dit de quelle nature il s'agit
   sans répéter le mot douze fois. */
.dirrow .kids{margin-top:6px;padding-left:15px}
.dirrow .kgrp{padding-left:11px;border-left:2px solid var(--line);margin:0 0 7px}
.dirrow .kgrp:last-child{margin-bottom:0}
.dirrow .kgrp.question{border-left-color:#c9c2e0}
.dirrow .kgrp.conversation{border-left-color:#e2c9a5}
.dirrow .kgrp.action{border-left-color:#b6d3c1}
.dirrow .kh{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
 color:var(--ink3);margin-bottom:2px}
.dirrow .kgrp.question .kh{color:#5a4a94}
.dirrow .kgrp.conversation .kh{color:#96691e}
.dirrow .kgrp.action .kh{color:#2e6b4c}
.dirrow .kl{font-size:12.5px;color:var(--ink2);line-height:1.45;padding:1px 0;
 display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.dirrow .kl.prem{color:var(--ink);font-weight:500}
.dirrow .pas+.pas{margin-top:3px}
.dirrow .prochain{margin-left:8px;font-size:9.5px;font-weight:700;letter-spacing:.06em;
 text-transform:uppercase;color:#c2560f}
.dirrow .imv{display:inline-flex;gap:1px;margin-left:8px;vertical-align:middle}
.dirrow .imv button{border:0;background:transparent;color:var(--ink3);cursor:pointer;font-size:12px;
 line-height:1;padding:3px 4px;border-radius:5px}
.dirrow .imv button:hover:not(:disabled){background:var(--line2);color:var(--ink)}
.dirrow .imv button:disabled{opacity:.25;cursor:default}
@media(hover:hover){.dirrow .imv{opacity:0;transition:opacity .12s}
 .dirrow:hover .imv,.dirrow.open .imv,.dirrow:focus-within .imv{opacity:1}}
.btn.dgr{color:#9c3f3f;border-color:#e3c9c2}
.btn.dgr:hover{background:#f8ece7}
/* Les flèches d'une ligne : visibles tout le temps, on ne devine pas un geste caché. */
@media(hover:hover){.dirkid .mv{opacity:.45}.dirkid:hover .mv,.dirkid:focus-within .mv{opacity:1}}
.dirprop .talk{flex:none;border:1px solid #d9d3ea;background:var(--card);color:#5a4a94;border-radius:7px;
 padding:2px 9px;font:inherit;font-size:11.5px;cursor:pointer;line-height:20px}
.dirprop .talk:hover{background:#f2effa}
/* Le fil : deux voix, la votre a droite. Il ne ressemble pas au reste de la page exprès, on doit
   voir d'un coup d'œil que rien ici n'est encore enregistré. */
.dirtalk .tq{font-size:12.5px;font-style:italic;color:var(--ink2);border-left:2px solid #cfc6ea;
 padding:2px 0 2px 11px;margin:0 0 9px}
.dirtalk.vue{border-left:0;margin:0;padding:0;max-height:52vh;overflow:auto}
.dirtalk .tout{margin-top:11px;padding-top:9px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.dirkid .fil{margin-left:8px;font-size:11.5px;color:#5a4a94;cursor:pointer;text-decoration:underline;
 text-decoration-color:#cfc6ea;text-underline-offset:2px;white-space:nowrap}
.dirkid .fil:hover{text-decoration-color:#5a4a94}
.dirtalk{border-left:2px solid #cfc6ea;margin:2px 0 10px 30px;padding:8px 0 8px 12px;max-width:900px}
.dirtalk .th{display:flex;align-items:baseline;gap:9px;font-size:11px;font-weight:700;
 letter-spacing:.06em;text-transform:uppercase;color:#5a4a94;margin-bottom:7px}
.dirtalk .tm{font-size:13px;line-height:1.55;padding:8px 12px;border-radius:11px;margin:6px 0;max-width:min(560px,88%);width:fit-content}
.dirtalk .tm.moi{background:#eceaf6;margin-left:auto}
.dirtalk .tm.ass{background:var(--card);border:1px solid var(--line);font-weight:400;color:var(--ink);letter-spacing:0;font-size:13px}
.dirtalk .tm.pend{color:var(--ink3);font-style:italic;font-weight:400}
.dirtalk .tm.err{background:#f8ece7;color:#9c3f3f}
.dirtalk .tprops{margin:8px 0}
.dirtalk .tin{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.dirtalk .tin textarea{flex:1;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);
 border-radius:9px;background:var(--card);color:var(--ink);resize:vertical;min-height:40px}
@media(max-width:760px){.dirtalk{margin-left:10px}.dirtalk .tm{max-width:100%}}
.dirprops{background:var(--card);border:1px solid #d9d3ea;border-radius:11px;padding:10px 12px;margin-bottom:14px}
.dirprops.err{border-color:#e3c9c2}
.dirprops .h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5a4a94;margin-bottom:7px}
.dirprops .h span{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink3);font-size:11.5px}
.dirprop{display:flex;gap:9px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--line2)}
.dirprop .add,.dirprop .del{flex:none;width:22px;height:22px;border-radius:7px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:14px;line-height:1;padding:0}
.dirprop .add{color:#2e6b4c;border-color:#c8dfd1;font-weight:700}
.dirprop .add:hover{background:#e6efe8}
.dirprop .del{color:var(--ink3)}
.dirprop .del:hover{background:var(--line2);color:#9c3f3f}
.dirprop .tx{flex:1;min-width:0;font-size:13px;line-height:1.4}
.dirprop .why{font-size:11.5px;color:var(--ink3);margin-top:2px}
@media(max-width:760px){
 .dirpan{padding:12px 12px 14px}
 .dircols{grid-template-columns:1fr;gap:12px}
}
.dirmenu{position:fixed;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.16);padding:5px;min-width:210px}
.dirmenu button{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;font-size:12.5px;color:var(--ink);padding:7px 10px;border-radius:7px;cursor:pointer}
.dirmenu button:hover{background:var(--line2)}
/* Les gestes d'une ligne : des pastilles, pas des mots collés. */
.dirkid .doit{margin-top:5px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dirkid .doit a{position:relative;display:inline-flex;align-items:center;gap:5px;font-size:11px;
 color:var(--ink2);cursor:pointer;text-decoration:none;border:1px solid var(--line);
 border-radius:999px;padding:3px 10px;background:var(--card);line-height:1.4;white-space:nowrap}
.dirkid .doit a:hover{border-color:var(--ink3);color:var(--ink);background:var(--wash)}
.dirkid .doit a:first-child{border-color:#c8d6e6;color:#3f66a0}
.dirkid .doit a:first-child:hover{background:#eef3f9;border-color:#3f66a0;color:#2a4a7a}
.dirkid .doit a.dt.set{border-color:#c8dfd1;color:#2e6b4c;background:#f2f8f4}
.dirkid .doit a.dt.late{border-color:#e3c9c2;color:#9c3f3f;background:#faeeea}
.dirkid .doit a.dt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;border:0;padding:0;
 cursor:pointer;pointer-events:none}

/* On voit quelle ligne est ouverte : elle prend la teinte du panneau et un liseré à gauche, si
   bien que la ligne et son panneau se lisent comme un seul bloc. */
.dirrow.open{background:var(--line2);box-shadow:inset 3px 0 0 #5a4a94}
/* Le sujet ouvert garde son orange : il n'y a pas de raison qu'il change de couleur
   au moment précis où on le regarde. */
.dirlgrp.open>.h{background:var(--line2);box-shadow:inset 3px 0 0 #5a4a94}
.dirpan{box-shadow:inset 3px 0 0 #5a4a94}
.dirpanh .s{margin-top:0}

.k{box-sizing:border-box;width:104px;min-width:104px}
.dircols{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
@media(max-width:760px){
 .k{width:88px;min-width:88px;font-size:9px;padding:1px 4px}
 .dirprop .tx,.dirkid .tx{font-size:12.5px}
}

.dirliens{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px;margin:0 0 12px}
.dirliens .l{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.dirliens a{color:#5a4a94;cursor:pointer;border-bottom:1px solid rgba(90,74,148,.3)}
.lien{font-size:11px;padding:1px 8px;border-radius:999px;background:#eae7f3;color:#5a4a94;white-space:nowrap;cursor:pointer;margin-left:8px}

/* Sur telephone, l'en-tete et la barre d'onglets se replient : sinon la page part en travers
   et tout le monde scrolle horizontalement pour rien. */
@media(max-width:760px){
 /* Les autres applications gardent leurs boutons en haut à droite sur une seule ligne :
    celle-ci faisait bande à part et poussait tout sur une deuxième rangée. C'est le sélecteur
    de style qui cède de la place, pas la mise en page. */
 header{padding:10px 12px;gap:7px}
 header .wordmark{font-size:17px}
 header .wordmark small{display:none}
 #thbtn{max-width:82px;min-width:0;padding-left:7px;padding-right:18px;font-size:11.5px}
 header .btn.sm{padding:5px 9px}
 .hd{flex-wrap:wrap;row-gap:7px}
 .hd .sub{flex:1 1 100%;order:9}
}
.hd{flex-wrap:wrap;row-gap:7px}

/* Les pastilles de duree et de recurrence ne poussent plus la ligne : elles passent a la ligne
   comme le reste du texte. */
.dirprop .tx,.dirkid .tx{overflow-wrap:anywhere}
.dur,.rec,.ia{display:inline-block;white-space:normal}

/* Pleine largeur : c'est une page de travail, pas un article. Une colonne centree laissait
   les trois colonnes du panneau a l'etroit pendant que l'ecran restait vide autour. */
main{max-width:none;padding:20px 26px 60px}
@media(max-width:760px){main{padding:14px 10px 60px}}


/* ---- l'application Direction ---- */
main{max-width:none;margin:0;padding:20px 26px 60px;display:block}
.card{overflow:visible}
:root{--line2:#EDE7DE}
body.t-nuit{--line2:#22262a}
.spacer{flex:1}
.n{font-size:10.5px;font-weight:700;background:var(--line2);color:var(--ink2);border-radius:999px;padding:1px 7px}
.byav{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:#fff;font-size:9.5px;font-weight:700;flex:none}
.modal-bg{position:fixed;inset:0;background:rgba(28,27,25,.35);display:flex;align-items:flex-start;justify-content:center;padding:50px 16px;z-index:40;overflow:auto}
.modal{background:var(--card);border-radius:14px;max-width:480px;width:100%;padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.modal h3{font-size:15px;margin-bottom:4px}
.mact{display:flex;gap:8px;align-items:center;margin-top:16px}
.sw{position:relative;display:inline-block;width:38px;height:21px;flex:none}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.15s}
.sw i:before{content:"";position:absolute;width:17px;height:17px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.15s}
.sw input:checked+i{background:#2e7d5b}
.sw input:checked+i:before{transform:translateX(17px)}
.hd .btn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tcalh{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin-bottom:5px}
.tcalh span{text-align:center}
.tcalg{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.tcald{min-height:118px;border:1px solid var(--line);border-radius:9px;padding:6px 7px;background:var(--card)}
.tcald.off{background:transparent;border-color:transparent}
.tcald.today{border-color:var(--acc,#3a7c88)}
.tcald .n{display:block;background:transparent;font-size:12px;color:var(--ink3);text-align:right;font-weight:500;padding:0;margin-bottom:2px}
.tchip{font-size:11.5px;line-height:1.45;color:#fff;border-radius:6px;padding:2px 7px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#1E2322;color:#fff;font-size:13px;padding:9px 15px;border-radius:10px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:90;max-width:90vw;text-align:center}
@media(max-width:760px){main{padding:14px 10px 60px}}


/* Les pastilles de nature ont toutes la meme largeur : sinon les textes ne s'alignent pas et
   l'oeil doit chercher le debut de chaque ligne. */
.k{display:inline-block;min-width:104px;text-align:center}
.nt{}


/* 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 button.nv .ic{flex:0 0 18px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
nav.side button.nv .ic svg{width:18px;height:18px;display:block}
nav.side button.nv .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
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 .wordmark small{display:none}
 header select{min-width:0}
 header #projsel{flex:1 1 70px;max-width:150px;min-width:0;text-overflow:ellipsis}
 header .spacer{flex:1 1 auto;min-width:0}
 header .menuwrap{flex:none}
}
@media(max-width:520px){
 header #thbtn{display:none}
 header #projsel{max-width:120px}
}