/* Les styles de Hub (hub.html), sortis de la page tels quels en v906 (étape 3 du plan).
Trois blocs, dans leur ordre d'origine : l'ordre compte, une règle plus bas gagne à égalité.
Le petit bloc de la couleur du mot Hub reste dans la page. */
:root{--hov:#F7F4EF;--sel:#EDE7DE;--wash:#F7F4EF;--bg:#EFEBE4;--card:#fff;--ink:#1E2322;--ink2:#5B6563;--ink3:#8E9794;--line:#DFD8CE;--line2:#EDE7DE;--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:16px;padding:10px 22px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.wordmark{font-weight:700;font-size:24px;letter-spacing:-.03em}
.wordmark small{font-weight:500;color:var(--ink3);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-left:8px}
.tabs{display:flex;gap:14px;align-items:center}
.enttab{font:inherit;font-size:13px;padding:5px 2px 3px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;color:var(--ink3);display:flex;align-items:center;gap:6px}
.enttab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.sitem .ini{display:none}
.sitem .cnt{font-size:10px;font-weight:700;background:var(--ink);color:#fff;border-radius:999px;padding:0 4px;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;box-sizing:border-box;line-height:1;font-variant-numeric:tabular-nums}
.sitem .cnt.late{background:#b0575f}
.sideents{padding:0 0 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.sideents .enttab{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:none;border-radius:8px;font-size:13px;color:var(--ink2);text-align:left}
.sideents .enttab:hover{background:var(--hov)}
.sideents .enttab.on{background:var(--sel);color:var(--ink);font-weight:600;border:none}
#mnav .mnsep{flex:none;width:1px;height:18px;background:var(--line);margin:0 2px}
.aggrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
@media(min-width:1900px){.aggrid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
@media(max-width:1300px){.aggrid{grid-template-columns:1fr}}
.spacer{flex:1}
.who{font-size:12px;color:var(--ink3)}
.shell{display:flex;min-height:calc(100vh - 57px)}
aside{width:216px;flex:none;border-right:1px solid var(--line);padding:14px 10px;background:var(--card)}
.sgroup{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);padding:12px 10px 5px}
.sw{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex:none}.sw input{display:none}
.sw i{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:.2s;display:block}
.sw i:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw input:checked+i{background:var(--acc,#3a7c88)}.sw input:checked+i:after{left:18px}
.fchip{position:relative;display:inline-flex;align-items:center;gap:3px;margin-left:6px;cursor:pointer;vertical-align:middle;font-size:11px;color:var(--ink2)}
.fchip img,.fchip i{width:22px;height:22px;border-radius:5px;object-fit:cover;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;background:var(--card)}
.fchip b{font-weight:600;margin-left:2px}
.fpop{display:none;position:absolute;left:0;top:26px;z-index:40;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);width:max-content;max-width:380px;flex-wrap:wrap;gap:6px}
.fchip:hover .fpop{display:flex}
.fpop img,.fpop .pdf{width:110px;height:82px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:26px;color:var(--ink)}
.fpop .pdf small{font-size:9px;color:var(--ink3)}
.fpopn{width:100%;font-size:10.5px;color:var(--ink3);padding-top:4px}
.fpop a,.thumb a{text-decoration:none;color:inherit}
.thumb .pdf small{font-size:9px;color:var(--ink3);display:block}
.dz{border:1px dashed var(--line);border-radius:10px;padding:10px;margin-top:2px;background:var(--wash)}
.dz.on{border-color:var(--acc,#3a7c88);background:#fdefe8}
.dzhint{font-size:12px;color:var(--ink2);margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.thumbs{display:flex;flex-wrap:wrap;gap:10px}.thumbs:empty{display:none}.thumbs+.thumbs:not(:empty){margin-top:8px}
.thumb{position:relative;width:88px}
.thumb img,.thumb .pdf{width:88px;height:66px;object-fit:cover;border-radius:7px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px;background:var(--card)}
.thumb .x{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:rgba(42,46,48,.62);color:#fff;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s;backdrop-filter:blur(2px)}
.thumb:hover .x{opacity:1}.thumb .x:hover{background:rgba(42,46,48,.9)}
@media(hover:none){.thumb .x{opacity:.8}}
.thumb .n{font-size:10px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.byav{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;color:#fff;font-size:8.5px;font-weight:700;flex:none;letter-spacing:.02em;vertical-align:-3px;cursor:default}
#appmenu{min-width:274px}
#appmenu a{white-space:nowrap}
.sitem{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:none;background:none;font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;border-radius:8px;text-align:left}
.sitem:hover{background:var(--hov)}
.sitem.on{background:var(--sel);color:var(--ink);font-weight:600}
.pj{text-transform:uppercase}
.icbtn{display:inline-flex;align-items:center;gap:3px;padding:4px;border-radius:7px;color:var(--ink3);cursor:pointer;vertical-align:middle;transition:color .15s ease,background .15s ease}
.icbtn:hover{color:var(--acc,#3a7c88)!important;background:var(--hov);text-decoration:none}
.sitem .dot{width:8px;height:8px}
main{flex:1;min-width:0;padding:22px 28px 80px;transition:margin-right .2s ease}
body.tdopen main{margin-right:448px}
@media (max-width:900px){body.tdopen main{margin-right:0}}
.grid2{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
@media(max-width:1100px){.grid2{grid-template-columns:1fr}}
.burger{display:none;font:inherit;border:none;cursor:grab}
@media(max-width:900px){
.shell{flex-direction:column}
aside{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);transition:transform .2s;box-shadow:8px 0 30px rgba(0,0,0,.25);background:var(--card);overflow-y:auto;padding-top:12px;width:232px}
aside.open{transform:none}
.burger{display:block;position:fixed;left:0;top:118px;z-index:55;border-radius:0 10px 10px 0;background:#1E2322;color:var(--acc,#3a7c88);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;touch-action:none}
}
#mnav{display:none}
@media(max-width:900px){
main{padding:14px 12px 80px}
header{padding:8px 12px;gap:8px}
.card{overflow-x:auto}
.hd{padding:11px 13px}
h1{font-size:18px !important}
.tdrawer{width:100vw;max-width:100vw;border-radius:0}
.modal-bg{padding:20px 8px}
.card .projrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card .projrow .projcard{min-width:0;width:auto}
.hd{flex-wrap:wrap;row-gap:8px}
.hd .sub{display:none}
.keydata{overflow-x:auto}
input,select,textarea{font-size:16px}
/* Sur un téléphone, un tableau à six colonnes ne tient pas : la colonne du titre
tombait à cent soixante pixels et chaque mot passait à la ligne. Chaque tâche
devient donc un bloc empilé, titre d'abord, statut et repères dessous. */
.tasktbl{display:block;min-width:0 !important;table-layout:auto !important}
/* La ligne d'en-tete n'est pas dans un thead : la masquer par thead ne faisait
rien et ses intitules flottaient au-dessus de la liste, sans rien dessous. */
.tasktbl thead,.tasktbl tr:has(>th){display:none !important}
.tasktbl tbody{display:block}
.tasktbl tr{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;
gap:5px 9px;padding:11px 12px !important;border-bottom:1px solid var(--line2)}
.tasktbl td{display:block;width:auto !important;padding:0 !important;border:0;vertical-align:baseline;line-height:1.35}
.tasktbl td:nth-child(1){display:none}
/* le titre prend toute la largeur, le reste se range sur une ligne dessous */
.tasktbl td:nth-child(3){order:1;flex:1 0 100%;font-size:15px;line-height:1.35}
.tasktbl td:nth-child(2){order:2}
.tasktbl td:nth-child(6){order:3}
.tasktbl td:nth-child(7){order:4;flex:1 0 100%;font-size:12px;color:var(--ink3)}
/* Le responsable, l'echeance et le projet sont deja sur la ligne de reperes ;
les redonner en menus deroulants faisait trois commandes par tache et une
liste illisible. On ouvre la tache pour les changer. */
.tasktbl td:nth-child(4),.tasktbl td:nth-child(5),.tasktbl td:nth-child(8){display:none}
.tasktbl td:empty{display:none}
.tasktbl select.inline{font-size:12px;max-width:46vw}
.tasktbl tr:has(td[colspan]){padding:16px 12px 5px !important;border-bottom:0}
.tasktbl td[colspan]{display:block !important;font-size:11.5px;letter-spacing:.08em}
.tasktbl .mmeta{display:block;font-size:11px;color:var(--ink3);margin-top:1px;cursor:pointer}
.tasktbl .ttitle{display:block}
.tasktbl .tmeta{margin-top:1px}
/* L'etiquette d'entite et les pastilles vivaient dans le fil du titre : selon la
longueur du titre, l'entite passait devant, la pastille de discussion se
retrouvait tantot en bout de ligne tantot seule en dessous. Rien n'etait a la
meme place d'une tache a l'autre.
Le titre occupe donc toute la largeur et prend les lignes qu'il lui faut ;
tout le reste se range apres lui, sur une rangee, toujours au meme endroit. */
.tasktbl .ttitle{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px}
.tasktbl .ttitle>[contenteditable]{flex:1 1 100%;order:1;min-width:0}
.tasktbl .ttitle>*:not([contenteditable]){order:2;flex:0 0 auto}
.tasktbl .tkchat{margin:0}
/* le projet figurait deja sur la ligne de reperes juste en dessous */
.tasktbl .tmeta{display:none}
.tcards{columns:1}
/* En-tete de carte : un titre, un bouton principal, le reste plie derriere « … ».
Quatre rangees de pastilles avant la premiere tache, ce n'est pas un ecran. */
.card>.hd{flex-wrap:wrap;gap:8px;padding:12px 12px 10px}
.card>.hd>.sub{display:none}
.card>.hd>.spacer{display:none}
/* une seule rangee de commande : le titre, « … », l'action principale.
Les selecteurs de vue passent dessous, chacun sur sa propre ligne. */
.card>.hd>h2{order:1;flex:1 1 auto;min-width:0;font-size:17px}
.card>.hd>.su-moretog{order:2;flex:0 0 auto;padding:8px 12px}
.card>.hd>.btn.pri{order:3;flex:0 0 auto}
.card>.hd>.seg{order:4;flex:1 0 100%;display:flex;flex-wrap:nowrap;overflow-x:auto;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.card>.hd>.seg::-webkit-scrollbar{display:none}
.card>.hd>.seg>button{flex:0 0 auto;white-space:nowrap}
.tkchips{display:flex;gap:6px 7px;align-items:center;flex-wrap:wrap;padding:7px 16px;font-size:12px;border-bottom:1px solid var(--line2)}
.card>.hd>.su-more{order:5;flex:1 0 100%;display:none;flex-wrap:wrap;gap:7px}
.card>.hd.su-open>.su-more{display:flex}
}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:18px}
.hd{display:flex;align-items:baseline;gap:10px;padding:13px 17px;border-bottom:1px solid var(--line);flex-wrap:wrap}
/* Quand les boutons ne tiennent pas sur une ligne, la suivante repartait a
gauche, sous le titre. Chaque ligne se cale desormais a droite, et le titre
reste seul a gauche : les boutons restent alignes entre eux. */
@media(min-width:701px){
.hd{justify-content:flex-end}
.hd>h2{margin-right:auto}
}
.hd>.btn,.hd>.seg,.hd>select,.hd>input{align-self:center}
.hd h2{font-size:14px;font-weight:600}
.hd .sub{font-size:11.5px;color:var(--ink3)}
.pad{padding:13px 17px}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;line-height:1.35}.btn svg{flex:none}
.btn:hover{border-color:#cfc9c0}
.btn.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.sm{padding:3px 8px;font-size:11.5px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}.enttag{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--ink3);letter-spacing:.03em;margin-right:7px;vertical-align:middle;white-space:nowrap}.enttag .dot{width:7px;height:7px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2)}
label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);margin:10px 0 3px}
input,select,textarea{width:100%;font:inherit;font-size:13px;padding:7px 9px;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 optgroup{background:var(--card);color:var(--ink3);font-style:normal}
select option:hover,select option:focus{background:var(--hov)}
select option:checked{background:var(--sel);font-weight:600}
select.inline{width:auto;padding:3px 6px;font-size:12px}
select.inline.pill{border-radius:999px;padding:3px 10px;font-weight:600;border-color:transparent;display:inline-flex;align-items:center;justify-content:center;gap:4px;line-height:1.2;vertical-align:middle}
.st-grey{background:#efece6;color:#6b665e}
.st-blue{background:#e7edf6;color:#3f66a0}
.st-amber{background:#f6edd9;color:#96691e}
.st-green{background:#e3efe8;color:#2e7d5b}
.st-red{background:#f8e7e7;color:#9c3f3f}
.tdbtn{position:fixed;right:0;top:38%;z-index:30;writing-mode:vertical-rl;background:var(--ink);color:#fff;border:none;border-radius:9px 0 0 9px;padding:14px 7px;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;cursor:pointer;box-shadow:-4px 4px 16px rgba(0,0,0,.14)}
.tdrawer{position:fixed;top:0;right:0;bottom:0;width:430px;max-width:92vw;background:var(--card);border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(0,0,0,.1);z-index:35;overflow:auto;padding:16px 18px}
.tditem{border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:8px;background:var(--bg)}
.tditem .tdtop{display:flex;gap:9px;align-items:flex-start}
.tditem .tdtop select.inline{flex:none;margin-top:1px}
.tditem .tdttl{flex:1;min-width:0;font-weight:500;cursor:text;outline:none;line-height:1.35;padding-top:3px}
.tditem .tdrev{margin:6px 0 0 0;font-size:11.5px}
.tditem .tdnote{margin-top:5px}
.tditem .tdmeta{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:11.5px;color:var(--ink3)}
.tditem .tdmeta select.inline{max-width:120px}
.tditem .tdprio{width:7px;height:7px;border-radius:50%;background:#b0575f;flex:none}
.tditem .tact{opacity:.6}
.tditem .tact.on{opacity:1;color:var(--ink)}
.tditem .tact.del:hover{color:#9c3f3f}
.catchip{font:inherit;font-size:11.5px;padding:3px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.catchip:hover{border-color:#b9b3a8}
.catchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bdfilters td{padding:3px 6px;background:var(--wash)}
[contenteditable][data-ph]:empty::before{content:attr(data-ph);color:var(--ink3);font-style:italic;font-size:11px}
.taskgrid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start}
/* vues en icônes : un bouton carré par vue, assez grand pour un doigt */
@media(max-width:700px){.card .hd .sub.tksub{display:none}
/* sur un téléphone, tout tient sur la ligne du titre : « Tâches », les quatre
icônes de vue, « ··· » et « + Tâche ». Les filtres font la seule autre rangée. */
.card>.hd>h2 .tksuf{display:none}
.card>.hd>.seg.tkviews{order:2;flex:0 0 auto;width:auto;overflow:visible}
.card>.hd>.seg.tkviews button{min-width:32px;padding:5px 7px}
.card>.hd>.tkmore{order:2;flex:0 0 auto;padding:6px 11px}
.card>.hd>h2{flex:1 1 60px;align-self:center}
.tkcard>.hd>.tkspell{display:none}
/* Sur un téléphone : en haut, le titre, le retard, « ··· » et « + Tâche » ;
dessous, sur une seule ligne, les vues et les filtres côte à côte. Les
filtres défilent s'ils n'ont pas toute la place. */
.card.tkcard>.hd>h2{order:1}
.card.tkcard>.hd>.tkret-m{display:inline-flex;order:2;flex:0 0 auto}
.card.tkcard>.hd>.tkmore{order:3}
.card.tkcard>.hd>.btn.pri{order:4}
.card.tkcard>.hd>.tkbr{display:block;order:5;flex:0 0 100%;height:0}
.card.tkcard>.hd>.seg.tkviews{order:6}
.card.tkcard>.hd>.tkfrow{order:7;flex:1 1 0;min-width:0;margin-top:0;flex-wrap:nowrap}
.card.tkcard>.hd>.tkfrow>.seg{overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:none}
.card.tkcard>.hd>.tkfrow>.seg::-webkit-scrollbar{display:none}
.card.tkcard>.hd>.tkfrow>.seg>button{flex:1 0 auto;white-space:nowrap;padding-left:8px;padding-right:8px}
/* la barre des filtres va jusqu'au bord droit, aligné sur « + Tâche » */
.card.tkcard>.hd>.tkfrow>.seg{flex:1 1 auto !important;display:flex}
.card.tkcard>.hd>.tkfrow>.tkretard{display:none}
/* « Toutes » vit dans « ··· » ; il ne reparaît dans la barre que s'il est choisi,
pour qu'on voie quel filtre est actif et qu'on puisse en sortir */
.card.tkcard>.hd>.tkfrow .tkall:not(.on){display:none}}
/* Les filtres ont rejoint la ligne du titre. Sur une carte large ils s'y
tiennent, à côté du titre : une seule rangée au-dessus des tâches. Sur une
carte moyenne ils passent dessous ; sur un téléphone aussi. */
.tkfrow{display:flex;gap:6px 7px;align-items:center;flex-wrap:wrap;font-size:12px}
.tkfrow>.seg{flex:0 1 auto !important;width:auto}
.tkcard>.hd>.tkfrow{order:9;flex:1 0 100%;margin-top:4px}
.btn.tkspell{padding:5px 9px;line-height:0;min-height:30px}
@container tk (min-width:1100px){
.tkcard>.hd>.tkfrow{order:0;flex:0 1 auto;margin:0 auto 0 14px}
.tkcard>.hd>h2{margin-right:0}
.tkcard>.hd>.tksub{display:none}
}
.seg.tkviews button{padding:5px 9px;line-height:0;display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:30px}
.btn.tkretard{color:#9c3f3f;border-color:#e6c9c9;background:#fbf1f1}
.tkcard>.hd>.tkret-m,.tkcard>.hd>.tkbr{display:none}
.tcalside .tcald{min-height:42px;padding:2px 3px}
.tcalside .tchip{font-size:9px;padding:1px 4px;margin-top:1px}
.tcalside .tcalfull{padding:8px 12px 12px}
.tcalh{display:grid;grid-template-columns:repeat(7,1fr);font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.tcalh span{text-align:center}
.tcalg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.daypop{position:fixed;z-index:60;display:none;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(42,46,48,.22);padding:10px 12px;font-size:12.5px;max-height:60vh;overflow:auto}.daypop .dph{font-weight:700;margin-bottom:4px}.daypop .dph::first-letter{text-transform:uppercase}.daypop .dpr{display:flex;gap:8px;align-items:flex-start;padding:6px 2px;border-top:1px solid var(--line2);cursor:pointer;border-radius:6px}.daypop .dpr:hover{background:var(--line2)}.daypop .dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:4px}
.tcald{min-height:88px;border:1px solid var(--line);border-radius:7px;padding:3px 4px;background:var(--card)}
.tcald.off{border:none;background:transparent}
.tcald.today{border-color:var(--ink)}
.tcald .n{font-size:10.5px;color:var(--ink3);text-align:right}
.tchip{font-size:10.5px;color:#fff;border-radius:4px;padding:2px 6px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-weight:600}
/* ===== Style « Aethos », charte couleurs de l'agence, arrondis genereux ===== */
body.aethos{--bg:#EFEBE4;--card:#ffffff;--ink:#1E2322;--ink2:#5B6563;--ink3:#8E9794;--line:#DFD8CE;--line2:#EDE7DE}
body.aethos header{background:#1E2322;border-bottom:none;color:#fff;padding:12px 24px}
/* meme raison : Epure et Studio ont un en-tete clair, le blanc y disparait */
body.aethos:not(.t-epure):not(.t-studio) .logo,body.aethos:not(.t-epure):not(.t-studio) header span{color:#fff}
/* Un menu déroulant est posé DANS l'en-tête : la règle ci-dessus peignait donc
aussi ses intitulés en blanc, sur le fond clair du menu. Les icônes et les
titres de groupe restaient lisibles, les libellés non, et le menu paraissait
vide. « inherit » rend au libellé la couleur de son lien, ce qui garde
l'accent sur la ligne courante. */
body.aethos header .menu span{color:inherit!important}
body.aethos .sideents .enttab{border-radius:999px;padding:8px 14px;color:var(--ink2)}
body.aethos .sideents .enttab:hover{background:var(--hov)}
body.aethos .sideents .enttab.on{background:#1E2322;color:#fff;font-weight:600}
body.aethos #mnav .mnsep{background:rgba(255,255,255,.25)}
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 aside{background:var(--card);border-right:1px solid var(--line);padding-top:18px} /* blanche comme la barre des sept autres applications : elle etait la seule
a rester grise, d'ou l'impression de changer d'outil en changeant de page */ /* le bord est ce sur quoi vient se poser l'onglet de repli :
sans lui, la petite languette flottait toute seule au milieu du vide */
@media(max-width:900px){body.aethos aside{background:var(--hov);border-right:1px solid var(--line);padding-top:12px}body.aethos .burger{background:#1E2322;color:var(--acc,#3a7c88)}}
body.aethos .sitem{border-radius:999px;padding:8px 14px}
body.aethos .sitem:hover{background:var(--hov)}
body.aethos .sitem.on{background:#1E2322;color:#fff;font-weight:600}
body.aethos .sgroup{color:var(--ink);font-weight:700}
body.aethos .card{border:none;border-radius:18px;box-shadow:0 2px 12px rgba(42,46,48,.08)}
body.aethos .hd{border-bottom:1px solid var(--line2)}
body.aethos h1{color:var(--ink);font-weight:800;letter-spacing:-.02em}
body.aethos .btn{border-radius:999px;border-color:#ddd7cc}
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 .seg{border-radius:999px;border-color:#ddd7cc;background:var(--card)}
body.aethos .seg button.on{background:#1E2322;color:#fff}
body.aethos .projcard{border:none;border-radius:16px;box-shadow:0 1px 8px rgba(42,46,48,.1)}
body.aethos .projcard:hover{box-shadow:0 4px 16px rgba(244,101,48,.22)}
body.aethos .kbcol{background:#f4f1ec;border-radius:14px}
body.aethos .kbcard{border:none;border-radius:12px;box-shadow:0 1px 4px rgba(42,46,48,.12)}
body.aethos select.inline.pill{border-radius:999px}
body.aethos .st-grey{background:#efece6;color:#6b6f6c}
body.aethos .st-blue{background:#d4edf4;color:#345c72}
body.aethos .st-amber{background:#f8e4d6;color:#b05f2e}
body.aethos .st-green{background:#e3ede6;color:var(--acc,#3a7c88)}
body.aethos .st-red{background:#f6e3e0;color:#bf6d62}
body.aethos .catchip{border-radius:999px;border-color:#ddd7cc}
body.aethos .catchip.on{background:#1E2322;border-color:#1E2322}
body.aethos .tdbtn{background:#1E2322;color:#e4e217;border-radius:10px 0 0 10px}
body.aethos .tdrawer{border-left:none;box-shadow:-14px 0 34px rgba(42,46,48,.18);border-radius:18px 0 0 18px}
body.aethos .tditem{border-radius:12px;border-color:var(--line)}
body.aethos .tcald{border-radius:10px;border-color:#DFD8CE}
body.aethos .tcald.today{border-color:var(--acc,#3a7c88);border-width:2px}
body.aethos .modal{border-radius:20px}
body.aethos .menu{border-radius:14px}
body.aethos input,body.aethos select,body.aethos textarea{border-radius:10px}
body.aethos .pin{background:#e4e217;color:#1E2322;border-radius:999px;font-weight:700}
body.aethos .sug{background:#fbf9e2}
body.aethos .sug>td:first-child{border-left-color:#e4e217}
body.aethos .bdfilters td{background:var(--hov)}
body.aethos .rowlink:hover{color:var(--acc,#3a7c88)}
body.aethos #mnav{background:#1E2322;border-bottom:none}
body.aethos #mnav button{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
body.aethos #mnav button.on{background:var(--acc,#3a7c88);border-color:var(--acc,#3a7c88)}
/* affordances : ce qui est cliquable réagit au survol */
[contenteditable]{border-bottom:1px dashed transparent;border-radius:3px;padding:0 2px;margin:0 -2px}
[contenteditable]:hover{border-bottom-color:#c2bcb2;background:var(--hov)}
[contenteditable]:focus{background:var(--card);border-bottom-color:var(--ink)}
select.inline:hover,input.inline:hover{border-color:#b9b3a8 !important;background:var(--card)}
select.inline.pill:hover{filter:brightness(.95);border-color:transparent !important}
.rowlink{color:var(--ink2);text-decoration:none}
a[onclick],.rowlink{transition:color .15s ease}
.rowlink:hover{color:var(--acc,#3a7c88)}
a[onclick]:hover{text-decoration:none;color:var(--acc,#3a7c88)!important}
.tchip:hover{filter:brightness(1.14)}
.kbcard:hover{border-color:#b9b3a8;box-shadow:0 3px 10px rgba(0,0,0,.06)}
.tditem:hover{border-color:#c2bcb2}
.draghandle:hover{color:var(--ink)}
.evt [onclick]{transition:color .15s ease}
.evt [onclick]:hover{text-decoration:none;color:var(--acc,#3a7c88);cursor:pointer}
.projcard{cursor:pointer}
.tcards{columns:270px 4;column-gap:12px;padding:14px 17px}
.tcard{display:inline-block;width:100%;break-inside:avoid;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;cursor:pointer;vertical-align:top}
.tcard>div+div{margin-top:8px}
.tcard:hover{border-color:#b9b3a8;box-shadow:0 3px 12px rgba(0,0,0,.08)}
.tcard.sug{background:#fdf5e3;border-color:#e8d094}
.tcolors{display:none;gap:5px;margin-top:9px}
.tcard:hover .tcolors{display:flex}
.tcdot{width:17px;height:17px;border-radius:50%;border:1px solid rgba(0,0,0,.14);cursor:pointer;flex:none}
.tcdot:hover{transform:scale(1.15)}
.tcdot.on{border:2px solid var(--ink)}
@media(max-width:900px){.tcard .tcolors{display:flex}}
body.aethos .tcard{border:none;box-shadow:0 1px 6px rgba(42,46,48,.12);border-radius:14px}
.mmeta{display:none}
/* tableau des tâches : mêmes proportions que le portail chantier */
.tasktbl{width:100%;table-layout:fixed;min-width:960px}
.tasktbl td{vertical-align:middle;padding:11px 8px}
.tasktbl th:nth-child(1),.tasktbl td:nth-child(1){width:24px}
.tasktbl th:nth-child(2),.tasktbl td:nth-child(2){width:146px}
.tasktbl th:nth-child(3),.tasktbl td:nth-child(3){width:auto}
.tasktbl th:nth-child(4),.tasktbl td:nth-child(4){width:170px}
.tasktbl th:nth-child(5),.tasktbl td:nth-child(5){width:128px}
.tasktbl th:nth-child(6),.tasktbl td:nth-child(6){width:104px}
.tasktbl th:nth-child(7),.tasktbl td:nth-child(7){width:16%;max-width:none}
.tasktbl th:nth-child(8),.tasktbl td:nth-child(8){width:150px}
/* Quand la carte des tâches est étroite (le panneau Échéances à côté, ou un
écran moyen), les colonnes fixes mangeaient toute la place : le titre de la
tâche tombait mot par mot, et le tableau débordait de sa carte. Sous mille
pixels de carte, la note se lit dans la fiche, et le titre reprend la place. */
.tkcard{container-type:inline-size;container-name:tk}
@media(min-width:701px){@container tk (max-width:1000px){
.tasktbl{min-width:0}
/* la colonne se referme à zéro plutôt que de disparaître : les lignes de
section, qui s'étendent sur toutes les colonnes, en gardaient la place vide */
.tasktbl th:nth-child(7),.tasktbl td:nth-child(7){width:0;padding:0 !important;border:0;overflow:hidden;font-size:0}
.tasktbl td:nth-child(7) *{display:none}
.tasktbl th:nth-child(4),.tasktbl td:nth-child(4){width:150px}
.tasktbl th:nth-child(8),.tasktbl td:nth-child(8){width:100px}
}}
.tasktbl td:nth-child(8){font-size:11.5px;white-space:normal;text-align:right;line-height:1.6}
/* « Qui » : la pastille se contente de la largeur du nom, et la colonne
entiere est centree pour que l'intitule tombe au-dessus des pastilles. */
.tasktbl th:nth-child(2),.tasktbl td:nth-child(2),
.tasktbl th:nth-child(4),.tasktbl td:nth-child(4){text-align:center}
.tasktbl td:nth-child(4) select{max-width:100%;text-overflow:ellipsis}
/* La pastille de discussion suivait la fin du titre : elle changeait de place
a chaque ligne selon la longueur du texte. Elle se range desormais a droite
de la colonne, toujours au meme endroit. */
/* Le titre occupe toute sa colonne : la pastille de discussion et l'avatar du
createur ne vivent plus dedans, ils ont rejoint les colonnes « Qui » et
« Statut », ou ils sont alignes avec ce qu'ils qualifient. */
.entmin{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--ink3);text-transform:none;letter-spacing:0}
.entmin .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.tactcell{white-space:nowrap;text-align:right;width:132px}
.tact{border:0;background:transparent;padding:4px 5px;border-radius:8px;cursor:pointer;
color:var(--ink3);line-height:0;opacity:.55;transition:opacity .15s,color .15s,background .15s}
.tact:hover{opacity:1;color:var(--ink);background:var(--hov)}
tr:hover .tact{opacity:.85}
.tact.on{color:#1e8a5a;opacity:1}
.tact.priv{color:#96691e;opacity:1}
.tact.dng:hover{color:#9c3f3f;background:#fbeceb}
.tasktbl .ttitle{display:block;overflow-wrap:anywhere}
/* les deux cellules a pastilles : tout au centre, sur une ligne */
.tasktbl .quicell,.tasktbl .statcell{
display:flex;align-items:center;justify-content:center;gap:8px;
}
/* « A faire » et « En cours » n'ont pas la meme largeur : a contenu centre,
l'avatar se decalait d'une ligne a l'autre. On fige la largeur de la
pastille de statut, l'avatar tombe alors toujours au meme endroit. */
.tasktbl .statcell>select,.tasktbl .statcell>input[type=checkbox]{
order:1;flex:0 0 96px;width:96px;min-width:0;
}
.tasktbl .statcell>.byav{order:2;flex:0 0 17px}
/* Meme raison pour « Qui » et « Priorite » : un nom court et un nom long
donnaient deux largeurs, et la pastille de discussion bougeait avec.
Chaque pastille a sa largeur, une fois pour toutes. */
.tasktbl .quicell>.tkchat{order:1;flex:0 0 auto}
.tasktbl .quicell>select{order:2;flex:0 0 112px;width:112px;min-width:0}
.tasktbl td:nth-child(6) select{width:88px;min-width:0}
.tasktbl td{vertical-align:middle}
.tasktbl td input[type=date]{width:100%;max-width:100%;box-sizing:border-box}
.tasktbl td select{width:auto;max-width:100%;box-sizing:border-box}
.tasktbl .inline{padding:2px 9px;border-radius:999px;border:1px solid var(--line);background:var(--card);text-overflow:ellipsis;font-size:11.5px;line-height:1.5}
.tasktbl td:nth-child(5) input[type=date]{padding-left:2px;padding-right:2px}
/* tablette et portable : sous 1400 px, le calendrier passe sous la liste ; la liste garde ses colonnes
jusqu'à 1200 px, puis perd la note et resserre les autres, avant l'empilement du téléphone à 900 px */
@media(max-width:1400px){.taskgrid{grid-template-columns:1fr}
/* Sous la liste, le panneau Échéances répétait la vue Calendrier sur tout un
écran. Il ne se montre qu'à côté de la liste ; en dessous, l'icône du
calendrier et le bouton « en retard » disent la même chose en une ligne. */
.taskgrid .tcalside{display:none}}
@media(min-width:901px) and (max-width:1400px){
.tasktbl{min-width:0 !important;table-layout:auto !important} /* en largeur fixe, une colonne masquée gardait sa place vide */
.tasktbl th:nth-child(3),.tasktbl td:nth-child(3){width:auto !important}
.tasktbl th:nth-child(7),.tasktbl td:nth-child(7){display:none;width:0 !important;padding:0 !important}
.tasktbl th:nth-child(2),.tasktbl td:nth-child(2){width:118px !important}
/* la personne est déjà là, en initiales à côté du statut : la colonne « Qui » cède sa place au titre */
.tasktbl th:nth-child(4),.tasktbl td:nth-child(4){display:none;width:0 !important;padding:0 !important}
.tasktbl th:nth-child(5),.tasktbl td:nth-child(5){width:116px !important}
.tasktbl th:nth-child(6),.tasktbl td:nth-child(6){width:96px !important}
.tasktbl th:nth-child(8),.tasktbl td:nth-child(8){width:124px !important}
.tasktbl td{padding:9px 6px !important}
}
@media(min-width:901px) and (max-width:1100px){
.tasktbl th:nth-child(6),.tasktbl td:nth-child(6){width:88px !important}
.tasktbl td:nth-child(6) select{width:80px}
.tasktbl th:nth-child(8),.tasktbl td:nth-child(8){width:104px !important}
}
.tasktbl select.pr1{color:#9c3f3f;border-color:#e6c3bd;background:#fdf2f0;font-weight:700}
.tasktbl select.pr3{color:var(--ink3)}
.tasktbl .ttitle{display:flex;flex-wrap:wrap;align-items:center;gap:4px;line-height:1.35;font-size:13.5px}
.tasktbl .tmeta{font-size:11px;color:var(--ink3);margin-top:5px;line-height:1.3}
.notewrap .snip{-webkit-line-clamp:3}
.tkmsgs{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow:auto;padding:2px 0}
.tkmsg{background:var(--hov);border-radius:10px;padding:8px 11px;font-size:13px;line-height:1.45}
.tkmsg.re{margin-left:18px;border-left:2px solid var(--line)}.tkmsg.unread{box-shadow:inset 3px 0 0 var(--acc,#3a7c88)}
.tkmsgh{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink3);font-weight:700;margin-bottom:2px}.tkmsgh span{font-weight:400}
.tkmsgph{display:flex;gap:6px;flex-wrap:wrap}.tkmsgphi{position:relative;display:inline-block}
.tkmsgph img{width:74px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer;display:block}
.tkmsgphi .ico{position:absolute;top:-6px;right:-6px;background:var(--card);border:1px solid var(--line);border-radius:50%;line-height:1;padding:1px 4px;cursor:pointer}
.ver.tkchat{cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border:1px solid #cfdcea;background:#eef3f8;color:#2c5a8a;font-weight:700;border-radius:999px;font-size:10px}
.ver.tkchat svg{display:block}.ver.tkchat.add{background:transparent;border-color:var(--line);color:var(--ink3);font-weight:400}
.ver.tkchat.add:hover{color:#2c5a8a;border-color:#cfdcea;background:#eef3f8}.ver.tkchat.new{background:var(--acc,#3a7c88);color:#fff;border-color:var(--acc,#3a7c88)}
tr.tkglow td{background:#fff6f2}tr.tkglow td:first-child{box-shadow:inset 3px 0 0 var(--acc,#3a7c88)}
.tcard.tkglow,.kbcard.tkglow{border-color:#f7b79c;background:#fff6f2}
.hrow.tkhist{opacity:.62}.hrow.tkhist:hover{opacity:1}.hrow.tkhist .ht{text-decoration:line-through;text-decoration-color:var(--line)}
.hrow{display:flex;align-items:center;gap:10px;padding:7px 4px;border-top:1px solid var(--line2);cursor:pointer;font-size:13px}
.hrow .ht{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.hrow .hp{font-size:11.5px;color:var(--ink3);white-space:nowrap}
.ctx{position:fixed;z-index:99;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.16);padding:5px;min-width:200px}
.ctx button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;font-size:13px;padding:7px 10px;border-radius:7px;cursor:pointer;color:var(--ink)}
.ctx button:hover{background:var(--hov)}.ctx button.dng{color:#9c3f3f}.ctx hr{border:0;border-top:1px solid var(--line2);margin:4px 2px}
.ctx .ttl{font-size:11px;color:var(--ink3);padding:5px 10px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.notewrap{position:relative}
.notewrap .snip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;color:var(--ink2);line-height:1.4}
.notewrap:hover::after{content:attr(data-note);position:absolute;left:0;top:calc(100% + 6px);z-index:55;background:var(--card);color:var(--ink);border:1px solid var(--line);padding:10px 13px;border-radius:9px;font-size:12.5px;line-height:1.5;white-space:pre-line;width:max-content;max-width:460px;box-shadow:0 14px 40px rgba(0,0,0,.14)}
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);font-weight:500;text-align:left;padding:8px 14px 6px}
td{padding:8px 14px;border-top:1px solid var(--line2);font-size:13px;vertical-align:middle}
th:first-child,td:first-child{padding-left:17px}
.empty{padding:22px 17px;color:var(--ink3);font-size:13px}
/* ---- Direction ---- */
.dirtrop{padding:9px 17px;font-size:12.5px;color:#96691e;background:#f9f3e8;border-bottom:1px solid var(--line)}
.dirtheme{display:flex;align-items:baseline;gap:10px;padding:10px 17px;border-bottom:1px solid var(--line);cursor:pointer}
.dirtheme .q{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--ink3)}
.dirtheme .t{font-size:13.5px;color:var(--ink2)}
.dirtheme:hover .t{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}
.dirrow .int{font-size:13.5px;font-weight:600;line-height:1.3}
.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 .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:74px}
.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 */
.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)}
@media(max-width:760px){
.dirrow{padding:10px 13px}
.dirlogrow{flex-direction:column;gap:3px}
.dirlogrow .d{width:auto}
.dirnudrow .who{display:none}
}
.projrow{display:flex;gap:10px;flex-wrap:wrap;padding:13px 17px}
.projcard{border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:170px;cursor:pointer;background:var(--card)}
/* La vignette du projet : ronde aux angles, jamais déformée, et discrète quand il n'y a
pas encore de photo. Le cadre garde sa place pour que rien ne saute au chargement. */
.pcov{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;
border-radius:11px;overflow:hidden;background:var(--line2);color:var(--ink3);border:1px solid var(--line)}
.pcov img{width:100%;height:100%;object-fit:cover;display:block}
.pcov.ed{cursor:pointer}
.pcov.ed:hover{border-color:var(--ink3)}
.pcov .x{position:absolute;top:2px;right:2px;width:17px;height:17px;border-radius:50%;border:0;
background:rgba(28,27,25,.62);color:#fff;font-size:10px;line-height:1;padding:0;cursor:pointer;
opacity:0;transition:opacity .15s}
.pcov:hover .x{opacity:1}
.projcard{display:flex;align-items:center;gap:11px}
.projcard .pcb{min-width:0}
.projcard:hover{border-color:#cfc9c0}
.projcard .c{font-size:11px;color:var(--ink3)}
.projcard .t{font-weight:600;font-size:13px;display:flex;align-items:center;gap:7px}
.projcard .m{font-size:11px;color:var(--ink3);margin-top:2px}
.daygrp{padding:9px 17px;border-top:1px solid var(--line2)}
.daygrp .d{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);margin-bottom:4px}
.evt{display:flex;align-items:center;gap:8px;font-size:13px;padding:2px 0;flex-wrap:wrap}
.evt .k{font-size:10.5px;border:1px solid var(--line);border-radius:99px;padding:0 7px;color:var(--ink3)}
/* Agenda : une ligne par élément, rien ne passe à la ligne. Le titre garde sa place, la note
prend ce qui reste et se coupe proprement, les commandes restent alignées à droite. */
.evt.tkrow{flex-wrap:nowrap;gap:8px;padding:4px 0;min-height:28px}
.evt.tkrow>*{flex:none;min-width:0}
.evt.tkrow .ttl{flex:0 1 auto;max-width:44%;min-width:90px;font-weight:500;cursor:text;outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt.tkrow .ttl:focus{white-space:normal;overflow:visible;max-width:none;flex:1 1 auto}
.evt.tkrow .pmeta{font-size:11px;color:var(--ink3);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.evt.tkrow .pnote,.evt.tkrow .notewrap{flex:1 1 0;min-width:110px}
.evt.tkrow .pnote{font-size:11.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt.tkrow .notewrap .snip{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset;line-height:1.6}
.evt.tkrow .spacer{flex:1 1 0}
.evt.tkrow .entmin{white-space:nowrap}
.evt.tkrow select.inline,.evt.tkrow input.inline,.evt.tkrow .rowlink{white-space:nowrap}
.daygrp.la{padding:11px 17px}
.daygrp.la .d{font-size:12px;font-weight:700;color:var(--ink);letter-spacing:.05em;margin-bottom:7px}
.daygrp.la .d .dsub{font-weight:500;color:var(--ink3);text-transform:none;letter-spacing:0;font-size:11.5px}
.daygrp.la .d.tdy{color:var(--acc,#3a7c88)}
.evt2{flex-wrap:nowrap;align-items:flex-start;padding:4px 0}
.evt2 input[type=checkbox],.evt2 .dot{margin-top:3px;flex:none}
.evt2 .evtmain{flex:1;min-width:0}
.evt2 .evtt{font-weight:400;font-size:13px;line-height:1.35;cursor:pointer}
.evt2 .evtn{display:block;font-size:11.5px;color:var(--ink3);margin-top:1px;font-weight:400}
.evt2 .k{flex:none;margin-top:2px;white-space:nowrap}
.ann{padding:12px 17px;border-top:1px solid var(--line2)}
.ann:first-of-type{border-top:none}
.ann .t{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px}
.ann .b{color:var(--ink2);font-size:13px;white-space:pre-wrap;margin-top:2px}
.ann .m{font-size:11px;color:var(--ink3);margin-top:4px}
.ann.annnl .t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc,#3a7c88);flex:0 0 8px}
.annclamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* la page Aethos */
.aggrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:18px;align-items:start}
@media(max-width:900px){.aggrid{grid-template-columns:1fr}}
.agtete{margin-bottom:18px}
.agann{padding:14px 18px;border-top:1px solid var(--line2)}
.agann:first-of-type{border-top:none}
.agann.nonlu{background:color-mix(in srgb,var(--acc,#3a7c88) 6%,transparent)}
.agt{display:flex;align-items:center;gap:8px;font-size:14.5px}
.agpt{width:8px;height:8px;border-radius:50%;background:var(--acc,#3a7c88);flex:0 0 8px}
.agb{color:var(--ink2);font-size:13.5px;line-height:1.55;white-space:pre-wrap;margin-top:6px;overflow-wrap:anywhere}
.agm{font-size:11.5px;color:var(--ink3);margin-top:8px}
.aglus{margin-top:8px;font-size:12px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.agpers{display:inline-flex;align-items:center;gap:5px}
.agav{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 22px;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;background:var(--wash,#f1efea);color:var(--ink2)}
.agabs-g{padding:8px 18px 10px;border-top:1px solid var(--line2)}
.agabs-g:first-of-type{border-top:none}
.agabs-l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.agpers-l{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0}
.agpers-l .agq{margin-left:auto;color:var(--ink3);font-size:12px;white-space:nowrap}
.agrub{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding:10px 18px 2px}
.agpage{padding:6px 18px}
.agpage .agpt2{font-size:13.5px;font-weight:500}
.agpage.ouvert{padding-bottom:12px}
.agsugg{border-top:1px solid var(--line2);background:color-mix(in srgb,var(--acc,#3a7c88) 4%,transparent);padding-bottom:6px}
.agsg{padding:10px 18px;border-top:1px dashed var(--line2)}
.agsg:first-of-type{border-top:none}
.agsgc{max-height:9.5em;overflow:auto}
.agsga{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.agtete>.hd{border-bottom:0}
/* la fiche du projet */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px 16px;padding:14px 18px}
.fnb b{display:block;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fnb b small{font-size:11.5px;font-weight:400;color:var(--ink3)}
.fnb span{font-size:11.5px;color:var(--ink3)}
.flist{padding:4px 0}
.fli{display:flex;gap:12px;padding:8px 18px;border-top:1px solid var(--line2);font-size:13px}
.fli:first-child{border-top:none}
.fli .fd{color:var(--ink3);font-size:12px;white-space:nowrap;min-width:78px;font-variant-numeric:tabular-nums}
.fli .fa{color:var(--ink2);font-size:12.5px;margin-top:2px;white-space:pre-wrap}
.fbil{padding:6px 0 4px}
.fbs{padding:8px 18px}
.fbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.fbil .agm{padding:4px 18px 10px}
/* sur téléphone, le titre d'une carte reste devant son compteur et son bouton */
@media(max-width:700px){.aethos-page .card>.hd>:not(h2),.fiche .card>.hd>:not(h2),#anncard>.hd>:not(h2){order:2}.aethos-page .card>.hd>.sub,.fiche .card>.hd>.sub{flex:1 0 100%}}
.pin{font-size:10px;border:1px solid var(--line);border-radius:99px;padding:0 7px;color:var(--ink3)}
.new{font-size:10px;background:#1e8a5a;color:#fff;border-radius:99px;padding:0 7px}
.prio1{color:#b0575f;font-weight:600}.prio3{color:var(--ink3)}
.done td{opacity:.45;text-decoration:line-through}
.done td:last-child,.done td:first-child{text-decoration:none}
@keyframes mshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{font:inherit;font-size:12px;padding:4px 10px;border:none;background:var(--card);cursor:pointer;color:var(--ink2)}
.seg button.on{background:var(--sel);color:var(--ink);font-weight:600}
.sug{background:#fdf5e3}
.sug>td:first-child{border-left:3px solid #e0b458}
.draghandle{width:24px;cursor:grab;color:var(--ink3);user-select:none;text-align:center}
tr.rowdrop td{border-top:2px solid #8E9794}
.cal{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{text-align:center;padding:6px 0;font-size:10.5px}
.cal td{border:1px solid var(--line2);height:92px;vertical-align:top;padding:4px 5px;font-size:11.5px;cursor:pointer}
.cal .num{font-size:11px;color:var(--ink3)}
.cal .today .num{font-weight:700;color:var(--ink)}
.cal .off{background:var(--hov)}
.cal .it{display:flex;align-items:center;gap:4px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .it .dot{width:6px;height:6px;flex:none}
.cal .it{line-height:1.5}
@media(min-width:1900px){.cal td{height:116px;font-size:12.5px;padding:6px 7px}.cal .num{font-size:12px}.cal .it .dot{width:7px;height:7px}.cal th{font-size:11.5px;padding:8px 0}}
.kb{display:flex;gap:10px;padding:13px 17px;overflow-x:auto;align-items:flex-start}
.kbcol{flex:1;min-width:190px;background:var(--hov);border:1px solid var(--line2);border-radius:10px;padding:8px}
.kbcol.kbdrop{outline:2px dashed #b8b2a8;outline-offset:-3px;background:var(--hov)}
.kbhd{display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);padding:2px 4px 8px}
.kbcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 9px;margin-bottom:6px;font-size:12.5px;cursor:grab}
.kbcard:active{cursor:grabbing}
.kbcard .m{font-size:11px;color:var(--ink3);margin-top:2px}
.bk{color:var(--ink3);font-size:13px;cursor:pointer;margin-bottom:10px;display:inline-block}
/* Espace projet : les donnees cles tiennent sur la ligne du titre, les onglets sont
dans la barre laterale (la rangee .ptabs ne reste que sur telephone ou barre repliee). */
.pkd{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;margin-left:auto;padding:6px 0 0 8px;min-width:0;max-width:100%}
.pkd>div{min-width:0;max-width:100%}
.pkd .v.kdtags{white-space:normal;max-width:260px;line-height:1.35}
.pkd .l{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);white-space:nowrap}
.pkd .v{font-size:13px;font-weight:600;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
@media(min-width:901px){body:not(.sidefolded) .ptabs{display:none!important}}
@media(max-width:900px){.pkd{margin-left:0;padding-left:0;gap:14px;width:100%}}
.sbsous{margin:2px 0 6px 14px;padding-left:6px;border-left:1px solid var(--line)}
.sitem.sub{padding:5px 10px;font-size:12.5px;color:var(--ink2);text-decoration:none}
.sbsous .sitem.sub.on,body .sbsous .sitem.sub.on{background:transparent!important;box-shadow:none!important;color:var(--acc,#3a7c88)!important;font-weight:600}
.sbsous .sitem.sub.on::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;margin:0 4px 0 -1px;flex:none}
.sitem.sub .sbct{margin-left:auto;font-size:10.5px;color:var(--ink3);font-weight:500}
.sitem.sub .sbarr{margin-left:auto;font-size:11px;color:var(--ink3)}
a.sitem.sub.ext,body.t-epure a.sitem.sub.ext,body.aethos a.sitem.sub.ext{color:var(--ink2);font-weight:inherit;text-decoration:none}
.sbsous .sitem.sub{font-weight:500}
.keydata{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:13px 17px}
.keydata .l{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.keydata .v{font-size:13.5px;font-weight:600}
.vREF{color:#b0575f;font-weight:600}.vVAO{color:#c08a3e;font-weight:600}.vVSO{color:#2e7d5b;font-weight:600}
.res{display:flex;align-items:baseline;gap:8px;padding:8px 17px;border-top:1px solid var(--line2);font-size:13px}
.res:first-of-type{border-top:none}
.res a{color:var(--ink);font-weight:500}
.menuwrap{position:relative}
.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)}
body.aethos .avbtn{border-color:rgba(255,255,255,.4);background:transparent;color:#fff}
.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:auto;max-height:calc(100vh - 64px);overscroll-behavior:contain}
/* telephone : les menus sont ancres a droite de leur bouton, qui se retrouve pres du bord gauche quand
l en-tete passe sur deux lignes. Le panneau sortait alors de l ecran. On l accroche a la fenetre. */
@media(max-width:700px){
.menu{position:fixed;top:auto;left:10px;right:10px;min-width:0;width:auto;max-height:70vh;overflow:auto;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.menu a,.menu .grp{padding-top:11px;padding-bottom:11px}
.menuwrap>button{min-width:38px;min-height:38px}
.avbtn{width:38px;height:38px}
header .btn.sm{min-height:34px}
header .helpq{width:34px;height:34px;min-width:34px;min-height:34px;flex:0 0 auto} /* carré, sinon le rond devient un œuf */
}
.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)}
.sitem.retour{color:var(--ink2);font-weight:600;background:var(--hov);margin:2px 0 6px}
.sitem.retour:hover{background:var(--sel);color:var(--ink)}
.menu .grp{padding:8px 14px 2px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}
#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}
.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{position:relative;background:var(--card);border-radius:14px;max-width:460px;width:100%;padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.18)}.modal.wide{max-width:760px}
.mx{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--ink3);font:20px/30px system-ui;cursor:pointer;padding:0}.mx:hover{background:var(--hov);color:var(--ink)}.modal.wide textarea{min-height:140px!important;font-size:14px;line-height:1.5}textarea.dzon{outline:2px dashed var(--acc,#3a7c88);outline-offset:2px}
.mact{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
/* ===== Thèmes supplémentaires ===== */
body.t-nuit{--hov:#2c2f31;--sel:#3a3f43;--wash:#26292c;--bg:#191b1d;--card:#232628;--ink:#e8e6e1;--ink2:#b3b1ab;--ink3:#83817b;--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,body.t-nuit textarea{background:#2b2e31;color:var(--ink);border-color:#3d4144}
body.t-nuit .seg{background:#232628;border-color:#3d4144}
body.t-nuit .seg button.on{background:var(--acc,#3a7c88);color:#fff}
body.t-nuit .sitem.on,body.t-nuit .sideents .enttab.on{background:var(--acc,#3a7c88);color:#fff}
body.t-nuit .sitem:hover,body.t-nuit .sideents .enttab:hover{background:#2c2f31}
body.t-nuit .card,body.t-nuit .projcard,body.t-nuit .kbcard{box-shadow:0 2px 14px rgba(0,0,0,.5)}
body.t-nuit .kbcol{background:#202325}
body.t-nuit .menu{background:#232628;border-color:#3d4144}
body.t-nuit .modal{background:#232628}
body.t-nuit .btn{background:#232628;border-color:#3d4144;color:var(--ink)}
body.t-nuit .btn.pri{background:var(--acc,#3a7c88);border-color:var(--acc,#3a7c88);color:#fff}
body.t-nuit .sug{background:#33301c}
body.t-nuit .tcard.sug{background:#33301c;border-color:#5a4d22}
body.t-nuit .sug>td:first-child{border-left-color:#8f7c2a}
body.t-nuit .st-grey{background:#2c2f31;color:#b3b1ab}
body.t-nuit .st-blue{background:#1d3340;color:#8fc3d8}
body.t-nuit .st-amber{background:#3b2e19;color:#dcab5e}
body.t-nuit .st-green{background:#1e3228;color:#84cba6}
body.t-nuit .st-red{background:#3a2222;color:#dd908a}
body.t-nuit select.inline.pill{border-color:#3d4144}
@media(max-width:900px){body.t-nuit aside{background:#1f2224;border-color:#34383b}body.t-nuit .burger{background:#101214;color:var(--acc,#3a7c88)}}
/* ---------- É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:3px;gap:3px}
body.t-epure .seg button{border-radius:980px;border:0;font-weight:500;background:transparent;padding:5px 11px;line-height:1.5}
body.t-epure .seg button.on{background:var(--acc);color:#fff;font-weight:600;box-shadow:none}
/* Le survol du segment posait var(--line2) sur une piste var(--hov) : deux gris
voisins, donc rien de visible. Sur ce thème la piste est grise, la pastille
survolée passe en blanc. */
body.t-epure .seg button:hover:not(.on){background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
body.t-epure .seg button.on:hover{background:#2f6a76}
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,body.t-epure .top{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 .wm,body.t-epure .who,body.t-epure .logo{color:var(--ink);font-weight:600;letter-spacing:-.022em}
body.t-epure header .wordmark small,body.t-epure header .wm small{color:var(--ink3)}
body.t-epure .logo{color:var(--ink);font-weight:600;letter-spacing:-.022em}
body.t-epure .logo small.logosub,body.t-epure .logo span{color:var(--ink3)}
body.t-epure #syncst{color:var(--ink3)!important}
body.t-epure #qsel,body.t-epure .io button,body.t-epure .top .btn,body.t-epure .top .avbtn,body.t-epure header .btn,body.t-epure header .avbtn,body.t-epure .burger{color:var(--ink);border-color:var(--line);background:var(--card)}
body.t-epure .top .helpq{color:var(--ink2);border-color:var(--line)}
body.t-epure .io button:hover,body.t-epure .top .btn:hover{background:var(--hov)}
body.t-epure .sitem,body.t-epure .entbtn{border-radius:10px;font-weight:500}
body.t-epure .sitem.on,body.t-epure .entbtn.on{background:var(--sel);color:var(--acc);font-weight:600;box-shadow:none}
body.t-epure .sgroup{text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);font-weight:600}
@media(max-width:880px){body.t-epure aside{background:var(--card)}body.t-epure .burger{background:var(--card);color:var(--ink);border:1px solid var(--line)}}
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 .logo,body.t-calque header span{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 header .btn:hover{background:rgba(38,36,31,.07)}
body.t-calque .card,body.t-calque .projcard,body.t-calque .kbcard{border:1px solid var(--line);border-radius:4px;box-shadow:none}
body.t-calque .kbcol{background:#f1eee6;border-radius:4px}
body.t-calque .sitem,body.t-calque .sideents .enttab,body.t-calque .seg,body.t-calque .btn,body.t-calque .catchip,body.t-calque input,body.t-calque select{border-radius:3px}
body.t-calque .sitem.on,body.t-calque .sideents .enttab.on{background:transparent;color:#35635E;box-shadow:inset 0 0 0 1.2px #35635E;font-weight:600}
body.t-calque .seg button.on{background:#26241f;color:#fdfcf9}
body.t-calque .btn.pri{background:#35635E;border-color:#35635E;color:#fff}
body.t-calque .btn.pri:hover{background:#9d3a26}
body.t-calque .tcald.today{border-color:#35635E}
@media(max-width:900px){body.t-calque aside{background:#f3f0e9}body.t-calque .burger{background:var(--bg);color:#35635E;border:1px solid var(--line)}}
body.t-beton{--bg:#cfd0cd;--card:#e3e4e1;--ink:#141414;--ink2:#38393a;--ink3:#65676a;--line:#a4a6a3;--line2:#c3c5c2}
body.t-beton header{background:#141414}
body.t-beton .card,body.t-beton .projcard,body.t-beton .kbcard,body.t-beton .kbcol,body.t-beton .modal,body.t-beton .seg,body.t-beton .sitem,body.t-beton .sideents .enttab,body.t-beton .btn,body.t-beton .menu,body.t-beton input,body.t-beton select,body.t-beton .catchip{border-radius:0}
body.t-beton .card,body.t-beton .projcard{border:1.5px solid #141414;box-shadow:5px 5px 0 rgba(20,20,20,.85)}
body.t-beton .kbcard{border:1.5px solid #141414;box-shadow:3px 3px 0 rgba(20,20,20,.85)}
body.t-beton .kbcol{background:#c0c2bf}
body.t-beton .modal{border:1.5px solid #141414}
body.t-beton .sitem.on,body.t-beton .sideents .enttab.on{background:#141414;color:#ff4f00}
body.t-beton .seg button.on{background:#141414;color:#fff}
body.t-beton .btn.pri{background:#ff4f00;border-color:#141414;color:#141414;font-weight:700}
body.t-beton .btn.pri:hover{background:#e64700}
body.t-beton .sgroup{text-transform:uppercase;letter-spacing:.14em}
body.t-beton .tcald.today{border-color:#ff4f00}
@media(max-width:900px){body.t-beton aside{background:#cfd0cd;border-right:1.5px solid #141414}body.t-beton .burger{background:#141414;color:#ff4f00}}
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 .sitem.on,body.t-riviera .sideents .enttab.on{background:#3d4a33;color:#fffdf8}
body.t-riviera .seg button.on{background:#3d4a33;color:#fff}
body.t-riviera .sitem:hover,body.t-riviera .sideents .enttab:hover{background:#efe9d8}
body.t-riviera .kbcol{background:#efe9d8}
body.t-riviera .btn.pri{background:#c4562e;border-color:#c4562e;color:#fff}
body.t-riviera .btn.pri:hover{background:#ab4a26}
body.t-riviera .tcald.today{border-color:#c4562e}
@media(max-width:900px){body.t-riviera aside{background:#f1ecdd}body.t-riviera .burger{background:#3d4a33;color:#f6f2e8}}
/* ===== Thème Lagune ===== */
/* Un bleu-vert de fond de piscine méditerranéenne, tenu bas : le bandeau en pétrole profond,
le papier légèrement verdi, un accent laiton pour ce qui appelle l'action. Sobre de près,
reconnaissable de loin, ce qu'aucun de nos blancs cassés n'arrivait à être. */
body.t-lagune{--bg:#eaefee;--card:#fbfdfc;--ink:#16211f;--ink2:#3f4f4c;--ink3:#7d8d89;
--line:#cfdcd8;--line2:#e2eae7;--ok:#2f7d63;--okbg:#dfeee7;--warn:#a6752c;--warnbg:#f6ecd8;
--neut:#7d8d89;--neutbg:#e2eae7}
body.t-lagune header{background:#17332f}
body.t-lagune .sitem.on,body.t-lagune .sideents .enttab.on{background:#17332f;color:#eaefee}
body.t-lagune .sitem:hover,body.t-lagune .sideents .enttab:hover{background:#dfe8e5}
body.t-lagune .kbcol{background:#e0e9e6}
body.t-lagune .seg button.on{background:#17332f;color:#fff}
body.t-lagune .card,body.t-lagune .projcard,body.t-lagune .kbcard{box-shadow:0 2px 12px rgba(23,51,47,.09)}
body.t-lagune .btn.pri{background:#0e7a6b;border-color:#0e7a6b;color:#fff}
body.t-lagune .btn.pri:hover{background:#0b6559}
body.t-lagune .tcald.today{border-color:#0e7a6b}
@media(max-width:900px){body.t-lagune aside{background:#e4ece9}body.t-lagune .burger{background:#17332f;color:#eaefee}}
/* annonce non lue : halo pulsé */
@keyframes annglow{0%,100%{box-shadow:0 0 0 0 rgba(244,101,48,0)}50%{box-shadow:0 0 0 5px rgba(244,101,48,.14),0 0 22px rgba(244,101,48,.30)}}
.card.annnew{animation:annglow 2.6s ease-in-out infinite}
@keyframes revglow{0%,100%{background:transparent}50%{background:rgba(244,101,48,.10)}}
tr.revglow>td{animation:revglow 2.6s ease-in-out infinite}
.kbcard.revglow,.tditem.revglow{animation:annglow 2.6s ease-in-out infinite;border-radius:10px}
.annpulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--acc,#3a7c88);margin-left:8px;vertical-align:middle;animation:annpulsek 2.6s ease-in-out infinite}
@keyframes annpulsek{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.4);opacity:1}}
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}
.helpq{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;font-weight:800;font-size:13px;line-height:1;cursor:pointer;background:transparent;color:inherit;font-family:inherit;padding:0}
.helpol{margin:0;padding-left:0;list-style:none;counter-reset:h}.helpol li{position:relative;padding:7px 0 7px 34px;font-size:13.5px;line-height:1.6;border-top:1px solid var(--line,#e3e0d9);counter-increment:h}.helpol li:first-child{border-top:0}
.helpol li::before{content:counter(h);position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;background:var(--ink,#1E2322);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
#upd{display:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:260;background:#1E2322;color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.25);gap:12px;align-items:center;white-space:nowrap}#upd.on{display:flex}#upd b{color:#ffd9cc}#upd button{background:var(--acc,#3a7c88);color:#fff;border:0;border-radius:999px;padding:6px 12px;font-weight:700;cursor:pointer}
/* ---------- le plan de charge ---------- */
.chwrap{overflow:auto;max-width:100%}
table.chg{border-collapse:separate;border-spacing:0;width:100%;font-size:12px}
table.chg th.chp{position:sticky;left:0;z-index:2;background:var(--card);text-align:left;padding:7px 10px;border-bottom:1px solid var(--line2);border-right:1px solid var(--line);min-width:170px;max-width:210px}
table.chg th.chp b{display:block;font-size:12.5px;font-weight:600}
table.chg th.chp span{display:block;font-size:10.5px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.chg th.chw{padding:5px 4px;font-size:10px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line2);min-width:58px}
table.chg th.chw span{display:block;font-size:10px;font-weight:400;color:var(--ink3)}
table.chg th.chw.tdy{color:var(--acc,#3a7c88)}
td.chc{border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);padding:4px 3px 3px;text-align:center;cursor:pointer;vertical-align:top;min-width:58px;height:42px}
td.chc:hover{background:var(--hov)}
td.chc.tdy{box-shadow:inset 1px 0 0 var(--acc,#3a7c88)}
td.chc b{display:block;font-size:11.5px;font-weight:600;line-height:1.2}
td.chc span{display:block;font-size:10px;color:var(--ink3);line-height:1.2}
td.chc.vide b{color:var(--ink3)}
td.chc.part{background:color-mix(in srgb,#3f66a0 5%,transparent)}
td.chc.plein{background:color-mix(in srgb,#2e7d5b 12%,transparent)}
td.chc.sur{background:color-mix(in srgb,#b0575f 16%,transparent)}
td.chc.sur b{color:#9c3f3f}
td.chc.off{background:repeating-linear-gradient(45deg,var(--line2) 0 4px,transparent 4px 8px)}
td.chc.over{outline:2px dashed var(--acc,#3a7c88);outline-offset:-2px}
.chb{display:flex;gap:1px;height:5px;margin-bottom:3px}
.chb i{display:block;border-radius:2px;min-width:3px;cursor:grab}
tr.chtot th.chp,tr.chtot td.chc{background:var(--wash,#faf9f7);font-weight:600;border-top:1px solid var(--line)}
.chl{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.chl select{flex:1;min-width:0}
.chl input{max-width:86px}
/* ===== téléphone : rien ne doit dépasser la largeur de l'écran =====
Un seul élément plus large que la fenêtre (une rangée de pastilles, un champ
dans une boîte de dialogue) élargit toute la page : le document glisse, l'en-tête
se coupe et les fenêtres flottantes se posent à moitié dehors. On empêche la page
de s'élargir, et ce qui est vraiment large défile pour lui-même. */
@media(max-width:900px){
html,body{max-width:100%;overflow-x:clip}
.seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:0 0 auto;white-space:nowrap}
/* une rangée de pastilles prend sa propre ligne, toute la largeur, et défile pour elle-même :
collée au titre elle sortait de l'écran par la droite */
.hd .seg{flex:1 0 100%;justify-content:flex-start}
.tasktbl{min-width:0} /* les colonnes cachées ne doivent plus réserver 960 px */
header .helpq{width:34px;height:34px;min-width:34px;min-height:34px;flex:0 0 auto}
header>*{flex:0 0 auto}
header .spacer{flex:1 1 auto}
header select#thbtn{display:none!important}
#mnav{max-width:100vw;overflow-x:auto;-webkit-overflow-scrolling:touch}
.modal{min-width:0;max-width:calc(100vw - 16px)}
.modal input,.modal select,.modal textarea{max-width:100%;box-sizing:border-box}
.hd>h2{min-width:0;overflow-wrap:anywhere}
}
/* 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}
.entpick{font:inherit;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
border:1px solid var(--line);background:var(--card);color:var(--ink3);
border-radius:999px;padding:3px 9px;margin:0 4px 4px 0;cursor:pointer}
.entpick:hover{border-color:var(--ink3);color:var(--ink2)}
.entpick.on{background:var(--acc,#2f6f7e);border-color:transparent;color:#fff;font-weight:600}
/* ---------- replier le menu latéral : le même geste et la même mémoire partout ---------- */
.sidefold{position:fixed;left:216px;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)}
@media(min-width:901px){.sidefold{display:flex}body.sidefolded .sidefold{left:0}}
/* Replié, le menu disparaissait : pour atteindre une autre page il fallait le
rouvrir. Il se réduit maintenant à une colonne d'icônes large comme un doigt,
comme dans Maquette, Métré, Temps, Direction et Transformation. Les intitulés
restent en infobulle, et les libellés s'effacent par la taille de police, car
ils sont écrits en texte nu à côté de l'icône, sans balise à masquer. */
@media(min-width:901px){
body.sidefolded aside{width:54px;min-width:54px;flex:0 0 54px;padding-left:7px;padding-right:7px;overflow-x:hidden}
body.sidefolded aside a,body.sidefolded aside button.sitem,body.sidefolded aside button.nv{
font-size:0;justify-content:center;text-align:center;padding:9px 0;gap:0;white-space:nowrap}
body.sidefolded aside .ic{font-size:15px;margin:0;flex:none}
body.sidefolded aside .lb{display:none}
body.sidefolded aside .dot{margin:0;flex:none}
/* les intitulés de section deviennent un filet, les compléments s'effacent */
body.sidefolded aside .sgroup{height:1px;padding:0;margin:9px 5px 8px;background:var(--line);
text-indent:-9999px;overflow:hidden;border:0}
/* le monogramme remplace la pastille : même couleur, mais on sait quel projet */
body.sidefolded aside .sitem.pj .dot{display:none}
body.sidefolded aside .sitem.pj .ini{display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:8px;font-size:10px;font-weight:700;letter-spacing:.02em;
color:#fff;font-family:inherit;flex:none}
/* le compteur devient un point sur l'icône : le nombre décalait l'icône de son axe */
body.sidefolded aside .sitem{position:relative}
body.sidefolded aside .sitem .cnt{position:absolute;top:4px;right:8px;width:8px;height:8px;min-width:0;
padding:0;border-radius:999px;font-size:0;line-height:0;overflow:hidden;box-shadow:0 0 0 2px var(--card)}
/* une ligne sans icône n'a rien à montrer : « Terminés » et les sous-onglets sortent */
body.sidefolded aside .sitem.sdone,body.sidefolded aside .sbsous{display:none}
body.sidefolded aside .sideents,body.sidefolded aside .navmore,
body.sidefolded aside .sfoot,body.sidefolded aside .sidefoot,
body.sidefolded aside .soon,body.sidefolded aside .sitem.sub{display:none}
body.sidefolded .sidefold{left:54px}
}
body.nosidebar .sidefold{display:none!important}
/* 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 select#thbtn{display:none!important}
header #projsel{max-width:120px}
}
/* v959 : les pièces jointes d'une tâche, en cartes nettes (Eric, 01/10 : « le texte, c'est le bazar ») */
.tfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:12px;margin:14px 0}
.tfcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;min-width:0}
.tfcard .tfimg{display:block;width:100%;height:96px;object-fit:cover;border:0;border-radius:0;background:var(--hov,#f4f3ef)}
.tfcard .tfdoc{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:26px;gap:2px;color:var(--ink2)}
.tfcard .tfnom{font-size:12px;font-weight:600;color:var(--ink);padding:7px 9px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tfcard .tfpied{display:flex;align-items:center;gap:4px;padding:2px 5px 6px 9px;font-size:11px;color:var(--ink3)}
.tfcard .tfpied span{flex:1}
.tfcard .tfbtn{border:0;background:transparent;width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink2);cursor:pointer;text-decoration:none}
.tfcard .tfbtn:hover{background:var(--hov,#f1f0ec);color:var(--ink)}
.tfcard .tfdel{font-size:12px}
.tfcard a{text-decoration:none;color:inherit}
/* v993 : le fil d'un retour (réponses de l'agence et de la personne) */
.retfil{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.retmsg{max-width:85%;padding:7px 10px;border-radius:10px;background:var(--wash,#f3f1ec);font-size:13px;line-height:1.45;white-space:pre-wrap}
.retmsg.agence{align-self:flex-end;background:color-mix(in srgb,var(--acc,#3a7c88) 12%,var(--card,#fff))}
.retmsg.neuf{box-shadow:0 0 0 2px var(--acc,#3a7c88)}
.retmsg .tmeta{display:block;margin-bottom:2px}
/* Administration, « Style des documents » (js/hub/stylesdoc.js) : cases et bouton de fichier sans la règle générale des libellés */
.sdwrap label.sdck{display:flex;align-items:center;gap:7px;font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);margin:0;cursor:pointer}
.sdwrap label.sdck input{width:auto;margin:0;flex:none}
.sdwrap label.sdbtn{display:inline-flex;align-items:center;font-size:12px;text-transform:none;letter-spacing:0;color:var(--ink);margin:0;cursor:pointer}
.sdwrap input[type=color]{width:44px;height:30px;padding:0;border:0;background:none}
/* Administration, Google Drive (js/hub/drivecnx.js) */
.drvcx-etat{margin-top:10px;padding:12px 14px;border:1px solid var(--line,#e3e1dc);border-radius:10px;background:var(--card,#fff)}
.drvcx-etat.on{border-color:color-mix(in srgb,var(--acc,#3a7c88) 45%,var(--line,#e3e1dc))}
.drvcx-etat p{margin:6px 0 0}
.drvcx-note{margin:8px 0 0}