/* ═══════════════════════════════════════════════════════════════
   CRM — système visuel
   Un instrument de travail : bleu-pétrole comme couleur unique,
   ocre réservé à ce qui demande une décision. Fond gris-vert froid.
   Bricolage Grotesque pour les titres et les chiffres, Instrument Sans
   pour l'interface. Aucune couleur d'agence, aucun emoji décoratif.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Palette Monday */
  --mdy-blue:#0073ea; --mdy-blue-hover:#0060b9; --mdy-chart:#579bfc; --mdy-navy:#225091;
  --mdy-green:#00c875; --mdy-green-dark:#037f4c; --mdy-red:#e2445c; --mdy-red-dark:#bb3354;
  --mdy-yellow:#ffcb00; --mdy-orange:#fdab3d; --mdy-purple:#a25ddc; --mdy-grey:#c4c4c4;

  --brand:#0073ea; --brand-deep:#0060b9; --brand-tint:#e5f4ff; --brand-line:#cce5ff;
  --signal:#fdab3d; --signal-t:#fff4e5; --signal-line:#f7dcb0;
  --ink:#323338; --ink-2:#676879; --ink-3:#9699a6; --ink-4:#c5c7d0;
  --paper:#ffffff; --ground:#ffffff; --sunken:#f5f6f8;
  --line:#e6e9ef; --line-2:#e6e9ef; --line-3:#eaecf2;
  --ok:#037f4c; --ok-t:#e6f9f1;
  --warn:#a35b0a; --warn-t:#fff4e5;
  --info:#0073ea; --info-t:#e5f4ff;
  --dead:#808080; --dead-t:#f0f1f3;
  --d:'Figtree',-apple-system,system-ui,sans-serif;
  --f:'Figtree',-apple-system,system-ui,sans-serif;
  --r:4px;
  --lift:0 6px 20px -6px rgba(0,0,0,.2);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--f);font-size:12.5px;line-height:1.5;
 -webkit-font-smoothing:antialiased;font-feature-settings:"cv02","cv03"}
button,input,select,textarea{font-family:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;font-size:inherit}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
em{font-style:normal}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
.n,.num-t{font-variant-numeric:tabular-nums}
.app{display:flex;min-height:100vh}
.load{padding:44px 26px;color:var(--ink-3);font-size:13.5px}
.empty{padding:56px 24px;text-align:center;color:var(--ink-3);font-size:13.5px}
.mini{font-size:11.5px;color:var(--ink-3)}
.sp{flex:1}

/* ── rail ───────────────────────────────────────────────────────── */
.rail{width:54px;flex:0 0 54px;background:var(--brand-deep);display:flex;flex-direction:column;
 align-items:center;padding:14px 0 14px;gap:6px}
.rail-logo{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
 margin-bottom:18px;flex:0 0 30px;background:rgba(255,255,255,.09)}
.rail-logo img{width:17px;height:17px;display:block;opacity:.95}
.rail-item{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
 color:rgba(255,255,255,.5);flex:0 0 34px;transition:color .12s,background .12s;padding:0}
.rail-item svg{width:19px;height:19px;display:block}
.rail-item[data-go],.rail-item[title]{cursor:pointer}
.rail-item:hover{color:rgba(255,255,255,.92);background:rgba(255,255,255,.08)}
.rail-item.active{color:#fff;background:rgba(255,255,255,.14)}
.rail .sp{flex:1}

/* ── barre latérale ─────────────────────────────────────────────── */
.nav{width:var(--navw,236px);flex:0 0 var(--navw,236px);background:var(--paper);
 border-right:1px solid var(--line);padding:18px 12px 12px;display:flex;flex-direction:column;
 height:100vh;position:sticky;top:0}
.nav.collapsed{--navw:0px;padding:0;border-right:0;overflow:hidden}
.navgrip{width:5px;flex:0 0 5px;cursor:col-resize;position:relative;z-index:20}
.navgrip:hover::after,.navgrip.drag::after{content:"";position:absolute;inset:0 2px;background:var(--brand);border-radius:2px}
.nav-hd{display:flex;align-items:center;gap:2px;padding:0 5px 14px;color:var(--ink-4);
 font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.nav-hd .t{flex:1}
.nav-hd button{color:var(--ink-3);font-size:13px;padding:3px 5px;border-radius:5px;line-height:1}
.nav-hd button:hover{background:var(--sunken);color:var(--ink)}

.wsrow{display:flex;align-items:stretch;gap:7px;margin-bottom:14px}
.ws{flex:1;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r);
 padding:6px 10px;font-size:13px;font-weight:600;background:var(--paper);min-width:0;
 transition:border-color .12s}
.ws:hover{border-color:var(--ink-4)}
.ws.open{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.ws-badge{width:22px;height:22px;border-radius:5px;color:#fff;display:grid;place-items:center;
 font-family:var(--d);font-size:11px;font-weight:600;flex:0 0 24px;letter-spacing:-.02em}
.ws .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.ws .cv{color:var(--ink-3);font-size:10px;flex:0 0 auto}
.addbtn{width:32px;flex:0 0 32px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
 font-size:17px;color:var(--ink-2);display:grid;place-items:center;line-height:1;transition:.12s}
.addbtn:hover{border-color:var(--ink-4);color:var(--ink)}
.addbtn.on{background:var(--brand);border-color:var(--brand);color:#fff}

.navscroll{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px}
.navscroll::-webkit-scrollbar{width:8px}
.navscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;border:2px solid var(--paper)}
.agents{display:none}
.contenu{display:flex;align-items:center;gap:2px;padding:4px 10px 6px;font-size:10px;
 font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.contenu .t{flex:1}
.contenu button{color:var(--ink-3);font-size:13px;padding:2px 5px;border-radius:5px;line-height:1}
.contenu button:hover{background:var(--sunken);color:var(--ink)}
.nav-label{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
 color:var(--ink-4);padding:16px 10px 5px}

/* la sélection est un filet vermillon, pas une pastille pleine */
.nrow{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px 5px 10px;border-radius:0 var(--r) var(--r) 0;
 font-size:12px;color:var(--ink-2);text-align:left;white-space:nowrap;overflow:hidden;
 border-left:2px solid transparent;transition:.1s}
.nrow:hover{background:var(--line-3);color:var(--ink)}
.nrow.sel{border-left-color:var(--brand);background:var(--brand-tint);color:var(--ink);font-weight:600}
.nrow .gl{flex:0 0 14px;text-align:center;font-size:11px;color:var(--ink-4)}
.nrow.sel .gl{color:var(--brand)}
.nrow .nm{flex:1;overflow:hidden;text-overflow:ellipsis}
.nrow .cnt{color:var(--ink-4);font-size:10.5px;font-variant-numeric:tabular-nums;font-weight:500}
.nrow.sel .cnt{color:var(--brand)}
.nfold>.nrow{font-weight:600;color:var(--ink)}
.nrow .car{flex:0 0 9px;font-size:7px;color:var(--ink-4);transition:transform .15s;display:inline-block}
.nfold.open>.nrow .car{transform:rotate(90deg)}
.nkids{display:none;flex-direction:column;gap:2px;padding-left:15px}
.nfold.open>.nkids{display:flex}

.navfoot{margin-top:auto;border-top:1px solid var(--line-2);padding-top:12px;margin-top:14px}
.usr{display:flex;align-items:center;gap:10px;padding:6px 7px;border-radius:var(--r);width:100%;text-align:left}
.usr:hover{background:var(--line-3)}
.usr .av{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;
 place-items:center;font-size:10.5px;font-weight:700;flex:0 0 28px;overflow:hidden}
.usr .av img{width:100%;height:100%;object-fit:cover}
.usr .un{min-width:0;flex:1}
.usr .un b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usr .un span{display:block;font-size:11px;color:var(--ink-3)}

/* menu de création */
.pop{position:absolute;top:100%;left:0;right:0;margin-top:6px;background:var(--paper);
 border:1px solid var(--line);border-radius:9px;box-shadow:var(--lift);padding:7px;z-index:80;display:none}
.pop.on{display:block}
.pop h4{margin:0;padding:7px 10px 7px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
 text-transform:uppercase;color:var(--ink-3)}
.pop button{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;font-size:13.5px;
 color:var(--ink);border-radius:var(--r);text-align:left}
.pop button:hover{background:var(--line-3)}
.pop button .ic{flex:0 0 18px;text-align:center;font-size:13px;color:var(--ink-3)}
.pop hr{border:0;border-top:1px solid var(--line-2);margin:6px 4px}

/* ── zone principale ────────────────────────────────────────────── */
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--ground)}
.topbar{background:var(--paper);border-bottom:1px solid var(--line);padding:13px 24px 0}
.title-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.title-row h1{font-family:var(--d);font-size:19px;font-weight:600;margin:0;letter-spacing:-.02em}
.title-row h1 em{margin-right:9px}
.lock,.w-ico{color:var(--ink-4);font-size:13px}
.subtitle{font-size:13px;color:var(--ink-2);padding:5px 0 0}
.toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:9px 0 9px}
.tool{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);font-size:12px;
 padding:4px 8px;border-radius:var(--r)}
.tool:hover{background:var(--line-3)}
.searchbox{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);
 color:var(--ink-3);font-size:12.5px;min-width:200px;background:var(--paper)}
.searchbox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.tabsrow{display:flex;gap:22px;align-items:center;padding:2px 0 0}
.btab{font-size:13px;font-weight:500;padding:7px 0 10px;color:var(--ink-2);
 border-bottom:2px solid var(--brand);margin-bottom:-1px}
.btab.off{border-bottom-color:transparent;color:var(--ink-3)}
.btab:hover{color:var(--ink)}
.btab:not(.off){color:var(--ink);font-weight:600}

.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--paper);
 color:var(--ink);border-radius:var(--r);padding:6px 12px;font-size:12.5px;font-weight:500;transition:.12s}
.btn:hover{background:var(--line-3);border-color:var(--ink-4);text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn.on{background:var(--brand-tint);border-color:var(--brand-line);color:var(--brand-deep);font-weight:600}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ── tuiles du cockpit ──────────────────────────────────────────── */
.board{padding:18px 26px 60px;display:grid;gap:14px;grid-template-columns:repeat(12,minmax(0,1fr))}
.w{background:var(--paper);border:1px solid var(--line);border-radius:9px;display:flex;flex-direction:column;overflow:hidden}
.w-3{grid-column:span 3} .w-4{grid-column:span 4} .w-4b{grid-column:span 8} .w-5{grid-column:span 5}
.w-6{grid-column:span 6} .w-7{grid-column:span 7} .w-8{grid-column:span 8} .w-12{grid-column:span 12}
.w-head{display:flex;align-items:center;gap:9px;padding:12px 15px 5px}
.w-head h2{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 color:var(--ink-2);margin:0}
.w-head h2 em{display:none}
.w-body{padding:2px 15px 15px;flex:1;display:flex;flex-direction:column}
.w-sub{font-size:12.5px;color:var(--ink-2);margin:-2px 0 12px}
.w-foot{font-size:12.5px;color:var(--ink-2);margin:16px -17px -17px;padding:12px 17px;
 background:var(--line-3);border-top:1px solid var(--line-2);line-height:1.55}
.num{padding-top:7px}
.num .val{font-family:var(--d);font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.num .val.muted{color:var(--ink-4)}
.num .cmp{font-size:12.5px;color:var(--ink-2);margin-top:7px}
.num .cmp.up{color:var(--ok);font-weight:600}
.num .cmp.warn{color:var(--warn);font-weight:600}
.hero .val{font-size:31px;color:var(--brand)}
.masked{color:var(--ink-4);font-family:var(--f);font-weight:600}

/* barres */
.hbars{display:grid;gap:9px;padding-top:4px}
.hb{display:grid;grid-template-columns:132px minmax(0,1fr) 116px;gap:12px;align-items:center}
.hb-l{font-size:12.5px;color:var(--ink-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-t{background:var(--sunken);border-radius:2px;height:14px}
.hb-f{height:100%;border-radius:2px;background:var(--brand);display:block}
.hb-v{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-v small{font-weight:400;color:var(--ink-3)}
.hb.alert .hb-l{color:var(--signal);font-weight:600}
.hb.alert .hb-f{background:repeating-linear-gradient(135deg,var(--signal) 0 4px,#e5c894 4px 8px)}
.vbars{display:flex;align-items:stretch;gap:10px;height:215px;padding-top:26px}
.vcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.vplot{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.vbar{width:100%;max-width:30px;background:var(--brand);border-radius:2px 2px 0 0;position:relative;min-height:2px}
.vval{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;
 font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.vlab{font-size:11px;color:var(--ink-3)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3);margin-top:14px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* tableaux de widget */
.tbl-wrap{overflow-x:auto;margin:0 -17px;padding:0 17px}
.wt{border-collapse:collapse;width:100%;font-size:13px;min-width:520px}
.wt th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink-3);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.wt td{padding:11px 10px;border-bottom:1px solid var(--line-2)}
.wt tr:last-child td{border-bottom:none}
.wt td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.wt td.name{font-weight:600}
.wt tr.best td{background:var(--ok-t)}
.wt tr.worst td{background:var(--signal-t)}

.note{grid-column:span 12;background:var(--warn-t);border:1px solid #f2e0bd;border-radius:9px;
 padding:14px 17px;font-size:13px;color:#6d4708;line-height:1.6}
.note b{color:#4d3105}
.note.blue{background:var(--info-t);border-color:#cfdcf1;color:#1e4478}
.note.blue b{color:#123059}

/* ── vue tableau ────────────────────────────────────────────────── */
/* Pas de grille : une seule règle verticale sépare le nom des données,
   des filets horizontaux très clairs donnent le rythme. */
.boardview{padding:4px 0 80px}
.grp{margin:16px 0 22px}
.grp-head{display:flex;align-items:baseline;gap:10px;padding:0 26px 10px;cursor:pointer;
 position:relative}
.grp-head::after{content:"";position:absolute;left:26px;right:26px;bottom:0;height:1px;background:var(--line)}
.grp-head .caret{color:var(--ink-4);font-size:8px;position:relative;top:-3px;transition:transform .15s}
.grp-head.cl .caret{transform:rotate(-90deg)}
.grp-head>span:nth-child(2){font-family:var(--d);font-size:13px;font-weight:600;letter-spacing:-.01em;
 color:var(--ink)}
.grp-head .count{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:500}
.grp-head .count::before{content:"·";margin-right:9px;color:var(--ink-4)}
.g-blue,.g-green,.g-purple,.g-orange,.g-red,.g-navy{color:inherit}

.tblscroll{overflow-x:auto;padding:0 26px;scrollbar-width:thin}
.tblscroll::-webkit-scrollbar{height:8px}
.tblscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.tblscroll::-webkit-scrollbar-track{background:transparent}

.mb{border-collapse:separate;border-spacing:0;font-size:12px;background:transparent;
 width:max-content;min-width:100%}

.mb th{background:var(--ground);color:var(--ink-4);font-size:9px;font-weight:600;letter-spacing:.11em;
 text-transform:uppercase;text-align:left;padding:0 13px 8px;white-space:nowrap;
 border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
.mb th.first{padding-left:14px}
.mb th.num{text-align:right}

.mb td{padding:0;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-3);
 text-align:left;white-space:nowrap;background:var(--paper)}
.mb td:last-child{border-right:0}
.mb th:not(.first){border-right:1px solid var(--line-3)}
.mb th:last-child{border-right:0}
.mb tbody tr:last-child td{border-bottom:1px solid var(--line)}
.mb td .cell{padding:7px 13px;display:block;overflow:hidden;text-overflow:ellipsis;
 color:var(--ink-2);min-height:31px;line-height:17px}
.mb td.num .cell{font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}

/* la colonne nom : le seul repère fixe, séparé par une règle */
.mb th.first,.mb td.first{width:238px;min-width:238px;max-width:238px;
 position:sticky;left:0;z-index:1}
.mb th:not(.first),.mb td:not(.first){min-width:96px}
.mb th.first{z-index:3}
.mb td.first{border-right:1px solid var(--line)}
.mb th.first{border-right:1px solid var(--line)}
.mb td.first .cell{padding:7px 16px 7px 13px;font-weight:600;font-size:12px;color:var(--ink);
 position:relative}
.mb td.first .cell::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
 border-radius:2px;background:transparent;transition:background .12s}

/* survol : une ligne entière se détache, marquée à gauche */
.mb tbody tr:hover td{background:#f8faf9}
.mb tbody tr:hover td.first .cell::before{background:var(--brand)}
.mb tbody tr:hover td.first .cell{color:var(--brand-deep)}
.mb tr.clickable td .cell{cursor:pointer}
.openhint{font-size:10px;color:var(--brand);margin-left:9px;opacity:0;font-weight:500}
.mb tr:hover .openhint{opacity:1}

/* cellules éditables : le repère apparaît au survol de la cellule seule */
.mb td .cell.ed{cursor:text}
.mb td .cell.ed:hover{box-shadow:inset 0 0 0 1px var(--brand-line);border-radius:5px}
.mb td .cell input,.mb td .cell select{width:100%;border:0;background:transparent;padding:0;
 outline:none;font:inherit;color:var(--ink)}

/* en-tête : le menu et l'ajout de colonne restent discrets */
.mb th{position:relative}
.mb th .colmenu{position:absolute;right:6px;bottom:8px;opacity:0;color:var(--ink-4);
 padding:1px 4px;border-radius:4px;font-size:12px;line-height:1}
.mb th:hover .colmenu{opacity:1}
.mb th .colmenu:hover{background:var(--sunken);color:var(--ink)}
.addcol{color:var(--ink-4);font-size:14px;padding:0 14px;font-weight:400}
.addcol:hover{color:var(--brand)}
.grp-add{font-size:12px;color:var(--ink-4);padding:12px 26px 0;font-weight:500}
.grp-add:hover{color:var(--brand)}
.grp-head .gmenu{opacity:0;color:var(--ink-4);padding:1px 5px;border-radius:4px;font-size:12px}
.grp-head:hover .gmenu{opacity:1}
.grp-head .gmenu:hover{background:var(--sunken);color:var(--ink)}

/* pastille de statut : teinte + point, jamais un bloc plein */
.slab{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;max-width:100%;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 color:color-mix(in srgb,var(--c,#9195a8) 78%,#12161a)}
.slab::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--c,#9195a8);flex:0 0 7px}
.src-tag{display:inline-block;font-size:12px;color:var(--ink-2);white-space:nowrap}
.src-tag + .src-tag{margin-left:4px;padding-left:8px;border-left:1px solid var(--line)}
.pers{width:20px;height:20px;border-radius:50%;background:var(--sunken);display:inline-grid;
 place-items:center;font-size:9px;font-weight:700;color:var(--ink-2);vertical-align:-6px}
.link{color:var(--brand)}
.chip{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;
 background:var(--sunken);color:var(--ink-2);white-space:nowrap}
.chip.g{background:var(--ok-t);color:var(--ok)} .chip.r{background:var(--signal-t);color:var(--signal)}
.chip.b{background:var(--info-t);color:var(--info)} .chip.o{background:var(--warn-t);color:var(--warn)}
.chip.p{background:#f3eef9;color:#6c4795} .chip.y{background:var(--warn-t);color:var(--warn)}
.chip.gr{background:var(--dead-t);color:var(--dead)}
.tag{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.tag.live{background:var(--ok-t);color:var(--ok)}
.tag.todo{background:var(--warn-t);color:var(--warn)}

/* cellules éditables */
.mb td .cell.ed{cursor:text}
.mb td .cell.ed:hover{box-shadow:inset 0 0 0 2px var(--brand-line)}
.mb td .cell input,.mb td .cell select{width:100%;border:0;background:transparent;padding:0;outline:none;font:inherit}

/* ── accueil d'espace ───────────────────────────────────────────── */
.wshome{padding:0 0 70px}
.wshero{display:flex;align-items:flex-start;gap:22px;padding:38px 32px 0}
.wstile{width:86px;height:86px;border-radius:16px;display:grid;place-items:center;color:#fff;
 font-family:var(--d);font-size:30px;font-weight:600;flex:0 0 86px;letter-spacing:-.03em}
.wshead{flex:1;min-width:0;padding-top:8px}
.wshead h1{font-family:var(--d);font-size:34px;font-weight:600;margin:0;letter-spacing:-.03em;
 display:flex;align-items:center;gap:10px}
.wshead h1 .cv{font-size:15px;color:var(--ink-4)}
.wshead p{margin:7px 0 0;color:var(--ink-2);font-size:14px}
.wsactions{display:flex;align-items:center;gap:10px;padding-top:14px}
.wstabs{display:flex;gap:26px;padding:28px 32px 0;border-bottom:1px solid var(--line)}
.wstab{display:flex;align-items:center;gap:7px;padding:9px 0 12px;font-size:13.5px;color:var(--ink-2);
 border-bottom:2px solid transparent;margin-bottom:-1px}
.wstab span{display:none}
.wstab.on{color:var(--ink);border-bottom-color:var(--brand);font-weight:600}
.wstab:hover{color:var(--ink)}
.wslist2{padding:4px 32px 0}
/* Sur un grand écran, une page collée au bord gauche laisse un tiers de
   vide à droite et ne ressemble à rien. Tout l'accueil d'un espace tient
   dans la même colonne, centrée. */
.wshero,.wstabs,.wslist2,.gu{max-width:1280px;margin-left:auto;margin-right:auto}
.wsitem{display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--line-2);
 cursor:pointer;font-size:14px}
.wsitem:hover{background:var(--line-3)}
.wsitem:hover .nm span{color:var(--brand)}
.wsitem .bgl{flex:0 0 20px;color:var(--ink-4);font-size:13px}
.wsitem .nm{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.wsitem .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.wsitem .st{color:var(--ink-4);font-size:15px}
.wsitem .cnt{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}

/* ── fiche ──────────────────────────────────────────────────────── */
.rec{position:fixed;inset:0;background:var(--ground);z-index:95;display:none;flex-direction:column}
.rec.on{display:flex;overflow:hidden}
.rec-top{background:var(--paper);border-bottom:1px solid var(--line);padding:9px 18px;
 display:flex;align-items:center;gap:12px;flex:0 0 auto}
.rec-top .bk{font-size:13px;color:var(--ink-2);padding:6px 9px;border-radius:var(--r);font-weight:500}
.rec-top .bk:hover{background:var(--line-3);color:var(--ink)}
/* Le cadre de la fiche ne bouge pas : le nom du client, les chiffres et
   ce qu'il faut faire restent sous les yeux, et on descend à l'intérieur
   d'une colonne — la conversation, les papiers — sans perdre le reste de
   vue. Une page qui défile en entier fait perdre le fil : on ne sait
   plus si on regarde encore le même client. */
.rec-body{flex:1;min-height:0;display:grid;
  grid-template-columns:376px minmax(0,1fr) 324px}
.rec-col{padding:20px;display:flex;flex-direction:column;gap:0;min-width:0;
  overflow-y:auto;overscroll-behavior:contain}
.rec-col::-webkit-scrollbar{width:9px}
.rec-col::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;border:2px solid var(--paper)}
.rec-col.c::-webkit-scrollbar-thumb{border-color:var(--ground)}
.rec-col.l{background:var(--paper);border-right:1px solid var(--line);padding:0}
.rec-col.r{background:var(--paper);border-left:1px solid var(--line);padding:0}
.rec-col.c{background:var(--ground);padding:14px 18px}

/* colonnes latérales : sections séparées par des filets, pas des boîtes */
.rec-col.l .pan,.rec-col.r .pan{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.rec-col.l .pan:last-child,.rec-col.r .pan:last-child{border-bottom:0}
.pan{background:var(--paper);border:1px solid var(--line);border-radius:9px}
.pan-h{display:flex;align-items:center;gap:8px;padding:14px 16px 5px}
.pan-h b{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);flex:1}
.pan-h .ct{color:var(--ink-4);font-weight:600;font-variant-numeric:tabular-nums}
.pan-h button{font-size:12px;color:var(--brand);padding:3px 7px;border-radius:5px;font-weight:600}
.pan-h button:hover{background:var(--brand-tint)}
.pan-b{padding:3px 16px 13px}
.pan-b.tight{padding:0 16px 11px}

.idcard{display:flex;align-items:flex-start;gap:11px;padding:16px 16px 4px}
.idav{width:38px;height:38px;border-radius:10px;background:var(--brand);color:#fff;display:grid;
 place-items:center;font-family:var(--d);font-size:18px;font-weight:600;flex:0 0 48px;letter-spacing:-.02em}
.idcard h2{font-family:var(--d);font-size:19px;font-weight:600;margin:0;letter-spacing:-.02em;line-height:1.15}
.idcard .sub{font-size:12px;color:var(--ink-2);margin-top:3px;word-break:break-word}
.qacts{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:12px 16px 13px;
 border-bottom:1px solid var(--line)}
.qact{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;min-width:0;
 border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-size:9.5px;color:var(--ink-2);
 transition:.12s}
.qact:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)}
.qact:disabled{opacity:.4}
.qact i{font-size:12px;line-height:1}

.prop{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:baseline;
 padding:5px 0;border-bottom:1px solid var(--line-3)}
.prop:last-child{border-bottom:0}
.prop dt{font-size:10.5px;color:var(--ink-3);font-weight:500;line-height:16px}
.prop dd{margin:0;font-size:12px;font-weight:500;word-break:break-word;line-height:16px;min-height:16px}
.prop dd.ed{cursor:text;border-radius:4px;padding:1px 5px;margin:-1px -5px}
.prop dd.ed:hover{background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand-line)}
.prop dd.none{color:var(--ink-4);font-weight:400}
.prop dd input,.prop dd select{width:100%;border:1px solid var(--line);border-radius:5px;padding:4px 8px;font:inherit}

.atabs{display:flex;gap:18px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--paper);
 border-radius:9px 9px 0 0;overflow-x:auto}
.atab{padding:11px 0 9px;font-size:12px;color:var(--ink-2);border-bottom:2px solid transparent;
 margin-bottom:-1px;white-space:nowrap;font-weight:500}
.atab.on{color:var(--ink);border-bottom-color:var(--brand);font-weight:600}
.atab:hover{color:var(--ink)}
.amonth{font-family:var(--d);font-size:12.5px;font-weight:600;margin:16px 0 8px;color:var(--ink-2);
 letter-spacing:.01em;text-transform:capitalize}
.amonth:first-child{margin-top:6px}
.aitem{background:var(--paper);border:1px solid var(--line);border-radius:8px;margin-bottom:10px;overflow:hidden}
.aitem-h{display:flex;align-items:flex-start;gap:12px;padding:14px 16px}
.aitem-h .ai{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-size:13px;flex:0 0 28px}
.ai.note{background:var(--info-t);color:var(--info)} .ai.call{background:var(--ok-t);color:var(--ok)}
.ai.email{background:#f3eef9;color:#6c4795} .ai.meeting{background:var(--warn-t);color:var(--warn)}
.ai.task{background:var(--signal-t);color:var(--signal)}
.aitem-h .at{flex:1;min-width:0}
.aitem-h .at b{font-size:13.5px;font-weight:600;display:block}
.aitem-h .at span{font-size:12px;color:var(--ink-3)}
.aitem-h .aw{font-size:11.5px;color:var(--ink-3);white-space:nowrap;padding-top:3px;font-variant-numeric:tabular-nums}
.aitem-b{padding:0 16px 15px 56px;font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.aitem-f{padding:9px 16px 10px 56px;display:flex;gap:8px;border-top:1px solid var(--line-3)}
.aitem-f button{font-size:12px;color:var(--ink-3);padding:2px 7px;border-radius:5px;font-weight:500}
.aitem-f button:hover{background:var(--line-3);color:var(--ink)}
.aempty{padding:34px 18px;text-align:center;color:var(--ink-3);font-size:12.5px;line-height:1.7;
 background:var(--paper);border:1px dashed var(--line);border-radius:8px}

.relrow2{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-3);cursor:pointer}
.relrow2:last-child{border-bottom:0}
.relrow2:hover b{color:var(--brand)}
.relrow2 .rb{width:24px;height:24px;border-radius:7px;background:var(--sunken);display:grid;
 place-items:center;font-size:11px;flex:0 0 24px;color:var(--ink-3);margin-top:1px}
.relrow2 .rt{flex:1;min-width:0}
.relrow2 b{font-size:12.5px;font-weight:600;display:block;line-height:1.4;
 overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.relrow2 span{font-size:11px;color:var(--ink-3)}
.relrow2 .amt{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.relempty{padding:18px 4px;color:var(--ink-4);font-size:12.5px}

/* ── kanban ─────────────────────────────────────────────────────── */
.kb{display:flex;gap:12px;overflow-x:auto;padding:18px 26px 24px;align-items:flex-start;
 height:calc(100vh - 148px)}
.kcol{flex:0 0 288px;display:flex;flex-direction:column;max-height:100%;
 background:var(--paper);border:1px solid var(--line);border-radius:9px}
.kcol-h{padding:13px 15px 11px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line-2)}
.kcol-h .kdot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.kcol-h b{font-size:12.5px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 letter-spacing:.01em}
.kcol-h .kn{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;
 border:1px solid var(--line);border-radius:20px;padding:1px 7px}
.kcol-b{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--ground)}
.kcol-b::-webkit-scrollbar{width:7px}
.kcol-b::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.kcard{background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:12px 13px;cursor:pointer;
 transition:.12s}
.kcard:hover{border-color:var(--ink-4);transform:translateY(-1px);box-shadow:0 6px 16px -12px rgba(22,23,28,.55)}
.kcard b{font-size:13px;font-weight:600;color:var(--ink);display:block;line-height:1.35}
.kcard:hover b{color:var(--brand)}
.kcard .kd{font-size:11.5px;color:var(--ink-3);margin-top:5px;font-variant-numeric:tabular-nums}
.kcard .kf{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line-3)}
.kcard .kf .amt{margin-left:auto;font-family:var(--d);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.kcol-f{padding:11px 15px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--ink-3);
 background:var(--paper);border-radius:0 0 9px 9px}
.kcol-f b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.kcol-f div{display:flex;justify-content:space-between;gap:8px;padding:1px 0}

/* ── autorisations ──────────────────────────────────────────────── */
.axw{overflow:auto;max-height:64vh;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.axt{border-collapse:separate;border-spacing:0;font-size:12.5px;width:max-content;min-width:100%}
.axt th{position:sticky;top:0;background:var(--paper);z-index:3;padding:11px 12px;font-size:10.5px;
 font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
 border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.axt th.bn{position:sticky;left:0;z-index:4;min-width:270px}
.axt td{padding:6px 10px;border-bottom:1px solid var(--line-3);white-space:nowrap}
.axt td.bn{position:sticky;left:0;background:var(--paper);z-index:1;font-weight:500;min-width:270px}
.axt tr:hover td,.axt tr:hover td.bn{background:var(--line-3)}
.axt tr.wsrow td{background:var(--sunken);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.axt tr.wsrow td.bn{background:var(--sunken)}
.lvl{border:1px solid var(--line);border-radius:20px;padding:3px 9px;font-size:11.5px;background:var(--paper);
 font-weight:500}
.lvl.none{color:var(--ink-4)}
.lvl.view{color:var(--info);border-color:#cfdcf1;background:var(--info-t)}
.lvl.edit{color:var(--ok);border-color:#c2e2d3;background:var(--ok-t)}
.lvl.admin{color:var(--brand-deep);border-color:var(--brand-line);background:var(--brand-tint)}

/* ── modale, notifications ──────────────────────────────────────── */
.mo{position:fixed;inset:0;background:rgba(22,23,28,.42);backdrop-filter:blur(2px);
 display:grid;place-items:center;z-index:100;padding:20px}
.mo-c{background:var(--paper);border-radius:12px;padding:26px 28px;max-width:520px;width:100%;
 max-height:86vh;overflow-y:auto;box-shadow:0 24px 60px -20px rgba(22,23,28,.5)}
.mo-c h2{font-family:var(--d);font-size:20px;font-weight:600;margin:0 0 5px;letter-spacing:-.02em}
.mo-c .mp{color:var(--ink-2);font-size:13px;margin-bottom:20px;line-height:1.6}
.frm{display:flex;flex-direction:column;gap:14px}
.frm label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
 color:var(--ink-3);display:block;margin-bottom:5px}
.inp{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r);
 font-size:13.5px;background:var(--paper);font-family:inherit}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
textarea.inp{line-height:1.6;resize:vertical}
.mo-f{display:flex;gap:9px;justify-content:flex-end;margin-top:22px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
 padding:11px 18px;border-radius:8px;font-size:13px;font-weight:500;z-index:120;
 box-shadow:0 12px 32px -14px rgba(22,23,28,.7)}
.toast.err{background:#9a3327}

/* ── recherche globale ──────────────────────────────────────────── */
.gsearch{position:relative;margin-bottom:12px}
.gsearch input{width:100%;padding:8px 11px 8px 30px;border:1px solid var(--line);
 border-radius:var(--r);font-size:13px;font-family:inherit}
.gsearch input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.gsearch::before{content:"⌕";position:absolute;left:10px;top:50%;transform:translateY(-50%);
 color:var(--ink-4);font-size:14px}
.gres{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--paper);border:1px solid var(--line);
 border-radius:9px;box-shadow:var(--lift);max-height:340px;overflow-y:auto;z-index:60;display:none;padding:6px}
.gres.on{display:block}
.gres button{display:block;width:100%;text-align:left;padding:8px 10px;font-size:13px;border-radius:var(--r)}
.gres button:hover{background:var(--line-3)}
.gres b{display:block;font-weight:600}
.gres span{font-size:11px;color:var(--ink-3)}

/* ── mobile ─────────────────────────────────────────────────────── */
.mtop{display:none;align-items:center;gap:12px;padding:12px 15px;background:var(--paper);
 border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.mtop b{font-family:var(--d);font-size:16px;font-weight:600}
.scrim{display:none}
.page{display:none} .page.on{display:block}
@media(max-width:1240px){ .w-3,.w-4,.w-5{grid-column:span 6} .w-6,.w-7,.w-8{grid-column:span 12} }
@media(max-width:900px){
  .rail{display:none}
  .nav{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .22s;
   box-shadow:0 0 50px -10px rgba(22,23,28,.35)}
  .nav.on{transform:none}
  .navgrip{display:none}
  .scrim{display:block;position:fixed;inset:0;background:rgba(22,23,28,.4);z-index:35;opacity:0;
   pointer-events:none;transition:opacity .2s}
  .scrim.on{opacity:1;pointer-events:auto}
  .mtop{display:flex}
  .topbar{padding:14px 16px 0}
  .board{padding:16px;grid-template-columns:repeat(6,minmax(0,1fr))}
  .w-3,.w-4,.w-5,.w-6,.w-7,.w-8,.w-12{grid-column:span 6}
  .tblscroll,.grp-head,.kb{padding-left:16px;padding-right:16px}
  .rec-body{grid-template-columns:1fr;overflow-y:auto}
  .rec-col{overflow:visible}
  .rec-col.l,.rec-col.r{border:0;border-bottom:1px solid var(--line)}
  .wshero,.wstabs,.wslist2{padding-left:18px;padding-right:18px}
  .wshead h1{font-size:26px}
}

/* ══ Conversation (notes synchronisées avec Monday) ═══════════════ */
.compose{background:var(--paper);border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:16px}
.compose.focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.compose textarea{width:100%;border:0;outline:none;padding:11px 14px;font:inherit;font-size:12.5px;
 line-height:1.6;resize:none;min-height:42px;background:transparent}
.compose-f{display:flex;align-items:center;gap:9px;padding:7px 11px;border-top:1px solid var(--line-2);
 background:var(--line-3)}
.compose-f .hint{flex:1;font-size:11.5px;color:var(--ink-3)}
.upd{background:var(--paper);border:1px solid var(--line);border-radius:9px;margin-bottom:12px;overflow:hidden}
.upd-h{display:flex;align-items:center;gap:9px;padding:11px 13px 0}
.upd-av{width:25px;height:25px;border-radius:50%;background:var(--brand);color:#fff;display:grid;
 place-items:center;font-size:11px;font-weight:700;flex:0 0 30px;overflow:hidden}
.upd-av img{width:100%;height:100%;object-fit:cover}
.upd-h .who{flex:1;min-width:0}
.upd-h .who b{font-size:13.5px;font-weight:600;display:block}
.upd-h .who span{font-size:11.5px;color:var(--ink-3)}
.upd-b{padding:8px 13px 11px 47px;font-size:12.5px;line-height:1.6}
.upd-b p{margin:0 0 9px} .upd-b p:last-child{margin-bottom:0}
.upd-b em{font-style:italic;color:var(--ink-3);font-size:12.5px}
.upd-b img{max-width:100%;border-radius:6px}
.upd-b a{color:var(--brand)}
.upd-f{display:flex;gap:4px;padding:6px 11px 7px 47px;border-top:1px solid var(--line-3)}
.upd-f button{font-size:12px;color:var(--ink-3);padding:4px 9px;border-radius:5px;font-weight:500}
.upd-f button:hover{background:var(--line-3);color:var(--ink)}
.upd-f button.liked{color:var(--brand)}
.upd-rep{padding:0 13px 10px 47px;display:flex;flex-direction:column;gap:10px}
.rep{display:flex;gap:10px;padding-top:11px;border-top:1px solid var(--line-3)}
.rep-av{width:24px;height:24px;border-radius:50%;background:var(--sunken);color:var(--ink-2);display:grid;
 place-items:center;font-size:9.5px;font-weight:700;flex:0 0 24px}
.rep-c{flex:1;min-width:0}
.rep-c b{font-size:12.5px;font-weight:600}
.rep-c .w{font-size:11px;color:var(--ink-3);margin-left:7px}
.rep-c .t{font-size:13.5px;line-height:1.6;margin-top:2px}
.rep-box{display:flex;gap:9px;padding-top:10px;border-top:1px solid var(--line-3)}
.rep-box input{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:7px 11px;font:inherit;font-size:13px}
.rep-box input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.upd-assets{display:flex;flex-wrap:wrap;gap:6px;padding:0 13px 10px 47px}
.upd-assets a{display:inline-flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--line);
 border-radius:var(--r);padding:4px 9px;color:var(--ink-2)}
.upd-assets a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}

/* ══ Menus contextuels de colonne et de groupe ════════════════════ */
.menu{position:fixed;background:var(--paper);border:1px solid var(--line);border-radius:9px;
 box-shadow:var(--lift);padding:6px;z-index:110;min-width:206px;display:none}
.menu.on{display:block}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;font-size:13px;
 border-radius:var(--r);text-align:left;color:var(--ink)}
.menu button:hover{background:var(--line-3)}
.menu button.danger{color:#9a3327}
.menu button.danger:hover{background:#fdefec}
.menu .lbl{padding:7px 10px 5px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
 text-transform:uppercase;color:var(--ink-3)}
.menu hr{border:0;border-top:1px solid var(--line-2);margin:5px 4px}
.mb th{position:relative}
.mb th .colmenu{position:absolute;right:5px;top:50%;transform:translateY(-50%);opacity:0;
 color:var(--ink-3);padding:2px 5px;border-radius:4px;font-size:13px;line-height:1}
.mb th:hover .colmenu{opacity:1}
.mb th .colmenu:hover{background:var(--sunken);color:var(--ink)}
.addcol{color:var(--ink-3);font-size:15px;padding:0 12px;font-weight:400}
.addcol:hover{color:var(--brand)}
.grp-add{font-size:12.5px;color:var(--ink-3);padding:9px 26px 0;font-weight:500}
.grp-add:hover{color:var(--brand)}
.grp-head .gmenu{opacity:0;color:var(--ink-3);padding:2px 6px;border-radius:4px;font-size:13px}
.grp-head:hover .gmenu{opacity:1}
.grp-head .gmenu:hover{background:var(--sunken);color:var(--ink)}

/* ══ Kanban : glisser-déposer ═════════════════════════════════════ */
.kcard{user-select:none}
.kcard.drag{opacity:.4}
.kcol.over{background:var(--brand-tint)}
.kcol.over .kcol-b{background:var(--brand-tint)}
.kcol-b{min-height:60px}

/* ══ Sélecteur de personnes ═══════════════════════════════════════ */
.ppl{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto;margin-top:8px}
.ppl label{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--r);cursor:pointer;font-size:13.5px}
.ppl label:hover{background:var(--line-3)}
.ppl input{accent-color:var(--brand);width:15px;height:15px}
.ppl .pa{width:26px;height:26px;border-radius:50%;background:var(--sunken);display:grid;place-items:center;
 font-size:9.5px;font-weight:700;color:var(--ink-2);overflow:hidden;flex:0 0 26px}
.ppl .pa img{width:100%;height:100%;object-fit:cover}
.ppl .pe{font-size:11px;color:var(--ink-3);margin-left:auto}

/* ══ Tri et filtres ═══════════════════════════════════════════════ */
.filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:0 0 12px}
.fchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brand-line);background:var(--brand-tint);
 color:var(--brand-deep);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600}
.fchip button{color:var(--brand-deep);font-size:13px;line-height:1;padding:0 0 0 2px;opacity:.65}
.fchip button:hover{opacity:1}
.sortmark{font-size:9px;color:var(--brand);margin-left:5px}

/* ══ Barre latérale : menus et glisser-déposer ════════════════════ */
.nrow{position:relative}
.nrow .rmenu{opacity:0;color:var(--ink-3);padding:2px 6px;border-radius:4px;font-size:13px;
 line-height:1;flex:0 0 auto;margin-left:2px}
.nrow:hover .rmenu{opacity:1}
.nrow .rmenu:hover{background:var(--sunken);color:var(--ink)}
.nrow:hover .cnt{display:none}
.nrow.dragging{opacity:.35}
.nrow.dropbefore{box-shadow:inset 0 2px 0 var(--brand)}
.nrow.dropafter{box-shadow:inset 0 -2px 0 var(--brand)}
.nrow.dropinto{background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand-line)}
.nav-hd .wsmenu{color:var(--ink-3)}
.dragghost{position:fixed;pointer-events:none;z-index:200;background:var(--paper);border:1px solid var(--brand);
 border-radius:var(--r);padding:6px 11px;font-size:13px;box-shadow:var(--lift);opacity:.95}
.danger-box{background:#fdefec;border:1px solid #f5cfc7;border-radius:var(--r);padding:12px 14px;
 font-size:12.5px;color:#8a2f22;line-height:1.6;margin-bottom:14px}
.danger-box b{color:#6d2419}

/* ══ Barre du haut : recherche globale ════════════════════════════ */
.gtop{display:flex;align-items:center;gap:14px;padding:8px 18px;background:var(--brand-deep);
 position:sticky;top:0;z-index:45}
.gsearchbar{position:relative;flex:1;max-width:520px;margin:0 auto;display:flex;align-items:center;
 background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:20px;
 padding:0 12px;transition:.14s}
.gsearchbar:focus-within{background:var(--paper);border-color:var(--paper)}
.gs-ico{color:rgba(255,255,255,.6);font-size:14px;flex:0 0 auto}
.gsearchbar:focus-within .gs-ico{color:var(--ink-3)}
.gsearchbar input{flex:1;border:0;background:transparent;outline:none;padding:7px 10px;
 font-size:12.5px;color:#fff}
.gsearchbar input::placeholder{color:rgba(255,255,255,.55)}
.gsearchbar:focus-within input{color:var(--ink)}
.gsearchbar:focus-within input::placeholder{color:var(--ink-4)}
.gs-kbd{font-size:10px;color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.2);
 border-radius:4px;padding:1px 5px;flex:0 0 auto}
.gsearchbar:focus-within .gs-kbd{display:none}
.gtop-r{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.gicon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
 color:rgba(255,255,255,.7);font-size:15px;line-height:1}
.gicon:hover{background:rgba(255,255,255,.12);color:#fff}
.gav{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;
 display:grid;place-items:center;font-size:9.5px;font-weight:700;overflow:hidden}
.gav img{width:100%;height:100%;object-fit:cover}
.gtop .gres{top:calc(100% + 6px);left:0;right:0}
.app{align-items:stretch}
.rail{padding-top:0}
.rail-logo{margin-top:14px}

/* ══ Couleur là où elle informe ═══════════════════════════════════ */
.grp-head .gdot{width:9px;height:9px;border-radius:3px;flex:0 0 9px;position:relative;top:-1px}
.nrow .sdot{width:5px;height:5px;border-radius:50%;background:var(--signal);flex:0 0 5px;margin-left:2px}
.tag.local{background:var(--signal-t);color:var(--signal)}
.kpi-accent{border-top:2px solid var(--brand)}

/* fiches courtes dans les modales */
.mo-c .fld{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:baseline;
 padding:6px 0;border-bottom:1px solid var(--line-3);margin:0}
.mo-c .fld:last-of-type{border-bottom:0}
.mo-c .fld dt{font-size:11px;color:var(--ink-3)}
.mo-c .fld dd{margin:0;font-size:12.5px;font-weight:500}

/* ══ Architecture de défilement — comme Monday ════════════════════
   La page ne défile jamais. Seul le contenu du tableau défile, dans
   son propre conteneur. La barre latérale reste fixe.
   ═══════════════════════════════════════════════════════════════ */
html,body{height:100%;overflow:hidden}
.gtop{display:flex;align-items:center;gap:14px;padding:0 14px;height:46px;
 background:var(--brand-deep);position:relative;z-index:60;flex:0 0 46px}
.gbrand{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:180px}
.gbrand img{width:19px;height:19px;opacity:.95}
.gbrand b{font-family:var(--d);font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em}
.gtop-r{min-width:180px;justify-content:flex-end}

.app{display:flex;height:calc(100vh - 46px);min-height:0;overflow:hidden}
.rail{height:100%;padding-top:12px}
.nav{height:100%;position:static;overflow:hidden;flex-shrink:0}
.navscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.main{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* le seul conteneur qui défile verticalement */
#view{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
#view::-webkit-scrollbar{width:10px}
#view::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:3px solid var(--ground)}
#view::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}

/* l'en-tête du tableau reste en haut pendant le défilement */
.topbar{position:sticky;top:0;z-index:22}

/* un seul défilement horizontal pour tout le tableau */
.boardview{overflow-x:auto;overflow-y:visible;padding:4px 0 60px;overscroll-behavior-x:contain}
.boardview::-webkit-scrollbar{height:10px}
.boardview::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:3px solid var(--ground)}
.tblscroll{overflow:visible;padding:0 26px;width:max-content;min-width:100%}
.grp-head{position:sticky;left:0;width:max-content;min-width:calc(100vw - 340px);z-index:3}
.grp-add{position:sticky;left:0}

/* l'en-tête de colonnes colle sous la barre d'outils */
.mb th{top:0}

@media(max-width:900px){
  .gbrand b{display:none} .gbrand,.gtop-r{min-width:auto}
  .app{height:calc(100vh - 46px)}
  .grp-head{min-width:calc(100vw - 40px)}
}

/* ══ Correction : l'en-tête du tableau et les colonnes restent en place ══
   #view ne défile plus lui-même ; il empile un en-tête figé et une zone
   de contenu qui défile dans les deux sens. Les en-têtes de colonnes
   peuvent donc coller en haut, et les groupes coller à gauche. */
#view{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.topbar{position:static;flex:0 0 auto}
.boardview{flex:1;min-height:0;overflow:auto;padding:4px 0 40px;overscroll-behavior:contain}
.boardview::-webkit-scrollbar{width:10px;height:10px}
.boardview::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:3px solid var(--ground)}
.boardview::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}
.mb th{position:sticky;top:0;z-index:2;background:var(--ground)}
.mb th.first{z-index:4}
.grp-head{position:sticky;left:0;z-index:5;background:var(--ground);width:max-content;
 min-width:calc(100vw - 300px);padding-top:2px}
.grp{margin:14px 0 22px}
.grp:first-child{margin-top:2px}

/* les autres écrans défilent aussi dans leur propre zone */
.board,.wshome,.axw,.kb{flex:1;min-height:0}
.board{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.wshome{overflow-y:auto;overscroll-behavior:contain}
.board::-webkit-scrollbar,.wshome::-webkit-scrollbar{width:10px}
.board::-webkit-scrollbar-thumb,.wshome::-webkit-scrollbar-thumb{background:var(--line);
 border-radius:6px;border:3px solid var(--ground)}
.kb{height:auto}
.load,.empty{flex:0 0 auto}

/* le groupe doit couvrir toute la largeur défilée, sinon son en-tête
   ne peut pas rester collé à gauche */
.grp{width:max-content;min-width:100%}
.grp-head{min-width:0;width:auto;padding-right:26px}

/* ═══════════════════════════════════════════════════════════════
   Calque Monday — reprise fidèle de leur interface
   ═══════════════════════════════════════════════════════════════ */
body{font-size:14px;background:#fff}

/* barre du haut : blanche */
.gtop{background:#fff;border-bottom:1px solid var(--line);height:48px;flex:0 0 48px;padding:0 16px}
.gbrand b{color:var(--ink);font-weight:700;font-size:15px}
.gbrand img{filter:invert(23%) sepia(89%) saturate(3000%) hue-rotate(197deg) brightness(96%)}
.gsearchbar{background:#f5f6f8;border:1px solid #f5f6f8;border-radius:20px;max-width:460px}
.gsearchbar:focus-within{background:#fff;border-color:var(--mdy-blue);box-shadow:0 0 0 1px var(--mdy-blue)}
.gsearchbar input{color:var(--ink);font-size:14px}
.gsearchbar input::placeholder{color:var(--ink-3)}
.gs-ico{color:var(--ink-3)}
.gs-kbd{color:var(--ink-3);border-color:var(--line)}
.gicon{color:var(--ink-2)}
.gicon:hover{background:var(--sunken);color:var(--ink)}
.gav{background:var(--mdy-purple)}

/* rail clair, avec libellés comme Monday */
.rail{background:#fff;border-right:1px solid var(--line);width:64px;flex:0 0 64px;gap:2px;padding-top:10px}
.rail-item{width:56px;height:auto;padding:8px 2px;border-radius:6px;display:flex;flex-direction:column;
 align-items:center;gap:4px;color:var(--ink-2);font-size:10px;line-height:1.15;text-align:center}
.rail-item svg{width:18px;height:18px}
.rail-item::after{content:attr(title);display:block}
.rail-item:hover{background:var(--sunken);color:var(--ink)}
.rail-item.active{background:#dcedff;color:var(--mdy-blue)}

/* barre latérale */
.nav{background:#fff;border-right:1px solid var(--line)}
.nav-hd,.contenu,.nav-label{color:var(--ink-2);font-size:12px;font-weight:400;letter-spacing:0;
 text-transform:none}
.nav-label{font-size:13px;font-weight:600;color:var(--ink);padding:12px 8px 4px}
.ws{border:1px solid #d0d4e4;border-radius:8px;font-size:14px;font-weight:600;padding:7px 10px}
.ws-badge{border-radius:5px;width:24px;height:24px;font-size:11px}
.addbtn{border:1px solid #d0d4e4;border-radius:8px;width:36px;flex:0 0 36px;font-size:19px;color:var(--ink-2)}
.addbtn:hover{background:var(--sunken)}
.addbtn.on{background:#dcedff;border-color:var(--mdy-blue);color:var(--mdy-blue)}
.nrow{border-left:0;border-radius:6px;padding:7px 9px;font-size:14px;color:var(--ink);gap:9px}
.nrow:hover{background:var(--sunken)}
.nrow.sel{background:#dcedff;color:var(--ink);font-weight:600;box-shadow:none}
.nrow .gl{color:var(--ink-3);font-size:12px}
.nrow.sel .gl{color:var(--mdy-blue)}
.nrow .cnt{color:var(--ink-3);font-size:12px}
.usr .av{background:var(--mdy-purple)}

/* en-tête de tableau */
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:16px 24px 0}
.title-row h1{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:0}
.btab{font-size:14px;padding:8px 0 12px}
.btab:not(.off){color:var(--ink);border-bottom-color:var(--mdy-blue)}
.tool{font-size:14px;color:var(--ink-2);padding:6px 10px;border-radius:4px}
.searchbox{border:1px solid #d0d4e4;border-radius:4px;font-size:14px}
.btn{border:1px solid #d0d4e4;border-radius:4px;font-size:14px;font-weight:400;padding:7px 14px;color:var(--ink)}
.btn:hover{background:var(--sunken);border-color:#c3c6d4}
.btn.primary{background:var(--mdy-blue);border-color:var(--mdy-blue);color:#fff;font-weight:400}
.btn.primary:hover{background:var(--mdy-blue-hover);border-color:var(--mdy-blue-hover)}

/* ── LE TABLEAU, à l'identique ─────────────────────────────────── */
.boardview{background:#fff}
.grp{margin:14px 0 24px}
.grp-head{background:#fff;padding:0 24px 8px;gap:8px}
.grp-head::after{display:none}
.grp-head>span:nth-child(3){font-family:var(--f);font-size:15px;font-weight:600;color:var(--mdy-blue)}
.grp-head .gdot{display:none}
.grp-head .caret{color:var(--mdy-blue);font-size:10px}
.grp-head .count{font-size:13px;color:var(--ink-2);font-weight:400}
.grp-head .count::before{content:"";margin:0}

.tblscroll{padding:0 24px}
.mb{border-collapse:separate;border-spacing:0;font-size:14px;background:#fff}
.mb th{background:#fff;color:var(--ink-2);font-size:14px;font-weight:400;letter-spacing:0;
 text-transform:none;text-align:center;padding:8px 12px;border-bottom:1px solid var(--line);
 border-right:1px solid var(--line)}
.mb th.first{text-align:left;padding-left:16px}
.mb th.num{text-align:center}
.mb th:last-child{border-right:0}

.mb td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);background:#fff;
 text-align:center}
.mb td:last-child{border-right:0}
.mb td .cell{padding:9px 12px;min-height:36px;line-height:18px;color:var(--ink);text-align:center}
.mb td.first .cell{text-align:left;padding:9px 12px 9px 16px;font-weight:400;color:var(--ink)}
.mb td.first{border-right:1px solid var(--line)}
.mb td.num .cell{text-align:center;color:var(--ink)}
.mb tbody tr:hover td{background:#f7f9fc}
.mb tbody tr:hover td.first .cell{color:var(--ink)}
.mb td.first .cell::before{display:none}
.mb tbody tr:last-child td{border-bottom:1px solid var(--line)}

/* barre de couleur du groupe à gauche de chaque ligne */
.mb td.first{border-left:6px solid var(--mdy-chart)}
.tblscroll.green td.first{border-left-color:var(--mdy-green-dark)}
.tblscroll.grass_green td.first{border-left-color:var(--mdy-green)}
.tblscroll.purple td.first,.tblscroll.dark_purple td.first{border-left-color:var(--mdy-purple)}
.tblscroll.orange td.first,.tblscroll.working_orange td.first{border-left-color:var(--mdy-orange)}
.tblscroll.red td.first,.tblscroll.stuck-red td.first{border-left-color:var(--mdy-red)}
.tblscroll.navy td.first,.tblscroll.dark-blue td.first{border-left-color:var(--mdy-navy)}
.tblscroll.yellow td.first,.tblscroll.egg_yolk td.first{border-left-color:var(--mdy-yellow)}
.tblscroll.grey td.first,.tblscroll.trolley-grey td.first{border-left-color:var(--mdy-grey)}

/* statuts : cellule entière en couleur, comme Monday */
.mb td.stat{padding:0}
.mb td.stat .cell{color:#fff;font-size:14px;font-weight:400;text-align:center;padding:9px 8px}
.slab{display:block;background:none!important;box-shadow:none;color:inherit;font-weight:400;
 font-size:14px;text-align:center;gap:0}
.slab::before{display:none}
.src-tag{font-size:14px;color:var(--ink)}
.src-tag + .src-tag{border-left:0;padding-left:0;margin-left:4px}
.pers{width:28px;height:28px;font-size:11px;background:#c9d6e4;color:#4a5b6e;box-shadow:none;vertical-align:middle}
.link{color:var(--mdy-blue)}

/* pastilles générales */
.chip{border-radius:12px;font-size:12px}
.tag{border-radius:12px;font-size:12px}
.tag.live{background:#e6f9f1;color:var(--mdy-green-dark)}
.tag.todo{background:#fff4e5;color:#a35b0a}

/* cockpit et cartes */
.w{border-radius:8px;border-color:var(--line)}
.w-head h2{font-size:15px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.num .val{font-family:var(--f);font-size:34px;font-weight:700;letter-spacing:-1px}
.hero .val{font-size:42px;color:var(--ink)}
.hb-f{background:var(--mdy-chart)}
.vbar{background:var(--mdy-chart)}
.note{background:#fff8ec;border-color:#ffdfae;color:#6b4a12;border-radius:8px}
.note.blue{background:#eef6ff;border-color:#c9e2ff;color:#1c3f66}

/* fiche */
.idav{background:var(--mdy-blue);border-radius:50%}
.pan-h b{font-size:13px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.prop dt{font-size:13px;color:var(--ink-2)}
.prop dd{font-size:14px}
.atab{font-size:14px}
.atab.on{color:var(--mdy-blue);border-bottom-color:var(--mdy-blue)}
.upd-av{background:var(--mdy-purple)}

/* menus, modales */
.pop,.menu,.gres{border-radius:8px;border-color:var(--line)}
.mo-c{border-radius:8px}
.mo-c h2{font-family:var(--f);font-size:20px;font-weight:600}
.inp{border-radius:4px;border-color:#d0d4e4;font-size:14px}
.frm label{font-size:13px;font-weight:400;color:var(--ink-2);text-transform:none;letter-spacing:0}
.toast{background:#323338;border-radius:6px}
.lvl{border-radius:12px}
.kcard{border-radius:6px}
.kcol{border-radius:8px;background:#f5f6f8}

/* rail : libellés courts, comme Monday */
.rail-item::after{content:attr(data-lbl);white-space:nowrap;font-size:10px}
.rail{width:68px;flex:0 0 68px}
.rail-item{width:60px}

/* colonnes de largeur fixe : le tableau ne s'étire pas */
.mb{width:max-content;min-width:0}
.mb th:not(.first),.mb td:not(.first){width:150px;min-width:150px;max-width:150px}
.mb th.first,.mb td.first{width:280px;min-width:280px;max-width:280px}
.mb td .cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══ Logo Esekai ══════════════════════════════════════════════════ */
.gbrand{gap:10px}
.glogo{width:24px;height:24px;filter:none}
.gbrand b{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.2px}

/* ══ Tableaux : plus d'air, moins de zoom ═════════════════════════ */
.mb{font-size:13px}
.mb th{font-size:12.5px;padding:10px 14px;color:var(--ink-2)}
.mb th.first{padding-left:18px}
.mb td .cell{padding:0 14px;min-height:38px;line-height:38px;font-size:13px}
.mb td.first .cell{padding:0 14px 0 18px;line-height:38px}
.mb td.stat .cell{padding:0 10px;line-height:38px;font-size:12.5px}
.mb th:not(.first),.mb td:not(.first){width:164px;min-width:164px;max-width:164px}
.mb th.first,.mb td.first{width:264px;min-width:264px;max-width:264px}
.mb td.first{border-left-width:5px}
.pers{width:26px;height:26px;font-size:10.5px;vertical-align:-8px}
.src-tag{font-size:13px}

/* respiration entre les groupes */
.grp{margin:10px 0 26px}
.grp:first-child{margin-top:6px}
.grp-head{padding:0 24px 10px;gap:9px}
.grp-head>span:nth-child(3){font-size:16px}
.tblscroll{padding:0 24px}
.boardview{padding:8px 0 60px}

/* ligne d'ajout en bas de chaque groupe, comme Monday */
.addrow{display:flex;align-items:center;gap:9px;padding:0 14px 0 18px;height:38px;
 border-bottom:1px solid var(--line);border-left:5px solid transparent;background:#fff;
 color:var(--ink-3);font-size:13px;cursor:pointer;width:100%;text-align:left}
.addrow:hover{background:#f7f9fc;color:var(--mdy-blue)}
.addrow .plus{font-size:15px;line-height:1}

/* survol : Monday éclaire la ligne entière */
.mb tbody tr:hover td{background:#f7f9fc}
.mb tbody tr:hover td.stat{filter:brightness(1.04)}

/* ══ Sélecteur de statut, comme Monday ════════════════════════════ */
.statpop{position:fixed;z-index:130;background:#fff;border-radius:8px;
 box-shadow:0 8px 28px rgba(0,0,0,.22);padding:10px;display:none;min-width:280px}
.statpop.on{display:block}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.statopt{height:38px;border-radius:4px;color:#fff;font-size:13px;font-weight:400;
 padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 border:2px solid transparent;transition:transform .08s}
.statopt:hover{transform:scale(1.03)}
.statopt[data-cur]{border-color:var(--ink);box-shadow:0 0 0 1px #fff inset}
.statopt.empty{background:#c4c4c4}
.statfoot{margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.statfoot button{width:100%;text-align:left;padding:7px 8px;border-radius:4px;font-size:13px;color:var(--ink)}
.statfoot button:hover{background:var(--sunken)}

/* ══ Favoris ══════════════════════════════════════════════════════ */
.star{color:var(--ink-4);font-size:16px;line-height:1;padding:2px 4px;border-radius:4px;transition:.12s}
.star:hover{color:var(--mdy-yellow);background:var(--sunken)}
.star.on{color:var(--mdy-yellow)}
.nrow .star{opacity:0;font-size:13px;margin-left:auto}
.nrow:hover .star,.nrow .star.on{opacity:1}
.title-row .star{font-size:18px}

/* ══ Profil, comme Monday ═════════════════════════════════════════ */
.prof{position:fixed;inset:24px;background:#fff;border-radius:10px;z-index:115;display:none;
 flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.prof.on{display:flex}
.prof-h{padding:22px 28px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.prof-h h1{font-size:26px;font-weight:600;margin:0;flex:1}
.prof-b{flex:1;display:grid;grid-template-columns:250px minmax(0,1fr);min-height:0}
.prof-nav{border-right:1px solid var(--line);padding:16px 12px;overflow-y:auto;background:#fbfcfe}
.prof-nav button{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:6px;
 font-size:14px;color:var(--ink);text-align:left}
.prof-nav button:hover{background:var(--sunken)}
.prof-nav button.on{background:#dcedff;color:var(--mdy-blue);font-weight:500}
.prof-nav .pi{width:16px;text-align:center;font-size:13px;opacity:.8}
.prof-c{padding:26px 32px;overflow-y:auto}
.prof-c h2{font-size:22px;font-weight:600;margin:0 0 6px}
.prof-c .lead{color:var(--ink-2);font-size:14px;margin-bottom:22px}
.pcard{border:1px solid var(--line);border-radius:8px;padding:22px 24px;margin-bottom:18px}
.phead{display:flex;gap:24px;align-items:flex-start}
.pav{width:104px;height:104px;border-radius:50%;background:var(--mdy-purple);color:#fff;display:grid;
 place-items:center;font-size:34px;font-weight:700;flex:0 0 104px;overflow:hidden}
.pav img{width:100%;height:100%;object-fit:cover}
.pname{flex:1;min-width:0}
.pname h3{font-size:30px;font-weight:600;margin:0;letter-spacing:-.3px}
.pname .job{color:var(--ink-2);font-size:15px;margin-top:2px}
.pbadge{display:inline-block;background:#dcedff;color:var(--mdy-blue);border-radius:4px;
 padding:3px 10px;font-size:13px;margin-top:10px}
.pside{min-width:260px;display:flex;flex-direction:column;gap:16px}
.pfield{display:flex;gap:10px;align-items:flex-start}
.pfield .pk{color:var(--ink-2);font-size:13px;flex:0 0 16px}
.pfield b{display:block;font-size:13.5px;font-weight:600}
.pfield span{font-size:14px;color:var(--ink)}
.pfield .ed{cursor:text;border-radius:4px;padding:1px 5px;margin:-1px -5px}
.pfield .ed:hover{background:#e5f4ff}
.pfield .none{color:var(--ink-3)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 26px}
.pradio{display:flex;align-items:center;gap:10px;padding:7px 4px;cursor:pointer;font-size:14px}
.pradio input{accent-color:var(--mdy-blue);width:16px;height:16px}
.ptable{width:100%;border-collapse:collapse;font-size:13.5px}
.ptable th{text-align:left;font-size:12.5px;color:var(--ink-2);font-weight:400;padding:8px 10px;
 border-bottom:1px solid var(--line)}
.ptable td{padding:10px;border-bottom:1px solid var(--line-3)}
.psel{border:1px solid #d0d4e4;border-radius:4px;padding:8px 11px;font-size:14px;width:100%;max-width:340px;
 background:#fff;font-family:inherit}
.pteam{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:14px}
.pteam .tb{width:26px;height:26px;border-radius:6px;color:#fff;display:grid;place-items:center;
 font-size:10px;font-weight:700;flex:0 0 26px}

/* ══ Correctif : l'en-tête ne doit pas se coller par-dessus les lignes ══
   Chaque groupe a son propre tableau ; un en-tête collant chevauche donc
   le groupe précédent. Monday répète l'en-tête sans le coller. */
.mb th{position:static;background:#fff}
.mb th.first{position:sticky;left:0;z-index:3;background:#fff}
.mb td.first{position:sticky;left:0;z-index:1}

/* case à cocher, comme Monday */
.mb th.chk,.mb td.chk{width:38px;min-width:38px;max-width:38px;position:sticky;left:0;z-index:2;
 background:#fff;border-right:0;text-align:center}
.mb th.chk{z-index:4}
.mb th.first,.mb td.first{left:38px}
.mb td.chk .cell,.mb th.chk{padding:0;display:grid;place-items:center;min-height:38px}
.rowchk{width:15px;height:15px;accent-color:var(--mdy-blue);cursor:pointer;opacity:0;transition:.12s}
.mb tr:hover .rowchk,.rowchk:checked{opacity:1}
.mb tr.sel td{background:#e5f4ff}

/* la ligne d'ajout reprend la case */
.addrow{border-left:0}

/* la colonne des noms colle à gauche, jamais en haut */
.mb th.first{top:auto!important;bottom:auto!important}
.mb th.chk{top:auto!important}
.mb td.first,.mb td.chk{top:auto!important}

/* ══ Onglets de tableaux d'un même dossier ════════════════════════ */
.btabs{display:flex;align-items:center;gap:2px;padding:10px 0 0;overflow-x:auto;scrollbar-width:none}
.btabs::-webkit-scrollbar{display:none}
.btab2{display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:6px 6px 0 0;
 font-size:14px;color:var(--ink-2);white-space:nowrap;border-bottom:3px solid transparent;
 transition:.12s;position:relative;top:1px}
.btab2:hover{background:var(--sunken);color:var(--ink)}
.btab2.on{color:var(--mdy-blue);border-bottom-color:var(--mdy-blue);font-weight:600;background:transparent}
.btab2 .n{font-size:11.5px;color:var(--ink-3);background:var(--sunken);border-radius:10px;padding:1px 7px}
.btab2.on .n{background:#dcedff;color:var(--mdy-blue)}
.btab2 .lk{font-size:10px;color:var(--ink-4)}
.btabs .addtab{color:var(--ink-3);font-size:17px;padding:4px 10px;border-radius:6px;line-height:1}
.btabs .addtab:hover{background:var(--sunken);color:var(--mdy-blue)}

/* ══ Étape : la barre du pipeline ═════════════════════════════════
   Un ruban segmenté fin, puis des pastilles cliquables. Pas de blocs
   pleins avec un chiffre dedans : ça, c'est l'écran de Monday.
   ═══════════════════════════════════════════════════════════════ */
.stagebar{padding:2px 26px 14px}
.stagetop{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.stagetop b{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em}
.stagetop span{font-size:12.5px;color:var(--ink-2)}
.stageline{display:flex;align-items:stretch;gap:3px;height:10px;margin:0}
.stageseg{min-width:7px;border-radius:99px;cursor:pointer;
  transition:transform .13s ease,box-shadow .13s ease;transform-origin:center}
.stageseg:hover{transform:scaleY(1.6);box-shadow:0 2px 8px -2px rgba(28,27,26,.35)}
.stagelegend{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.schip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--paper);border-radius:20px;padding:4px 11px 4px 9px;cursor:pointer;
  font-family:var(--f);font-size:12px;color:var(--ink-2);line-height:16px;
  transition:border-color .12s,background .12s}
.schip:hover{border-color:var(--ink-4);background:var(--sunken)}
.schip.on{border-color:var(--e-red);background:var(--e-red-t);color:var(--ink)}
.schip i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.schip span{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schip b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.schip em{font-style:normal;color:var(--ink-3);font-size:11px;font-variant-numeric:tabular-nums}

/* ══ Cockpit : leviers et entonnoir ═══════════════════════════════ */
.lever{display:flex;align-items:flex-end;gap:14px;padding-top:6px}
.lever .now{font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1}
.lever .arrow{color:var(--ink-4);font-size:19px;padding-bottom:3px}
.lever .goal{font-size:20px;font-weight:600;color:var(--mdy-green-dark);padding-bottom:2px}
.leverbar{height:7px;border-radius:4px;background:var(--sunken);margin-top:14px;overflow:hidden}
.leverbar i{display:block;height:100%;border-radius:4px;background:var(--mdy-blue)}
.leverbar i.warn{background:var(--mdy-orange)}
.leverbar i.bad{background:var(--mdy-red)}
.levernote{font-size:12.5px;color:var(--ink-2);margin-top:9px;line-height:1.5}

.funnel2{display:flex;flex-direction:column;gap:3px;padding-top:6px}
.fstep{display:flex;align-items:center;gap:12px}
.fstep .fl{width:150px;font-size:13px;color:var(--ink-2);text-align:right;flex:0 0 150px}
.fstep .fbar{height:30px;border-radius:4px;display:flex;align-items:center;padding:0 10px;
 color:#fff;font-size:13px;font-weight:600;min-width:42px;transition:width .3s}
.fstep .fpc{font-size:12px;color:var(--ink-3);white-space:nowrap}
.fstep.drop .fl{color:var(--mdy-red-dark);font-weight:600}

.goalring{display:flex;align-items:center;gap:18px;padding-top:4px}
.goalring .ring{width:88px;height:88px;border-radius:50%;flex:0 0 88px;display:grid;place-items:center;
 position:relative}
.goalring .ring b{font-size:19px;font-weight:700}
.goalring .txt{flex:1;min-width:0}
.goalring .txt .big{font-size:26px;font-weight:700;letter-spacing:-.6px}
.goalring .txt .sub{font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.55}

/* la grille du cockpit ne doit pas comprimer ses cartes */
.board{align-content:start;align-items:start}
.w{overflow:visible;height:auto}
.w-body{overflow:visible}

/* note de méthode sous un widget */
.w-note{display:block;margin-top:6px;color:var(--ink-3);font-size:11px;line-height:1.4}

/* ═══ REVENUS ═══════════════════════════════════════════════════ */
.tag.bad{background:#ffe9ec;color:var(--mdy-red-dark)}

/* Le rapprochement bancaire : signé → rapproché + en attente. */
.ledger .w-body{padding:18px 20px 16px}
.ledger-row{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.led{flex:1 1 200px;min-width:180px;display:flex;flex-direction:column;gap:2px;
  padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--sunken)}
.led.ok{border-color:#bfe9d5;background:#f2fbf7}
.led.warn{border-color:#f6c9a6;background:#fff8f1}
.lk{font-size:11.5px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.lv{font-size:26px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.led.ok .lv{color:var(--mdy-green-dark)} .led.warn .lv{color:#a35b0a}
.ls{font-size:11.5px;color:var(--ink-3)}
.lsep{align-self:center;color:var(--ink-3);font-size:18px;font-weight:600}
.ledger-note{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.55;color:var(--ink-2)}

/* Les virements Qonto en attente de rattachement. */
.orph{display:flex;flex-direction:column}
.orow{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:13px}
.orow:last-child{border-bottom:0}
.od{width:44px;flex:0 0 auto;color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}
.ol{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.oa{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;color:#a35b0a}

/* Les trous du process, en barres. */
.gaps{display:flex;flex-direction:column;gap:11px}
.gap{display:flex;align-items:center;gap:12px}
.gl{flex:0 0 150px;font-size:13px;color:var(--ink)}
.gt{flex:1;height:10px;border-radius:6px;background:var(--sunken);overflow:hidden;display:block}
.gt i{display:block;height:100%;border-radius:6px;background:var(--mdy-green)}
.gt i.warn{background:var(--mdy-orange)} .gt i.bad{background:var(--mdy-red)}
.gn{flex:0 0 58px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.gs{font-weight:400;color:var(--ink-3)}

/* Signatures mois par mois. */
.mbars{display:flex;align-items:flex-end;gap:6px;height:170px}
.mbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.mv{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;height:14px}
.mt{flex:1;width:100%;display:flex;align-items:flex-end;background:var(--sunken);border-radius:5px 5px 0 0}
.mt i{display:block;width:100%;background:var(--mdy-chart);border-radius:5px 5px 0 0}
.ml{font-size:11px;color:var(--ink-2)} .mn{font-size:10.5px;color:var(--ink-3);height:13px}

.spill{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:12px}
.spill.ok{background:#e6f9f1;color:var(--mdy-green-dark)}
.spill.bad{background:#ffe9ec;color:var(--mdy-red-dark)}
.spill.wait{background:var(--sunken);color:var(--ink-2)}
.dash{color:var(--ink-3);font-size:12px}

/* ═══ WIN ═══════════════════════════════════════════════════════ */
.topd{display:flex;flex-direction:column;gap:7px}
.td{display:flex;align-items:center;gap:11px;font-size:13px}
.tr{flex:0 0 20px;text-align:right;color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}
.tn{flex:0 0 190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:500}
.tb{flex:1;height:14px;border-radius:4px;background:var(--sunken);overflow:hidden;display:block}
.tb i{display:block;height:100%;border-radius:4px;background:var(--mdy-chart)}
.td:first-child .tb i{background:var(--mdy-blue)}
.tv{flex:0 0 78px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.ts{flex:0 0 74px;font-size:11.5px;color:var(--ink-3)}

.years{display:flex;align-items:flex-end;gap:26px;height:180px;padding:0 4px}
.yr{flex:0 0 120px;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}
.yv{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.yt{flex:1;width:100%;display:flex;align-items:flex-end;background:var(--sunken);border-radius:6px 6px 0 0}
.yt i{display:block;width:100%;background:var(--mdy-purple);border-radius:6px 6px 0 0}
.yl{font-size:13px;font-weight:600;color:var(--ink)}
.ys{font-size:11px;color:var(--ink-3)}

/* ═══════════════════════════════════════════════════════════════
   Calque Esekai — l'outil de l'agence, plus un clone de Monday.
   Rouge #b22924 : identité et sélection uniquement. Les signaux
   passent par le vert et l'ambre, jamais par la couleur de marque.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --e-red:#b22924; --e-red-deep:#8d1f1b; --e-red-t:#fbf0ef; --e-red-l:#f0d9d7;
  --ink:#1c1b1a; --ink-2:#6b6560; --ink-3:#9c948d; --ink-4:#c9c2bb;
  --paper:#fff; --ground:#faf9f7; --sunken:#f4f2ef;
  --line:#e9e4df; --line-2:#efebe6; --line-3:#f3f0ec;
  --ok:#0f7b52; --ok-t:#e7f5ee;
  --warn:#b45309; --warn-t:#fdf3e6;
  --brand:#b22924; --brand-deep:#8d1f1b; --brand-tint:#fbf0ef; --brand-line:#f0d9d7;
  --d:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
  --f:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
  --r:6px;
}
body{font-family:var(--f);font-size:13.5px;color:var(--ink);background:var(--ground);
  font-feature-settings:"cv05" 1}
.n,.num .val,.cnt,.mb td.num .cell,td.n,.lv,.tv,.gn,.yv{font-variant-numeric:tabular-nums}

/* ── Barre du haut : anthracite, c'est la signature de l'outil ── */
.gtop{background:#1b1a19;border-bottom:0;height:52px;flex:0 0 52px;padding:0 14px}
.gbrand{gap:9px}
.gbrand b{color:#fff;font-weight:600;font-size:15px;letter-spacing:-.2px}
/* Le logomark garde son rouge : aucun filtre. */
.gbrand img,.glogo{filter:none!important;width:24px;height:24px}
.gsearchbar{background:#2a2825;border:1px solid #35322e;border-radius:7px;max-width:520px}
.gsearchbar:focus-within{background:#312e2a;border-color:var(--e-red);box-shadow:none}
.gsearchbar input{color:#f2efeb;font-size:13.5px}
.gsearchbar input::placeholder{color:#8d867e}
.gs-ico{color:#8d867e} .gs-kbd{color:#8d867e;border-color:#3a3733;background:transparent}
.gicon{color:#b8b1a9;border-radius:6px}
.gicon:hover{background:#2f2c28;color:#fff}
.gav{background:var(--e-red);color:#fff;font-weight:600}

/* ── Rail et barre latérale : blanc chaud, sélection au filet rouge ── */
.app{height:calc(100vh - 52px)}
.rail{background:var(--paper);border-right:1px solid var(--line);width:70px;flex:0 0 70px;padding-top:8px}
.rail-item{color:var(--ink-2);border-radius:7px;font-weight:500}
.rail-item:hover{background:var(--sunken);color:var(--ink)}
.rail-item.active{background:var(--e-red-t);color:var(--e-red)}
.nav{background:var(--paper);border-right:1px solid var(--line)}
.nav-label{font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.07em;padding:16px 10px 5px}
.ws{border:1px solid var(--line);border-radius:8px;font-weight:600}
.ws-badge{background:var(--e-red);color:#fff;border-radius:6px}
.addbtn{border:1px solid var(--line);border-radius:8px}
.addbtn.on{background:var(--e-red-t);border-color:var(--e-red-l);color:var(--e-red)}
.nrow{border-radius:7px;padding:7px 9px 7px 11px;font-size:13.5px;position:relative;font-weight:450}
.nrow:hover{background:var(--sunken)}
.nrow.sel{background:var(--e-red-t);color:var(--ink);font-weight:600}
.nrow.sel::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2.5px;
  border-radius:2px;background:var(--e-red)}
.nrow.sel .gl{color:var(--e-red)}
.nrow .cnt{color:var(--ink-3);font-size:11.5px;font-weight:500}
.usr .av{background:var(--e-red)}

/* Cold call : un dossier qui se comporte comme un tableau. */
.nrow.tabsfold .gl{font-size:14px}
.nrow.tabsfold .cnt{background:var(--sunken);border-radius:10px;padding:1px 7px;color:var(--ink-2)}
.nrow.tabsfold.sel .cnt{background:#fff;color:var(--e-red)}

/* ── En-tête d'écran ───────────────────────────────────────────── */
.bhead{background:var(--paper);border-bottom:1px solid var(--line)}
.topbar{background:var(--paper);border-bottom:1px solid var(--line);padding:18px 26px 0}
.bhead .topbar{border-bottom:0}
.title-row h1{font-size:22px;font-weight:600;letter-spacing:-.4px;color:var(--ink)}
.hsub{font-size:12.5px;color:var(--ink-3);margin-left:2px;align-self:center}
.btn{border:1px solid var(--line);border-radius:7px;font-size:13px;font-weight:500;
  padding:7px 13px;color:var(--ink);background:var(--paper)}
.btn:hover{background:var(--sunken);border-color:var(--ink-4)}
.btn.primary{background:var(--e-red);border-color:var(--e-red);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--e-red-deep);border-color:var(--e-red-deep)}
.btab:not(.off){color:var(--ink);font-weight:600;border-bottom-color:var(--e-red)!important}
.tool{font-size:13px;color:var(--ink-2)}

/* Onglets de sources, sous le titre. */
.btabs{padding:6px 26px 0;gap:2px;border-bottom:0}
.btab2{border-radius:7px 7px 0 0;font-size:13px;font-weight:500;color:var(--ink-2);
  padding:8px 12px;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer}
.btab2:hover{background:var(--sunken);color:var(--ink)}
.btab2.on{color:var(--ink);font-weight:600;border-bottom-color:var(--e-red);background:none}
.btab2 .n{background:var(--sunken);color:var(--ink-2);border-radius:9px;padding:1px 6px;
  font-size:11px;margin-left:6px;font-variant-numeric:tabular-nums}
.btab2.on .n{background:var(--e-red-t);color:var(--e-red)}

/* ── Le tableau : lisible, pas un damier ───────────────────────── */
.boardview{background:var(--ground)}
.grp{margin:18px 0 26px}
.grp-head{padding:0 26px 9px}
.grp-head>span:nth-child(3){font-family:var(--f);font-size:12px;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.07em}
.grp-head .caret{color:var(--ink-3)}
.grp-head .count{font-size:12px;color:var(--ink-3)}
.mb{background:var(--paper);font-size:13.5px}
.mb th{background:var(--paper);color:var(--ink-3);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:10px 14px;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line-3)}
.mb th.first{text-align:left;padding-left:18px;border-right:1px solid var(--line)}
.mb th.num{text-align:right}
.mb td{border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-3);text-align:left}
.mb td.first{border-right:1px solid var(--line)}
.mb td .cell{padding:12px 14px;min-height:44px;line-height:20px;text-align:left}
.mb td.first .cell{padding-left:18px;font-weight:500}
.mb td.num .cell{text-align:right}
.mb tbody tr:hover td{background:#fdfbf9}
.mb th:not(.first):not(.chk),.mb td:not(.first):not(.chk){width:162px;min-width:162px;max-width:162px}

/* La couleur du groupe tient dans un filet, pas dans une bande. */
.mb td.first{border-left:3px solid var(--ink-4)}
.tblscroll.green td.first,.tblscroll.grass_green td.first{border-left-color:var(--ok)}
.tblscroll.purple td.first,.tblscroll.dark_purple td.first{border-left-color:#7a4fa3}
.tblscroll.orange td.first,.tblscroll.working_orange td.first{border-left-color:var(--warn)}
.tblscroll.red td.first,.tblscroll.stuck-red td.first{border-left-color:var(--e-red)}
.tblscroll.navy td.first,.tblscroll.dark-blue td.first{border-left-color:#2c4a6e}
.tblscroll.yellow td.first,.tblscroll.egg_yolk td.first{border-left-color:#c99a06}

/* Statuts : pastille teintée à point. La cellule pleine en couleur,
   c'est la signature de Monday — on ne la reprend pas. */
.mb td.stat{padding:0}
.mb td.stat .cell{padding:9px 14px;color:var(--ink);text-align:left}
.slab{display:inline-flex;align-items:center;gap:7px;border-radius:20px;padding:3px 11px 3px 9px;
  font-size:12px;font-weight:600;line-height:18px;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  background:color-mix(in srgb,var(--c,#9c948d) 14%,#fff)!important;
  color:color-mix(in srgb,var(--c,#9c948d) 68%,#1c1b1a)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#9c948d) 26%,#fff)}
.slab::before{display:inline-block;content:"";width:6px;height:6px;border-radius:50%;
  background:var(--c,#9c948d);flex:0 0 6px;margin:0}
.mb tbody tr:hover td.stat{filter:none}
.pers{width:26px;height:26px;font-size:10.5px;background:var(--sunken);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.link{color:var(--e-red);text-decoration:none}
.link:hover{text-decoration:underline}

/* ── Cartes de pilotage ────────────────────────────────────────── */
.w{border-radius:10px;border:1px solid var(--line);background:var(--paper);
  box-shadow:0 1px 2px rgba(28,27,26,.04)}
.w-head h2{font-size:13px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.num .val{font-family:var(--f);font-size:32px;font-weight:600;letter-spacing:-1.2px}
.hero .val{font-size:40px}
.hb-f,.vbar,.gt i,.tb i,.mt i{background:var(--ink-2)}
.td:first-child .tb i{background:var(--e-red)}
.yt i{background:var(--ink-2)}
.tag{border-radius:20px;font-weight:600}
.tag.live{background:var(--ok-t);color:var(--ok)}
.tag.todo{background:var(--warn-t);color:var(--warn)}
.tag.bad{background:var(--e-red-t);color:var(--e-red)}
.note{background:var(--warn-t);border:1px solid #f2dfc2;color:#7a4a10;border-radius:10px}
.chip{border-radius:20px;font-size:11.5px;font-weight:600}
.spill.ok{background:var(--ok-t);color:var(--ok)}
.spill.bad{background:var(--e-red-t);color:var(--e-red)}
.led.ok{border-color:#c6e6d6;background:#f3faf6} .led.ok .lv{color:var(--ok)}
.led.warn{border-color:#f0dab8;background:#fdf8f0} .led.warn .lv{color:var(--warn)}
.gt i.bad{background:var(--e-red)} .gt i.warn{background:var(--warn)} .gt i.ok{background:var(--ok)}

/* ── Fiche, menus, modales ─────────────────────────────────────── */
.idav{background:var(--e-red)}
.atab.on{color:var(--e-red);border-bottom-color:var(--e-red)}
.upd-av{background:var(--e-red)}
.pop,.menu,.gres,.mo-c{border-radius:10px;border-color:var(--line)}
.inp{border-radius:7px;border-color:var(--line)}
.inp:focus{border-color:var(--e-red);box-shadow:0 0 0 3px var(--e-red-t);outline:0}
.toast{background:#1b1a19;border-radius:8px}
.kcol{background:var(--sunken);border-radius:10px}
.kcard{border-radius:8px;border-color:var(--line)}
:focus-visible{outline:2px solid var(--e-red);outline-offset:2px}

/* Les intitulés de colonne ne débordent jamais sur le voisin. */
.mb th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb th>*{overflow:hidden;text-overflow:ellipsis}
/* Une étiquette longue se coupe proprement dans sa pastille. */
.mb td.stat .cell{overflow:hidden}
.slab{min-width:0}
.slab>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}

/* Fond blanc — demande de Tony. Le contraste vient de la barre du haut
   et des filets, pas d'un fond teinté. */
:root{--ground:#fff;--sunken:#f6f5f3}
body{background:#fff}
.boardview,.board,.wshome{background:#fff}
.mb th,.mb td,.grp-head{background:#fff}
/* La case à cocher garde sa largeur : sinon la colonne des noms colle
   par-dessous et les libellés sont rognés au défilement horizontal. */
.mb th.chk,.mb td.chk{width:38px!important;min-width:38px!important;max-width:38px!important}

/* Un tableau plein d'e-mails ne doit pas être un mur rouge : le lien
   reste du texte, souligné discrètement, et ne rougit qu'au survol. */
.mb .link{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;text-decoration-color:var(--ink-4)}
.mb .link:hover{color:var(--e-red);text-decoration-color:var(--e-red)}
/* Un peu plus large partout : les étiquettes Monday sont longues
   (« Possède une solution similaire »). La pastille abrège le reste. */
.mb th:not(.first):not(.chk),.mb td:not(.first):not(.chk){width:178px;min-width:178px;max-width:178px}

/* ═══════════════════════════════════════════════════════════════
   Densité — on revient à la taille de Monday, un cran en dessous.
   Ligne ~34 px, texte 13 px, colonnes 150 px. Tout le chrome suit.
   ═══════════════════════════════════════════════════════════════ */
body{font-size:13px}

/* barre du haut */
.gtop{height:46px;flex:0 0 46px;padding:0 12px}
.app{height:calc(100vh - 46px)}
.gbrand b{font-size:14px}
.gbrand img,.glogo{width:21px;height:21px}
.gsearchbar{max-width:440px}
.gsearchbar input{font-size:13px}

/* rail et barre latérale */
.rail{width:62px;flex:0 0 62px;padding-top:6px}
.rail-item{width:54px;padding:6px 2px;font-size:9.5px;gap:3px}
.rail-item svg{width:17px;height:17px}
.nav-label{font-size:10.5px;padding:12px 9px 3px}
.ws{padding:5px 9px;font-size:13px}
.ws-badge{width:22px;height:22px;font-size:10px}
.addbtn{width:32px;flex:0 0 32px;font-size:17px}
.nrow{padding:5px 8px 5px 10px;font-size:13px;gap:7px}
.nrow .cnt{font-size:11px}
.nrow.sel::before{top:4px;bottom:4px}
.usr .av,.gav{width:28px;height:28px;font-size:11px}

/* en-tête d'écran */
.topbar{padding:13px 20px 0}
.title-row h1{font-size:19px}
.title-row{gap:8px}
.hsub{font-size:12px}
.btn{padding:5px 11px;font-size:12.5px;border-radius:6px}
.tool{font-size:12.5px;padding:4px 8px}
.searchbox{font-size:12.5px;padding:5px 9px}
.btab{font-size:13px;padding:6px 0 9px}
.btabs{padding:4px 20px 0}
.btab2{padding:6px 10px;font-size:12.5px}
.btab2 .n{font-size:10.5px;padding:0 5px}

/* barre d'étape */
.stagebar{padding:0 20px 10px}
.stagetop{margin-bottom:5px}
.stagetop b{font-size:10px} .stagetop span{font-size:12px}
.stageline{height:8px;gap:2px}
.stagelegend{gap:5px;margin-top:8px}
.schip{padding:2px 9px 2px 7px;font-size:11.5px;line-height:15px;gap:6px}
.schip i{width:6px;height:6px;flex:0 0 6px}
.schip em{font-size:10px}
.schip span{max-width:160px}

/* le tableau */
.grp{margin:10px 0 16px}
.grp-head{padding:0 20px 5px}
.grp-head>span:nth-child(3){font-size:11px}
.grp-head .count{font-size:11px}
.tblscroll{padding:0 20px}
.mb{font-size:13px}
.mb th{font-size:10px;padding:6px 10px;letter-spacing:.05em}
.mb th.first{padding-left:14px}
.mb td .cell{padding:7px 10px;min-height:34px;line-height:18px}
.mb td.first .cell{padding-left:14px}
.mb th:not(.first):not(.chk),.mb td:not(.first):not(.chk){width:150px;min-width:150px;max-width:150px}
.mb th.first,.mb td.first{width:250px;min-width:250px;max-width:250px}
.slab{padding:1px 9px 1px 7px;font-size:11.5px;line-height:16px;gap:6px}
.slab::before{width:5px;height:5px;flex:0 0 5px}
.pers{width:22px;height:22px;font-size:9.5px}
.mb td.stat .cell{padding:6px 10px}
.mb td.first{border-left-width:3px}

/* cartes de pilotage */
.w-head h2{font-size:12.5px}
.num .val{font-size:28px} .hero .val{font-size:34px}
.lv{font-size:22px}

/* ═══════════════════════════════════════════════════════════════
   Tout en clair — barre du haut comprise. L'identité tient au rouge
   du logo, à la sélection et aux pastilles, pas à un bandeau sombre.
   ═══════════════════════════════════════════════════════════════ */
.gtop{background:#fff;border-bottom:1px solid var(--line)}
.gbrand b{color:var(--ink)}
.gsearchbar{background:var(--sunken);border:1px solid var(--sunken);border-radius:7px}
.gsearchbar:focus-within{background:#fff;border-color:var(--e-red);
  box-shadow:0 0 0 3px var(--e-red-t)}
.gsearchbar input{color:var(--ink)}
.gsearchbar input::placeholder{color:var(--ink-3)}
.gs-ico,.gs-kbd{color:var(--ink-3)}
.gs-kbd{border-color:var(--line);background:#fff}
.gicon{color:var(--ink-2)}
.gicon:hover{background:var(--sunken);color:var(--ink)}
.toast{background:var(--ink)}

/* Une vieille règle donnait 38 px de line-height aux cellules de statut :
   c'est elle qui dictait la hauteur de toute la ligne. */
.mb td.stat .cell{line-height:18px;padding:6px 10px;min-height:34px;display:flex;align-items:center}
.mb td .cell{display:flex;align-items:center}
.mb td.first .cell,.mb td.num .cell{display:flex}
.mb td.num .cell{justify-content:flex-end}

/* ═══════════════════════════════════════════════════════════════
   Widgets de pilotage — anatomie reprise de la maquette validée
   (~/esekai-cockpit/v2-monday.html) : titre + emoji + pastille d'état,
   sous-titre, grand nombre avec unité, note de lecture en pied.
   Les couleurs de DONNÉES (bleu, vert) reviennent : ce sont des
   encodages, pas du branding.
   ═══════════════════════════════════════════════════════════════ */
:root{--c-blue:#579bfc;--c-green:#00c875;--c-green-d:#037f4c;--c-purple:#a25ddc;
  --c-orange:#fdab3d;--c-red:#e2445c;--c-red-d:#bb3354}
.board{padding:16px 20px 60px;gap:14px}
.w{border-radius:8px;border:1px solid var(--line);overflow:hidden;
  box-shadow:0 1px 2px rgba(50,51,56,.04)}
.w-head{display:flex;align-items:center;gap:8px;padding:12px 15px 8px}
.w-head h2{font-size:14px;font-weight:600;margin:0;letter-spacing:-.1px}
.w-head h2 em{font-style:normal;margin-right:7px}
.w-ico{color:var(--ink-3);font-size:12px}
.w-body{padding:2px 15px 15px;flex:1;display:flex;flex-direction:column}
.w-sub{font-size:12px;color:var(--ink-2);margin:-2px 0 11px;line-height:1.45}
.w-foot{font-size:12px;color:var(--ink-2);margin:13px -15px -15px;padding:10px 15px;
  background:#fbfbfa;border-top:1px solid var(--line);position:relative;line-height:1.5}
.w-foot::before{content:"NOTE DE LECTURE";display:block;font-size:9px;font-weight:700;
  letter-spacing:.09em;color:var(--ink-3);margin-bottom:4px}
.w-note{display:block;margin-top:6px;color:var(--ink-3);font-size:11px;line-height:1.45}

/* grand nombre */
.num{padding-top:4px}
.num .val{font-size:31px;font-weight:700;letter-spacing:-1px;line-height:1.05;color:var(--ink)}
.num .val.muted{color:var(--ink-3)}
.num .unit{font-size:18px;font-weight:600}
.num .cmp{font-size:12px;color:var(--ink-2);margin-top:6px}
.num .cmp.up{color:var(--c-green-d);font-weight:600}
.num .cmp.warn{color:var(--warn);font-weight:600}
.hero .val{font-size:38px}

/* jauge */
.gauge-row{display:flex;align-items:center;gap:13px;padding-top:2px}
.gauge-txt .val{font-size:24px;font-weight:700;letter-spacing:-.6px}
.gauge-txt .goal{font-size:12px;color:var(--ink-2)}

/* barres horizontales */
.hbars{display:grid;gap:7px}
.hb{display:grid;grid-template-columns:118px minmax(0,1fr) 108px;gap:10px;align-items:center}
.hb-l{font-size:12px;color:var(--ink-2);text-align:right;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hb-t{background:#f0f1f5;border-radius:3px;height:17px;display:block}
.hb-f{height:100%;border-radius:3px;background:var(--c-blue);display:block}
.hb-v{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-v small{font-weight:400;color:var(--ink-3)}
.hb.alert .hb-l{color:var(--c-red-d);font-weight:600}
.hb.alert .hb-f{background:repeating-linear-gradient(135deg,#e2445c 0 5px,#f2a6b1 5px 10px)}

/* barres verticales groupées */
.vbars{display:flex;align-items:stretch;gap:9px;height:205px;padding-top:24px}
.vcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.vplot{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.vbar{width:100%;max-width:44px;background:var(--c-blue);border-radius:3px 3px 0 0;
  position:relative;min-height:2px}
.vbar.b2{background:var(--c-green)}
.vval{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:5px;
  font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.vlab{font-size:10.5px;color:var(--ink-2)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--ink-2);margin-top:11px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* entonnoir */
.funnel{display:grid;gap:6px;padding-top:4px}
.fn-top{display:flex;justify-content:space-between;font-size:12px}
.fn-top .n{font-weight:600;font-variant-numeric:tabular-nums}
.fn-top .r{color:var(--ink-3);font-size:11px;font-variant-numeric:tabular-nums}
.fn-bar{height:21px;border-radius:3px;background:var(--c-blue);margin-top:3px}
.fn:nth-child(2) .fn-bar{background:#6ea8fd}
.fn:nth-child(3) .fn-bar{background:var(--c-purple)}
.fn:nth-child(4) .fn-bar{background:var(--c-green)}

/* tables de widget */
.tbl-wrap{overflow-x:auto;margin:0 -15px;padding:0 15px}
.wt{border-collapse:collapse;width:100%;font-size:12.5px}
.wt th{text-align:left;font-size:11px;font-weight:600;color:var(--ink-2);padding:7px 9px;
  border-bottom:1px solid var(--line);white-space:nowrap;text-transform:none;letter-spacing:0}
.wt td{padding:8px 9px;border-bottom:1px solid #f4f2ef}
.wt tr:last-child td{border-bottom:none}
.wt td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.wt td.name{font-weight:500}
.wt tr.best td{background:#f2fbf7}
.wt tr.worst td{background:#fdf6f5}
.tag{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:11px}

/* Un cran plus petit sur les tableaux, comme demandé. */
.mb{font-size:12.5px}
.mb th{font-size:9.5px;padding:5px 9px}
.mb td .cell{padding:6px 9px;min-height:31px;line-height:17px}
.mb td.stat .cell{padding:5px 9px;min-height:31px;line-height:17px}
.mb th.first{padding-left:13px} .mb td.first .cell{padding-left:13px}
.mb th:not(.first):not(.chk),.mb td:not(.first):not(.chk){width:142px;min-width:142px;max-width:142px}
.mb th.first,.mb td.first{width:236px;min-width:236px;max-width:236px}
.slab{font-size:11px;line-height:15px;padding:1px 8px 1px 6px;gap:5px}
.pers{width:20px;height:20px;font-size:9px}
.grp-head>span:nth-child(3){font-size:10.5px}

/* ═══════════════════════════════════════════════════════════════
   CALQUE MAQUETTE — reprise fidèle de ~/esekai-cockpit/v2-monday.html,
   la maquette que Tony a validée. C'est la référence unique : plus de
   variante. Seul le logomark garde le rouge Esekai.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --mdy-blue:#0073ea; --mdy-blue-hover:#0060b9; --mdy-chart:#579bfc; --mdy-navy:#225091;
  --mdy-green:#00c875; --mdy-green-dark:#037f4c; --mdy-red:#e2445c; --mdy-red-dark:#bb3354;
  --mdy-yellow:#ffcb00; --mdy-orange:#fdab3d; --mdy-purple:#a25ddc; --mdy-grey:#c4c4c4;
  --c-blue:#579bfc; --c-green:#00c875; --c-green-d:#037f4c;
  --c-purple:#a25ddc; --c-orange:#fdab3d; --c-red:#e2445c; --c-red-d:#bb3354;

  --ground:#f6f7fb; --paper:#fff; --sunken:#f5f6f8;
  --line:#e6e9ef; --line-2:#eaecf2; --line-3:#f2f3f7; --line-strong:#d0d4e4;
  --ink:#323338; --ink-2:#676879; --ink-3:#9699a6; --ink-4:#c5c7d0;
  --ok:#037f4c; --ok-t:#e6f9f1; --warn:#a35b0a; --warn-t:#fff4e5;
  --brand:#0073ea; --brand-deep:#0060b9; --brand-tint:#e5f4ff; --brand-line:#cce5ff;
  --e-red:#e2445c; --e-red-deep:#bb3354; --e-red-t:#fdf3f4; --e-red-l:#f2c2ca;
  --d:'Figtree','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f:'Figtree','Helvetica Neue',Helvetica,Arial,sans-serif;
  --r:6px;
}
body{font-family:var(--f);font-size:14px;background:var(--ground);color:var(--ink);
  line-height:1.45;font-feature-settings:normal}

/* barre du haut : blanche, comme la maquette */
.gtop{background:var(--paper);border-bottom:1px solid var(--line);height:48px;flex:0 0 48px;padding:0 16px}
.app{height:calc(100vh - 48px)}
.gbrand{gap:9px}
.gbrand b{color:var(--ink);font-weight:700;font-size:15px;letter-spacing:-.2px}
.gbrand img,.glogo{filter:none!important;width:23px;height:23px}
.gsearchbar{background:#f5f6f8;border:1px solid #f5f6f8;border-radius:20px;max-width:460px}
.gsearchbar:focus-within{background:#fff;border-color:var(--mdy-blue);
  box-shadow:0 0 0 1px var(--mdy-blue)}
.gsearchbar input{color:var(--ink);font-size:14px}
.gsearchbar input::placeholder{color:var(--ink-3)}
.gs-ico,.gs-kbd{color:var(--ink-3)} .gs-kbd{border-color:var(--line);background:transparent}
.gicon{color:var(--ink-2);border-radius:6px}
.gicon:hover{background:var(--sunken);color:var(--ink)}
.gav{background:var(--mdy-purple);width:30px;height:30px;font-size:12px}

/* rail 74 px avec libellés */
.rail{background:var(--ground);border-right:1px solid var(--line);width:74px;flex:0 0 74px;
  padding:12px 0;gap:2px}
.rail-item{width:62px;padding:9px 2px;border-radius:8px;gap:5px;color:var(--ink-2);
  font-size:10px;line-height:1.15;font-weight:400}
.rail-item svg{width:18px;height:18px}
.rail-item:hover{background:var(--sunken);color:var(--ink)}
.rail-item.active{background:#dcedff;color:var(--mdy-blue)}

/* barre latérale */
.nav{background:var(--paper);border-right:1px solid var(--line)}
.nav-label{font-size:11.5px;color:var(--ink-3);font-weight:600;padding:10px 8px 3px;
  letter-spacing:.03em;text-transform:uppercase}
.ws{border:1px solid var(--line-strong);border-radius:8px;padding:7px 10px;
  font-weight:600;font-size:13.5px}
.ws-badge{width:22px;height:22px;border-radius:5px;background:var(--mdy-red);color:#fff;font-size:12px}
.addbtn{border:1px solid var(--line-strong);border-radius:8px;width:36px;flex:0 0 36px;
  font-size:19px;color:var(--ink-2)}
.addbtn:hover{background:var(--sunken)}
.addbtn.on{background:#dcedff;border-color:var(--mdy-blue);color:var(--mdy-blue)}
.nrow{padding:7px 8px;border-radius:6px;font-size:13.5px;color:var(--ink);gap:8px}
.nrow:hover{background:var(--sunken)}
.nrow.sel{background:#e5f4ff;font-weight:600;box-shadow:inset 0 0 0 1px #cce5ff}
.nrow.sel::before{display:none}
.nrow .gl{color:var(--ink-3);font-size:12px}
.nrow.sel .gl{color:var(--mdy-blue)}
.nrow .cnt{color:var(--ink-3);font-size:12px}
.nrow.tabsfold .cnt{background:var(--sunken);border-radius:10px;padding:1px 7px;color:var(--ink-2)}
.nrow.tabsfold.sel .cnt{background:#fff;color:var(--mdy-blue)}
.usr .av{background:var(--mdy-purple)}

/* en-tête d'écran */
.topbar{background:var(--paper);border-bottom:1px solid var(--line);padding:14px 22px 0}
.title-row{gap:10px}
.title-row h1{font-size:23px;font-weight:600;letter-spacing:-.2px}
.title-row h1 em{font-style:normal;margin-right:8px}
.hsub{font-size:13px;color:var(--ink-2)}
.btn{border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);
  border-radius:6px;padding:7px 13px;font-size:13.5px;font-weight:500}
.btn:hover{background:var(--sunken)}
.btn.primary{background:var(--mdy-blue);border-color:var(--mdy-blue);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--mdy-blue-hover);border-color:var(--mdy-blue-hover)}
.toolbar{gap:10px;padding:14px 0 13px}
.tool{color:var(--ink-2);font-size:13.5px;padding:6px 10px;border-radius:6px}
.searchbox{border:1px solid var(--line-strong);border-radius:6px;padding:6px 12px;font-size:13.5px}
.tabsrow{gap:4px;padding:12px 0 0}
.btab{font-size:13.5px;font-weight:600;padding:8px 12px}
.btab:not(.off){border-bottom-color:var(--mdy-blue)!important;color:var(--ink)}
.btab.off{font-weight:400;color:var(--ink-2)}
.btabs{padding:8px 22px 0;gap:3px}
.btab2{font-size:13.5px;padding:8px 12px;border-radius:6px 6px 0 0;color:var(--ink-2)}
.btab2.on{color:var(--ink);font-weight:600;border-bottom-color:var(--mdy-blue)}
.btab2 .n{background:var(--sunken);color:var(--ink-2)}
.btab2.on .n{background:#e5f4ff;color:var(--mdy-blue)}
.bhead{background:var(--paper);border-bottom:1px solid var(--line)}

/* grille du tableau de bord : les cartes d'une même rangée s'alignent */
.board{padding:18px 22px 60px;gap:16px;align-content:start;align-items:stretch}
.w{background:var(--paper);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 1px 2px rgba(50,51,56,.04);overflow:hidden;height:auto}
.w-head{padding:13px 16px 9px}
.w-head h2{font-size:15px;font-weight:600;letter-spacing:-.1px}
.w-body{padding:4px 16px 16px}
.w-sub{font-size:12.5px;margin:-2px 0 12px}
.w-foot{font-size:12.5px;margin:14px -16px -16px;padding:11px 16px;
  background:#fbfcfe;border-top:1px solid var(--line)}
.w-foot::before{content:"NOTE DE LECTURE";font-size:9.5px;letter-spacing:.08em;margin-bottom:5px}
.num .val{font-size:34px} .hero .val{font-size:42px} .num .unit{font-size:20px}
.num .cmp{font-size:12.5px}
.tag{font-size:10.5px;border-radius:11px;padding:2px 7px}
.tag.live{background:#e6f9f1;color:var(--mdy-green-dark)}
.tag.todo{background:#fff4e5;color:#a35b0a}
.tag.bad{background:#fdf3f4;color:var(--mdy-red-dark)}
.hb-t{height:18px} .hb-f{background:var(--mdy-chart)}
.vbar{background:var(--mdy-chart)} .vbar.b2{background:var(--mdy-green)}
.vbars{height:215px}
.note{background:#fff8ec;border:1px solid #ffdfae;color:#6b4a12;border-radius:8px}
.wt{font-size:13px} .wt th{font-size:11.5px;padding:7px 10px} .wt td{padding:9px 10px}
.led.ok{border-color:#9fd9c2;background:#f4fbf8} .led.ok .lv{color:var(--mdy-green-dark)}
.led.warn{border-color:#f5d9a8;background:#fffaf1} .led.warn .lv{color:#a35b0a}
.spill.ok{background:#e6f9f1;color:var(--mdy-green-dark)}
.spill.bad{background:#fdf3f4;color:var(--mdy-red-dark)}
.gt i.ok{background:var(--mdy-green)} .gt i.warn{background:var(--mdy-orange)}
.gt i.bad{background:var(--mdy-red)}
.td:first-child .tb i{background:var(--mdy-blue)} .tb i,.yt i,.mt i{background:var(--mdy-chart)}

/* le tableau : statuts en cellule pleine, comme Monday */
.boardview{background:var(--paper)}
.mb th,.mb td,.grp-head{background:var(--paper)}
.mb th{color:var(--ink-2);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;border-right:1px solid var(--line-3)}
.mb td{border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-3)}
.mb tbody tr:hover td{background:#f7f9fc}
.mb td.stat{padding:0}
.mb td.stat .cell{padding:0;min-height:32px;display:flex;align-items:center;justify-content:center}
.slab{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  min-height:32px;border-radius:0;padding:4px 8px;font-size:12.5px;font-weight:400;gap:0;
  background:var(--c)!important;color:#fff!important;box-shadow:none;text-align:center}
.slab::before{display:none}
.slab>b{font-weight:400;color:#fff}
.mb .link{color:var(--mdy-blue);text-decoration:none}
.mb .link:hover{text-decoration:underline;color:var(--mdy-blue-hover)}
.pers{background:#c9d6e4;color:#4a5b6e;box-shadow:none}
.mb tr.sel td{background:#e5f4ff}
.rowchk{accent-color:var(--mdy-blue)}
.grp-head>span:nth-child(3){color:var(--mdy-blue);font-weight:600;text-transform:none;
  letter-spacing:0;font-size:14px}
.grp-head .caret{color:var(--mdy-blue)}

/* barre d'étape : ruban + pastilles, aux couleurs Monday */
.schip{border:1px solid var(--line);background:var(--paper);color:var(--ink-2)}
.schip:hover{border-color:var(--line-strong);background:var(--sunken)}
.schip.on{border-color:var(--mdy-blue);background:#e5f4ff;color:var(--ink)}
.stagebar{padding:0 22px 12px}

/* menus, modales, fiche */
.idav,.upd-av{background:var(--mdy-blue)}
.atab.on{color:var(--mdy-blue);border-bottom-color:var(--mdy-blue)}
.inp{border-radius:4px;border-color:var(--line-strong)}
.inp:focus{border-color:var(--mdy-blue);box-shadow:0 0 0 1px var(--mdy-blue)}
.toast{background:#323338;border-radius:6px}
.kcol{background:#f5f6f8} .kcard{border-radius:6px}
:focus-visible{outline:2px solid var(--mdy-blue);outline-offset:2px}
/* Sans ceci, la grille répartit ses lignes à parts égales dans la hauteur
   disponible et les cartes se chevauchent : chaque ligne suit son contenu. */
.board{grid-auto-rows:max-content}

/* ══ Inviter quelqu'un directement depuis le partage d'un tableau ══ */
.invbox{border:1px solid var(--line);border-radius:8px;padding:13px 14px;margin-bottom:16px;
  background:#fbfcfe}
.invhd{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px}
.invrow{display:grid;grid-template-columns:1.5fr 1fr 1.15fr 1.05fr auto;gap:8px;align-items:center}
.invrow .inp{padding:7px 10px;font-size:13px}
.invrow .btn{white-space:nowrap}
@media(max-width:820px){.invrow{grid-template-columns:1fr 1fr;}.invrow .btn{grid-column:1/-1}}
.invok{margin-top:11px;padding:11px 13px;border-radius:6px;background:#e6f9f1;
  border:1px solid #9fd9c2;color:#0b5c3a;font-size:12.5px;line-height:1.6}
.invlink{display:block;margin:7px 0;padding:7px 9px;background:#fff;border:1px solid var(--line);
  border-radius:4px;font-size:11.5px;word-break:break-all;color:var(--ink)}

/* ══ Onglets : trois points au survol, cadenas si privé ══════════ */
.btab2w{display:inline-flex;align-items:center;position:relative}
.tabdots{opacity:0;border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:14px;
  padding:2px 6px;border-radius:4px;margin-left:-6px;font-family:var(--f);
  transition:opacity .12s,background .12s}
.btab2w:hover .tabdots{opacity:1}
.tabdots:hover{background:var(--sunken);color:var(--ink)}
.btab2 .lk.lock{font-size:10px;margin-left:2px;opacity:.7}

/* ══ Cadenas et visages : qui voit quoi, d'un coup d'œil ══════════ */
.lockic{display:inline-flex;align-items:center;color:var(--ink-3);flex:0 0 auto;margin-left:1px}
.nrow.sel .lockic{color:var(--mdy-blue)}
.faces{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:5px}
.face{width:19px;height:19px;border-radius:50%;display:inline-grid;place-items:center;
  font-size:8.5px;font-weight:700;color:#fff;background:var(--mdy-purple);
  box-shadow:0 0 0 1.5px var(--paper);object-fit:cover}
.face + .face{margin-left:-6px}
.face.more{background:var(--sunken);color:var(--ink-2);font-weight:600}
.face.solo{background:transparent;color:var(--ink-4);box-shadow:none;font-weight:400;
  font-size:11px;width:auto;padding:0 2px}
.btab2 .faces{margin-left:6px}
.btab2 .face{width:18px;height:18px;font-size:8px}
.nrow .faces{margin-left:auto;margin-right:2px}
.nrow .cnt{margin-left:6px}
#share svg{margin-right:5px;vertical-align:-1px}

/* ═══════════════════════════════════════════════════════════════
   Le tableau à l'identique de Monday : en-têtes centrés en casse
   normale, contenu centré sauf la colonne des noms, ligne de 36 px,
   quadrillage complet.
   ═══════════════════════════════════════════════════════════════ */
.mb{font-size:14px}
.mb th{text-align:center;font-size:14px;font-weight:400;color:var(--ink-2);
  text-transform:none;letter-spacing:0;padding:8px 12px;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.mb th.first{text-align:center;padding-left:12px}
.mb th.num{text-align:center}
.mb th:last-child{border-right:0}
.mb td{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.mb td:last-child{border-right:0}
.mb td .cell{padding:9px 12px;min-height:36px;line-height:18px;text-align:center;
  display:flex;align-items:center;justify-content:center}
.mb td.first .cell{text-align:left;justify-content:flex-start;padding:9px 12px 9px 16px;font-weight:400}
.mb td.num .cell{justify-content:center;text-align:center}
.mb th:not(.first):not(.chk),.mb td:not(.first):not(.chk){width:150px;min-width:150px;max-width:150px}
.mb th.first,.mb td.first{width:280px;min-width:280px;max-width:280px}
.mb td.stat .cell{padding:0;min-height:36px}
.slab{min-height:36px;font-size:14px}
.pers{width:26px;height:26px;font-size:10.5px}
.grp-head>span:nth-child(3){font-size:15px}

/* Barre latérale épurée : nom, visages, cadenas. Rien d'autre. */
.nrow .faces{margin-left:auto}
.lockic.open{color:var(--ink-4)}
.lockic.shut{color:var(--ink-2)}
.nrow.sel .lockic.shut{color:var(--mdy-blue)}
.nrow .lockic{margin-left:6px}
.btab2 .lockic{margin-left:5px}

/* Le nom du tableau garde toujours la priorité sur les icônes : sans
   min-width:0 il s'écrase à zéro dès que la barre latérale est étroite. */
.nrow .nm{flex:1 1 auto;min-width:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nrow .faces,.nrow .lockic,.nrow .star,.nrow .rmenu,.nrow .sdot,.nrow .gl{flex:0 0 auto}
/* Sous une certaine largeur, on garde le nom et le cadenas, rien d'autre. */
@media(min-width:0){
  .nav.tight .nrow .faces{display:none}
}

/* L'étoile et les trois points sortent du flux : ils se posent par-dessus
   la ligne au survol, comme sur Monday, et le nom garde toute la largeur. */
.nrow .star,.nrow .rmenu{position:absolute;top:50%;transform:translateY(-50%);
  opacity:0;border-radius:4px;padding:2px 5px;background:var(--sunken)}
.nrow .rmenu{right:5px} .nrow .star{right:27px}
.nrow:hover .star,.nrow:hover .rmenu{opacity:1}
.nrow.sel .star,.nrow.sel .rmenu{background:#e5f4ff}
.nrow .nm{flex:1 1 auto;min-width:0}
.nrow .faces{margin-left:auto;margin-right:2px}
.nrow .lockic{margin-left:5px;margin-right:2px}

/* Une cellule flex centrée rogne le texte des DEUX côtés. En bloc, le
   texte se centre s'il tient et s'abrège proprement à la fin sinon. */
.mb td .cell{display:block;padding:9px 12px;min-height:36px;line-height:18px;
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb td.first .cell{text-align:left;padding:9px 12px 9px 16px}
.mb td.stat .cell{display:flex;align-items:center;justify-content:center;padding:0;min-height:36px}
.mb td .cell .pers{vertical-align:middle}

/* Un e-mail ou une URL est toujours plus long que sa colonne : centré, il
   se ferait rogner des deux côtés. On l'aligne à gauche et il s'abrège. */
.mb td:has(.link) .cell{text-align:left}
.mb td:has(.link) .cell .link{display:inline}

/* ═══════════════════════════════════════════════════════════════
   Densité réelle de Monday, relevée sur la capture : ligne de 27 px,
   texte 13 px, et les largeurs de colonnes viennent de Monday
   (attribut style posé par le script). On lève donc les largeurs fixes.
   ═══════════════════════════════════════════════════════════════ */
.mb th:not(.first):not(.chk),.mb td:not(.first):not(.chk){width:auto;min-width:0;max-width:none}
.mb th.first,.mb td.first{width:auto;min-width:0;max-width:none}
.mb{font-size:13px}
.mb th{font-size:13px;padding:5px 8px;font-weight:400;color:var(--ink-2)}
.mb td .cell{padding:4px 8px;min-height:27px;line-height:19px;font-size:13px}
.mb td.first .cell{padding:4px 8px 4px 12px}
.mb td.stat .cell{min-height:27px;padding:0}
.slab{min-height:27px;font-size:13px;padding:0 6px}
.pers{width:21px;height:21px;font-size:9px}
.mb td.chk .cell,.mb th.chk{min-height:27px}
.grp-head{padding:0 20px 4px}
.grp-head>span:nth-child(3){font-size:14px}
.tblscroll{padding:0 20px}
.grp{margin:8px 0 14px}

/* ═══════════════════════════════════════════════════════════════
   Détails relevés sur la capture Monday : bulle de conversation,
   pastilles grises des listes déroulantes, filet bleu des colonnes
   liées, et la typographie exacte (Figtree 14 px, ligne de 28 px).
   ═══════════════════════════════════════════════════════════════ */
.mb{font-size:14px}
.mb th{font-size:14px;padding:6px 8px;font-weight:400;color:var(--ink-2)}
.mb td .cell{padding:4px 8px;min-height:28px;line-height:20px;font-size:14px}
.mb td.first .cell{padding:4px 8px 4px 14px}
.mb td.stat .cell{min-height:28px;padding:0}
.slab{min-height:28px;font-size:14px;padding:0 6px}
.pers{width:22px;height:22px;font-size:9.5px}
.mb td.chk .cell,.mb th.chk{min-height:28px}

/* colonne des conversations */
.mb th.bub,.mb td.bub{width:38px!important;min-width:38px!important;max-width:38px!important;
  border-right:1px solid var(--line)}
.mb td.bub .cell{padding:0;display:flex;align-items:center;justify-content:center;min-height:28px}
.bubb{border:0;background:none;cursor:pointer;color:var(--ink-4);padding:2px;border-radius:4px;
  display:inline-flex;align-items:center;gap:2px;font-family:var(--f);position:relative}
.bubb:hover{color:var(--mdy-blue);background:var(--sunken)}
.bubb.on{color:var(--mdy-blue)}
.bubb i{font-style:normal;font-size:9px;font-weight:700;color:#fff;background:var(--mdy-blue);
  border-radius:9px;min-width:13px;height:13px;display:inline-grid;place-items:center;padding:0 3px;
  position:absolute;right:-4px;bottom:-2px}

/* listes déroulantes : pastille grise, pas de cellule pleine */
.mb td[data-type="dropdown"] .cell,.mb td[data-type="tags"] .cell{padding:3px 8px}
.dchip{display:inline-block;background:var(--sunken);border-radius:12px;padding:1px 9px;
  font-size:13px;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:middle}

/* colonnes liées à un autre tableau : filet bleu à gauche de la cellule */
.mb td[data-type="board_relation"] .cell{position:relative;padding-left:14px}
.mb td[data-type="board_relation"] .cell::before{content:"";position:absolute;left:6px;top:5px;
  bottom:5px;width:3px;border-radius:2px;background:var(--mdy-chart)}

/* « ouvrir » passait à la ligne dans la cellule des noms et poussait chaque
   ligne à 46 px. Elle reste sur la même ligne et n'apparaît qu'au survol. */
.mb td.first .cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.openhint{display:none;margin-left:8px;font-size:11px;color:var(--mdy-blue);vertical-align:1px}
.mb tbody tr:hover td.first .openhint{display:inline}

/* Une ancienne règle imposait line-height:38px aux cellules : c'est elle
   qui gonflait chaque ligne à 46 px. Ligne de 28 px, comme Monday. */
.mb td .cell,.mb td.first .cell,.mb td.stat .cell{line-height:20px}
.mb td .cell{display:block;min-height:28px;padding:4px 8px}
.mb td.first .cell{display:block;padding:4px 8px 4px 14px}
.mb td.stat .cell{display:flex;align-items:center;justify-content:center;padding:0;min-height:28px}
.mb td.bub .cell{display:flex;align-items:center;justify-content:center;padding:0;min-height:28px}
.mb td.chk .cell{min-height:28px}
.pers{width:20px;height:20px;font-size:9px;vertical-align:-5px}

/* ══ En-tête de groupe et palette de couleurs, comme Monday ═══════ */
.grp-head{display:flex;align-items:center;gap:8px}
.gdot{width:11px;height:11px;border-radius:50%;border:0;padding:0;flex:0 0 11px}
button.gdot{cursor:pointer}
button.gdot:hover{box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.grp-head .caret{color:var(--gc,var(--mdy-blue))}
.grp-head .gtitle{color:var(--gc,var(--mdy-blue));font-weight:600;font-size:14px}
.gcount{margin-left:14px;color:var(--ink-3);font-size:13px;font-weight:400}
.gpal{display:grid;grid-template-columns:repeat(5,26px);gap:6px;padding:8px 10px 10px}
.gsw{width:26px;height:26px;border-radius:5px;border:0;cursor:pointer;padding:0}
.gsw:hover{transform:scale(1.08)}
.gsw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink-2)}

/* La barre de couleur du groupe suit la couleur choisie. */
.mb td.first{border-left:6px solid var(--gc,#579bfc)}
.tblscroll.green td.first,.tblscroll.grass_green td.first,.tblscroll.purple td.first,
.tblscroll.dark_purple td.first,.tblscroll.orange td.first,.tblscroll.working_orange td.first,
.tblscroll.red td.first,.tblscroll.stuck-red td.first,.tblscroll.navy td.first,
.tblscroll.dark-blue td.first,.tblscroll.yellow td.first,.tblscroll.egg_yolk td.first,
.tblscroll.grey td.first,.tblscroll.trolley-grey td.first{border-left-color:var(--gc,#579bfc)}

/* Typo un tout petit peu plus petite : on lit mieux les SIRET,
   raisons sociales et adresses sans élargir les colonnes. */
.mb{font-size:13px}
.mb td .cell{font-size:13px}
.mb th{font-size:13px}
.slab{font-size:13px}
.dchip{font-size:12.5px}

/* ═══════════════════════════════════════════════════════════════
   La barre d'outils de Monday : Ajouter, Rechercher, Personne,
   Filtre, Trier, Masquer, Grouper par.
   ═══════════════════════════════════════════════════════════════ */
.toolbar.mtool{gap:6px;padding:12px 0 12px;flex-wrap:wrap}
.split{display:inline-flex;align-items:stretch;border-radius:6px;overflow:hidden}
.split .btn{border-radius:0;font-weight:600;padding:7px 15px}
.split .btn.caret{padding:7px 9px;border-left:1px solid rgba(255,255,255,.28);font-size:12px}
.split .btn:first-child{border-radius:6px 0 0 6px}
.split .btn:last-child{border-radius:0 6px 6px 0}
.tbtn{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--ink-2);
  border-radius:6px;padding:7px 11px;font-size:13.5px;font-family:var(--f);cursor:pointer}
.tbtn i{font-style:normal;font-size:13px;opacity:.85}
.tbtn:hover{background:var(--sunken);color:var(--ink)}
.tbtn.on{background:#e5f4ff;color:var(--mdy-blue-hover);font-weight:600}
.tbtn.dots{padding:7px 10px;font-size:16px;line-height:1}
#bqwrap{display:flex;margin:0 0 10px;max-width:340px;padding:0}
#bqwrap input{border:0;outline:none;padding:7px 12px;width:100%;font-family:var(--f);font-size:13.5px;
  background:transparent;color:var(--ink)}

/* la liste des colonnes à masquer */
.hidelist{max-height:300px;overflow-y:auto;padding:4px 0}
.hrow{display:flex;align-items:center;gap:9px;padding:6px 14px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.hrow:hover{background:var(--sunken)}
.hrow input{accent-color:var(--mdy-blue);cursor:pointer;flex:0 0 auto}
.hrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Densité relevée sur la comparaison côte à côte : Monday tient 32 px. */
.mb td .cell{min-height:32px;padding:6px 8px;line-height:20px}
.mb td.first .cell{padding:6px 8px 6px 14px}
.mb td.stat .cell{min-height:32px;padding:0}
.slab{min-height:32px}
.mb td.chk .cell,.mb th.chk{min-height:32px}
.pers{width:22px;height:22px;font-size:9.5px}

/* Sur Monday une case de statut vide est grise, pas blanche. */
.mb td[data-type="status"] .cell:empty,.mb td[data-type="color"] .cell:empty{background:#c4c4c4}
.mb td[data-type="status"],.mb td[data-type="color"]{padding:0}

/* La case à cocher est toujours visible, comme sur Monday. */
.rowchk{opacity:.55}
.mb tr:hover .rowchk,.rowchk:checked{opacity:1}

/* ═══════════════════════════════════════════════════════════════
   Le visuel d'un canal d'acquisition. Ce n'est pas une grille :
   c'est l'entonnoir du canal, ses coûts, et ce qui le porte.
   ═══════════════════════════════════════════════════════════════ */
.chanview{padding:20px 22px 60px;max-width:1180px}

/* la bande de chiffres clés */
.chan-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:22px}
.ck{background:var(--paper);padding:16px 18px 15px;display:flex;flex-direction:column;gap:3px}
.ck.hi{background:#f7fbff}
.ckk{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.ckv{font-family:var(--d);font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.ckv.off{color:var(--ink-4)}
.ckv em{font-style:normal;font-size:17px;color:var(--ink-3);font-weight:600}
.ckn{font-size:12px;color:var(--ink-2)}
.ckn.bad{color:var(--mdy-red-dark);font-weight:600}

/* un bloc de visualisation */
.chan-block{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:20px 22px 22px;margin-bottom:18px}
.cbh{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.cbh h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.cbs{font-size:12.5px;color:var(--ink-3)}

/* l'entonnoir, en marches décroissantes */
.funnel3{display:flex;flex-direction:column;gap:3px}
.f3{position:relative;padding:0 0 4px}
.f3h{display:flex;align-items:baseline;gap:9px;margin-bottom:4px}
.f3l{font-size:13px;font-weight:600;color:var(--ink)}
.f3src{font-size:11px;color:var(--ink-4)}
/* Une piste claire derrière chaque marche : on voit tout de suite ce qui
   est perdu, sans avoir à comparer deux longueurs de mémoire. */
.f3t{height:34px;background:var(--sunken);border-radius:5px;position:relative}
.f3bar{height:34px;border-radius:5px;background:#0073ea;
  display:flex;align-items:center;justify-content:flex-end;padding:0 11px;
  box-sizing:border-box;min-width:34px;transition:width .3s cubic-bezier(.2,.8,.3,1)}
.f3bar b{color:#fff;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.f3:nth-child(2) .f3bar{background:#1a86d9}
.f3:nth-child(3) .f3bar{background:#2b93b8}
.f3:nth-child(4) .f3bar{background:#1f9f77}
.f3:nth-child(5) .f3bar{background:#0aa863}
.f3:last-child .f3bar{background:#037f4c}
.f3d{font-size:11.5px;color:var(--ink-3);margin-top:5px;font-weight:600}
.f3d span{font-weight:400;color:var(--ink-4)}
.f3d.bad{color:var(--mdy-red-dark)}

/* le classement des lignes */
.rankb{display:flex;flex-direction:column;gap:8px}
.rk{display:grid;grid-template-columns:22px minmax(90px,190px) minmax(0,1fr) 92px;gap:12px;align-items:center}
.rkn{font-size:11px;color:var(--ink-4);text-align:right;font-variant-numeric:tabular-nums}
.rkl{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkt{height:20px;border-radius:4px;background:var(--sunken);overflow:hidden;display:block}
.rkt i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#579bfc,#0073ea)}
.rkv{text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

/* un canal qui n'a encore rien produit */
.chan-empty{background:var(--paper);border:1px dashed var(--line-strong);border-radius:12px;
  padding:52px 32px;text-align:center;max-width:560px;margin:20px auto}
.ce-ic{font-size:40px;line-height:1;margin-bottom:16px;opacity:.5}
.chan-empty h3{margin:0 0 10px;font-size:19px;font-weight:600}
.chan-empty p{margin:0 auto 8px;font-size:14px;color:var(--ink-2);max-width:44ch;line-height:1.6}
.ce-cols{font-size:12px!important;color:var(--ink-4)!important;margin-top:16px!important}

/* Les marques : un signe dessiné, pas un emoji approximatif. */
.bmk{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0}
.nrow .bmk{margin-right:1px}
.title-row h1 .bmk{margin-right:9px;vertical-align:-3px}
.title-row h1 .bmk svg{width:24px;height:24px}

/* Le rythme mensuel d'un canal : trois barres par mois. */
.mgrid{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:18px}
.mg{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;min-width:44px}
.mgb{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;position:relative}
.mgv{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;
  color:var(--ink-2);font-variant-numeric:tabular-nums}
.mgb i{display:block;width:11px;border-radius:3px 3px 0 0;min-height:2px}
.mgb i.rdv{background:#579bfc} .mgb i.hon{background:#0073ea} .mgb i.sig{background:#00c875}
.mgl{font-size:11px;color:var(--ink-2)}
.mgs{font-size:10.5px;color:var(--mdy-green-dark);font-weight:600;height:13px}
.mleg{display:flex;gap:16px;font-size:12px;color:var(--ink-3);margin-top:12px}
.mleg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.cliw{overflow-x:auto}

/* La bande large de six indicateurs, en tête d'un canal. */
.chan-kpi.big{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:14px}
.chan-kpi.big .ckv{font-size:25px}
/* Trois blocs côte à côte : pipeline, pertes, secteurs. */
.chan-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:18px}
.chan-cols .chan-block{margin-bottom:0}
.chan-cols .hb{grid-template-columns:110px minmax(0,1fr) 88px;gap:9px}
.chan-cols .hb-l{font-size:12px}
/* La part signée, superposée à la barre du secteur. */
.hb-t{position:relative}
.hb-w{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--mdy-green)}

/* ══ Barre d'actions sur sélection ════════════════════════════════ */
.selbar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:4px;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;box-shadow:0 12px 34px -8px rgba(28,27,26,.28)}
.sb-n{background:var(--mdy-blue);color:#fff;font-weight:700;font-size:12.5px;border-radius:7px;
  min-width:26px;height:26px;display:grid;place-items:center;padding:0 7px}
.sb-t{font-size:13.5px;color:var(--ink);font-weight:500;margin:0 8px 0 4px;white-space:nowrap}
.sb-sep{width:1px;height:26px;background:var(--line);margin-right:4px}
.selbar button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;
  cursor:pointer;padding:6px 11px;border-radius:7px;color:var(--ink-2);font-family:var(--f)}
.selbar button b{font-size:11px;font-weight:500}
.selbar button:hover{background:var(--sunken);color:var(--ink)}
.selbar button.danger:hover{background:#fdf3f4;color:var(--mdy-red-dark)}
.selbar .sb-x{padding:6px 9px;font-size:15px;color:var(--ink-3)}
.btn.danger-btn{background:var(--mdy-red);border-color:var(--mdy-red);color:#fff;font-weight:600}
.btn.danger-btn:hover{background:var(--mdy-red-dark);border-color:var(--mdy-red-dark)}

/* ══ Sélecteur de période ═════════════════════════════════════════ */
.perbar{display:flex;align-items:center;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.perl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-right:6px}
.perb{border:1px solid var(--line);background:var(--paper);border-radius:20px;padding:5px 13px;
  font-size:12.5px;font-family:var(--f);color:var(--ink-2);cursor:pointer}
.perb:hover{background:var(--sunken);color:var(--ink)}
.perb.on{background:var(--mdy-blue);border-color:var(--mdy-blue);color:#fff;font-weight:600}
.perinfo{font-size:12px;color:var(--ink-3)}

/* ══ Sections dépliables de la barre latérale ═════════════════════ */
.nav-label{cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none}
.nav-label .nlc{font-size:9px;color:var(--ink-4);transition:transform .15s}
.nav-label.closed .nlc{transform:rotate(-90deg)}

/* En table-layout:auto, un nom long force sa colonne à s'élargir sans
   limite et pousse toutes les autres hors de l'écran. En fixed, les
   largeurs déclarées font foi — c'est ce que fait Monday. */
.mb{table-layout:fixed}
.mb td.first .cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La largeur totale de la table est posée par le script : on n'utilise
   plus max-content, qui laissait les noms longs gonfler leur colonne. */
.mb{width:auto}

/* ══ Glisser-déposer des lignes ═══════════════════════════════════ */
.mb tbody tr[draggable="true"] td.first{cursor:grab}
.mb tbody tr.rdrag{opacity:.4}
.mb tbody tr.rover td{box-shadow:inset 0 -2px 0 var(--mdy-blue)}
.mb tbody tr.rover.rbefore td{box-shadow:inset 0 2px 0 var(--mdy-blue)}

/* ══ Les conseils, tirés des chiffres du canal ════════════════════ */
.chan-block.reco{border-color:var(--line)}
.recos{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}
.reco-i{border:1px solid var(--line);border-radius:9px;padding:15px 16px;border-left-width:3px}
.reco-i.couper{border-left-color:var(--mdy-red)}
.reco-i.pousser{border-left-color:var(--mdy-green)}
.reco-i.corriger{border-left-color:var(--mdy-orange)}
.rk-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.reco-i.couper .rk-tag{color:var(--mdy-red-dark)}
.reco-i.pousser .rk-tag{color:var(--mdy-green-dark)}
.reco-i.corriger .rk-tag{color:#a35b0a}
.rk-t{font-size:14.5px;font-weight:600;margin:6px 0 5px;letter-spacing:-.01em}
.reco-i p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.55}

/* ── La fenêtre choisie à la main, à côté des fenêtres rapides ──────── */
.perdates{display:inline-flex;align-items:center;gap:5px;margin-left:8px;
  padding:2px 6px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.perdates.on{border-color:var(--mdy-blue);box-shadow:0 0 0 2px rgba(0,115,234,.12)}
.perdates input[type=date]{border:0;background:transparent;font-family:var(--f);font-size:11.5px;
  color:var(--ink);padding:2px 0;width:104px;cursor:pointer}
.perdates input[type=date]:focus{outline:0}
.perdash{color:var(--ink-3);font-size:11px}
.perclr{border:0;background:transparent;color:var(--ink-3);cursor:pointer;
  font-size:11px;line-height:1;padding:2px 3px;border-radius:4px}
.perclr:hover{background:var(--sunken);color:var(--brand)}

/* Une bande pleine largeur, sans cadre : la barre de période des dashboards. */
.w.w-flat{background:transparent;border:0;box-shadow:none;padding:0;min-height:0}
.w.w-flat .perbar{margin-bottom:0}
@media(max-width:900px){.w.w-flat{grid-column:span 6}}

/* ── FUNNEL — le parcours d'un canal, étape par étape ──────────────── */
.fnlview{padding:2px 0}
.fnl-card{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fnl-head{padding:18px 20px 14px;border-bottom:1px solid var(--line-3)}
.fnl-head h2{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--ink)}
.fnl-head p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2);max-width:74ch}
.fnl-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:7px}
.fnl-row{display:grid;grid-template-columns:186px 1fr 132px;align-items:center;gap:14px}
.fnl-lab{display:flex;flex-direction:column;gap:1px;min-width:0}
.fnl-nom{font-size:12.5px;font-weight:600;color:var(--ink)}
.fnl-note{font-size:11px;color:var(--ink-3)}
.fnl-row.off .fnl-nom{color:var(--ink-3);font-weight:500}
.fnl-bar{height:30px;display:flex;align-items:center}
.fnl-fill{height:30px;border-radius:5px;display:flex;align-items:center;justify-content:flex-end;
  padding-right:10px;box-sizing:border-box;transition:width .25s ease}
.fnl-n{font-size:12.5px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.fnl-row.off .fnl-n{color:var(--ink-4)}
.fnl-row.warn .fnl-fill{outline:2px solid var(--warn);outline-offset:1px}
.fnl-side{display:flex;align-items:center;gap:8px;font-size:11.5px;justify-content:flex-end}
.fnl-src{color:var(--ink-3);text-align:right;line-height:1.3}
.fnl-taux{font-weight:600;font-variant-numeric:tabular-nums}
.fnl-taux.good{color:var(--ok)} .fnl-taux.mid{color:var(--warn)} .fnl-taux.bad{color:var(--brand)}
.fnl-lien{color:var(--mdy-blue);text-decoration:none;white-space:nowrap}
.fnl-lien:hover{text-decoration:underline}
.fnl-foot{padding:13px 20px;background:var(--sunken);border-top:1px solid var(--line-3);
  font-size:12px;color:var(--ink-2);line-height:1.55}
@media(max-width:820px){.fnl-row{grid-template-columns:120px 1fr 92px;gap:9px}}

.fnlview{max-width:1180px}

/* ── LEADS À RAPPELER — les opt-in iClosed sans rendez-vous ───────── */
.optview{max-width:1180px}
.opt-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.ok-t{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:13px 15px;
  display:flex;flex-direction:column;gap:2px}
.ok-t.big{border-color:var(--brand-line);background:var(--brand-tint)}
.ok-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:600}
.ok-t b{font-size:26px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.ok-t.big b{color:var(--brand)}
.ok-s{font-size:11.5px;color:var(--ink-3)}
.opt-card{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.opt-head{padding:15px 18px 12px;border-bottom:1px solid var(--line-3)}
.opt-head h2{margin:0 0 3px;font-size:14px;font-weight:600}
.opt-head span{font-size:12px;color:var(--ink-2)}
.opt-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.opt-tbl th{text-align:left;font-weight:600;color:var(--ink-3);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.05em;padding:9px 14px;border-bottom:1px solid var(--line-3)}
.opt-tbl td{padding:9px 14px;border-bottom:1px solid var(--line-3);vertical-align:middle}
.opt-tbl tr:last-child td{border-bottom:0}
.opt-tbl tr:hover td{background:var(--sunken)}
.opt-tbl .on{font-weight:600;color:var(--ink)}
.opt-tbl .ot a{color:var(--mdy-blue);text-decoration:none;font-variant-numeric:tabular-nums}
.opt-tbl .ot a:hover{text-decoration:underline}
.opt-tbl .oe,.opt-tbl .od{color:var(--ink-2)}
.opt-tbl .oa{color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
.opt-tbl tr.chaud .oa{color:var(--ok);font-weight:600}
.opt-tbl tr.froid .oa{color:var(--ink-4)}
.opill{display:inline-block;padding:2px 8px;border-radius:11px;background:var(--sunken);
  border:1px solid var(--line);font-size:11px;color:var(--ink-2)}

/* ── CRÉAS — quelle vidéo amène des rendez-vous ───────────────────── */
.crlist{display:flex;flex-direction:column;gap:12px}
.cr{border:1px solid var(--line);border-radius:7px;padding:11px 13px;background:var(--paper)}
.crh{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.crn{font-size:12.5px;font-weight:600;color:var(--ink)}
.crc{font-size:11px;color:var(--ink-3);padding:1px 7px;border-radius:10px;background:var(--sunken)}
.crv{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 8px;border-radius:10px}
.crv.garder{background:var(--ok-t);color:var(--ok)}
.crv.revoir{background:var(--warn-t);color:var(--warn)}
.crv.couper{background:var(--brand-tint);color:var(--brand)}
.crbar{position:relative;height:22px;background:var(--sunken);border-radius:4px;overflow:hidden}
.crf{height:100%;background:var(--mdy-blue);border-radius:4px}
.crn2{position:absolute;left:9px;top:0;line-height:22px;font-size:11.5px;font-weight:600;color:#fff;
  text-shadow:0 0 3px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.crm{display:flex;align-items:center;gap:13px;margin-top:6px;font-size:11.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.crm .ok{color:var(--ok);font-weight:600}
.crd{color:var(--ink-4);font-size:11px}
.crw{margin-top:5px;font-size:11.5px;color:var(--ink-3);font-style:italic}
.crfoot{margin-top:12px;padding:11px 13px;background:var(--sunken);border-radius:7px;
  font-size:11.5px;color:var(--ink-2);line-height:1.55}
.tabn{display:inline-block;min-width:16px;padding:0 5px;margin-left:5px;border-radius:9px;
  background:var(--brand);color:#fff;font-size:10.5px;font-weight:600;line-height:16px;text-align:center}
@media(max-width:900px){.opt-kpis{grid-template-columns:repeat(2,1fr)}}

/* ── FLUIDITÉ — on ne vide jamais l'écran pendant qu'on charge ────── */
/* Un fil de 2 px en haut, la seule chose qui bouge pendant une attente. */
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--mdy-blue),var(--brand));
  opacity:0;transition:width .35s ease,opacity .2s ease;pointer-events:none}
.prog.on{width:82%;opacity:1;transition:width 2.4s cubic-bezier(.1,.7,.3,1),opacity .12s}
/* L'écran sortant s'estompe à peine : on sent le changement sans le subir. */
#view{transition:opacity .12s ease}
#view.attente{opacity:.72}
@media(prefers-reduced-motion:reduce){
  .prog,#view{transition:none}
}

/* ── Ce qui n'est pas mesuré tient sur une ligne, pas sur cinq tuiles ── */
.chan-vide{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:-4px 0 16px;padding:9px 14px;border:1px dashed var(--line);
  border-radius:8px;background:var(--sunken)}
.cvl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}
.cvi{font-size:11.5px;color:var(--ink-2);padding:2px 9px;border-radius:11px;
  background:var(--paper);border:1px solid var(--line)}
.cvs{font-size:11.5px;color:var(--ink-3);font-style:italic}

/* ── La barre d'outils ne doit jamais tronquer un mot ─────────────── */
.tool,.tbtn{white-space:nowrap}

/* ── Le focus se voit : on navigue aussi au clavier ───────────────── */
:where(button,a,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--mdy-blue);outline-offset:2px;border-radius:4px}

.perb.perdatb{font-size:12px;padding:5px 11px}
.perb.perdatb.on{background:var(--paper);border-color:var(--mdy-blue);color:var(--mdy-blue);font-weight:600}
.perdates[hidden]{display:none!important}
.crv.surveiller{background:var(--sunken);color:var(--ink-2);border:1px solid var(--line)}

/* ── L'en-tête reste visible ──────────────────────────────────────── */
/* Il était devenu « static » pour laisser passer le gel horizontal des
   deux premières colonnes. Les deux tiennent ensemble : sticky accepte
   top et left en même temps, il suffit d'ordonner les plans. */
.mb th{position:sticky;top:0;z-index:3;background:var(--paper);
  box-shadow:inset 0 -1px 0 var(--line)}
.mb th.chk{position:sticky;top:0!important;left:0;z-index:6}
.mb th.rno{position:sticky;top:0!important;left:38px;z-index:6}
.mb th.first{position:sticky;top:0!important;bottom:auto!important;left:72px;z-index:6}

/* ── La gouttière des numéros de ligne ────────────────────────────── */
.mb th.rno,.mb td.rno{width:34px!important;min-width:34px!important;max-width:34px!important;
  text-align:right;padding:0 8px 0 0}
.mb td.rno{position:sticky;left:38px;z-index:2;background:var(--paper);
  color:var(--ink-4);font-size:11px;font-variant-numeric:tabular-nums}
.mb td.rno .cell{padding:0;justify-content:flex-end;color:var(--ink-4)}
.mb tr:hover td.rno{color:var(--ink-2)}
.mb td.first{left:72px}

/* La zone de défilement a 8 px de marge haute : sans compensation, les
   lignes défilent dans cette bande, au-dessus de l'en-tête figé. Et le titre
   du groupe se fige au-dessus de l'en-tête de colonnes, pas par-dessus :
   les deux se lisent en même temps, comme sur Monday. */
:root{--gh:27px}
.grp-head{position:sticky;top:-8px;z-index:7;min-height:var(--gh)}
.mb th,.mb th.chk,.mb th.rno,.mb th.first{top:calc(var(--gh) - 8px)!important}

/* La barre du haut portait un z-index sans être positionnée : il ne servait
   à rien, et les cellules de statut figées débordaient d'un pixel dessus. */
.topbar{position:relative;z-index:22;isolation:isolate}

/* ── Chaque onglet dit qui y a accès, et s'il est fermé ───────────── */
/* La photo est ronde et le reste : object-fit évite l'écrasement des
   portraits qui ne sont pas carrés à la source. */
.face{border-radius:50%;overflow:hidden;object-fit:cover;flex:0 0 auto}
img.face{object-fit:cover;object-position:center}
.btab2 .faces{display:inline-flex;align-items:center;margin-left:2px}
.btab2 .face{width:19px;height:19px;font-size:8.5px;
  box-shadow:0 0 0 1.5px var(--paper)}
.btab2.on .face{box-shadow:0 0 0 1.5px var(--paper),0 0 0 2.5px rgba(0,115,234,.18)}
.tlock{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:5px;
  color:var(--ink-4);cursor:pointer;transition:background .12s,color .12s}
.tlock:hover{background:var(--sunken);color:var(--mdy-blue)}
.btab2 .tlock svg{display:block}

/* ── Des tableaux qui se lisent d'un coup d'œil ───────────────────── */

/* Une étape vide occupe la même place qu'une étape remplie. */
.slab.vide{background:repeating-linear-gradient(135deg,var(--sunken),var(--sunken) 5px,
  var(--paper) 5px,var(--paper) 10px);border:1px solid var(--line);box-sizing:border-box}
.slab.vide b{color:transparent}

/* Une pastille de choix prend la couleur de sa valeur, toujours la même. */
.dchip{display:inline-flex;align-items:center;max-width:100%;padding:2px 9px;border-radius:11px;
  font-size:11.5px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--c,#0073ea);background:color-mix(in srgb,var(--c,#0073ea) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--c,#0073ea) 26%,transparent)}

/* Un rattachement est un objet : il se voit comme une puce, pas comme du texte. */
.rchip{display:inline-flex;align-items:center;max-width:100%;padding:2px 8px;border-radius:5px;
  font-size:11.5px;background:var(--sunken);border:1px solid var(--line);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Un nombre porte sa propre échelle : la barre reste derrière le chiffre. */
.nbar{position:relative;display:flex;align-items:center;justify-content:flex-end;
  width:100%;height:20px;border-radius:3px;overflow:hidden}
.nbar i{position:absolute;left:0;top:0;bottom:0;background:rgba(0,115,234,.13);border-radius:3px}
.nbar b{position:relative;font-weight:500;font-variant-numeric:tabular-nums;padding-right:2px}

/* Une date dit son âge par sa couleur : frais, tiède, vieux. */
.dcell.frais{color:var(--ok);font-weight:600}
.dcell.tiede{color:var(--ink-3)}
.dcell.vieux{color:var(--ink-4)}
.dcell.futur{color:var(--mdy-blue);font-weight:600}
.coche{color:var(--ok);font-weight:700}

.nbar i{background:rgba(0,115,234,.18)}
.mb td.stat .slab{font-size:11.5px}

/* ── Ce qu'il y a à faire : compté, pas conseillé ─────────────────── */
.afaire .w-body{display:flex;flex-direction:column;gap:16px}
.afg{display:flex;flex-direction:column;gap:7px}
.afgt{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:8px}
.afgt::after{content:'';flex:1;height:1px;background:var(--line-3)}
.afgt.u1{color:var(--brand)}
.afgt.u2{color:var(--warn)}
.afl{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:8px}
.afi{display:flex;gap:13px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);border-left-width:3px}
.afi.u1{border-left-color:var(--brand)}
.afi.u2{border-left-color:var(--warn)}
.afi.u3{border-left-color:var(--ink-4)}
.afn{font-family:var(--d);font-size:23px;font-weight:700;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.afi.u1 .afn{color:var(--brand)}
.aft{display:flex;flex-direction:column;gap:3px;min-width:0}
.aft b{font-size:13px;font-weight:600;color:var(--ink)}
.aft span{font-size:12px;color:var(--ink-2);line-height:1.5}
.aft em{font-size:11.5px;color:var(--ink-3);font-style:normal;line-height:1.5}
.afdorm{border-top:1px solid var(--line-3);padding-top:14px}
.afdt{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px}
.aftb{width:100%;border-collapse:collapse;font-size:12.5px}
.aftb td{padding:6px 10px 6px 0;border-bottom:1px solid var(--line-3)}
.aftb tr:last-child td{border-bottom:0}
.aftb .e{font-weight:600;color:var(--ink)}
.aftb .s{color:var(--ink-2)}
.aftb .m{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.aftb .j{text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.aftb .j.bad{color:var(--brand);font-weight:600}

/* ── Un trait, pas deux titres de section ─────────────────────────── */
.navsep{height:1px;background:var(--line);margin:9px 12px 8px}
.nrow.dashrow .gl{color:var(--brand)}
.nrow.dashrow.sel .gl{color:var(--brand)}

/* ── Redimensionner une colonne à la souris ───────────────────────── */
/* La poignée reste DANS l'en-tête : celui-ci est en overflow:hidden pour
   ellipser son titre, tout ce qui dépasse serait coupé. */
.colgrip{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;
  z-index:9;touch-action:none}
.colgrip::after{content:'';position:absolute;top:20%;bottom:20%;right:2px;width:2px;
  background:transparent;border-radius:1px;transition:background .12s}
.mb th:hover .colgrip::after{background:var(--line)}
.colgrip:hover::after,body.resizing .colgrip::after{background:var(--mdy-blue)}
body.resizing{cursor:col-resize;user-select:none}
body.resizing *{cursor:col-resize!important}

/* ═══ LES SURFACES ═════════════════════════════════════════════════
   Le blanc reste la base — c'est là qu'on lit et qu'on saisit — mais
   tout ne peut pas être blanc, sinon plus rien ne se détache. Trois
   plans : le fond de page (le plus sourd), la carte (blanche, c'est
   elle qu'on regarde), et l'en-tête de carte (à peine teinté, pour
   dire où commence quoi). */
:root{
  --ground:#eef0f5;          /* le fond de l'application */
  --paper:#ffffff;           /* la surface de travail */
  --sunken:#f4f5f9;          /* les creux : pistes, pastilles, pieds de carte */
  --line:#e2e6ef; --line-2:#e6e9f0; --line-3:#eef0f5;
}
body{background:var(--ground)}
#main{background:var(--ground)}

/* La carte se pose sur le fond : une ombre courte suffit, pas de bordure lourde. */
.w{background:var(--paper);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,26,50,.045)}
.w-head{background:linear-gradient(var(--sunken),var(--paper));
  border-bottom:1px solid var(--line-3)}
.w.w-flat{background:transparent;border:0;box-shadow:none}

/* La barre du haut d'un tableau se distingue de la grille. */
.topbar{background:var(--paper)}
.bhead{background:var(--paper);border-bottom:1px solid var(--line)}

/* La grille garde son blanc : c'est la zone de lecture. Seuls l'en-tête
   de colonnes et le titre de groupe prennent le creux. */
.mb td,.mb td.rno,.mb td.chk{background:var(--paper)}
.mb th{background:var(--sunken);box-shadow:inset 0 -1px 0 var(--line)}
.grp-head{background:var(--paper)}
.mb tr:hover td{background:#f8f9fc}

/* La barre latérale est plus sourde que la zone de travail. */
#nav{background:#fbfbfd;border-right:1px solid var(--line)}

/* ── Les chiffres clés : dix mesures, chacune comparée à la veille ── */
.clg{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.clt{background:var(--paper);padding:13px 15px 12px;display:flex;flex-direction:column;gap:2px;
  transition:background .12s}
.clt:hover{background:#fbfcff}
.clk{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.clv{font-family:var(--d);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);font-variant-numeric:tabular-nums}
.cln{font-size:11.5px;color:var(--ink-3);display:flex;align-items:baseline;gap:6px;
  flex-wrap:wrap;line-height:1.4}
.cln b{font-weight:600;font-variant-numeric:tabular-nums}
.cln b.up{color:var(--ok)} .cln b.down{color:var(--brand)}
.clw{margin-top:12px;padding:11px 14px;border-radius:8px;background:var(--warn-t);
  border:1px solid color-mix(in srgb,var(--warn) 22%,transparent);
  font-size:12px;color:var(--ink-2);line-height:1.55}
.clw b{color:var(--warn)}

@media(max-width:1180px){.clg{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.clg{grid-template-columns:repeat(2,1fr)}}

/* La vue personnelle d'un commercial : il doit savoir qu'il ne voit pas tout. */
.tag.vuemoi{background:var(--brand-tint);color:var(--brand);
  border:1px solid var(--brand-line);font-weight:600}

/* ── Relier une fiche à un autre tableau ──────────────────────────── */
.relpicks{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px;min-height:24px}
.relpicks .rchip{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 9px}
.relpicks .rchip button{border:0;background:transparent;color:var(--ink-3);cursor:pointer;
  font-size:11px;line-height:1;padding:2px}
.relpicks .rchip button:hover{color:var(--brand)}
.relbox{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:7px}
.relrow{display:flex;align-items:center;gap:9px;padding:8px 11px;cursor:pointer;
  border-bottom:1px solid var(--line-3)}
.relrow:last-child{border-bottom:0}
.relrow:hover{background:var(--sunken)}
.relrow.on{background:var(--brand-tint)}
.reln{font-size:13px;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.relb{font-size:11px;color:var(--ink-3)}
.relvide{padding:16px;text-align:center;color:var(--ink-3);font-size:12.5px}

/* Le filet bleu des colonnes liées ne se dessine que s'il y a un lien :
   sur une cellule vide, il annonçait un rattachement qui n'existe pas. */
.mb td[data-type="board_relation"] .cell::before,
.mb td[data-type="dependency"] .cell::before{content:none}
.mb td[data-type="board_relation"] .cell:has(.rchip)::before,
.mb td[data-type="dependency"] .cell:has(.rchip)::before{
  content:"";position:absolute;left:6px;top:5px;bottom:5px;width:3px;
  border-radius:2px;background:var(--mdy-chart)}
.mb td[data-type="board_relation"] .cell,
.mb td[data-type="dependency"] .cell{padding-left:6px}
.mb td[data-type="board_relation"] .cell:has(.rchip),
.mb td[data-type="dependency"] .cell:has(.rchip){padding-left:14px}
.ws-badge{font-size:12px;line-height:1;display:grid;place-items:center}
.wstile{font-size:22px;display:grid;place-items:center}





/* ═══ WIN & REVENUS ════════════════════════════════════════════════
   La grille de Monday, au trait près : une cellule d'état est un
   rectangle plein qui va d'un bord à l'autre de la case, pas une
   pastille posée au milieu. Lignes de 36 px, filets très clairs,
   et le nom du mois en couleur au-dessus de son groupe. */
.anb{display:inline-flex;gap:4px;margin-left:auto}
.anwrap{grid-column:span 12;display:flex;flex-direction:column;gap:26px}

.mgh{display:flex;align-items:baseline;gap:12px;padding:0 0 7px 2px}
.mgt{font-size:15px;font-weight:600;color:var(--g);letter-spacing:-.01em}
.mgn{font-size:12px;color:var(--ink-3)}
.mgs{font-size:12.5px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}

.mtb{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;
  table-layout:fixed;background:var(--paper);
  border:1px solid var(--line);border-radius:7px;overflow:hidden}
.mtb th{text-align:center;font-size:12px;font-weight:400;color:var(--ink-2);
  padding:0 10px;height:34px;background:var(--paper);
  border-bottom:1px solid var(--line);border-right:1px solid var(--line-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtb th.c1,.mtb th.c2{text-align:left;padding-left:16px}
.mtb th:last-child{border-right:0}
.mtb td{height:36px;padding:0 10px;border-bottom:1px solid var(--line-3);
  border-right:1px solid var(--line-3);vertical-align:middle;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.mtb td:last-child{border-right:0}
.mtb tbody tr:last-child td{border-bottom:0}
.mtb td.c1{text-align:left;position:relative;padding-left:16px;font-weight:400}
.mtb td.c2{text-align:left;color:var(--ink-2)}
.mtb td.c3{text-align:right;font-variant-numeric:tabular-nums;padding-right:12px}
.mtb td.c10{color:var(--ink-2);font-size:12px}
.mtb .hm{font-size:11px;color:var(--ink-3);margin-left:5px}
/* Le filet de couleur du groupe, collé au bord gauche de la ligne. */
.mtb td.c1 .bar{position:absolute;left:0;top:0;bottom:0;width:6px}
.mtb tbody tr:hover td:not(.p){background:#f8f9fc}
.mtb tr.sc td.c1{color:var(--brand)}

/* La case d'état : pleine, centrée, sans arrondi ni marge. */
.mtb td.p{padding:0}
.mcell{display:flex;align-items:center;justify-content:center;height:36px;
  color:#fff;font-size:12.5px;padding:0 8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcell.nul{background:#e6e9ef;color:#a8adbd}

.mtb .c1{width:21%} .mtb .c2{width:13%} .mtb .c3{width:12%}
.mtb .c4{width:8%}  .mtb .c5{width:6%}  .mtb .c6{width:12%}
.mtb .c7{width:10%} .mtb .c8{width:8%}  .mtb .c9{width:9%} .mtb .c10{width:8%}
@media(max-width:1200px){.mtb{table-layout:auto}}

/* Les deux faces de l'acquisition : ce que ça rapporte, d'où ça vient. */
.tabsrow.sub{margin-top:2px;padding-top:2px;border-top:1px solid var(--line-3)}
.tabsrow.sub .btab{font-size:12.5px;color:var(--ink-3)}

/* ═══ LISIBILITÉ ═══════════════════════════════════════════════════
   Le gris des textes secondaires descendait à 60 % de contraste : on
   lisait mal sans savoir pourquoi. Toute l'échelle d'encre remonte,
   et le fond se creuse pour que le blanc des cartes redevienne une
   surface, pas la couleur par défaut de la page. */
:root{
  --ink:#171a24;            /* le texte qu'on lit vraiment */
  --ink-2:#454b5e;          /* les compléments : lisibles, pas décoratifs */
  --ink-3:#666d82;          /* les étiquettes */
  --ink-4:#949bad;          /* ce qui est absent */
  --ground:#e7eaf1;
  --paper:#ffffff;
  --sunken:#f1f3f8;
  --line:#d9dee8; --line-2:#e2e6ee; --line-3:#e9ecf3;
  --brand:#b8232c; --brand-deep:#8e1a21; --brand-tint:#fdf2f2; --brand-line:#f3d6d7;
}
body{color:var(--ink)}

/* Les titres de section portent le poids : on doit voir où commence quoi. */
.w-head h2{font-size:14.5px;font-weight:650;letter-spacing:-.008em;color:var(--ink)}
.w-sub{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.clk,.ckk,.afgt,.afdt,.cvl{color:var(--ink-3)}
.cln,.ckn,.ok-s{color:var(--ink-2)}
.note,.w-foot{color:var(--ink-2);line-height:1.6}

/* Les tableaux : un peu plus d'air vertical, des filets plus francs. */
.mb td,.mb th{border-color:var(--line-3)}
.mb th{color:var(--ink-2);font-weight:600}
.antb2 td,.mtb td{color:var(--ink)}
.mtb th{color:var(--ink-2);font-weight:500}

/* Le chiffre est l'objet principal d'un tableau de bord : il doit peser. */
.clv,.ckv,.afn,.num .val{letter-spacing:-.022em}

/* L'année, en grand à côté du titre, et des onglets qui se voient. */
.ybig{font-family:var(--d);font-size:24px;font-weight:700;color:var(--brand);
  letter-spacing:-.02em;margin-left:4px;line-height:1}
.anb{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:var(--paper)}
.yb{border:0;background:var(--paper);padding:6px 16px;font-family:var(--f);
  font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer;
  border-right:1px solid var(--line);font-variant-numeric:tabular-nums}
.yb:last-child{border-right:0}
.yb:hover{background:var(--sunken);color:var(--ink)}
.yb.on{background:var(--brand);color:#fff}

/* Sur un écran de lecture — visuel, funnel, leads — les outils de grille
   ne servent à rien : on ne trie pas un graphique. Seul « Ajouter » reste. */
.toolbar.mtool.vide .tbtn,
.toolbar.mtool.vide #bqwrap{display:none}

/* Le total du mois, lisible d'un coup d'œil, avec ce qu'il veut dire. */
.mgh{align-items:flex-end;gap:14px;padding-bottom:9px}
.mtot{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.mtot b{font-family:var(--d);font-size:15px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.mtot i{font-style:normal;font-size:10.5px;color:var(--ink-3);margin-top:1px}
.mtot.m-rec b{color:var(--ok)}
.mtot.m-cum b{color:var(--brand)}
.mtot.m-cum{padding-left:14px;border-left:1px solid var(--line)}

/* Un dossier se saisit comme un tableau. */
.nfold > .nrow[draggable="true"]{cursor:grab}
.nfold > .nrow.dragging{opacity:.45}

/* ══════════════════════════════════════════════════════════════════
   CALQUE FINAL — LE SYSTÈME
   ------------------------------------------------------------------
   Six systèmes de design se superposaient dans ce fichier : la palette
   Monday, un calque Esekai chaud, un calque densité, un calque « tout
   en clair », un calque widgets et une maquette. Chacun redéfinissait
   les mêmes jetons. C'est pour ça que rien ne se ressemblait.

   Celui-ci est le dernier et fait autorité. Une seule échelle d'encre,
   un seul fond, un seul accent — le rouge Esekai, réservé à l'identité
   et à l'état courant. Les couleurs de données (bleu, vert, ambre)
   restent séparées : elles encodent un sens, elles ne décorent pas.

   Deux caractères : Instrument Sans pour ce qui se regarde (titres,
   chiffres), IBM Plex Sans pour ce qui se lit (texte, cellules). Plex
   tient à 12 px là où une grotesque géométrique se brouille.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* encre — quatre niveaux, tous lisibles sur blanc */
  --ink:#14161f; --ink-2:#454b5c; --ink-3:#6a7183; --ink-4:#9aa1b2;
  /* surfaces — le fond se creuse pour que le blanc redevienne un objet */
  --ground:#eaedf4; --paper:#ffffff; --sunken:#f3f5fa;
  --line:#dbe0ea; --line-2:#e5e9f1; --line-3:#eef1f6; --line-strong:#c7cedd;
  /* accent — l'identité, et rien d'autre */
  --brand:#c0202b; --brand-deep:#96181f; --brand-tint:#fdf1f2; --brand-line:#f3d4d6;
  --e-red:#c0202b; --e-red-deep:#96181f; --e-red-t:#fdf1f2; --e-red-l:#f3d4d6;
  /* données — un sens par teinte */
  --data-blue:#2f6fd0; --data-green:#16875a; --data-amber:#b0730d;
  --data-purple:#6a4bab; --data-red:#c0202b; --data-teal:#12796f;
  --mdy-blue:#2f6fd0; --mdy-blue-hover:#255cb0; --mdy-chart:#5b93de;
  --mdy-green:#16875a; --mdy-green-dark:#0f6644; --mdy-red:#c0202b; --mdy-red-dark:#96181f;
  --mdy-purple:#6a4bab; --mdy-orange:#b0730d; --mdy-grey:#b6bccb;
  --c-blue:#5b93de; --c-green:#16875a; --c-green-d:#0f6644;
  --c-purple:#6a4bab; --c-orange:#b0730d; --c-red:#c0202b; --c-red-d:#96181f;
  --ok:#0f6644; --ok-t:#e8f5ef; --warn:#96610b; --warn-t:#fdf4e5;
  /* relief — deux niveaux, jamais plus */
  --lift:0 1px 2px rgba(16,20,38,.05);
  --lift-2:0 4px 16px rgba(16,20,38,.08);
  --d:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --f:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --r:9px;
}

body{font-family:var(--f);font-size:13px;line-height:1.5;color:var(--ink);
  background:var(--ground);-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1,"ss01" 1}

/* ── Typographie ──────────────────────────────────────────────────
   Une seule échelle. Les chiffres passent en Instrument Sans, chasse
   fixe, parce qu'on les compare en colonne. */
h1,h2,h3,.clv,.ckv,.afn,.num .val,.mtot b,.ybig,.angt,.mgt{
  font-family:var(--d);font-feature-settings:"ss01" 1}
.topbar h1,.title-row h1{font-size:21px;font-weight:700;letter-spacing:-.021em;color:var(--ink)}
.w-head h2{font-size:14px;font-weight:600;letter-spacing:-.011em;color:var(--ink)}
.w-sub{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.clv,.ckv,.num .val{font-weight:700;letter-spacing:-.026em}
.clk,.ckk,.afgt,.afdt,.cvl,.ok-l,.mtb th,.mb th{
  font-feature-settings:normal}
.n,.num .val,.cnt,.mb td.num .cell,td.n,.lv,.tv,.gn,.yv,
.clv,.ckv,.afn,.mtot b,.mt,.crn2{font-variant-numeric:tabular-nums}

/* ── Chrome : barre du haut, rail, barre latérale ────────────────
   Le chrome est calme et légèrement plus sourd que la zone de travail :
   il encadre, il ne se regarde pas. */
.gtop{background:var(--paper);border-bottom:1px solid var(--line);
  height:50px;flex:0 0 50px;padding:0 14px}
.app{height:calc(100vh - 50px)}
.gbrand b{font-size:14.5px;font-weight:650;letter-spacing:-.015em;font-family:var(--d)}
.gsearchbar{background:var(--sunken);border:1px solid transparent;border-radius:9px;height:34px}
.gsearchbar:focus-within{background:var(--paper);border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint)}
.rail{background:var(--paper);border-right:1px solid var(--line)}
#nav{background:#f7f8fc;border-right:1px solid var(--line)}
.navscroll{padding:2px 8px 14px}
.nrow{border-radius:7px;font-size:13px;color:var(--ink-2);height:31px;padding:0 8px;
  font-weight:450}
.nrow:hover{background:#eceff6;color:var(--ink)}
.nrow.sel{background:var(--brand-tint);color:var(--brand-deep);font-weight:600;
  box-shadow:inset 2px 0 0 var(--brand)}
.nrow.sel .gl,.nrow.dashrow.sel .gl{color:var(--brand)}
.nav-label{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--ink-4);
  text-transform:uppercase}
.navsep{background:var(--line);margin:10px 10px 9px}
.nfold > .nrow{font-weight:600;color:var(--ink);font-size:12.5px;
  letter-spacing:.005em;text-transform:none}
.navfoot{border-top:1px solid var(--line);background:#f7f8fc}

/* ── L'en-tête d'écran ────────────────────────────────────────────
   Le titre respire, la barre d'outils se tasse : c'est le titre qu'on
   lit, pas la rangée de boutons. */
.topbar{background:var(--paper);border-bottom:1px solid var(--line);
  padding:16px 22px 0}
.title-row{gap:10px;align-items:center;margin-bottom:11px}
.title-row h1 em{font-style:normal;margin-right:8px}
.toolbar{gap:6px;padding-bottom:11px;flex-wrap:wrap;align-items:center}
.tool{font-size:12px;color:var(--ink-2)}
.btn{border-radius:8px;font-size:12.5px;font-weight:500;height:32px;padding:0 14px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.btn:hover{background:var(--sunken)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.tbtn{border-radius:7px;font-size:12.5px;color:var(--ink-2);height:30px;padding:0 10px;
  background:transparent;border:1px solid transparent}
.tbtn:hover{background:var(--sunken);color:var(--ink)}
.tbtn.on{background:var(--brand-tint);color:var(--brand-deep);border-color:var(--brand-line)}
.tag{font-size:11px;padding:2px 9px;border-radius:20px;font-weight:500}
.tag.live{background:var(--ok-t);color:var(--ok)}
.tag.todo{background:var(--warn-t);color:var(--warn)}

/* ── Les cartes ───────────────────────────────────────────────────
   Une carte est un objet posé sur le fond : bord net, relief court,
   en-tête à peine creusé pour dire où elle commence. */
.board{padding:18px 22px 64px;gap:16px}
.w{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift);overflow:hidden}
.w-head{background:var(--paper);border-bottom:1px solid var(--line-3);
  padding:14px 18px 12px;gap:9px}
.w-head h2 em{font-style:normal;margin-right:7px}
.w-body{padding:15px 18px 17px}
.w-foot{background:var(--sunken);border-top:1px solid var(--line-3);
  padding:11px 18px;font-size:11.5px;color:var(--ink-2);line-height:1.6}
.w.w-flat{background:transparent;border:0;box-shadow:none;padding:0}

/* ── Les tuiles de chiffres ───────────────────────────────────────
   Étiquette petite et haute, chiffre grand, note dessous. Toujours
   dans cet ordre : on lit l'étiquette une fois, le chiffre à chaque
   passage. */
.clg{grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:8px}
.clt{padding:14px 16px 13px;gap:3px}
.clk{font-size:10px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;
  color:var(--ink-3)}
.clv{font-size:25px;line-height:1.15}
.cln{font-size:11.5px;color:var(--ink-2)}
.chan-kpi{gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:8px}
.ck{padding:15px 17px 14px}
.ckk{font-size:10px;font-weight:700;letter-spacing:.075em;color:var(--ink-3)}
.ckv{font-size:26px}
.ckn{font-size:11.5px;color:var(--ink-2)}

/* ── La grille de données ─────────────────────────────────────────
   Lignes courtes, filets très clairs, en-tête posé sur un creux.
   Rien ne clignote : ce sont les données qui doivent ressortir. */
.mb th{background:var(--sunken);color:var(--ink-2);font-size:11px;font-weight:600;
  letter-spacing:.02em;text-transform:none;box-shadow:inset 0 -1px 0 var(--line)}
.mb td{border-bottom:1px solid var(--line-3);border-right:1px solid var(--line-3);
  color:var(--ink)}
.mb tr:hover td{background:#f7f9fd}
.grp-head{font-family:var(--d);font-weight:650;letter-spacing:-.008em}
.slab{border-radius:0}
.tblscroll,.mb{border-radius:0}

/* ── Modales et menus ─────────────────────────────────────────────*/
.modal .mo-c,.pop,.menu{border-radius:11px;box-shadow:var(--lift-2);border:1px solid var(--line)}
.mp{color:var(--ink-2);font-size:12.5px;line-height:1.6}

/* ── Détails qui font la différence ───────────────────────────────*/
.dash{color:var(--ink-4)}
.empty,.mini{color:var(--ink-3);font-size:12.5px}
hr{border:0;border-top:1px solid var(--line-3)}
::selection{background:var(--brand-tint);color:var(--brand-deep)}

/* ── Discipline de la couleur ─────────────────────────────────────
   Le rouge est l'identité : logo, sélection, alerte. Une action que
   l'on répète cent fois par jour n'est pas une alerte — elle passe au
   bleu de données. Deux boutons rouges côte à côte se disputaient
   l'attention sans qu'aucun ne la mérite. */
.btn.primary{background:var(--data-blue);border-color:var(--data-blue);color:#fff}
.btn.primary:hover{background:#255cb0;border-color:#255cb0}
.split .btn.primary.caret{border-left-color:rgba(255,255,255,.28)}
.tbtn.on{background:#eaf1fc;color:var(--data-blue);border-color:#cfe0f7}

/* ── La cellule d'état remplit sa case ────────────────────────────
   Chez Monday une étape n'est pas une étiquette posée au milieu : la
   couleur va d'un bord à l'autre. C'est ce qui rend une colonne de
   statut lisible en diagonale. */
.mb td.stat,.mb td[data-type="status"],.mb td[data-type="color"]{padding:0}
.mb td.stat .cell,.mb td[data-type="status"] .cell,.mb td[data-type="color"] .cell{
  padding:0;height:100%;display:block}
.mb .slab{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:34px;background:var(--c);border-radius:0;
  padding:0 8px;box-sizing:border-box}
.mb .slab b{color:#fff;font-weight:500;font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb .slab.vide{background:#eef0f6;border:0;box-shadow:inset 0 0 0 1px var(--line-3)}
.mb .slab.vide b{color:transparent}

/* ── Le nombre et son échelle ─────────────────────────────────────
   La barre partait du bord gauche et laissait un moignon bleu à côté
   du chiffre. Elle devient un fond continu, très pâle, qui se lit
   comme une intensité et jamais comme un objet. */
.nbar{height:100%;min-height:34px;border-radius:0;justify-content:flex-end;
  padding:0 10px 0 0;box-sizing:border-box}
.nbar i{background:linear-gradient(90deg,rgba(47,111,208,.02),rgba(47,111,208,.16));
  border-radius:0}
.nbar b{color:var(--ink);font-weight:500}
.mb td[data-type="numbers"],.mb td.num{padding:0}
.mb td[data-type="numbers"] .cell,.mb td.num .cell{padding:0;height:100%;display:block}

/* ── Les puces de rattachement ────────────────────────────────────*/
.rchip{background:var(--sunken);border-color:var(--line-2);color:var(--ink-2);
  font-size:11.5px;border-radius:5px}
.dchip{border-radius:20px;font-size:11px;font-weight:500}
.pers{background:var(--data-blue);color:#fff;font-weight:600}

/* ── La marque de sélection ───────────────────────────────────────
   Une ombre interne épouse le rayon de la ligne : elle dessinait un
   crochet, pas un trait. On repasse à un filet droit, posé au bord. */
.nrow.sel{box-shadow:none}
.nrow{position:relative}
.nrow.sel::before{display:block;content:"";position:absolute;left:0;top:5px;bottom:5px;
  width:3px;border-radius:0 2px 2px 0;background:var(--brand)}
.nrow.sel{background:#fbf2f3}

/* ── Les cartes à un seul chiffre ─────────────────────────────────
   Elles flottaient : 40 px d'air au-dessus du nombre, autant dessous.
   On resserre — le sous-titre explique, le nombre répond, la note
   conclut, sans intervalle mort entre les trois. */
.num{gap:5px}
.num .val{font-size:32px;line-height:1.05;letter-spacing:-.03em}
.num.hero .val{font-size:34px}
.num .val .unit{font-size:.5em;font-weight:600;color:var(--ink-3);margin-left:2px}
.num .cmp{font-size:12px;color:var(--ink-2);line-height:1.45}
.num .cmp.warn{color:var(--warn)}
.num .cmp.up{color:var(--ok)}
.w .w-body > .w-sub:first-child{margin-bottom:9px}
.w .w-body{padding:14px 18px 15px}

/* Une mesure à zéro n'est pas une mesure absente : on la grise sans
   la faire disparaître, et la note dit pourquoi elle est à zéro. */
.num .val.muted{color:var(--ink-4)}

/* ── Les barres horizontales de classement ────────────────────────*/
.hb{gap:9px}
.hb-l{font-size:12px;color:var(--ink-2)}
.hb-t{background:var(--sunken);border-radius:3px;height:19px}
.hb-f{border-radius:3px;background:var(--data-blue)}
.hb-v{font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.hb.alert .hb-l{color:var(--brand)}

/* ── Les tableaux de lecture des tableaux de bord ─────────────────*/
.ptable,.statgrid,.aftb,.opt-tbl{font-size:12.5px}
.ptable th,.statgrid th{font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);padding:8px 12px;
  border-bottom:1px solid var(--line);background:var(--paper)}
.ptable td,.statgrid td{padding:9px 12px;border-bottom:1px solid var(--line-3);
  color:var(--ink-2)}
.ptable td:first-child,.statgrid td:first-child{color:var(--ink);font-weight:500}
.ptable tr:hover td{background:#f7f9fd}

/* Un <table> n'est pas un conteneur de débordement fiable : « overflow:
   hidden » + « border-radius » posés dessus faisaient échouer le rendu
   de tout l'écran. Le cadre passe sur une enveloppe, la table redevient
   une table. */
.mtw{border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:var(--paper);box-shadow:var(--lift)}
.mtb{border:0;border-radius:0;overflow:visible;box-shadow:none}
/* Six mesures : trois par rangée, deux rangées pleines. Une tuile seule
   au bout d'une rangée de cinq laissait un vide qui ressemblait à un bug. */
.clg.clg6{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.clg.clg6{grid-template-columns:repeat(2,1fr)}}

/* ══════════════════════════════════════════════════════════════════
   L'OUTIL N'EST PAS LA MARQUE
   ------------------------------------------------------------------
   Le rouge Esekai est la couleur de ce qu'on vend. Un outil qu'on
   regarde huit heures par jour n'a pas à la porter : elle finit par
   ne plus rien signaler. L'accent passe à un indigo profond — assez
   loin du bleu de Monday pour ne pas s'y confondre, assez sobre pour
   qu'un chiffre en rouge redevienne une alerte.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --brand:#4b45c6; --brand-deep:#3a35a4;
  --brand-tint:#eef0fd; --brand-line:#d7d9f7;
  --e-red:#4b45c6; --e-red-deep:#3a35a4; --e-red-t:#eef0fd; --e-red-l:#d7d9f7;
  /* Les couleurs de données restent des couleurs de données. */
  --data-blue:#2f6fd0; --data-green:#16875a; --data-amber:#b0730d;
  --data-purple:#6a4bab; --data-red:#c0202b; --data-teal:#0d7a72;
  --alerte:#c0202b; --alerte-t:#fdf1f2;
}
/* La sélection, les onglets actifs, l'année : indigo. */
.nrow.sel::before{background:var(--brand)}
.nrow.sel{background:var(--brand-tint);color:var(--brand-deep)}
.nrow.sel .gl,.nrow.dashrow .gl,.nrow.dashrow.sel .gl{color:var(--brand)}
.ybig{color:var(--brand)}
.yb.on{background:var(--brand);color:#fff}
.gsearchbar:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
::selection{background:var(--brand-tint);color:var(--brand-deep)}
.mtot.m-cum b{color:var(--brand)}
.clt .clv[style*="var(--brand)"]{color:var(--brand)!important}

/* Le rouge ne sert plus qu'à ce qui va mal. */
.afgt.u1,.afi.u1 .afn{color:var(--alerte)}
.afi.u1{border-left-color:var(--alerte)}
.mtb tr.sc td.c1,.antb2 tr.sanscontrat .w1 b{color:var(--alerte)}
.cln b.down,.hb.alert .hb-l{color:var(--alerte)}
.tag.alerte{background:var(--alerte-t);color:var(--alerte)}

/* ══════════════════════════════════════════════════════════════════
   GRAPHES — dessinés à la main, sans bibliothèque
   Une barre porte sa valeur au-dessus et son mois en dessous : on lit
   la série sans chercher une échelle sur le côté.
   ══════════════════════════════════════════════════════════════════ */
.gph{display:flex;flex-direction:column;gap:9px}
.gph-plot{display:flex;align-items:flex-end;height:var(--h,190px);gap:2px;
  padding-top:20px;box-sizing:content-box}
.gph-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;min-width:0;position:relative;padding:0 1px;box-sizing:border-box}
.gph-bar{width:100%;max-width:34px;border-radius:4px 4px 0 0;transition:height .35s cubic-bezier(.2,.8,.3,1);
  min-height:0}
.gph-col:hover .gph-bar{filter:brightness(1.12)}
.gph-v{position:absolute;top:-19px;font-size:11px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gph-v.top{color:var(--ink);font-weight:700}
.gph-x{position:absolute;bottom:-19px;font-size:10px;color:var(--ink-3);white-space:nowrap;
  transform:rotate(-38deg);transform-origin:top right;right:50%}
.gph{padding-bottom:26px}
.gph-col.duo{justify-content:flex-end}
.gph-pair{display:flex;align-items:flex-end;gap:2px;width:100%;height:100%;justify-content:center}
.gph-pair .gph-bar{max-width:15px}
.gph-leg{display:flex;gap:16px;font-size:11.5px;color:var(--ink-2);margin-top:22px}
.gph-leg span{display:inline-flex;align-items:center;gap:6px}
.gph-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.gph-t{font-size:11.5px;color:var(--ink-3)}

/* ── L'anneau : la part de chacun, avec sa légende chiffrée ───────── */
.anx{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.anl{flex:1;min-width:190px;display:flex;flex-direction:column;gap:5px}
.anli{display:flex;align-items:center;gap:8px;font-size:12px}
.anli i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.ank{flex:1;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anv{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.anp{color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:36px;text-align:right}

/* ── Le classement horizontal ─────────────────────────────────────── */
.rgs{display:flex;flex-direction:column;gap:7px}
.rg{display:grid;grid-template-columns:150px 1fr 74px;align-items:center;gap:11px}
.rgk{font-size:12px;color:var(--ink-2);text-align:right;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rgt{height:20px;background:var(--sunken);border-radius:4px;overflow:hidden;display:flex}
.rgt i{display:block;height:100%;border-radius:4px;transition:width .35s cubic-bezier(.2,.8,.3,1)}
.rgv{font-size:12.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:820px){.rg{grid-template-columns:110px 1fr 60px}}

/* Une case modifiable le dit au survol : le curseur change et la case
   se soulève d'un ton. On ne clique pas à l'aveugle sur de l'argent. */
.mtb td.mod{cursor:pointer;position:relative}
.mtb td.mod:hover .mcell{filter:brightness(1.06)}
.mtb td.mod:hover .mcell.nul{background:#dfe3ee;color:var(--ink-2)}
.mtb td.mod::after{content:"";position:absolute;right:4px;bottom:3px;width:0;height:0;
  border-left:5px solid transparent;border-bottom:5px solid rgba(0,0,0,.16);opacity:0;
  transition:opacity .12s}
.mtb td.mod:hover::after{opacity:1}

/* ══════════════════════════════════════════════════════════════════
   LES GRAPHES, VERSION SOIGNÉE
   Une barre est un objet : dégradé vertical léger, coin arrondi en
   haut seulement, et un liseré plus dense au pied pour qu'elle
   s'ancre au lieu de flotter. La moyenne passe en filet pointillé.
   ══════════════════════════════════════════════════════════════════ */
.gph-plot{position:relative}
.gph-bar{background:linear-gradient(180deg,
    color-mix(in srgb,var(--c,#4b45c6) 92%,#fff),
    var(--c,#4b45c6));
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.10);
  border-radius:5px 5px 2px 2px}
.gph-col:hover .gph-bar{filter:saturate(1.15) brightness(1.06);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),0 0 0 2px rgba(255,255,255,.9),
    0 2px 10px rgba(20,26,50,.18)}
.gph.duo .gph-bar{background:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.10)}
.gph-col{transition:none}
.gph-col::before{content:"";position:absolute;inset:-6px -1px -20px;border-radius:6px;
  background:transparent;transition:background .12s}
.gph-col:hover::before{background:rgba(75,69,198,.05)}

/* La ligne de moyenne : un repère, pas une donnée. */
.gph-moy{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--ink-4);
  pointer-events:none;z-index:1}
.gph-moy i{position:absolute;right:0;top:-15px;font-style:normal;font-size:10px;
  color:var(--ink-3);background:var(--paper);padding:0 5px;border-radius:3px}

.gph-v{color:var(--ink-3);font-weight:600}
.gph-v.top{color:var(--ink);font-weight:700}
.gph-leg{align-items:center}
.gph-leg b{color:var(--ink);font-variant-numeric:tabular-nums;margin-left:2px}
.gph-tx{margin-left:auto;font-size:11.5px;color:var(--ink-2);background:var(--sunken);
  padding:2px 9px;border-radius:11px;border:1px solid var(--line)}

/* ── L'infobulle : sombre, courte, toujours lisible ────────────────*/
.gbulle{position:fixed;z-index:9998;pointer-events:none;opacity:0;
  background:#171a24;color:#fff;font-size:11.5px;line-height:1.5;
  padding:7px 11px;border-radius:8px;max-width:280px;
  box-shadow:0 6px 24px rgba(16,20,38,.28);
  transition:opacity .1s ease;font-variant-numeric:tabular-nums}
.gbulle.on{opacity:1}
.gbulle b{color:#fff;font-weight:700}

/* ── L'anneau : un liseré blanc entre les parts ────────────────────*/
.anx svg circle{stroke-linecap:butt}
.anx{padding:4px 0}
.anli{padding:2px 0;border-radius:5px;transition:background .12s}
.anli:hover{background:var(--sunken)}

/* ── Le visage d'un commercial ────────────────────────────────────
   Une photo se reconnaît avant qu'on ait lu deux initiales. Sur trois
   cents lignes, c'est la différence entre parcourir et chercher. */
.visages{display:inline-flex;align-items:center}
.pers{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;
  font-size:10px;font-weight:700;background:var(--data-blue);color:#fff;
  flex:0 0 auto;overflow:hidden;letter-spacing:0}
img.pers.ph{object-fit:cover;object-position:center;background:var(--sunken);padding:0;
  box-shadow:inset 0 0 0 1px rgba(20,26,50,.10)}
.visages .pers + .pers{margin-left:-7px;box-shadow:0 0 0 2px var(--paper),
  inset 0 0 0 1px rgba(20,26,50,.10)}
.mb tr:hover .visages .pers + .pers{box-shadow:0 0 0 2px #f7f9fd,inset 0 0 0 1px rgba(20,26,50,.10)}

/* ══════════════════════════════════════════════════════════════════
   LA FICHE CLIENT
   ------------------------------------------------------------------
   Ordre de lecture imposé par ce qu'on cherche vraiment : à qui je
   parle, où en est l'argent, ce qui s'est passé, et où sont les
   papiers. Le reste existe mais se replie.
   ══════════════════════════════════════════════════════════════════ */
.fhero{display:flex;align-items:center;gap:18px;padding:20px 26px 16px;
  background:var(--paper);border-bottom:1px solid var(--line-3)}
.fhl{display:flex;align-items:center;gap:15px;flex:1;min-width:0}
.fav{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--brand),var(--brand-deep));color:#fff;
  font-family:var(--d);font-size:19px;font-weight:700;letter-spacing:-.02em;flex:0 0 auto;
  box-shadow:0 3px 10px rgba(75,69,198,.24)}
.fht{min-width:0}
.fht h1{font-family:var(--d);font-size:23px;font-weight:700;letter-spacing:-.022em;
  color:var(--ink);margin:0 0 6px;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpills{display:flex;gap:6px;flex-wrap:wrap}
.fpill{font-size:11.5px;font-weight:600;padding:2px 10px;border-radius:20px;
  color:#fff;background:var(--c,#6a7183)}
.fpill.n{background:var(--sunken);color:var(--ink-2);border:1px solid var(--line);font-weight:500}
.fhr{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.fowner{display:flex;align-items:center;gap:9px}
.fowner span{display:flex;flex-direction:column;line-height:1.25}
.fowner i{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);font-weight:700}
.fowner b{font-size:12.5px;color:var(--ink);font-weight:600}
.fmini{display:flex;gap:6px}
.fmb{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  font-size:15px;text-decoration:none;transition:all .12s}
.fmb:hover{background:var(--brand);border-color:var(--brand);color:#fff;
  transform:translateY(-1px);box-shadow:0 3px 8px rgba(75,69,198,.22)}

/* Les quatre chiffres qu'on lit avant de décrocher son téléphone. */
.fkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);
  border-bottom:1px solid var(--line)}
.fk{background:var(--paper);padding:12px 26px 11px;display:flex;flex-direction:column;gap:1px}
.fkk{font-size:10px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-3)}
.fkv{font-family:var(--d);font-size:21px;font-weight:700;letter-spacing:-.025em;
  color:var(--ink);line-height:1.2;font-variant-numeric:tabular-nums}
.fkn{font-size:11.5px;color:var(--ink-3)}

/* ── Les papiers ──────────────────────────────────────────────────
   Quatre emplacements fixes : un Kbis absent doit se voir comme un
   trou, pas comme une absence de ligne. */
.pap{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  border:1px dashed var(--line);margin-bottom:6px;cursor:pointer;transition:all .12s}
.pap:hover{border-color:var(--brand);background:var(--brand-tint)}
.pap.ok{border-style:solid;border-color:var(--line-2);background:var(--paper);cursor:default}
.pap.ok:hover{border-color:var(--line-2);background:var(--paper)}
.papi{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--sunken);color:var(--ink-4);font-size:13px;font-weight:700}
.pap.ok .papi{background:var(--ok-t);color:var(--ok)}
.papt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.papt b{font-size:12.5px;font-weight:600;color:var(--ink)}
.papt span{font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.papo{font-size:11.5px;color:var(--brand);text-decoration:none;font-weight:600;flex:0 0 auto}
.papo:hover{text-decoration:underline}
.papadd{border:0;background:none;color:var(--brand);font-family:var(--f);font-size:11.5px;
  font-weight:600;cursor:pointer;padding:5px 2px}
.papadd:hover{text-decoration:underline}

/* ── Le reste, replié ─────────────────────────────────────────────*/
.pan.pdet summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;
  align-items:center;gap:9px;font-size:13px;color:var(--ink)}
.pan.pdet summary::-webkit-details-marker{display:none}
.pan.pdet summary::before{content:"▸";color:var(--ink-4);font-size:11px;transition:transform .15s}
.pan.pdet[open] summary::before{transform:rotate(90deg)}
.pan.pdet summary .ct{margin-left:auto}
.pvides{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);
  font-weight:700;padding:12px 0 6px;border-top:1px solid var(--line-3);margin-top:8px}

/* La fiche prend toute la hauteur, les trois colonnes défilent seules. */
.rec-body{padding:16px 26px 30px;gap:16px}
.rec-col.l{width:376px}
.rec-col.r{width:324px}
/* Sur un grand écran, on ne laisse pas les colonnes étroites : la place
   existe, et c'est là que se lisent les dates et les noms complets. */
@media(min-width:1680px){
  .rec-body{grid-template-columns:416px minmax(0,1fr) 360px}
  .rec-col.l{width:416px} .rec-col.r{width:360px}
}
@media(max-width:1200px){.rec-body{flex-wrap:wrap}.rec-col.l,.rec-col.r{width:100%}
  .fkpis{grid-template-columns:repeat(2,1fr)}}

/* ── Les vues nommées ─────────────────────────────────────────────
   « Tableau principal », puis un onglet par commercial. Le visage
   avant le nom : on retrouve sa vue sans lire. */
.vues{display:flex;gap:3px;padding:0 22px;align-items:center;flex-wrap:wrap;
  border-bottom:1px solid var(--line-3);margin-bottom:2px}
.vue{display:inline-flex;align-items:center;gap:7px;border:0;background:none;
  font-family:var(--f);font-size:12.5px;color:var(--ink-2);cursor:pointer;
  padding:8px 12px 9px;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .12s,border-color .12s}
.vue:hover{color:var(--ink)}
.vue.on{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}
.vue img{width:20px;height:20px;border-radius:50%;object-fit:cover;
  box-shadow:inset 0 0 0 1px rgba(20,26,50,.12)}
.vue i{font-style:normal;color:var(--ink-4);font-size:12px}
.vue.on i{color:var(--brand)}
.vn{font-size:11px;color:var(--ink-3);background:var(--sunken);border-radius:10px;
  padding:1px 7px;font-variant-numeric:tabular-nums}
.vue.on .vn{background:var(--brand-tint);color:var(--brand)}

/* ── Déposer un papier ────────────────────────────────────────────
   Une zone qu'on vise, pas un champ qu'on remplit : glisser un PDF
   depuis le bureau est le geste naturel pour un Kbis. */
.depot{display:flex;align-items:center;gap:14px;padding:18px 18px;border-radius:10px;
  border:2px dashed var(--line);background:var(--sunken);cursor:pointer;
  transition:all .14s;margin:4px 0 2px}
.depot:hover,.depot.sur{border-color:var(--brand);background:var(--brand-tint)}
.depot.sur{transform:scale(1.01)}
.depot.encours{border-style:solid;border-color:var(--brand);cursor:progress}
.depot-i{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);font-size:19px;color:var(--brand);flex:0 0 auto}
.depot-t{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.depot-t b{font-size:13px;color:var(--ink)}
.depot-t span{font-size:11.5px;color:var(--ink-3)}
.ouou{display:flex;align-items:center;gap:10px;margin:12px 0 8px;
  font-size:11px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.07em}
.ouou::before,.ouou::after{content:"";flex:1;height:1px;background:var(--line-3)}

/* ── Le dossier client : trois pièces, une jauge ──────────────────
   Un client signé sans contrat, c'est du chiffre qui n'est lié à rien.
   La jauge le dit avant qu'on ait à ouvrir la liste des papiers. */
.pan.dossier{border-left:3px solid var(--line)}
.pan.dossier.complet{border-left-color:var(--ok)}
.pan.dossier.urgent{border-left-color:var(--alerte);background:var(--alerte-t)}
.dbar{height:6px;border-radius:4px;background:var(--sunken);overflow:hidden;margin:2px 0 9px}
.dbar i{display:block;height:100%;border-radius:4px;background:var(--ok);
  transition:width .35s cubic-bezier(.2,.8,.3,1)}
.pan.dossier.urgent .dbar i{background:var(--alerte)}
.dtxt{font-size:11.5px;color:var(--ink-2);line-height:1.55}
.pan.dossier.urgent .dtxt b{color:var(--alerte)}

/* ═══ ESPACE VIDE : ACCUEIL PLUTÔT QUE CONSTAT ═══════════════════
   Un espace qu'on vient de créer affichait « Aucun tableau ». C'est
   exact et inutile. On propose quatre départs concrets à la place. */
.bienv{ max-width:640px; margin:48px auto; text-align:center; }
.bienv-i{
  width:64px; height:64px; margin:0 auto 20px; border-radius:18px;
  display:grid; place-items:center; font-size:28px;
  background:var(--sunken); border:1px solid var(--line);
}
.bienv h2{
  font-family:var(--display); font-size:24px; font-weight:600;
  letter-spacing:-.02em; margin:0 0 10px; color:var(--ink);
}
.bienv p{
  margin:0 auto 28px; max-width:46ch; font-size:14px; line-height:1.6;
  color:var(--ink-3);
}
.bienv-m{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  margin-bottom:22px; text-align:left;
}
.bmod{
  display:flex; align-items:center; gap:12px; padding:13px 14px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:12px; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .12s, background .12s, transform .12s;
}
.bmod:hover{ border-color:var(--brand); background:var(--sunken); transform:translateY(-1px); }
.bmi{
  flex:none; width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; font-size:16px;
  background:var(--sunken); border:1px solid var(--line);
}
.bmod:hover .bmi{ background:var(--brand-tint); border-color:transparent; }
.bmt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bmt b{ font-size:13.5px; font-weight:600; color:var(--ink); }
.bmt span{ font-size:11.5px; color:var(--ink-3); line-height:1.35; }
@media (max-width:640px){ .bienv-m{ grid-template-columns:1fr; } }

/* La même idée, en tout petit, dans la barre latérale. */
.navvide{
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  padding:10px 12px; margin:4px 8px; border-radius:9px;
  background:var(--sunken); font-size:11.5px; color:var(--ink-3);
}
.navvide button{
  font:inherit; font-weight:600; color:#fff; cursor:pointer;
  background:var(--brand); border:0; border-radius:7px; padding:5px 10px;
}
.navvide button:hover{ background:var(--brand-deep); }

/* ═══ LA VUE VERROUILLÉE D'UN COMMERCIAL ═════════════════════════
   Un commercial n'a qu'une vue et ne peut pas en sortir. L'onglet reste
   affiché, cadenassé, avec une phrase qui dit exactement ce qui est
   filtré : la confiance dans un CRM se gagne en montrant la règle. */
.vue.fixe{ cursor:default; opacity:1; }
.vue.fixe:hover{ color:var(--ink); }
.vlock{ display:inline-flex; margin-left:1px; color:var(--brand); }
.vlock svg{ width:12px; height:12px; }
.vexpl{
  display:inline-flex; align-items:center; gap:6px; margin-left:12px;
  padding:4px 10px; border-radius:20px; max-width:60ch;
  background:var(--brand-tint); border:1px solid var(--brand-line);
  color:var(--brand-deep); font-size:11.5px; line-height:1.45;
}
.vexpl svg{ width:12px; height:12px; flex:none; }
.tag.vuemoi svg{ width:11px; height:11px; vertical-align:-1px; margin-right:3px; }

/* ═══ PARTAGE : QUI VOIT QUOI ════════════════════════════════════
   L'ancienne fenêtre alignait cinq champs et une liste dense. On ne
   partage pas un tableau en remplissant un formulaire : on cherche un
   visage, on lit une adresse, on choisit un niveau. Deux champs
   visibles, le reste plié. */
.visw{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 18px; }
.vis{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  gap:2px 10px; text-align:left; padding:12px 14px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
  font:inherit; color:var(--ink); transition:border-color .12s, background .12s;
}
.vis svg{ grid-row:1/3; align-self:center; width:16px; height:16px; color:var(--ink-3); }
.vis b{ font-size:13px; font-weight:600; }
.vis span{ font-size:11.5px; color:var(--ink-3); line-height:1.4; }
.vis:hover:not(:disabled){ border-color:var(--line-strong); background:var(--sunken); }
.vis.on{ border-color:var(--brand); background:var(--brand-tint); }
.vis.on svg, .vis.on b{ color:var(--brand-deep); }
.vis:disabled{ opacity:.55; cursor:default; }

.invrow2{ display:flex; gap:8px; align-items:center; }
.invrow2 .inp{ flex:1; min-width:0; }
.invrow2 .btn{ flex:none; }
.invrow2.opt{ margin-top:8px; }
.invplus{
  margin-top:9px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:11.5px; color:var(--brand); text-decoration:underline;
  text-underline-offset:2px;
}
.invnote{ margin:10px 0 0; font-size:11.5px; color:var(--ink-3); line-height:1.5; }

.plist{ max-height:340px; overflow-y:auto; margin-top:6px; }
.prow{
  display:flex; align-items:center; gap:11px; padding:9px 4px;
  border-bottom:1px solid var(--line-3);
}
.prow:last-child{ border-bottom:0; }
.pav{
  flex:none; width:30px; height:30px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--sunken);
  color:var(--ink-2); font-size:10.5px; font-weight:700;
}
.pav img{ width:100%; height:100%; object-fit:cover; display:block; }
.pnm{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.pnm b{ font-size:13px; font-weight:600; color:var(--ink); }
.pnm span{
  font-size:11.5px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pmk{
  flex:none; font-size:10.5px; color:var(--ink-3);
  background:var(--sunken); border-radius:20px; padding:2px 8px;
}

/* ═══ SOUS-ÉLÉMENTS DANS LE TABLEAU ══════════════════════════════
   Un tableau CSM porte « Avril 2026 » en ligne et les vidéos du mois
   en dessous. Sans dépliage, on recopiait la couverture sans le livre.
   Le tableau imbriqué est décalé et posé sur un fond creusé : on voit
   d'un coup d'œil qu'on est un cran en dessous. */
.nmc{ display:flex; align-items:center; gap:6px; min-width:0; }
.nml{ cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subcar{
  flex:none; width:17px; height:17px; padding:0; border:0; cursor:pointer;
  display:grid; place-items:center; border-radius:5px; font-size:10px;
  background:transparent; color:var(--ink-3);
  transition:transform .14s ease, background .12s, color .12s;
}
.subcar:hover{ background:var(--sunken); color:var(--ink); }
.subcar.on{ transform:rotate(90deg); color:var(--brand); }
.subn{
  flex:none; font-size:10px; font-weight:600; color:var(--ink-3);
  background:var(--sunken); border-radius:20px; padding:1px 6px;
  font-variant-numeric:tabular-nums;
}

.subrow > .subcell{ padding:0 !important; background:var(--sunken); }
/* Le sous-tableau s'étalait sur toute la largeur du tableau parent —
   mille neuf cents pixels pour deux colonnes utiles, avec l'échéance
   perdue à droite de l'écran. Il reste maintenant à gauche, à une
   largeur lisible, et il ne bouge pas quand on fait défiler la grille
   à côté. */
.subwrap{
  position:sticky; left:0; width:min(880px, 100%);
  padding:0 0 0 30px; box-sizing:border-box;
}
.submsg{ padding:11px 14px; font-size:12px; color:var(--ink-3); }
.subtb{
  width:100%; border-collapse:collapse; background:var(--paper);
  border-left:2px solid var(--brand-line); table-layout:auto;
  border-radius:0 8px 8px 0; overflow:hidden;
}
.subtb td .cell{ white-space:normal; }
.subtb th{
  text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink-3); padding:6px 10px;
  border-bottom:1px solid var(--line-3); white-space:nowrap;
}
.subtb td{
  padding:0; font-size:12.5px; color:var(--ink);
  border-bottom:1px solid var(--line-3); vertical-align:middle;
}
.subtb tr:last-child td{ border-bottom:0; }
.subtb tr:hover td{ background:var(--sunken); }
.subtb td .cell{
  display:block; padding:7px 10px; min-height:30px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis;
}
.subtb .subfirst .cell{ font-weight:500; cursor:pointer; }
.subtb .subfirst .cell:hover{ color:var(--brand); }
.subtb th.num, .subtb td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.subtb td.stat .cell{ padding:0; }

/* ═══ PIÈCES JOINTES, PÉRIODES, TEXTES LONGS ═════════════════════
   Les tableaux Content Creator et CSM sont faits de fichiers : rushes,
   miniatures, scripts. Un trombone ne dit ni ce que c'est ni s'il y en
   a trois. On montre les vignettes, servies par notre passerelle. */
.fset{ display:flex; align-items:center; gap:4px; }
.fvig{
  flex:none; width:34px; height:26px; border-radius:5px; overflow:hidden;
  display:block; background:var(--sunken); border:1px solid var(--line-2);
  transition:transform .12s, border-color .12s;
}
.fvig:hover{ transform:scale(1.06); border-color:var(--brand); }
.fvig img{ width:100%; height:100%; object-fit:cover; display:block; }
.fchipf{
  flex:none; font-size:9.5px; font-weight:700; letter-spacing:.04em;
  color:var(--ink-2); background:var(--sunken); border:1px solid var(--line-2);
  border-radius:5px; padding:4px 6px; text-decoration:none; line-height:1;
}
.fchipf:hover{ border-color:var(--brand); color:var(--brand); }
.fplus{ font-size:10.5px; font-weight:600; color:var(--ink-3); }

/* Une période : deux dates et une flèche, pas une barre à l'échelle. */
.tlchip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.tlchip b{ font-weight:600; color:var(--ink); }
.tlchip i{ font-style:normal; color:var(--ink-4); }

/* Un texte long : une ligne dans la grille, l'intégralité au survol. */
.ltx{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* La ligne s'aère quand elle porte des vignettes. */
.mb td .cell:has(.fvig){ padding-top:3px; padding-bottom:3px; }

/* Le chevron des sous-éléments vit dans la cellule Nom, qui est déclarée
   en bloc plus haut : sans ce rappel plus spécifique, la flèche tombe à la
   ligne au-dessus du texte. */
.mb td.first .cell.nmc{ display:flex; text-align:left; }

/* Le tableau des sous-éléments hérite du centrage de la grille parente :
   on le remet à gauche, comme les lignes qu'il complète. */
.subtb td .cell{ text-align:left; }
.subtb td.num .cell{ text-align:right; }
.subtb th{ text-align:left; }
.subtb th.num{ text-align:right; }

/* ═══ PLUS DE NUMÉROTATION DE LIGNE ══════════════════════════════
   La gouttière « 1, 2, 3… » n'apprenait rien : le rang d'une ligne
   change au moindre tri. La colonne Nom reprend sa place, collée à
   la case à cocher. */
.mb th.first{ left:38px !important; }
.mb td.first{ left:38px; }

/* ═══ LA LISTE DES APPELS ════════════════════════════════════════ */
.apt-tb .apj{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.apt-tb .apj i{ display:block; font-style:normal; font-size:10.5px; color:var(--ink-4); }
.apt-tb .apt a{ color:var(--ink); font-weight:500; text-decoration:none; }
.apt-tb .apt a:hover{ color:var(--brand); text-decoration:underline; }
.apt-tb .apt i{ display:block; font-style:normal; font-size:11px; color:var(--ink-3); }
.apt-tb .apm{ font-size:11px; color:var(--ink-3); white-space:nowrap; }
.aporph{
  font-size:11px; color:var(--ink-3); background:var(--sunken);
  border:1px dashed var(--line-strong); border-radius:20px; padding:2px 9px;
}
.apt-tb .rchip{ cursor:pointer; }

/* Les quatre chiffres de tête des appels, sur une ligne. */
.cards4{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 0 4px;
}
.cards4 .ck{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; display:flex; flex-direction:column; gap:3px;
}
.cards4 .ckk{
  font-size:10px; font-weight:700; letter-spacing:.075em; text-transform:uppercase;
  color:var(--ink-3);
}
.cards4 .ckv{
  font-family:var(--d); font-size:26px; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1;
}
.cards4 .ckn{ font-size:11.5px; color:var(--ink-3); }
@media (max-width:900px){ .cards4{ grid-template-columns:repeat(2,1fr); } }

/* ═══ RETIRER QUELQU'UN ══════════════════════════════════════════
   Deux gestes qu'il ne faut pas confondre : couper l'accès, et effacer
   la fiche. Le second est en rouge, et derrière une confirmation qui
   dit ce qui va se passer. */
.wt th:last-child, .wt td.uact{ text-align:right; white-space:nowrap; }
.ubtn{
  font:inherit; font-size:12px; padding:5px 10px; cursor:pointer;
  background:var(--paper); color:var(--ink-2);
  border:1px solid var(--line); border-radius:7px; margin-left:6px;
}
.ubtn:hover{ border-color:var(--line-strong); color:var(--ink); background:var(--sunken); }
.ubtn.danger{ color:var(--alerte); border-color:var(--brand-line); }
.ubtn.danger:hover{ background:var(--alerte); border-color:var(--alerte); color:#fff; }

.wt tr.sep td{ padding-top:18px; color:var(--ink-3); border-bottom:0; }
.wt tr.off td{ opacity:.62; }
.wt tr.off:hover td{ opacity:1; }

.btn.danger{ background:var(--alerte); border-color:var(--alerte); color:#fff; }
.btn.danger:hover{ background:#96181f; border-color:#96181f; }
.btn.danger:disabled{ opacity:.6; cursor:default; }
.chip{ font-size:10.5px; padding:2px 8px; border-radius:20px;
  background:var(--sunken); color:var(--ink-3); }

/* ═══ QUI A ACCÈS, À CÔTÉ DU TITRE ═══════════════════════════════
   Les visages vivaient dans la barre latérale, où ils mangeaient la
   moitié de la largeur sur chaque ligne. Ils tiennent bien mieux à côté
   de l'étoile : on les voit quand on regarde le tableau, et jamais quand
   on cherche seulement à en ouvrir un. */
.title-row .faces{ display:inline-flex; align-items:center; margin-left:4px; }
.title-row .face{
  width:23px; height:23px; margin-left:-6px; border-radius:50%;
  border:2px solid var(--paper); background:var(--sunken);
  display:inline-grid; place-items:center; overflow:hidden;
  font-size:9px; font-weight:700; color:var(--ink-2);
}
.title-row .face:first-child{ margin-left:0; }
.title-row img.face{ object-fit:cover; }
.title-row .face.more{ background:var(--line-2); color:var(--ink-3); font-size:9.5px; }

/* ═══ LA FICHE PROFIL ════════════════════════════════════════════
   C'est le seul écran du logiciel qui parle de la personne elle-même,
   et il ressemblait à un formulaire d'administration. Une carte de
   présentation en haut, deux colonnes de faits en dessous. */
.phero{
  display:flex; align-items:center; gap:20px; padding:26px 28px; margin-bottom:16px;
  background:linear-gradient(135deg, var(--brand-tint) 0%, var(--paper) 62%);
  border:1px solid var(--line); border-radius:16px;
}
.phero-av{
  flex:none; width:84px; height:84px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--paper);
  border:3px solid var(--paper); box-shadow:0 4px 18px -8px rgba(20,22,31,.35);
  font-family:var(--d); font-size:26px; font-weight:700; color:var(--brand);
}
.phero-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.phero-t{ min-width:0; }
.phero-t h2{
  font-family:var(--d); font-size:25px; font-weight:650; letter-spacing:-.5px;
  margin:0 0 3px; color:var(--ink);
}
.phero-t p{ margin:0 0 11px; font-size:13.5px; color:var(--ink-3); }
.phero-b{ display:flex; gap:7px; flex-wrap:wrap; }
.pbadge{
  font-size:11px; font-weight:600; padding:4px 11px; border-radius:20px;
  background:var(--brand); color:#fff; letter-spacing:.01em;
}
.pbadge.sourd{ background:var(--sunken); color:var(--ink-2); border:1px solid var(--line); }

.pgrid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pgrid2 .pspan{ grid-column:1 / -1; }
.pgrid2 .pcard{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
}
.pcard-t{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:14px;
}
.pfield{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; }
.pfield + .pfield{ border-top:1px solid var(--line-3); }
.pk{
  flex:none; width:26px; height:26px; border-radius:8px; margin-top:1px;
  display:grid; place-items:center; font-size:12px;
  background:var(--sunken); color:var(--ink-3);
}
.pfield b{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-3); margin-bottom:1px; }
.pv{
  display:block; font-size:14px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pv.ed{ cursor:text; border-bottom:1px dashed transparent; }
.pv.ed:hover{ border-bottom-color:var(--line-strong); }
.pv.none{ color:var(--ink-4); font-style:italic; }

.pagenda{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border:1px solid var(--line); border-radius:12px; background:var(--sunken);
}
.pagenda.on{ border-color:#b7e2cd; background:#f2fbf6; }
.pag-i{
  flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line); font-size:15px;
}
.pagenda b{ display:block; font-size:13.5px; color:var(--ink); }
.pagenda .pv{ font-size:12.5px; color:var(--ink-3); white-space:normal; }

.pteam{ display:flex; align-items:center; gap:11px; padding:9px 0; font-size:13.5px; }
.pteam + .pteam{ border-top:1px solid var(--line-3); }
.pteam .tb{
  flex:none; width:26px; height:26px; border-radius:8px; color:#fff;
  display:grid; place-items:center; font-size:10px; font-weight:700;
}
.pvide{ padding:14px 0; color:var(--ink-3); font-size:13.5px; }

@media (max-width:820px){
  .pgrid2{ grid-template-columns:1fr; }
  .phero{ flex-direction:column; text-align:center; }
  .phero-b{ justify-content:center; }
}

/* ═══ LA CLOCHE ══════════════════════════════════════════════════
   Un panneau ancré en haut à droite, sous l'icône. On y lit qui vous a
   cité et ce que le logiciel a jugé assez grave pour vous prévenir. */
.gbell{ position:relative; }
.gbell svg{ width:19px; height:19px; }
.gbadge{
  position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px;
  border-radius:20px; background:var(--alerte); color:#fff;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
  border:2px solid var(--paper); box-sizing:content-box;
}
.notifs{
  position:fixed; top:56px; right:14px; width:390px; max-width:calc(100vw - 28px);
  max-height:calc(100vh - 76px); z-index:120;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 22px 60px -26px rgba(20,22,31,.45);
  display:flex; flex-direction:column; overflow:hidden;
}
.nt-h{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid var(--line-3);
}
.nt-h b{ font-family:var(--d); font-size:15px; font-weight:650; }
.nt-lien{
  border:0; background:none; cursor:pointer; font:inherit; font-size:11.5px;
  color:var(--brand); text-decoration:underline; text-underline-offset:2px;
}
.nt-x{ border:0; background:none; cursor:pointer; font-size:15px; color:var(--ink-3); padding:2px 4px; }
.nt-x:hover{ color:var(--ink); }
.nt-w{ padding:12px 16px; border-bottom:1px solid var(--line-3); }
.nt-b{ overflow-y:auto; }

.nt-i{
  display:flex; gap:11px; width:100%; text-align:left; align-items:flex-start;
  padding:12px 16px; border:0; border-bottom:1px solid var(--line-3);
  background:var(--paper); cursor:pointer; font:inherit; position:relative;
}
.nt-i:hover{ background:var(--sunken); }
.nt-i.neuf{ background:var(--brand-tint); }
.nt-i.neuf:hover{ background:#e6e9fb; }
.nt-i.grave .nt-av{ background:var(--alerte-t); color:var(--alerte); }
.nt-av{
  flex:none; width:32px; height:32px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--sunken); font-size:14px;
}
.nt-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.nt-av i{ font-style:normal; }
.nt-t{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.nt-t b{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.35; }
.nt-c{
  font-size:12.5px; color:var(--ink-2); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nt-m{ font-size:11px; color:var(--ink-4); margin-top:2px; }
.nt-pt{
  flex:none; width:7px; height:7px; border-radius:50%; background:var(--brand); margin-top:6px;
}
.nt-vide{ padding:38px 24px; text-align:center; }
.nt-vide b{ display:block; font-size:14px; margin-bottom:6px; color:var(--ink); }
.nt-vide span{ font-size:12.5px; color:var(--ink-3); line-height:1.6; }

/* Choisir des destinataires, et le « @ » qui propose les prénoms. */
.ntq{ display:flex; flex-wrap:wrap; gap:6px; }
.ntg{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 5px;
  border:1px solid var(--line); border-radius:20px; background:var(--paper);
  font:inherit; font-size:12.5px; cursor:pointer; color:var(--ink-2);
}
.ntg:hover{ border-color:var(--line-strong); }
.ntg.on{ border-color:var(--brand); background:var(--brand-tint); color:var(--brand-deep); font-weight:600; }
.ntg-a{
  flex:none; width:22px; height:22px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--sunken);
  font-size:9px; font-weight:700; color:var(--ink-2);
}
.ntg-a img{ width:100%; height:100%; object-fit:cover; display:block; }

.arob{
  position:fixed; z-index:400;
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 16px 42px -20px rgba(20,22,31,.45); overflow:hidden; max-height:250px; overflow-y:auto;
}
.arob button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 12px; border:0; background:none; cursor:pointer; font:inherit;
}
.arob button:hover, .arob button.on{ background:var(--brand-tint); }
.arob b{ display:block; font-size:13px; font-weight:600; color:var(--ink); }
.arob i{ font-style:normal; font-size:11px; color:var(--ink-3); }

/* ═══ LA VIDÉO DE BIENVENUE ══════════════════════════════════════
   Premier écran d'un nouvel arrivant. Une liste de fichiers ne dit pas
   comment on travaille ; deux minutes de vidéo, si. */
.bienv-v{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:26px;
  align-items:center; margin:6px 0 26px; padding:24px 26px;
  background:linear-gradient(135deg, var(--brand-tint) 0%, var(--paper) 58%);
  border:1px solid var(--line); border-radius:16px;
}
.bv-t h2{
  font-family:var(--d); font-size:23px; font-weight:650; letter-spacing:-.5px;
  margin:0 0 8px; color:var(--ink);
}
.bv-t p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-2); max-width:42ch; }
.bv-p{
  width:100%; aspect-ratio:16/10; border-radius:12px; display:block;
  background:#131313; border:1px solid var(--line);
  box-shadow:0 16px 40px -22px rgba(20,22,31,.5);
}
@media (max-width:900px){ .bienv-v{ grid-template-columns:1fr; } }

/* ═══ L'ÉDITEUR DE NOTE ══════════════════════════════════════════
   On écrit ici des comptes rendus, des consignes, des listes de choses
   à faire. Un champ de texte nu ne suffisait pas. */
.edr{ display:flex; flex-direction:column; }
.edr-t{
  display:flex; align-items:center; gap:1px; flex-wrap:wrap;
  padding:6px 8px; border-bottom:1px solid var(--line-3); background:var(--sunken);
}
.edr-b{
  min-width:26px; height:26px; padding:0 6px; border:0; border-radius:6px;
  background:none; cursor:pointer; color:var(--ink-2);
  font:600 12.5px/1 var(--f); display:grid; place-items:center;
}
.edr-b:hover{ background:var(--line-2); color:var(--ink); }
.edr-b.on{ background:var(--brand-tint); color:var(--brand-deep); }
.edr-b[data-cmd="italic"]{ font-style:italic; }
.edr-b[data-cmd="underline"]{ text-decoration:underline; }
.edr-b[data-cmd="strikeThrough"]{ text-decoration:line-through; }
.edr-sep{ width:1px; height:16px; background:var(--line); margin:0 5px; }

.edr-z{
  padding:11px 14px; outline:none; font-size:13px; line-height:1.6; color:var(--ink);
  max-height:340px; overflow-y:auto;
}
.edr.vide .edr-z::before{
  content:attr(data-ph); color:var(--ink-4); pointer-events:none; display:block;
}
.edr-z p{ margin:0 0 8px; }
.edr-z p:last-child{ margin-bottom:0; }
.edr-z h3{ font-family:var(--d); font-size:15.5px; font-weight:650; margin:10px 0 6px; }
.edr-z ul, .edr-z ol{ margin:0 0 8px; padding-left:22px; }
.edr-z li{ margin-bottom:3px; }
.edr-z blockquote{
  margin:0 0 8px; padding:2px 0 2px 12px; border-left:3px solid var(--brand-line);
  color:var(--ink-2);
}
.edr-z a{ color:var(--brand); }
.edr-z hr{ border:0; border-top:1px solid var(--line); margin:12px 0; }
.edr-z code{ background:var(--sunken); padding:1px 5px; border-radius:4px; font-size:12px; }
.edr-z .ck{ display:flex; align-items:flex-start; gap:8px; margin-bottom:4px; }
.edr-z .ck input{ margin-top:4px; accent-color:var(--brand); width:14px; height:14px; flex:none; }
.edr-z .ck span{ flex:1; min-width:0; }

/* La citation : une pastille bleue, insécable. C'est elle qui déclenche
   la notification — la voir, c'est être sûr que le message partira. */
.men, .upd-b .men{
  display:inline-block; padding:1px 8px; border-radius:20px;
  background:var(--brand-tint); color:var(--brand-deep);
  font-weight:600; font-size:.94em; white-space:nowrap;
  border:1px solid var(--brand-line); user-select:all;
}
.compose{ overflow:visible; }

/* ═══ FERMÉ OU OUVERT, D'UN COUP D'ŒIL ═══════════════════════════
   Deux cadenas de la même couleur ne se distinguent pas dans une liste
   de vingt lignes. Le fermé reste discret — c'est l'état normal ; c'est
   l'ouvert qu'on signale, parce que c'est celui qui mérite un regard. */
.nrow .lockic, .btab2 .lockic{ display:inline-flex; align-items:center; }
.lockic svg{ width:12px; height:12px; display:block; }
.lockic.shut{ color:var(--ink-4); }
.nrow:hover .lockic.shut{ color:var(--ink-3); }
/* Un cadenas ouvert n'est pas une alerte : « Général » est ouvert
   exprès, à tout le monde. L'ambre disait le contraire. */
.lockic.open{ color:var(--ok); opacity:.75; }
.lockic.open svg{ filter:none; }
.nrow.sel .lockic.shut{ color:var(--brand); opacity:.55; }

/* Dans l'en-tête d'un tableau, le bouton Partager dit le même état. */
#share .lockic, #share svg{ vertical-align:-2px; margin-right:2px; }

/* ═══ D'OÙ VIENNENT LES RENDEZ-VOUS ══════════════════════════════
   Un total ne dit pas quelle annonce a amené quel client. Ici on lit
   la répartition d'un côté, la liste nominative de l'autre. */
.attr .w-body{ padding-top:6px; }
.attb{ width:100%; border-collapse:collapse; font-size:13px; }
.attb td{ padding:6px 0; border-bottom:1px solid var(--line-3); vertical-align:middle; }
.attb tr:last-child td{ border-bottom:0; }
.atk{
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink); padding-right:10px !important;
}
.atb{ width:34%; }
.atb span{
  display:block; height:7px; border-radius:20px; background:var(--brand); min-width:3px;
}
.atn{ width:40px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums;
  padding-left:10px !important; }
.ats{ width:78px; text-align:right; font-size:11.5px; color:var(--data-green); }
.ats b{ font-weight:700; }

.rdvtb td{ font-size:12.5px; vertical-align:middle; }
.rdvtb .rdd{ white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.rdvtb .rdq b{ display:block; font-weight:600; color:var(--ink); }
.rdvtb .rdq span{ display:block; font-size:11px; color:var(--ink-3); }
.rdvtb .rdc{ max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rdvtb .rdp{ font-size:11.5px; color:var(--ink-3); max-width:170px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rdvtb .rdm{ display:block; font-size:11.5px; color:var(--data-green); font-weight:700; }
.etq{
  display:inline-block; font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:20px;
  background:var(--sunken); color:var(--ink-2); white-space:nowrap;
}
.etq.gagne{ background:#e7f6ee; color:var(--data-green); }
.etq.perdu{ background:var(--alerte-t); color:var(--alerte); }
.etq.cours{ background:var(--brand-tint); color:var(--brand-deep); }

/* ═══ LE GUIDE DE L'ESPACE ══════════════════════════════════════
   Un onglet par canal. Rien de décoratif : la seule couleur sert à
   distinguer ce qui entre, ce qui est un tableau du CRM, et ce qui
   sort. Les schémas se dessinent sur une grille fixe, ce qui garantit
   qu'aucune étiquette ne chevauche une boîte. */
.gu{ margin:34px auto 44px; max-width:1280px; padding:0 32px; }
.gu-h{ margin:0 0 22px; }
.gu-h h2{
  font-family:var(--d); font-size:22px; font-weight:650; letter-spacing:-.4px;
  margin:0 0 6px; color:var(--ink);
}
.gu-h p{ margin:0; font-size:13.5px; color:var(--ink-3); max-width:70ch; line-height:1.6; }

.gu-tabs{
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line); margin-bottom:30px;
}
.gu-tabs::-webkit-scrollbar{ display:none; }
.gu-tabs button{
  flex:0 0 auto; appearance:none; background:none; border:0; cursor:pointer;
  font:500 13px var(--f); color:var(--ink-3); padding:9px 13px 11px;
  border-bottom:2px solid transparent; white-space:nowrap; border-radius:6px 6px 0 0;
}
.gu-tabs button:hover{ color:var(--ink); background:var(--sunken); }
.gu-tabs button.on{ color:var(--brand-deep); border-bottom-color:var(--brand); font-weight:600; }
.gu-tabs button:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }

.gu-s h3{
  font-family:var(--d); font-size:18px; font-weight:650; letter-spacing:-.3px;
  margin:0 0 7px; color:var(--ink);
}
.gu-c{ margin:0 0 24px; font-size:13.5px; color:var(--ink-3); max-width:78ch; line-height:1.62; }

/* Le schéma : centré, jamais coupé, jamais étiré. */
.gu-fx{
  display:flex; justify-content:center; overflow-x:auto; scrollbar-width:thin;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:22px 20px; margin:0 0 30px;
}
svg.fx{ width:100%; max-width:1120px; height:auto; display:block; }
.fx-b rect{ fill:var(--sunken); stroke:var(--line-strong); stroke-width:1.1; }
.fx-t{ font:600 12.5px var(--f); fill:var(--ink); text-anchor:middle; }
.fx-s{ font:11px var(--f); fill:var(--ink-3); text-anchor:middle; }
.fx-b.src rect{ fill:var(--brand-tint); stroke:var(--brand-line); }
.fx-b.cle rect{ fill:var(--paper); stroke:var(--brand); stroke-width:1.5; }
.fx-b.cle .fx-t{ fill:var(--brand-deep); }
.fx-b.auto rect{ fill:var(--paper); stroke:var(--line-strong); stroke-dasharray:4 3; }
.fx-b.fin rect{ fill:#f2fbf6; stroke:#b7e2cd; }
.fx-f path{ fill:none; stroke:var(--ink-4); stroke-width:1.3; }
.fx-p path{ fill:var(--ink-4); stroke:none; }
.fx-l{ font:10.5px var(--f); fill:var(--ink-3); text-anchor:middle; }

/* Les blocs d'un onglet. */
.gu-blk{ margin:0 0 30px; }
.gu-blk h4{
  font:600 11px var(--f); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 13px;
}

/* Le déroulé numéroté : c'est le cœur du détail. */
.gu-etp{ list-style:none; counter-reset:e; margin:0; padding:0;
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.gu-etp li{ counter-increment:e; background:var(--paper); padding:15px 18px 15px 52px;
  position:relative; }
.gu-etp li::before{
  content:counter(e); position:absolute; left:16px; top:15px;
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-deep);
  font:600 11px var(--f);
}
.gu-etpt{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.gu-tag{ font:600 9.5px var(--f); letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:20px; font-style:normal; }
.gu-tag.a{ background:#e7f6ee; color:#1a7f4b; }
.gu-tag.m{ background:var(--sunken); color:var(--ink-3); }
.gu-etp li p{ margin:0; font-size:13px; color:var(--ink-2); line-height:1.6; max-width:88ch; }

/* Le tableau des colonnes. */
.gu-tab{ width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:13px; }
.gu-tab th{ text-align:left; font:600 10.5px var(--f); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-4); background:var(--sunken);
  padding:9px 16px; border-bottom:1px solid var(--line); }
.gu-tab td{ padding:11px 16px; border-bottom:1px solid var(--line-2);
  color:var(--ink-2); line-height:1.55; vertical-align:top; }
.gu-tab tr:last-child td{ border-bottom:0; }
.gu-tab td code{ font:600 12.5px var(--f); color:var(--ink); background:none; padding:0; }
.gu-tab td.ok{ color:#1a7f4b; white-space:nowrap; }
.gu-tab td.man{ color:var(--ink-3); white-space:nowrap; }
.gu-tab th:last-child, .gu-tab td:last-child{ width:130px; }

/* Les listes : règles, pièges, où regarder. */
.gu-li{ list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.gu-li li{ display:grid; grid-template-columns:230px 1fr; gap:18px;
  background:var(--paper); padding:13px 16px; align-items:baseline; }
.gu-li li b{ font-size:13px; font-weight:600; color:var(--ink); }
.gu-li li span{ font-size:13px; color:var(--ink-2); line-height:1.55; }
@media (max-width:760px){ .gu-li li{ grid-template-columns:1fr; gap:4px; } }
.gu-blk.att .gu-li{ border-color:#f0dcc2; background:#f0dcc2; }
.gu-blk.att .gu-li li{ background:#fffaf3; }
.gu-blk.att h4{ color:#9a6414; }

/* Les automatisations, groupées par moment. */
.gu-grp{ margin:0 0 28px; }
.gu-grp h4{
  font:600 11px var(--f); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 13px;
}
.gu-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
.gu-card{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; display:flex; flex-direction:column; gap:5px;
}
.gu-card b{ font-size:13px; font-weight:600; color:var(--ink); }
.gu-card span{ font-size:12.5px; color:var(--ink-3); line-height:1.55; }

/* ═══ LA BULLE DES CONVERSATIONS ═════════════════════════════════
   Au bord droit de la première colonne, comme sur un tableau Monday :
   une bulle bleue, le nombre de notes dans une pastille posée dessus,
   le début de la dernière au survol. Sans note, un « + » qui n'apparaît
   qu'au survol de la ligne. */
.ntb{
  flex:0 0 auto; position:relative; display:inline-flex; align-items:center;
  appearance:none; border:0; background:none; cursor:pointer;
  margin-left:auto; padding:0 7px 0 11px;
  border-left:1px solid var(--line-2);
  color:var(--mdy-blue); height:24px;
}
.ntb svg{ display:block; }
.ntb i{
  position:absolute; right:-3px; bottom:0;
  min-width:15px; height:15px; padding:0 3px; border-radius:8px;
  background:var(--mdy-blue); color:#fff;
  font:600 9.5px/15px var(--f); font-style:normal; text-align:center;
  box-shadow:0 0 0 2px var(--paper);
}
.ntb:hover{ color:var(--mdy-blue-hover); }
.ntb:hover i{ background:var(--mdy-blue-hover); }
.ntb.vide{ color:var(--ink-4); opacity:0; transition:opacity .12s; }
.mb tr:hover .ntb.vide{ opacity:1; }
.ntb.vide:hover{ color:var(--mdy-blue); }
.ntb:focus-visible{ outline:2px solid var(--mdy-blue); outline-offset:2px; opacity:1; border-radius:4px; }

/* ═══ L'AUTOMATISATION QUI TOURNE ════════════════════════════════
   Taper un SIRET et ne rien voir bouger, c'est croire que rien ne
   marche. Le bandeau dit ce qui part, puis se coche quand c'est fait.
   Il vit en bas à droite et disparaît de lui-même. */
.autobar{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; flex-direction:column; gap:8px; max-width:340px;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .18s, transform .18s;
}
.autobar.on{ opacity:1; transform:none; }
.ab-l{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:11px 14px;
  box-shadow:0 6px 24px rgba(16,20,38,.10);
}
.ab-s{
  flex:0 0 auto; width:13px; height:13px; margin-top:2px; border-radius:50%;
  border:2px solid var(--brand-line); border-top-color:var(--brand);
  animation:ab-spin .7s linear infinite;
}
@keyframes ab-spin{ to{ transform:rotate(360deg); } }
.ab-l.ok .ab-s{
  animation:none; border-color:transparent; background:var(--data-green, #1a7f4b);
  position:relative;
}
.ab-l.ok .ab-s::after{
  content:''; position:absolute; left:4px; top:1px; width:4px; height:7px;
  border:solid #fff; border-width:0 1.7px 1.7px 0; transform:rotate(43deg);
}
.ab-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ab-t b{ font-size:12.5px; font-weight:600; color:var(--ink); }
.ab-t i{ font-style:normal; font-size:11.5px; color:var(--ink-3); line-height:1.45; }
@media (prefers-reduced-motion:reduce){ .ab-s{ animation:none; } }

/* Le choix libre, sous la palette des groupes. */
.gpal-x{ display:flex; align-items:center; gap:8px; padding:8px 10px 4px; }
.gpal-x input[type=color]{
  width:26px; height:26px; padding:0; border:1px solid var(--line);
  border-radius:7px; background:none; cursor:pointer;
}
.gpal-x span{ font-size:12px; color:var(--ink-3); }
.gsw.lib{ box-shadow:0 0 0 1px var(--line); }

/* ═══ FINITIONS DES TABLEAUX ═════════════════════════════════════
   Un tableau se lit d'abord à ses traits. Ceux-ci étaient tous de la
   même épaisseur et de la même couleur : rien ne disait où finissait
   une ligne, où commençait un groupe. On hiérarchise, sans rien
   ajouter de décoratif. */

/* Le groupe devient un bloc net, avec un contour et des coins. */
.mb{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
}
/* Pas d'overflow caché sur la table : il casse le maintien en place de
   l'en-tête et de la première colonne. Les coins se font sur les
   cellules d'angle. */
.mb thead tr:first-child th:first-child{ border-top-left-radius:10px; }
.mb thead tr:first-child th:last-child{ border-top-right-radius:10px; }
.mb thead th{
  background:var(--sunken);
  border-bottom:1px solid var(--line);
  color:var(--ink-3);
}
.mb thead th:not(:last-child){ border-right:1px solid var(--line-3); }
.mb tbody td{ border-bottom:1px solid var(--line-3); }
.mb tbody tr:last-child td{ border-bottom:0; }
.mb tbody tr:last-child td:first-child{ border-bottom-left-radius:10px; }
.mb tbody tr:last-child td:last-child{ border-bottom-right-radius:10px; }

/* Le trait de couleur du groupe : continu, collé au bord, arrondi
   seulement en haut et en bas du bloc. Coupé toutes les six lignes,
   il ressemblait à des tirets. */
.mb td.first .cell::before{ top:0; bottom:0; width:3px; border-radius:0; }
.mb tbody tr:first-child td.first .cell::before{ border-radius:3px 3px 0 0; }
.mb tbody tr:last-child td.first .cell::before{ border-radius:0 0 3px 3px; }

/* La colonne du nom se détache d'un trait plein ; les autres d'un
   trait presque invisible, juste de quoi aligner l'œil. */
.mb td.first, .mb th.first{ border-right:1px solid var(--line); }
.mb td:not(.first){ border-right:1px solid var(--line-3); }
.mb td:last-child, .mb th:last-child{ border-right:0; }

/* Le survol : une teinte, pas un cadre. */
.mb tbody tr:hover td{ background:#f7f9fc; }

/* L'en-tête du groupe respire au-dessus de son bloc, et son filet
   disparaît : le contour du tableau le remplace. */
.grp-head{ padding-bottom:9px; }
.grp-head::after{ display:none; }
.grp-head .gdot{ width:10px; height:10px; border-radius:3px; }
.grp{ margin-bottom:22px; }

/* La ligne « ajouter un élément » ferme le bloc sans le trouer. */
.mb tr.addr td{ background:var(--paper); border-bottom:0; }
.mb tr.addr td.first .cell::before{ display:none; }

/* Le sous-tableau garde le même langage, en plus discret. */
.subtb{ border:1px solid var(--line-3); border-radius:8px; overflow:hidden; }

/* ═══ CE QU'ON VOIT SE CORRIGE À L'ÉCRAN ═════════════════════════
   Un titre, un nom de groupe, un nom de fiche : le même geste partout,
   et un repère discret qui dit que c'est modifiable. */
.edith{ cursor:text; border-radius:6px; padding:0 4px; margin-left:-4px;
  transition:background .12s, box-shadow .12s; }
.edith:hover{ background:var(--sunken); box-shadow:inset 0 0 0 1px var(--line); }
.edith:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
.edith-i{
  font:inherit; color:inherit; width:100%; min-width:120px;
  border:0; border-bottom:2px solid var(--brand); background:transparent;
  padding:0; outline:none; border-radius:0;
}
.nmedit{
  font:inherit; font-weight:600; color:var(--ink); width:100%;
  border:0; border-bottom:2px solid var(--brand); background:var(--paper);
  padding:0; outline:none;
}
.gtitle[data-gname]{ cursor:text; border-radius:5px; padding:0 4px; margin-left:-4px; }
.gtitle[data-gname]:hover{ background:var(--sunken); }

/* Le logo du client, posé sur ses initiales : si le domaine n'a pas de
   favicon, l'image disparaît et le monogramme reste. */
.fav{ position:relative; overflow:hidden; }
.fav img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:#fff; padding:9px; border-radius:inherit;
}

/* ═══ LES DEUX FAÇONS DE COMPTER ═════════════════════════════════
   Le MRR signé compte les nouvelles signatures, le chiffre d'affaires
   du mois compte le parc actif. Deux jauges identiques côte à côte :
   c'est le même objectif, il ne faut pas croire qu'on lit deux choses
   qui ne se comparent pas. */
.obj2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:6px 0 4px; }
@media (max-width:900px){ .obj2{ grid-template-columns:1fr; } }
.jg{ display:flex; align-items:center; gap:14px; min-width:0; }
.jg svg{ flex:0 0 auto; }
.jg-t{ min-width:0; }
.jg-t i{ font-style:normal; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-4); display:block; margin-bottom:2px; }
.jg-t .val{ font-family:var(--d); font-size:22px; font-weight:650; color:var(--ink);
  letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.jg-t .goal{ font-size:12px; color:var(--ink-3); line-height:1.45; margin-top:2px; }

/* Le chiffre d'affaires mois par mois : douze colonnes et un trait
   d'objectif. Une barre qui dépasse le trait, c'est un mois tenu. */
.cabars{ display:grid; grid-template-columns:repeat(12,1fr); gap:6px; align-items:end;
  padding-top:6px; }
.cab{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.cab-c{ position:relative; width:100%; height:120px; background:var(--sunken);
  border-radius:5px; display:flex; align-items:flex-end; overflow:hidden; }
.cab-c i{ display:block; width:100%; background:var(--brand); border-radius:5px 5px 0 0; }
.cab-c u{ position:absolute; left:0; right:0; height:2px; background:var(--signal);
  text-decoration:none; }
.cab b{ font-size:10px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.cab span{ font-size:10px; color:var(--ink-4); }
@media (max-width:900px){ .cabars{ grid-template-columns:repeat(6,1fr); } .cab b{ display:none; } }
.cab-c i.plein{ background:var(--data-green, #00c875); }
.cab-c{ height:140px; }

/* ═══ LE PIED D'UN GROUPE ════════════════════════════════════════
   Ce que les lignes font ensemble : la somme des montants, l'étiquette
   dominante, la dernière date. C'est le chiffre qu'on vient chercher
   quand on ouvre un groupe, et il fallait l'additionner de tête. */
.mb tr.pied td{
  background:var(--sunken); border-top:1px solid var(--line);
  border-bottom:0; padding:0; height:34px;
}
.mb tr.pied td.first .cell{ font-weight:600; color:var(--ink-3); font-size:11.5px; }
.mb tr.pied td.first .cell::before{ display:none; }
.mb tr.pied .pd{
  display:flex; flex-direction:column; gap:0; padding:4px 13px; line-height:1.15;
}
.mb tr.pied .pd i{ font-style:normal; font-size:8.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-4); }
.mb tr.pied .pd b{ font-size:12.5px; font-weight:650; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.mb tr.pied td.num .pd{ align-items:flex-end; }
.mb tr.pied .pd.vide b{ color:var(--ink-3); font-weight:500; }
.mb tr.pied td:first-child{ border-bottom-left-radius:10px; }
.mb tr.pied td:last-child{ border-bottom-right-radius:10px; }
.mb tbody tr:last-child td{ border-bottom:0; }

/* ═══ LE CALENDRIER ══════════════════════════════════════════════
   Un tableau dit ce qu'il y a à faire, pas quand. Six semaines
   toujours affichées : sinon la grille change de hauteur d'un mois à
   l'autre et l'œil doit se replacer à chaque fois. */
.cal{ padding:4px 26px 40px; max-width:1280px; margin:0 auto; }
.cal-h{ display:flex; align-items:center; gap:8px; padding:6px 0 14px; }
.cal-h b{ font-family:var(--d); font-size:17px; font-weight:650; letter-spacing:-.3px;
  text-transform:capitalize; min-width:150px; }
.cal-n{ appearance:none; border:1px solid var(--line); background:var(--paper);
  width:28px; height:28px; border-radius:7px; cursor:pointer; color:var(--ink-2);
  font-size:15px; line-height:1; }
.cal-n:hover{ background:var(--sunken); color:var(--ink); }
.cal-auj{ appearance:none; border:1px solid var(--line); background:var(--paper);
  height:28px; padding:0 11px; border-radius:7px; cursor:pointer; font:500 12px var(--f);
  color:var(--ink-2); }
.cal-auj:hover{ background:var(--sunken); color:var(--ink); }
.cal-c{ font-size:12px; color:var(--ink-3); }
.cal-j{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; margin-bottom:1px; }
.cal-j span{ font:600 10px var(--f); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-4); padding:0 8px 6px; }
.cal-g{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cj{ background:var(--paper); min-height:104px; padding:6px 6px 8px;
  display:flex; flex-direction:column; gap:3px; }
.cj.hors{ background:var(--sunken); }
.cj.hors .cj-h span{ color:var(--ink-4); }
.cj.auj{ background:var(--brand-tint); }
.cj-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.cj-h span{ font:600 11.5px var(--f); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.cj.auj .cj-h span{ color:var(--brand-deep); }
.cj-h i{ font-style:normal; font-size:9.5px; color:var(--ink-4); }
.cev{
  appearance:none; border:0; text-align:left; cursor:pointer; width:100%;
  background:var(--sunken); border-left:3px solid var(--c, var(--brand));
  border-radius:4px; padding:3px 6px; font:500 11px var(--f); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cev:hover{ background:var(--line-3); }
.cplus{ font-size:10px; color:var(--ink-4); padding-left:4px; }
@media (max-width:820px){ .cj{ min-height:74px; } .cev{ font-size:10px; } }

/* « Afficher la suite » : un groupe de trois cents lignes ne se fabrique
   pas en entier pour un écran qui en montre vingt. */
.mb tr.suite td{ background:var(--paper); border-bottom:1px solid var(--line-3); padding:0; }
.mb tr.suite td.first .cell{ padding:0; }
.mb tr.suite td.first::before{ display:none; }
.voirplus{
  appearance:none; border:0; background:none; cursor:pointer; width:100%;
  padding:9px 13px; text-align:left; font:500 12px var(--f); color:var(--brand);
}
.voirplus:hover{ background:var(--brand-tint); }

/* Une pastille de rattachement s'ouvre : elle mène à la fiche liée. */
button.rchip.go{
  appearance:none; border:0; font:inherit; cursor:pointer;
  transition:background .12s, color .12s;
}
button.rchip.go:hover{ background:var(--brand-tint); color:var(--brand-deep); }
button.rchip.go:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }

/* ═══ LE COCKPIT ═════════════════════════════════════════════════
   Une seule question : est-ce que le mois est bon. Chaque bloc a sa
   forme et sa couleur — douze cartes blanches identiques ne se lisent
   pas, on les survole. Les trois premières portent le fond coloré :
   ce qui rentre en bleu, ce qui sort en ambre, ce qui reste en vert. */
.ckp{ padding:28px 32px 70px; max-width:1400px; margin:0 auto; }
.ckp-h{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.ckp-h h1{ font-family:var(--d); font-size:27px; font-weight:650; letter-spacing:-.5px;
  margin:0 0 4px; color:var(--ink); }
.ckp-h p{ margin:0; font-size:13.5px; color:var(--ink-3); }
.ckp-per{ display:flex; gap:2px; background:var(--sunken); padding:3px; border-radius:9px; }
.ckp-per span{ font:500 12px var(--f); color:var(--ink-3); padding:5px 12px; border-radius:7px; }
.ckp-per span.on{ background:var(--paper); color:var(--ink); font-weight:600;
  box-shadow:0 1px 3px rgba(16,20,38,.08); }

.ckp-g{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
.c1{ grid-column:span 5 } .c2{ grid-column:span 4 } .c3{ grid-column:span 3 }
.c4{ grid-column:span 8 } .c5{ grid-column:span 4 }
.c6{ grid-column:span 5 } .c7{ grid-column:span 7 }
@media (max-width:1200px){ .c1,.c2,.c3,.c4,.c5,.c6,.c7{ grid-column:span 12 } }

.ck{ border-radius:14px; display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); }
.ck-h{ display:flex; align-items:center; gap:9px; padding:14px 18px 10px; }
.ck-h b{ font:600 11px var(--f); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); }
.ck-t{ font:600 10px var(--f); letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-4); background:var(--sunken); padding:2px 8px; border-radius:20px; }
.ck-b{ padding:2px 18px 16px; flex:1; }
.ck-f{ padding:11px 18px; border-top:1px solid var(--line-3); font-size:12.5px;
  color:var(--ink-3); }
.ck-f b{ color:var(--ink); font-weight:650; }

/* Les trois cartes de tête : fond plein, texte clair. */
.ck-ca{ background:linear-gradient(150deg,#0073ea,#0a4fa8); border:0; color:#fff; }
.ck-dep{ background:linear-gradient(150deg,#c26a12,#8f4a08); border:0; color:#fff; }
.ck-marge{ background:linear-gradient(150deg,#0e8f57,#0a6b41); border:0; color:#fff; }
.ck-ca .ck-h b, .ck-dep .ck-h b, .ck-marge .ck-h b{ color:rgba(255,255,255,.72); }
.ck-ca .ck-t, .ck-dep .ck-t, .ck-marge .ck-t{ background:rgba(255,255,255,.16); color:#fff; }
.ck-ca .ck-f, .ck-dep .ck-f, .ck-marge .ck-f{ border-top-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.8); }
.ck-ca .ck-f b, .ck-dep .ck-f b, .ck-marge .ck-f b{ color:#fff; }
.ck-ca .ck-b, .ck-dep .ck-b, .ck-marge .ck-b{ display:flex; align-items:center;
  justify-content:space-between; gap:16px; }

.kx{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.kx-e{ font:600 10px var(--f); letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.6); }
.ck:not(.ck-ca):not(.ck-dep):not(.ck-marge) .kx-e{ color:var(--ink-4); }
.kx-v{ font-family:var(--d); font-size:34px; font-weight:650; letter-spacing:-1px;
  font-variant-numeric:tabular-nums; line-height:1.1; }
.kx-v .dash{ opacity:.5; }
.kx-d{ display:inline-flex; align-items:baseline; gap:6px; font:600 12px var(--f);
  margin-top:3px; }
.kx-d i{ font-style:normal; font-weight:400; font-size:11px; opacity:.7; }
.kx-d.up{ color:#7ee2b8; } .kx-d.down{ color:#ffc7a8; }
.ck:not(.ck-ca):not(.ck-dep):not(.ck-marge) .kx-d.up{ color:var(--ok); }
.ck:not(.ck-ca):not(.ck-dep):not(.ck-marge) .kx-d.down{ color:var(--mdy-red); }
.kx-s{ font-size:12px; opacity:.78; margin-top:4px; }

.ck-side{ display:flex; flex-direction:column; align-items:center; gap:8px;
  flex:0 0 auto; text-align:center; font-size:11.5px; opacity:.85; max-width:130px; }
.ck-side b{ font-weight:650; }
.ck-add{ appearance:none; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12);
  color:#fff; font:600 12px var(--f); padding:8px 13px; border-radius:9px; cursor:pointer; }
.ck-add:hover{ background:rgba(255,255,255,.22); }

/* Les barres des douze mois : trois séries, une échelle, un objectif. */
.bx{ display:grid; grid-template-columns:repeat(12,1fr); gap:7px; align-items:end;
  padding-top:8px; }
.bx-c{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; }
.bx-p{ position:relative; width:100%; height:132px; background:var(--sunken);
  border-radius:6px; display:flex; align-items:flex-end; gap:2px; padding:0 3px; overflow:hidden; }
.bx-p i{ flex:1; border-radius:3px 3px 0 0; min-height:2px; }
.bx-p i.a{ background:#0073ea; } .bx-p i.b{ background:#00c875; } .bx-p i.c{ background:#fdab3d; }
.bx-p u{ position:absolute; left:0; right:0; height:2px; background:var(--ink-4);
  text-decoration:none; opacity:.55; }
.bx-l{ font-size:10px; color:var(--ink-4); }
.lg{ display:flex; flex-wrap:wrap; gap:14px; padding-top:12px; font-size:11.5px; color:var(--ink-3); }
.lg span::before{ content:''; display:inline-block; width:9px; height:9px; border-radius:3px;
  margin-right:6px; vertical-align:-1px; }
.lg-a::before{ background:#0073ea } .lg-b::before{ background:#00c875 }
.lg-c::before{ background:#fdab3d } .lg-o::before{ background:var(--ink-4) }

/* Où part l'argent : une ligne par poste, la barre dit la part. */
.dc{ display:flex; flex-direction:column; gap:11px; padding-top:6px; }
.dc-l{ display:grid; grid-template-columns:9px 1fr 90px auto; align-items:center; gap:10px; }
.dc-p{ width:9px; height:9px; border-radius:3px; }
.dc-n{ font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.dc-b{ height:7px; background:var(--sunken); border-radius:4px; overflow:hidden; }
.dc-b i{ display:block; height:100%; border-radius:4px; }
.dc-v{ font:650 12.5px var(--f); color:var(--ink); font-variant-numeric:tabular-nums; }
.ck-vide{ padding:22px 0; font-size:13px; color:var(--ink-3); text-align:center; }
.ck-vide span{ font-size:12px; color:var(--ink-4); }

/* Le pipeline et l'entonnoir : mêmes barres, langages différents. */
.pp{ display:flex; flex-direction:column; gap:9px; padding-top:14px; }
.pp-l{ display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:10px; }
.pp-n{ font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.pp-b{ height:8px; background:var(--sunken); border-radius:5px; overflow:hidden; }
.pp-b i{ display:block; height:100%; background:linear-gradient(90deg,#579bfc,#0073ea);
  border-radius:5px; }
.pp-v{ font:650 12px var(--f); color:var(--ink); font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.pp-v em{ font-style:normal; font-weight:400; color:var(--ink-4); margin-left:6px; }

.fu{ display:flex; flex-direction:column; gap:13px; padding-top:8px; }
.fu-t{ display:flex; align-items:baseline; gap:9px; margin-bottom:5px; }
.fu-t span{ font-size:12.5px; color:var(--ink-2); flex:1; }
.fu-t b{ font:650 15px var(--d); color:var(--ink); font-variant-numeric:tabular-nums; }
.fu-t em{ font-style:normal; font-size:11.5px; color:var(--ink-4); }
.fu-b{ height:10px; background:var(--sunken); border-radius:6px; overflow:hidden; }
.fu-b i{ display:block; height:100%; border-radius:6px; }
.lg-n{ color:var(--ink-4); }
.lg-n::before{ display:none !important; }

/* ═══ QUI VOIT QUOI ══════════════════════════════════════════════
   Une ligne par personne, une colonne par espace, une pastille par
   case. Trois mots, pas de jargon : rien, lire, modifier. */
.acc{ padding:22px 32px 70px; max-width:1500px; margin:0 auto; }
.acc-i{ font-size:13.5px; color:var(--ink-3); max-width:78ch; line-height:1.6;
  margin:0 0 20px; }
.acc-i b{ color:var(--ink); }
.acc-w{ overflow-x:auto; border:1px solid var(--line); border-radius:12px;
  background:var(--paper); }
.acc-t{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.acc-t th{ text-align:center; font:600 10px var(--f); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-4); background:var(--sunken);
  padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:bottom; }
.acc-t th span{ display:block; max-width:92px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; margin:0 auto; }
.acc-t th.acc-p{ text-align:left; }
.acc-t td{ border-bottom:1px solid var(--line-3); padding:9px 8px; }
.acc-t tr:last-child td{ border-bottom:0; }
.acc-p{ position:sticky; left:0; background:var(--paper); z-index:2;
  min-width:230px; border-right:1px solid var(--line); }
.acc-t th.acc-p{ background:var(--sunken); z-index:3; }
.acc-p{ display:table-cell; }
.acc-t td.acc-p{ display:flex; align-items:center; gap:10px; }
.acc-av{ width:30px; height:30px; border-radius:50%; flex:0 0 30px; overflow:hidden;
  background:var(--mdy-purple); color:#fff; display:grid; place-items:center;
  font:700 11px var(--f); }
.acc-av img{ width:100%; height:100%; object-fit:cover; }
.acc-n{ display:flex; flex-direction:column; min-width:0; }
.acc-n b{ font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.acc-n i{ font-style:normal; font-size:11.5px; color:var(--ink-4); }
.acc-c{ text-align:center; }

.pz{
  appearance:none; border:0; cursor:pointer; font:600 11px var(--f);
  padding:5px 11px; border-radius:20px; min-width:64px; display:inline-block;
  transition:filter .12s;
}
.pz:hover{ filter:brightness(.94); }
.pz.none{ background:var(--sunken); color:var(--ink-4); }
.pz.view{ background:#e5f4ff; color:#0060b9; }
.pz.edit{ background:#e6f9f1; color:#037f4c; }
.pz.admin{ background:#f3e8ff; color:#7a3fb8; cursor:default; }
i.pz{ min-width:0; width:22px; height:11px; padding:0; border-radius:6px;
  flex:0 0 22px; }

.acc-x{ width:44px; text-align:right; }
.acc-m{ appearance:none; border:0; background:none; cursor:pointer; color:var(--ink-4);
  font-size:15px; padding:2px 7px; border-radius:6px; }
.acc-m:hover{ background:var(--sunken); color:var(--ink); }

.acc-e td{ background:var(--sunken); font-size:12px; color:var(--ink-3); padding:8px 14px; }
.acc-e b{ color:var(--ink-4); font:600 10px var(--f); letter-spacing:.06em;
  text-transform:uppercase; margin-right:8px; }
.ex{ display:inline-flex; align-items:center; gap:6px; background:var(--paper);
  border:1px solid var(--line); border-radius:20px; padding:2px 4px 2px 10px;
  margin-right:6px; font-size:12px; }
.ex.none{ color:var(--ink-3); } .ex.view{ color:#0060b9; } .ex.edit{ color:#037f4c; }
.ex button{ appearance:none; border:0; background:none; cursor:pointer; color:var(--ink-4);
  font-size:11px; padding:2px 5px; border-radius:50%; }
.ex button:hover{ background:var(--sunken); color:var(--ink); }

.acc-l{ display:flex; flex-wrap:wrap; gap:20px; margin-top:16px; font-size:12px;
  color:var(--ink-3); }
.acc-l span{ display:inline-flex; align-items:center; gap:7px; }
.acc-off{ margin-top:22px; font-size:12.5px; color:var(--ink-3); }
.acc-off b{ display:block; font:600 10px var(--f); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-4); margin-bottom:7px; }
.acc-off span{ display:inline-flex; align-items:center; gap:8px; background:var(--paper);
  border:1px solid var(--line); border-radius:20px; padding:4px 6px 4px 12px; margin-right:8px; }
.acc-off button{ appearance:none; border:0; background:var(--sunken); cursor:pointer;
  font:500 11px var(--f); color:var(--brand); padding:3px 9px; border-radius:20px; }
.acc-d{ margin-top:26px; }
.acc-d summary{ cursor:pointer; font:600 13px var(--f); color:var(--ink-2); }
.acc-b{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.acc-b .inp{ width:auto; min-width:170px; }


/* ═══ LE KANBAN ══════════════════════════════════════════════════
   Une colonne par étape, dans l'ordre du travail. Les vides se replient
   sur une bande étroite : douze colonnes dont sept vides, et on ne
   voyait plus celles qui portent le travail. */
.kb{ padding:18px 26px 26px; gap:14px; }
.kcol{
  flex:0 0 296px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper);
  box-shadow:0 1px 2px rgba(16,20,38,.04);
}
.kcol::before{ content:''; display:block; height:3px; background:var(--kc, var(--line)); }
.kcol-h{ padding:12px 14px 9px; border-bottom:0; }
.kcol-h b{ font-size:13px; font-weight:650; }
.kcol-h .kn{ font:600 11px var(--f); color:var(--ink-3); background:var(--sunken);
  padding:1px 8px; border-radius:20px; }
.kcol-s{ padding:0 14px 10px; display:flex; align-items:baseline; gap:7px;
  border-bottom:1px solid var(--line-3); }
.kcol-s b{ font-family:var(--d); font-size:16px; font-weight:650; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.kcol-s i{ font-style:normal; font-size:11px; color:var(--ink-4); }
.kcol-b{ padding:10px; gap:8px; background:var(--sunken); }

.kcard{ border-radius:9px; padding:11px 12px; box-shadow:0 1px 2px rgba(16,20,38,.05); }
.kcard:hover{ border-color:var(--brand-line); transform:none;
  box-shadow:0 3px 10px -4px rgba(16,20,38,.18); }
.kcard b{ font-size:13px; line-height:1.35; }
.ke{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf{ display:flex; align-items:center; gap:7px; margin-top:9px; }
.ksp{ flex:1; }
.knt{ font-size:10.5px; color:var(--brand); white-space:nowrap; }
.kcard .kd{ margin-top:0; font-size:11px; white-space:nowrap; }
.kcard .kd.futur{ color:var(--brand); font-weight:600; }
.kcard .kd.vieux{ color:var(--ink-4); }
.kcard .amt{ font:650 12px var(--f); color:var(--ink); font-variant-numeric:tabular-nums;
  white-space:nowrap; }

.kplus{ appearance:none; border:1px dashed var(--line-strong); background:none;
  cursor:pointer; padding:8px; border-radius:8px; font:500 12px var(--f);
  color:var(--ink-3); width:100%; }
.kplus:hover{ background:var(--paper); color:var(--ink); }

/* Une étape sans affaire : une bande verticale, pas une colonne vide. */
.kcol.kvide{
  flex:0 0 42px; display:flex; flex-direction:column; align-items:center;
  gap:10px; padding:12px 0; background:var(--sunken); border-style:dashed;
}
.kcol.kvide b{ writing-mode:vertical-rl; font-size:11.5px; font-weight:600;
  color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-height:220px; }
.kcol.kvide .kdot{ width:7px; height:7px; border-radius:50%; flex:0 0 7px; opacity:.6; }

/* ═══ LE MODE D'EMPLOI D'UN DOSSIER ══════════════════════════════
   Un texte qu'on lit une fois en arrivant et qu'on rouvre quand on
   doute. Colonne étroite, hiérarchie nette, aucune décoration : c'est
   de la documentation, pas une plaquette. */
.pro{ padding:32px 32px 80px; max-width:820px; margin:0 auto; }
.pro-h{ margin-bottom:34px; }
.pro-h h1{ font-family:var(--d); font-size:29px; font-weight:650; letter-spacing:-.6px;
  margin:0 0 10px; color:var(--ink); }
.pro-h p{ margin:0; font-size:15px; line-height:1.65; color:var(--ink-2); }
.pro-s{ margin-bottom:38px; }
.pro-s h2{ font:600 11px var(--f); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 16px; padding-bottom:9px;
  border-bottom:1px solid var(--line); }

.pro-r{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:760px){ .pro-r{ grid-template-columns:1fr; } }
.pro-rc{ background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:10px; padding:14px 16px; }
.pro-rc b{ display:block; font-size:13.5px; font-weight:650; color:var(--ink); margin-bottom:5px; }
.pro-rc span{ font-size:13px; color:var(--ink-2); line-height:1.6; }

.pro-d{ margin:0; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.pro-d dt{ background:var(--sunken); padding:11px 16px 4px; font-size:12.5px;
  font-weight:650; color:var(--ink); }
.pro-d dd{ background:var(--sunken); margin:0; padding:0 16px 12px; font-size:13px;
  color:var(--ink-2); line-height:1.6; }

.pro-p{ margin:0; padding:0; list-style:none; counter-reset:pp; }
.pro-p li{ counter-increment:pp; position:relative; padding:0 0 20px 44px; }
.pro-p li::before{ content:counter(pp); position:absolute; left:0; top:0;
  width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand); color:#fff; font:650 12px var(--f); }
.pro-p li::after{ content:''; position:absolute; left:13px; top:31px; bottom:4px;
  width:1px; background:var(--line); }
.pro-p li:last-child{ padding-bottom:0; }
.pro-p li:last-child::after{ display:none; }
.pro-p b{ display:block; font-size:14px; font-weight:650; color:var(--ink);
  margin-bottom:3px; padding-top:4px; }
.pro-p span{ font-size:13px; color:var(--ink-2); line-height:1.6; }

.pro-x{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.pro-x li{ background:#fffaf3; border:1px solid #f0dcc2; border-radius:10px; padding:13px 16px; }
.pro-x b{ display:block; font-size:13.5px; font-weight:650; color:#9a6414; margin-bottom:4px; }
.pro-x span{ font-size:13px; color:var(--ink-2); line-height:1.6; }

.pro-o{ background:linear-gradient(150deg,#0073ea,#0a4fa8); color:#fff;
  border-radius:14px; padding:24px 26px; }
.pro-o h2{ font:600 11px var(--f); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin:0 0 12px; border:0; padding:0; }
.pro-o p{ margin:0; font-size:14.5px; line-height:1.7; }

.nrow.nproc .gl{ color:var(--brand); }
.nrow.nproc .nm{ color:var(--ink-3); font-size:12.5px; }
.nrow.nproc.sel .nm{ color:var(--brand); }

/* Les écrans qui ne sont pas des tableaux défilent d'eux-mêmes : #view
   a été passé en « overflow:hidden » pour que l'en-tête d'un tableau
   reste figé, et ces pages-là se retrouvaient coupées à la hauteur de
   l'écran, sans aucun moyen de lire la suite. */
.pro, .ckp, .acc{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
}
.pro::-webkit-scrollbar,
.ckp::-webkit-scrollbar, .acc::-webkit-scrollbar{ width:10px; }
.pro::-webkit-scrollbar-thumb,
.ckp::-webkit-scrollbar-thumb, .acc::-webkit-scrollbar-thumb{
  background:var(--line); border-radius:6px; border:3px solid var(--ground);
}

/* ═══ SOP / PROCESS ══════════════════════════════════════════════
   Le mode d'emploi a quitté le bas d'un dossier pour prendre la
   première ligne de la barre : c'est la page qu'on ouvre en arrivant.
   Il porte maintenant tous les scénarios, donc il lui faut la largeur
   d'un document, pas celle d'une colonne de texte. */
.pro.prosop{ max-width:none; padding:0 0 60px; }
.pro.prosop .gu{ margin-top:28px; }
.pro.prosop .gu-tabs{
  position:sticky; top:0; z-index:4; background:var(--ground);
  padding-top:4px; margin-bottom:26px;
}

/* Les liens d'un canal : la landing, le compte publicitaire, le support
   commercial. Un mode d'emploi qui parle de « la landing » sans donner
   son adresse oblige chacun à venir la demander. */
.gu-lnk{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.gu-l{
  display:flex; flex-direction:column; gap:4px; text-decoration:none;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; transition:border-color .12s, box-shadow .12s, transform .12s;
}
.gu-l:hover{ border-color:var(--brand); box-shadow:0 3px 12px rgba(15,30,60,.07);
  transform:translateY(-1px); }
.gu-l b{ font-size:13px; font-weight:650; color:var(--ink); }
.gu-l span{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.gu-l em{ font-style:normal; font-size:11.5px; color:var(--brand-deep);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.gu-l.off{ border-style:dashed; opacity:.72; }
.gu-l.off em{ color:var(--ink-4); }

/* L'objectif, en fin de parcours : le seul bloc coloré de la page. */
.gu-obj{ background:linear-gradient(150deg,#0073ea,#0a4fa8); color:#fff;
  border-radius:14px; padding:24px 26px; }
.gu-obj h4{ color:rgba(255,255,255,.72); margin:0 0 12px; }
.gu-obj p{ margin:0; font-size:14.5px; line-height:1.7; max-width:80ch; }

/* Le rappel posé sur l'accueil d'un espace : une ligne, pas un pavé. */
.sopban{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  margin:22px 0 6px; padding:16px 20px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  font-family:var(--f); transition:border-color .12s, box-shadow .12s;
}
.sopban:hover{ border-color:var(--brand); box-shadow:0 4px 16px rgba(15,30,60,.08); }
.sb-i{ display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px;
  border-radius:10px; background:var(--brand-tint); color:var(--brand-deep); font-size:17px; }
.sb-t{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.sb-t b{ font-size:14px; font-weight:650; color:var(--ink); }
.sb-t span{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.sb-g{ font-size:12.5px; font-weight:600; color:var(--brand-deep); white-space:nowrap; }

/* ═══ NOTRE STACK ════════════════════════════════════════════════
   Une carte par outil, rangée par famille. Le logo vient du domaine :
   on reconnaît un outil à son signe avant d'avoir lu son nom. */
.pro.stackx{ max-width:1080px; }
.stk-k{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 34px; }
.stk-kc{ background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:16px 18px; }
.stk-kc b{ display:block; font-family:var(--d); font-size:26px; font-weight:700;
  letter-spacing:-.9px; color:var(--ink); line-height:1.1; }
.stk-kc span{ font-size:11.5px; color:var(--ink-4); }
.stk-kc.eur{ background:linear-gradient(150deg,#0073ea,#0a4fa8); border-color:transparent; }
.stk-kc.eur b{ color:#fff; }
.stk-kc.eur span{ color:rgba(255,255,255,.72); }

.stk-s{ margin:0 0 32px; }
.stk-s h2{ display:flex; align-items:center; gap:9px;
  font:600 11px var(--f); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.stk-s h2 em{ font-style:normal; font-size:10.5px; letter-spacing:0; color:var(--ink-4);
  background:var(--sunken); border-radius:9px; padding:1px 7px; }
.stk-g{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.stk-c{ position:relative; display:flex; gap:14px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:15px 16px;
  transition:border-color .12s, box-shadow .12s; }
.stk-c:hover{ border-color:var(--brand); box-shadow:0 4px 14px rgba(15,30,60,.07); }
.stk-c.sort{ background:#fffaf3; border-color:#f0dcc2; }
.stk-c.off{ opacity:.55; }
.stk-l{ flex:0 0 40px; width:40px; height:40px; border-radius:10px; overflow:hidden;
  display:grid; place-items:center; background:var(--sunken); border:1px solid var(--line-2); }
.stk-l img{ width:26px; height:26px; object-fit:contain; }
.stk-l i{ font-style:normal; font-weight:700; font-size:16px; color:var(--ink-3); }
.stk-b{ flex:1; min-width:0; }
.stk-n{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:650;
  color:var(--ink); margin-bottom:4px; }
.stk-e{ font-style:normal; font:600 9.5px var(--f); letter-spacing:.06em; text-transform:uppercase;
  background:#f5e2c6; color:#9a6414; border-radius:8px; padding:2px 7px; }
.stk-c p{ margin:0 0 8px; font-size:12.5px; color:var(--ink-2); line-height:1.55; }
.stk-m{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11.5px; }
.stk-m span{ color:var(--ink-4); }
.stk-m b{ color:var(--brand-deep); font-weight:650; }
.stk-o{ position:absolute; right:10px; top:10px; width:24px; height:24px; border-radius:6px;
  display:grid; place-items:center; color:var(--ink-4); text-decoration:none; font-size:13px;
  opacity:0; transition:.12s; }
.stk-c:hover .stk-o{ opacity:1; }
.stk-o:hover{ background:var(--brand-tint); color:var(--brand-deep); }

/* Les bandes de la barre de gauche : un titre, parfois une phrase qui
   dit à quoi sert ce qu'elles contiennent. */
.navaide{ padding:0 12px 7px 30px; font-size:11px; line-height:1.45; color:var(--ink-4); }
.nav.tight .navaide{ display:none; }
.nrow.nform .gl{ opacity:.75; }
.nout{ margin-left:auto; font-size:11px; color:var(--ink-4); opacity:0; transition:opacity .12s; }
.nrow.nform:hover .nout{ opacity:1; }
/* Un emoji tient plus de place qu'un glyphe de texte : sa case est
   un peu plus large, et il garde sa taille au lieu de rétrécir. */
.nrow .gl.emo{ flex:0 0 17px; font-size:13px; color:inherit; }

/* ═══ LES RÉPONSES À UN FORMULAIRE ═══════════════════════════════
   Une réponse se lit comme une copie : la question en petit, ce que la
   personne a écrit dessous, en grand. À gauche, qui a répondu. */
.pro.repx{ max-width:1180px; }

.rep-l{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--sunken); border:1px solid var(--line-2); border-radius:11px;
  padding:12px 14px; margin:0 0 22px; }
.rl-t{ font:600 10.5px var(--f); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); }
.rep-l code{ flex:1; min-width:220px; font:500 12.5px var(--f); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:7px 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rep-l .btn{ text-decoration:none; }

.rep-k{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:0 0 26px; }
.rkn{ background:linear-gradient(150deg,#0073ea,#0a4fa8); color:#fff;
  border-radius:14px; padding:16px 18px; }
.rkn:nth-child(2){ background:linear-gradient(150deg,#037f4c,#0a6b45); }
.rkn b{ display:block; font-family:var(--d); font-size:32px; font-weight:700;
  letter-spacing:-1.4px; line-height:1; }
.rkn b em{ font-style:normal; font-size:15px; font-weight:600; opacity:.6; margin-left:2px; }
.rkn span{ display:block; font-size:12.5px; line-height:1.45; margin:7px 0 3px; color:rgba(255,255,255,.9); }
.rkn i{ font-style:normal; font-size:11px; color:rgba(255,255,255,.6); }

.rep-g{ display:grid; grid-template-columns:262px minmax(0,1fr); gap:20px; align-items:start; }
@media (max-width:900px){ .rep-g{ grid-template-columns:1fr; } }

.rep-a{ position:sticky; top:0; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:8px; }
.ra-t{ font:600 10.5px var(--f); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-4); padding:8px 10px 10px; }
.ra-i{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 10px; border-radius:9px; background:none; border:0; cursor:pointer;
  font-family:var(--f); transition:background .12s; }
.ra-i:hover{ background:var(--sunken); }
.ra-i.on{ background:var(--brand-tint); }
.ra-av{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-deep); color:#fff; font:600 11px var(--f); }
.ra-n{ min-width:0; display:flex; flex-direction:column; }
.ra-n b{ font-size:13px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ra-n span{ font-size:11px; color:var(--ink-4); }
.ra-i.on .ra-n b{ color:var(--brand-deep); }

.rep-c{ background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:24px 28px 8px; min-width:0; }
.rc-h{ display:flex; align-items:center; gap:13px; padding-bottom:20px;
  border-bottom:1px solid var(--line); margin-bottom:6px; }
.rc-av{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-deep); color:#fff; font:600 14px var(--f); }
.rc-t b{ display:block; font-family:var(--d); font-size:19px; font-weight:650;
  letter-spacing:-.4px; color:var(--ink); }
.rc-t span{ font-size:12px; color:var(--ink-4); }

.rc-s{ padding:22px 0 4px; }
.rc-s+.rc-s{ border-top:1px solid var(--line-3); }
.rc-s h3{ font:600 10.5px var(--f); letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-deep); margin:0 0 16px; }
.rc-q{ margin:0 0 20px; }
.rq{ display:block; font-size:12px; font-weight:600; color:var(--ink-3);
  line-height:1.45; margin-bottom:6px; }
.rr{ margin:0; font-size:14px; line-height:1.68; color:var(--ink);
  white-space:pre-wrap; max-width:78ch; }
.rc-q.num{ display:flex; align-items:center; gap:16px; }
.rc-q.num .rq{ flex:1; margin:0; }
.rn{ flex:0 0 auto; font-family:var(--d); font-size:26px; font-weight:700; letter-spacing:-1px;
  color:var(--brand-deep); }
.rn em{ font-style:normal; font-size:13px; font-weight:600; color:var(--ink-4); }
.ra-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ra-chips em{ font-style:normal; font-size:12.5px; font-weight:500; color:var(--ink);
  background:var(--sunken); border:1px solid var(--line); border-radius:8px; padding:4px 11px; }

.rc-vide{ margin:8px 0 22px; padding:14px 16px; border-radius:11px;
  background:var(--sunken); border:1px solid var(--line-2); }
.rc-vide b{ display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:4px; }
.rc-vide span{ font-size:11.5px; color:var(--ink-4); line-height:1.55; }

/* ═══ « COMMENT CRÉER TON COMPTE » ═══════════════════════════════
   Un outil sans compte ne sert à rien. La fiche s'ouvre au clic sur
   l'outil, tient en trois pas, et se ferme. */
.stk-c.cliq{ cursor:pointer; }
.stk-c.cliq:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.stk-c.ouv{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }
.stk-p{ display:block; margin-top:9px; font-size:11.5px; font-weight:600;
  color:var(--brand-deep); opacity:0; transition:opacity .12s; }
.stk-c.cliq:hover .stk-p, .stk-c.ouv .stk-p{ opacity:1; }

.stk-fiche{ position:fixed; inset:0; z-index:80; }
.sf-scrim{ position:absolute; inset:0; background:rgba(19,19,19,.36);
  opacity:0; transition:opacity .18s; }
.stk-fiche.on .sf-scrim{ opacity:1; }
.sf-p2{ position:absolute; top:0; right:0; bottom:0; width:min(470px,100%);
  display:flex; flex-direction:column; background:var(--paper);
  border-left:1px solid var(--line); box-shadow:-14px 0 44px -22px rgba(15,30,60,.5);
  transform:translateX(100%); transition:transform .2s cubic-bezier(.2,.8,.2,1); }
.stk-fiche.on .sf-p2{ transform:none; }
.sf-p2 .sf-s{ flex:1; overflow-y:auto; }
.sf-h{ flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:18px 22px;
  border-bottom:1px solid var(--line); background:var(--brand-tint); }
.sf-l{ flex:0 0 40px; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line); overflow:hidden; }
.sf-l img{ width:26px; height:26px; object-fit:contain; }
.sf-l i{ font-style:normal; font-weight:700; font-size:16px; color:var(--ink-3); }
.sf-t{ flex:1; min-width:0; }
.sf-t b{ display:block; font-family:var(--d); font-size:18px; font-weight:650;
  letter-spacing:-.4px; color:var(--ink); }
.sf-t span{ font-size:12px; color:var(--brand-deep); }
.sf-x{ flex:0 0 auto; font:600 12.5px var(--f); color:var(--ink-2); cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:7px 14px;
  transition:border-color .12s, color .12s; }
.sf-x:hover{ border-color:var(--ink-3); color:var(--ink); }

.sf-s{ list-style:none; counter-reset:sf; margin:0; padding:20px 22px 6px; }
.sf-s li{ counter-increment:sf; position:relative; padding:0 0 20px 40px; }
.sf-s li::before{ content:counter(sf); position:absolute; left:0; top:0;
  width:25px; height:25px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand); color:#fff; font:650 12px var(--f); }
.sf-s li::after{ content:''; position:absolute; left:12px; top:29px; bottom:4px;
  width:1px; background:var(--line); }
.sf-s li:last-child{ padding-bottom:6px; }
.sf-s li:last-child::after{ display:none; }
.sf-s li>b{ display:block; font-size:14px; font-weight:650; color:var(--ink);
  margin:3px 0 9px; }
.sf-b{ display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:var(--brand); color:#fff; border-radius:9px; padding:10px 17px;
  font:600 13.5px var(--f); transition:background .12s, transform .12s; }
.sf-b:hover{ background:var(--brand-deep); transform:translateY(-1px); text-decoration:none; }
.sf-b.ghost{ background:var(--paper); color:var(--brand-deep); border:1px solid var(--brand-line); }
.sf-b.ghost:hover{ background:var(--brand-tint); }
.sf-n{ display:block; margin-top:8px; font-size:11.5px; color:var(--ink-4); }
.sf-p{ margin:0; font-size:13.5px; line-height:1.62; color:var(--ink-2); max-width:74ch; }
.sf-vide{ display:block; font-size:12.5px; line-height:1.6; color:#9a6414;
  background:#fffaf3; border:1px solid #f0dcc2; border-radius:9px; padding:11px 14px; max-width:64ch; }
.sf-f{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:15px 22px;
  border-top:1px solid var(--line); background:var(--sunken); }
.sf-o{ flex:1; font-size:12.5px; font-weight:600; color:var(--brand-deep); text-decoration:none; }

/* ═══ LE « i » QUI EXPLIQUE UN CHAMP ═════════════════════════════
   Personne ne sait de tête ce qu'est un utm_medium, et un champ qu'on
   ne comprend pas est un champ mal rempli. Le « i » reste discret et
   ne prend la parole qu'au survol. */
.warn-box{ background:#fffaf3; border:1px solid #f0dcc2; border-radius:var(--r);
  padding:12px 14px; font-size:12.5px; line-height:1.55; color:var(--ink-2); }
.warn-box b{ color:#9a6414; }

.prop.pa dt{ display:flex; align-items:center; gap:5px; }
.infoi{
  flex:0 0 14px; width:14px; height:14px; border-radius:50%; padding:0;
  display:grid; place-items:center; cursor:help;
  background:var(--sunken); border:1px solid var(--line);
  font:700 9px/1 var(--f); font-style:italic; color:var(--ink-3);
  transition:background .12s, color .12s, border-color .12s;
}
.infoi:hover, .infoi:focus-visible{ background:var(--brand); border-color:var(--brand); color:#fff; }
/* La bulle vit à la racine de la page, pas dans la fiche : posée
   dans le panneau, elle était coupée à sa bordure droite. */
#aidebox{
  position:fixed; z-index:200; width:min(340px,78vw);
  padding:11px 13px; border-radius:10px;
  background:#1b1e27; color:#e9eaef;
  font:400 12px/1.55 var(--f); text-align:left;
  box-shadow:0 12px 32px -12px rgba(10,14,25,.6);
  opacity:0; visibility:hidden; transform:translateY(-3px);
  transition:opacity .14s, transform .14s, visibility .14s;
  pointer-events:none;
}
#aidebox.on{ opacity:1; visibility:visible; transform:none; }
.attrib-l{ margin:2px 0 12px; font-size:11.5px; line-height:1.5; color:var(--ink-4); }
.attrib-l b{ color:var(--ink-3); font-style:italic; }

/* ═══ LA FICHE CLIENT ════════════════════════════════════════════
   La première question n'est pas « quelles sont ses données » mais
   « qu'est-ce que je fais avec ce client ». Le bandeau y répond, et
   la couleur ne sert qu'à ça. */
.fnext{
  display:flex; align-items:center; gap:14px;
  margin:0 26px 18px; padding:14px 18px; border-radius:13px;
  background:#fffaf3; border:1px solid #f0dcc2;
}
.fn-i{ flex:0 0 34px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:#f5e2c6; color:#9a6414; font-size:15px; font-weight:700; }
.fn-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fn-t b{ font-size:14px; font-weight:650; color:var(--ink); }
.fn-t span{ font-size:12.5px; color:var(--ink-2); line-height:1.5; }
.fn-p{ flex:0 0 auto; font:600 12px var(--f); color:var(--ink-2); cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:6px 12px; }
.fn-p:hover{ border-color:var(--ink-3); color:var(--ink); }

.fnext.rdv{ background:var(--brand-tint); border-color:var(--brand-line); }
.fnext.rdv .fn-i{ background:#cce5ff; color:var(--brand-deep); }
.fnext.retard, .fnext.papiers, .fnext.perte{ background:#fdefec; border-color:#f5cfc7; }
.fnext.retard .fn-i, .fnext.papiers .fn-i, .fnext.perte .fn-i{ background:#f8dcd5; color:#8c2b1d; }
.fnext.tache, .fnext.champ{ background:var(--sunken); border-color:var(--line); }
.fnext.tache .fn-i, .fnext.champ .fn-i{ background:var(--line-3); color:var(--ink-2); }
.fnext.ok{ background:#effaf4; border-color:#cceadb; }
.fnext.ok .fn-i{ background:#d6f0e2; color:#136c46; }
.fnext.ok .fn-t b{ color:#136c46; }

.fnext-r{ margin:-8px 26px 18px; display:flex; flex-direction:column; gap:8px; }
.fnr{ padding:11px 16px; border-radius:11px; background:var(--sunken);
  border:1px solid var(--line-2); }
.fnr b{ display:block; font-size:13px; font-weight:650; color:var(--ink); margin-bottom:2px; }
.fnr span{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }

/* Ce qui manque : la liste, et pourquoi ça manque. */
.pan.pcompl.complet{ border-color:#cceadb; }
.pan.pcompl.urgent{ border-color:#f5cfc7; }
.cmq{ list-style:none; margin:10px 0 4px; padding:0; display:flex; flex-direction:column; gap:9px; }
.cmq li{ display:flex; flex-direction:column; gap:2px; padding-left:14px; position:relative; }
.cmq li::before{ content:''; position:absolute; left:0; top:6px; width:6px; height:6px;
  border-radius:50%; background:var(--signal); }
.cmq-n{ font-size:12.5px; font-weight:650; color:var(--ink); }
.cmq-p{ font-size:11.5px; color:var(--ink-4); line-height:1.45; }

/* Le parcours : chaque jalon, et les jours écoulés depuis le précédent. */
.fris{ list-style:none; counter-reset:fr; margin:6px 0 4px; padding:0; }
.fris li{ position:relative; padding:0 0 16px 22px; }
.fris li::before{ content:''; position:absolute; left:3px; top:5px; width:9px; height:9px;
  border-radius:50%; background:var(--brand); box-shadow:0 0 0 2px var(--paper); }
.fris li::after{ content:''; position:absolute; left:7px; top:16px; bottom:0; width:1px;
  background:var(--line); }
.fris li:last-child{ padding-bottom:2px; }
.fris li:last-child::after{ display:none; }
.fris li.futur::before{ background:var(--paper); box-shadow:0 0 0 2px var(--brand-line); }
.fris li b{ font-size:12.5px; font-weight:650; color:var(--ink); }
.fri-d{ display:inline-block; font-size:12px; color:var(--ink-2); }
.fris li b{ display:block; margin-bottom:1px; }
.fri-e{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--brand-deep);
  background:var(--brand-tint); border-radius:8px; padding:1px 6px; margin-left:6px; }
.fri-p{ display:block; font-size:11px; color:var(--ink-4); margin-top:2px; line-height:1.4; }

/* ═══ LA SOURCE, DANS L'EN-TÊTE ══════════════════════════════════
   La première question d'un commercial qui ouvre une fiche est « d'où
   il vient ». Elle était au troisième panneau d'une colonne qui
   défilait : elle est maintenant à côté du nom du client. */
.fsrc{
  display:flex; flex-direction:column; gap:1px; padding:7px 14px;
  border-radius:11px; background:var(--paper);
  border:1px solid var(--line); border-left:3px solid var(--sc,#6a7183);
  max-width:390px; min-width:0;
}
.fsrc i{ font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-4); }
.fsrc b{ font-size:14px; font-weight:650; color:var(--sc,var(--ink)); line-height:1.25; }
.fsrc span{ font-size:11.5px; color:var(--ink-2); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.fsrc.vide{ border-left-color:var(--alerte,#c0202b); }
.fsrc.vide b{ color:var(--alerte,#c0202b); }

/* Les quatre gestes, sur une ligne : le pavé « Enregistrer » prenait
   un quart de la colonne pour quatre boutons. */
.qacts-r{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  padding:12px 14px; border-bottom:1px solid var(--line); }
.qacts-r .qact{ display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 2px; border:1px solid var(--line); border-radius:9px; background:var(--paper);
  font:600 10.5px var(--f); color:var(--ink-2); cursor:pointer; transition:.12s; }
.qacts-r .qact i{ font-style:normal; font-size:13px; color:var(--ink-3); }
.qacts-r .qact:hover{ border-color:var(--brand); color:var(--brand-deep); background:var(--brand-tint); }
.qacts-r .qact:hover i{ color:var(--brand-deep); }
.qacts-r .qact:disabled{ opacity:.45; cursor:not-allowed; }

/* Les rendez-vous, numérotés, avec l'adresse entière. */
.rdvl{ padding:11px 0; border-bottom:1px solid var(--line-3); }
.rdvl:last-child{ border-bottom:0; }
.rdvl-h b{ font-size:12.5px; font-weight:650; color:var(--ink); }
.rdvl-h span{ display:block; font-size:11px; color:var(--ink-4); margin-top:1px; }
.rdvl-l{ display:block; margin-top:6px; font-size:11.5px; color:var(--brand-deep);
  word-break:break-all; line-height:1.4; }
.rdvl-f{ display:inline-block; margin-top:5px; font-size:11.5px; font-weight:600;
  color:var(--ink-2); }
.rdvl-f:hover{ color:var(--brand-deep); }

/* Le fil d'activité garde son ascenseur : c'est lui qu'on parcourt,
   pas la fiche entière. */
.atlb{ max-height:calc(100vh - 420px); min-height:220px; overflow-y:auto;
  overscroll-behavior:contain; }
.atlb::-webkit-scrollbar{ width:9px; }
.atlb::-webkit-scrollbar-thumb{ background:var(--line); border-radius:5px;
  border:2px solid var(--paper); }

/* ═══ LA FICHE : UN PEU D'AIR, ET UN PEU DE JEU ══════════════════
   L'en-tête prenait cent trente pixels de haut avant la première
   information utile. Il en prend cent : le nom, la source et les quatre
   chiffres tiennent toujours, mais on gagne une ligne de contenu.
   Et le cadre peut glisser légèrement — juste assez pour attraper le
   bas d'un panneau, sans jamais devenir une page qui défile. */
.rec.on{ overflow-y:auto; overscroll-behavior:contain; }
.rec.on::-webkit-scrollbar{ width:10px; }
.rec.on::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px;
  border:3px solid var(--ground); }
/* Le corps ne s'étire plus pour tenir pile dans le cadre : il dépasse
   d'une centaine de pixels, ce qui donne au cadre le jeu qu'on lui
   demande — assez pour attraper le bas d'un panneau, pas assez pour
   perdre le nom du client de vue. */
.rec-body{ flex:0 0 auto; padding-bottom:40px; }
.rec-col{ max-height:calc(100dvh - 232px); }

.fhero{ padding:13px 26px 11px; gap:16px; }
.fav{ width:44px; height:44px; border-radius:12px; font-size:16px; }
.fht h1{ font-size:20px; }
.fpills{ gap:5px; margin-top:3px; }
.fsrc{ padding:6px 13px; }
.fsrc b{ font-size:13px; }
.fk{ padding:9px 26px 8px; }
.fkv{ font-size:18px; }
.fkk{ font-size:9.5px; }
.fkn{ font-size:11px; }
.fnext{ margin:0 26px 14px; padding:11px 16px; }
.fn-i{ flex:0 0 30px; width:30px; height:30px; border-radius:9px; font-size:14px; }
.fn-t b{ font-size:13.5px; }
.fn-t span{ font-size:12px; }
@media(max-height:820px){
  .fhero{ padding:10px 26px 8px; }
  .fav{ width:38px; height:38px; border-radius:10px; font-size:14px; }
  .fht h1{ font-size:18px; }
  .fk{ padding:7px 26px 6px; }
  .fkv{ font-size:17px; }
  .rec-col{ max-height:calc(100dvh - 206px); }
}