/* ═══════════════════════════════════════════════════════════════
   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}
/* ── L'attente ────────────────────────────────────────────────────
   « Chargement… » en gris au milieu d'une page blanche donne l'impression
   que rien ne se passe. Une esquisse de la page qui arrive — un titre,
   quatre cartes, un bloc — dit la même chose et occupe l'œil. */
.load{padding:26px 32px;color:var(--ink-3);font-size:13.5px;max-width:1440px;margin:0 auto}
.sk{background:linear-gradient(90deg,var(--sunken) 25%,rgba(255,255,255,.55) 50%,var(--sunken) 75%);
 background-size:400% 100%;border-radius:8px;animation:skgliss 1.4s ease-in-out infinite}
@keyframes skgliss{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-t{height:28px;width:280px;margin-bottom:10px}
.sk-s{height:13px;width:min(560px,70%);margin-bottom:22px}
.sk-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.sk-c{height:96px}
.sk-b{height:220px}
.sk-m{display:block;margin-top:14px;font-size:12px;color:var(--ink-5)}
@media (prefers-reduced-motion:reduce){ .sk{animation:none} }
/* ── Quand il n'y a rien à montrer ─────────────────────────────────
   Un « Aucune donnée. » gris au milieu d'un cadre vide laisse le lecteur
   se demander s'il s'est trompé d'écran, si ça charge encore, ou s'il
   manque un réglage. Un état vide doit dire trois choses : ce qui est
   vide, pourquoi, et quoi faire. Le cadre lui donne la forme d'une
   réponse plutôt que celle d'un trou. */
.empty{padding:44px 24px;text-align:center;color:var(--ink-3);font-size:13.5px;
 line-height:1.6}
.empty b{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:5px}
.empty span{display:block;max-width:46ch;margin:4px auto 0;font-size:12.5px;color:var(--ink-4)}
.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}
/* Le bloc d'un groupe doit être aussi large que son tableau, sinon le
   titre collant n'a que la largeur de l'écran pour coller : il glissait
   vers la gauche dès qu'on défilait. */
.grp{margin:16px 0 22px;width:max-content;min-width:100%}
/* Le titre de groupe défilait avec le tableau : en scrollant à droite,
   « À faire · 190 tâches » glissait sous la colonne Name figée et on
   lisait « faire | 190 tâches » par-dessus les lignes. C'est le contenu
   du titre qui colle à gauche (le bloc, lui, garde la largeur du
   tableau : une bande à `width:max-content` s'étirait quand même à
   cause de ses enfants souples). */
.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:0;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}

/* ⚠ `table-layout` laissé en « auto », le navigateur mesurait le contenu
   de CHAQUE cellule pour décider de la largeur des colonnes — 19 000
   cellules sur le tableau Entreprise, et une nouvelle mesure complète à
   chaque paquet de lignes ajouté. Les largeurs sont déjà déclarées
   (colgroup + largeur du tableau) : en « fixed », la mise en page est
   linéaire et les colonnes restent alignées d'un groupe à l'autre. */
.mb{border-collapse:separate;border-spacing:0;font-size:12px;background:transparent;
 table-layout:fixed;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:0 32px}
/* 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 — et TOUT ce qui s'y ajoute doit y
   entrer aussi, sinon une bande traverse l'écran de bord à bord pendant
   que le reste est centré. C'est ce qui arrivait au bandeau du
   formulaire et à celui du SOP. */
.wshero,.wstabs,.wslist2,.wsform,.gu{max-width:1280px;margin-left:auto;margin-right:auto}
.wsform,.wslist2{width:100%}

/* La liste des tableaux est une carte, pas une suite de traits qui
   traversent la page : les lignes respirent à l'intérieur d'un cadre et
   la dernière n'a pas de bordure orpheline. */
.wslist2{margin-top:18px}
.wslist2:has(.wsitem){background:var(--paper);border:1px solid var(--line);border-radius:14px;
 padding:6px 10px}
.wsitem{display:flex;align-items:center;gap:14px;padding:14px 12px;
 border-bottom:1px solid var(--line-3);cursor:pointer;font-size:14px;border-radius:9px}
.wsitem:last-child{border-bottom:0}
.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%;
 /* Une fenêtre qui porte un tableau de détail déborde des 520 px par
    défaut : ses colonnes sortaient de l'écran. Elle s'élargit alors
    jusqu'à ce que le tableau tienne. */
 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;flex-wrap:wrap;gap:9px;padding:7px 11px;
 border-top:1px solid var(--line-2);background:var(--line-3)}
/* min-width:0 : sans lui, la phrase d'aide pousse les deux boutons hors
   du cadre au lieu de passer à la ligne. */
.compose-f .hint{flex:1 1 120px;min-width:0;font-size:11.5px;color:var(--ink-3)}
.compose-f .btn{flex:none}
.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}
/* Le titre se cible par sa classe : un `nth-child` s'est décalé le jour
   où le contenu du titre a été enveloppé pour rester collé à gauche. */
.grp-head .gtitle{font-family:var(--f);font-size:15px;font-weight:600;color:var(--mdy-blue)}
/* La pastille de couleur était cachée : c'est pour ça que changer la
   couleur d'un groupe « ne marchait pas » — il n'y avait rien à
   cliquer. Elle est maintenant visible et se voit au survol. */
.grp-head .gdot{display:inline-block}
.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:1280px;margin:0 auto}

/* la bande de chiffres clés */
/* En grille, une dernière rangée incomplète laissait un trou gris à
   l'intérieur du cadre — neuf cartes sur six colonnes, trois cases
   vides. En bande souple, les cartes de la dernière rangée s'étirent et
   la remplissent : plus de trou, et rien qui flotte. */
.chan-kpi{display:flex;flex-wrap:wrap;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;
  flex:1 1 180px;min-width:180px}
.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{margin-bottom:14px}
.chan-kpi.big .ck{flex:1 1 150px;min-width:150px}
.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:1280px;margin:0 auto}

/* ── LEADS À RAPPELER — les opt-in iClosed sans rendez-vous ───────── */
.optview{max-width:1280px;margin:0 auto}
.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}
/* ⚠ Le pied d'un encadré portait « margin: 14px -16px -16px » : les
   marges négatives servent à le faire toucher les bords, mais celle du
   BAS le pousse hors du cadre, et comme l'encadré est en overflow
   caché, ses seize derniers pixels étaient rognés. C'est la ligne la
   plus explicative de chaque encadré — « l'écart entre les deux barres,
   c'est l'agenda parti en fumée » — qui se retrouvait coupée en deux.
   Le pied est le dernier élément d'une colonne flex : il touche déjà le
   bas, il n'a aucun besoin de marge négative pour y arriver. */
.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;
  margin:auto 0 0}
.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(5,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:1400px){.fkpis{grid-template-columns:repeat(3,1fr)}}
@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. */
/* L'Accueil, c'est la vidéo. Elle passe donc en grand, sur toute la
   colonne, avec le texte au-dessus : le nouvel arrivant atterrit
   dessus et n'a rien d'autre à chercher. Elle vivait dans une moitié
   d'écran, à côté d'un paragraphe. */
.bienv-v{
  max-width:1280px; margin:10px auto 26px; padding:26px 32px 30px;
  background:linear-gradient(135deg, var(--brand-tint) 0%, var(--paper) 58%);
  border:1px solid var(--line); border-radius:16px;
}
.bienv-v .bv-t{ text-align:center; margin-bottom:20px; }
.bienv-v .bv-t p{ margin:0 auto; }
.bienv-v.vide{ text-align:center; }
.bv-t h2{
  font-family:var(--d); font-size:27px; font-weight:650; letter-spacing:-.6px;
  margin:0 0 8px; color:var(--ink);
}
.bv-t p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:62ch; }
.bv-p{
  width:100%; aspect-ratio:16/9; border-radius:14px; 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{ padding:20px 18px 24px; } }

/* ═══ 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 ═══════════════════════════
   ⚠ Les couleurs du cadenas sont fixées plus bas, telles que demandées :
   rouge quand c'est privé, vert quand c'est ouvert. Ces règles-ci ne
   gardent que la géométrie — elles disaient l'inverse et n'étaient plus
   appliquées depuis, ce qui est exactement le genre de code mort qui
   fait perdre une heure au prochain qui cherchera pourquoi. */
.nrow .lockic, .btab2 .lockic{ display:inline-flex; align-items:center; }
.lockic svg{ width:12px; height:12px; display:block; }

/* 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{
  /* Au-dessus de tout : la fiche client monte à 95 et les fenêtres à 400.
     À 60, la boîte s'affichait bel et bien — derrière la fiche, donc on
     ne la voyait jamais là où on tape justement le SIRET. */
  position:fixed; right:18px; bottom:18px; z-index:500;
  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. */
/* ══ UNE SEULE COQUILLE DE PAGE ═══════════════════════════════════════
   Il y avait cinq mises en page pour cinq écrans : des titres à 21, 27 et
   29 pixels, des largeurs à 1 280, 1 400, 1 520 et « aucune », des marges
   toutes différentes, et deux écrans qui collaient un emoji au titre.
   Rien de faux, mais on sentait la couture à chaque changement d'écran —
   et c'est exactement ce qui fait qu'un logiciel « fait maison » se voit.

   Un seul cadre, donc, décliné sur tous les écrans de pilotage : même
   largeur utile, mêmes marges, même échelle de titre, et les outils
   (période, onglets) toujours à droite du titre. */
.ckp, .pf, .pro, .pagex{
  padding:26px 32px 72px; max-width:1440px; margin:0 auto; width:100%;
}
.ckp-h, .pf-h, .pro-h, .pagex-h{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; margin-bottom:20px; flex-wrap:wrap;
}
.ckp-h h1, .pf-h h1, .pro-h h1, .pagex-h h1{
  font-family:var(--d); font-size:28px; font-weight:650; letter-spacing:-.7px;
  margin:0 0 5px; color:var(--ink); line-height:1.15;
}
.ckp-h p, .pf-h p, .pro-h p, .pagex-h p{
  margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-3); max-width:74ch;
}
/* Les outils d'un écran — barre de période, onglets — se posent à droite
   du titre et gardent leurs distances quand la ligne se replie. */
.ckp-h > div:first-child, .pf-h > div:first-child,
.pro-h > div:first-child, .pagex-h > div:first-child{ min-width:min(100%,420px); flex:1; }
.ckp-h .perbar, .pf-h .perbar, .pagex-h .perbar{ margin:0; flex:0 0 auto; }
.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 }
/* Les abonnements et les conseils : deux listes qu'on lit de haut en bas,
   côte à côte. Sans place assignée, elles tombaient dans une colonne
   d'un douzième et tout l'étage se pliait en accordéon. */
.c8{ grid-column:span 6 } .c9{ grid-column:span 6 }
/* « Est-ce que j'ai bien encaissé ? » prend toute la largeur : c'est la
   question posée en premier chaque mois, elle ne se met pas dans un coin. */
.c10{ grid-column:span 12 }
@media (max-width:1200px){ .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10{ 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; }
/* La carte de l'encaissement : sobre, mais elle porte un grand chiffre
   et un rappel à droite, comme les trois de tête. */
.ck-enc .ck-b{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ck-enc .ck-side{ text-align:right; font-size:13px; color:var(--ink-3); }
.ck-enc .ck-side b{ display:block; font-family:var(--d); font-size:22px; font-weight:650;
  color:var(--alerte); letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.ck-enc .ck-side i{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-4); }
/* Prélèvements automatiques : une ligne par prestataire */
.ck-prel .ck-b{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.prl{ flex:1; min-width:280px; display:flex; flex-direction:column; gap:8px; }
.prl-l{ display:grid; grid-template-columns:110px 120px 130px 1fr; align-items:baseline; gap:10px;
  padding:8px 0; border-top:1px solid var(--line, #e6e9ef); font-size:13px; }
.prl-l:first-child{ border-top:0; }
.prl-n{ font-weight:600; }
.prl-c{ color:var(--ink-3); }
.prl-v{ font-family:var(--d); font-weight:650; font-size:16px; }
.prl-v i{ font-style:normal; font-size:11.5px; color:var(--ink-4); margin-left:4px; font-family:var(--f); font-weight:400; }
.prl-d{ color:var(--ink-3); font-size:12.5px; }
.prl-r{ color:#d83a52; font-weight:600; }
.prl-a{ color:#b06f16; font-weight:600; }
@media (max-width:700px){ .prl-l{ grid-template-columns:1fr 1fr; } }
.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; }
/* Le rythme mensuel sous l'anneau : le chiffre d'abord, la cible dessous. */
.ck-ca .ck-side span i{ display:block; font-style:normal; font-size:10.5px;
  color:rgba(255,255,255,.62); margin-top:1px; }
.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. */
/* Rien à montrer dans une étape vide : la bande porte son nom, c'est tout.
   Le corps revient dès qu'on survole avec une carte. */

/* ═══ 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. */
/* Le profil et les écrans de lecture restent étroits : un texte suivi ne
   se lit pas sur 1 440 pixels. Les tableaux, eux, prennent toute la place. */
.pro:not(.moisv):not(.orph){ max-width:860px; }
.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, .pf, .pagex{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
}
/* ⚠ Certaines de ces pages sont elles-mêmes en colonne flex. Un enfant
   d'un conteneur flex se COMPRIME par défaut pour tenir dans la hauteur
   disponible : une liste de soixante-dix lignes se retrouvait haute de
   490 pixels au lieu de 5 932, et comme elle porte « overflow:hidden »
   pour ses coins arrondis, cinq mille quatre cents pixels de contenu
   étaient purement invisibles — sans barre de défilement pour le dire.
   Le contenu d'une page ne se comprime jamais : c'est la page qui
   défile. */
.pro > *, .ckp > *, .acc > *, .pf > *, .pagex > *{ flex-shrink:0; }
.pro::-webkit-scrollbar, .pf::-webkit-scrollbar, .pagex::-webkit-scrollbar,
.ckp::-webkit-scrollbar, .acc::-webkit-scrollbar{ width:10px; }
.pro::-webkit-scrollbar-thumb, .pf::-webkit-scrollbar-thumb, .pagex::-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; text-align:left;
  max-width:1280px; width:100%; margin:22px auto 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:1180px; margin:0 auto; }
.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:1280px; margin:0 auto; }

.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); }
}

/* ═══ LA CONVERSATION PREND TOUTE LA HAUTEUR ═════════════════════
   C'est le fil qu'on lit, celui qu'on relit avant de rappeler. Il était
   plafonné à une hauteur fixe et s'arrêtait au milieu de l'écran, avec
   du vide dessous. Il occupe maintenant tout ce qui reste : la colonne
   du milieu est une pile, l'éditeur en haut, le fil qui remplit le
   reste et défile seul. L'en-tête est réduit d'autant. */
.fhero{ padding:9px 26px 7px; gap:14px; }
.fav{ width:38px; height:38px; border-radius:11px; font-size:14px; box-shadow:none; }
.fht h1{ font-size:18px; }
.fpills{ gap:5px; margin-top:2px; }
.fpill{ padding:1px 8px; font-size:10.5px; }
.fsrc{ padding:5px 12px; }
.fsrc i{ font-size:9px; }
.fsrc b{ font-size:12.5px; }
.fsrc span{ font-size:11px; -webkit-line-clamp:1; }
.fowner{ gap:8px; }
.fk{ padding:7px 26px 6px; }
.fkv{ font-size:16px; }
.fkk{ font-size:9px; }
.fkn{ font-size:10.5px; }
.fnext{ margin:0 26px 10px; padding:9px 14px; gap:12px; }
.fn-i{ flex:0 0 26px; width:26px; height:26px; border-radius:8px; font-size:13px; }
.fn-t b{ font-size:13px; }
.fn-t span{ font-size:11.5px; }

.rec-col{ max-height:calc(100dvh - 178px); }
/* La colonne du milieu est une pile, pas une liste qui déborde. */
.rec-col.c{ display:flex; flex-direction:column; overflow:hidden; padding:12px 16px 14px; }
.rec-col.c > .pan{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.rec-col.c > .pan > .atabs, .rec-col.c > .pan > .aed{ flex:0 0 auto; }
.atlb{ flex:1 1 auto; min-height:180px; max-height:none; overflow-y:auto; }

@media(max-height:820px){
  .fhero{ padding:7px 26px 6px; }
  .fav{ width:34px; height:34px; border-radius:10px; font-size:13px; }
  .fht h1{ font-size:17px; }
  .fk{ padding:6px 26px 5px; }
  .fkv{ font-size:15px; }
  .rec-col{ max-height:calc(100dvh - 156px); }
}

/* ═══ LES PANNEAUX DE CHIFFRES ═══════════════════════════════════
   L'argent, le temps passé, la comparaison au secteur. Trois blocs qui
   répondent à trois questions qu'on posait en sortant du logiciel :
   combien il a rapporté, combien on lui a donné, et s'il paie le prix
   des autres. Chacun porte sa couleur — l'argent ne se lit pas comme
   une durée. */
.pan .pan-h{ position:relative; }
.pan.pargent .pan-h b{ color:#0f6b45; }
.pan.pappels .pan-h b{ color:#0a4fa8; }
.pan.pcompar .pan-h b{ color:#7c3aed; }
.pan.pcompl .pan-h b{ color:#9a6414; }
.pan.pcompl.complet .pan-h b{ color:#0f6b45; }

.ag-g{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:8px 0 12px;
  background:var(--line-3); border:1px solid var(--line-3); border-radius:11px; overflow:hidden; }
.ag-g .ag:only-child, .ag-g .ag:nth-child(3):last-child{ grid-column:span 2; }
.ag{ background:var(--paper); padding:10px 13px; display:flex; flex-direction:column; gap:1px; }
.ag b{ font-family:var(--d); font-size:19px; font-weight:700; letter-spacing:-.6px; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.ag span{ font-size:10.5px; color:var(--ink-4); line-height:1.3; }
.pan.pargent .ag b{ color:#0f6b45; }
.pan.pargent .ag.du b{ color:#b4530a; }
.pan.pappels .ag b{ color:#0a4fa8; }
.pan.pcompar .ag b{ color:#6d28d9; }
.ag-l{ display:inline-block; margin:2px 0 8px; font-size:12px; font-weight:600; color:var(--brand-deep); }

.cmp{ display:flex; align-items:baseline; gap:10px; margin:4px 0 8px; padding:10px 13px;
  border-radius:11px; background:#f3efff; border:1px solid #e2d8fb; }
.cmp b{ flex:0 0 auto; white-space:nowrap; font-family:var(--d); font-size:20px;
  font-weight:700; letter-spacing:-.5px; color:#6d28d9; }
.cmp span{ font-size:11.5px; color:var(--ink-2); line-height:1.45; }
.cmp.moins{ background:#fffaf3; border-color:#f0dcc2; }
.cmp.moins b{ color:#9a6414; }

/* L'étape porte sa couleur : une pastille grise ne dit rien. */
.fpill.et{ background:color-mix(in srgb, var(--c) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--c) 32%, #fff);
  color:var(--c); font-weight:650; }

/* Un fond très légèrement chaud plutôt qu'un gris de bureau : la fiche
   se regarde plusieurs heures par jour. */
.rec{ background:#f7f7f9; }
.rec-col.c{ background:#f7f7f9; }

/* ═══ LES CHIFFRES SE CORRIGENT LÀ OÙ ON LES LIT ═════════════════
   Un montant faux qu'il faut aller corriger sur une autre fiche reste
   faux. La tuile s'ouvre au clic, même quand la colonne vit sur
   l'affaire rattachée. */
.fk.ed{ cursor:pointer; transition:background .12s; }
.fk.ed:hover{ background:var(--brand-tint); }
.fk.ed:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
.fk.ed::after{ content:'✎'; position:absolute; right:12px; top:8px; font-size:10px;
  color:var(--brand-deep); opacity:0; transition:opacity .12s; }
.fk{ position:relative; }
.fk.ed:hover::after{ opacity:1; }
.fkin{ width:100%; max-width:190px; font:600 15px var(--f); color:var(--ink);
  border:1px solid var(--brand); border-radius:7px; padding:2px 7px; background:#fff; }

/* La garantie : un interrupteur, pas une case à cocher perdue en bas. */
.fk.gar{ cursor:pointer; }
.fk.gar .fkv{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:650;
  font-family:var(--f); letter-spacing:0; }
.tgl{ flex:0 0 32px; width:32px; height:18px; border-radius:10px; background:var(--ink-4);
  position:relative; transition:background .16s; display:inline-block; }
.tgl b{ position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%;
  background:#fff; transition:transform .16s; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.tgl.on{ background:#137a4b; }
.tgl.on b{ transform:translateX(14px); }
.fk.gar.on .fkv{ color:#137a4b; }
.fk.gar.off .fkv{ color:var(--ink-3); }
.fk.gar:hover{ background:var(--sunken); }

/* ═══ LE KANBAN DES AFFAIRES ═════════════════════════════════════
   On y passe la journée : c'est là qu'une affaire avance. Douze
   colonnes dans l'ordre du travail, toutes visibles, toutes ouvertes
   à un dépôt — une colonne vide se replie ailleurs en une bande d'un
   centimètre où l'on ne peut rien lâcher, et c'est exactement l'étape
   vers laquelle on veut déplacer une carte. Cartes resserrées : on
   voit un pipeline, pas trois cartes. */
.kb.kb2{ gap:8px; padding:12px 18px 18px; align-items:stretch; }
.kb.kb2 .kcol{
  flex:0 0 232px; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; border-top:3px solid var(--kc); overflow:hidden;
  display:flex; flex-direction:column; min-height:160px;
  max-height:calc(100dvh - 250px);
}
.kb.kb2 .kcol-h{ padding:9px 11px 8px; gap:7px; border-bottom:1px solid var(--line-3);
  background:var(--paper); }
.krg{ flex:0 0 17px; width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--kc) 15%, #fff); color:var(--kc);
  font:700 9.5px var(--f); }
.kb.kb2 .kcol-h b{ font-size:11.5px; font-weight:700; letter-spacing:-.1px; color:var(--ink); }
.kb.kb2 .kcol-h .kn{ background:var(--sunken); border-radius:9px; padding:1px 7px;
  font-size:10.5px; font-weight:600; color:var(--ink-2); }

.kbar{ position:relative; height:15px; margin:0; background:var(--sunken);
  border-bottom:1px solid var(--line-3); }
.kbar i{ display:block; height:100%; background:color-mix(in srgb, var(--kc) 26%, #fff); }
.kbar em{ position:absolute; right:7px; top:0; line-height:15px; font-style:normal;
  font-size:9.5px; font-weight:700; color:var(--kc); font-variant-numeric:tabular-nums; }

.kb.kb2 .kcol-b{ padding:7px; gap:5px; background:#fafafc; }
.kb.kb2 .kcard{ padding:7px 9px; border-radius:8px; border-color:var(--line-3);
  box-shadow:0 1px 1px rgba(20,22,31,.03); }
.kb.kb2 .kcard:hover{ border-color:var(--kc); transform:none;
  box-shadow:0 3px 10px -6px rgba(20,22,31,.4); }
.kct{ display:flex; align-items:flex-start; gap:6px; }
.kb.kb2 .kcard b{ flex:1; min-width:0; font-size:12px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kb.kb2 .kcard .ke{ display:block; font-size:10.5px; color:var(--ink-4); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kb.kb2 .kcard .kf{ display:flex; align-items:center; gap:6px; margin-top:6px;
  padding-top:0; border-top:0; }
.kb.kb2 .kcard .kf .amt{ margin:0; font-family:var(--d); font-size:12px; font-weight:700;
  letter-spacing:-.3px; color:#0f6b45; }
.ksrc{ font-size:9.5px; font-weight:700; letter-spacing:.02em; padding:1px 5px; border-radius:5px;
  background:color-mix(in srgb, var(--sc) 12%, #fff); color:var(--sc);
  white-space:nowrap; max-width:74px; overflow:hidden; text-overflow:ellipsis; }
/* L'origine : neutre, pour ne pas concurrencer la couleur du canal */
.korig{ font-size:9.5px; font-weight:600; padding:1px 5px; border-radius:5px;
  background:#eef1f5; color:#4a5263; white-space:nowrap; }
.kb.kb2 .kcard .kd{ margin:0; font-size:10px; color:var(--ink-4); white-space:nowrap; }
.kb.kb2 .kcard .kd.futur{ color:var(--brand-deep); font-weight:600; }
.kb.kb2 .kcard .kd.vieux{ color:#b4530a; }
.kb.kb2 .kcard .knt{ display:inline-flex; align-items:center; gap:2px; font-size:10px;
  color:var(--ink-4); }
.kb.kb2 .kcard .knt svg{ width:11px; height:11px; }
.kb.kb2 .kcard .face{ flex:0 0 auto; }

/* La zone de dépôt d'une colonne vide : elle existe, elle se voit, et
   elle accepte la carte. */
.kzone{ margin:4px; padding:16px 8px; border:1.5px dashed var(--line);
  border-radius:9px; text-align:center; font-size:11px; color:var(--ink-4); }
.kcol.over .kzone{ border-color:var(--kc); color:var(--kc); background:#fff; }
.kb.kb2 .kcol.over{ background:color-mix(in srgb, var(--kc) 8%, #fff); }
.kb.kb2 .kcol.over .kcol-b{ background:color-mix(in srgb, var(--kc) 8%, #fff); }
.kb.kb2 .kcard.drag{ opacity:.35; }
.kb.kb2 .kplus{ margin:3px 2px 0; font-size:11px; }
@media(max-width:1500px){ .kb.kb2 .kcol{ flex:0 0 210px; } }

/* ══ WIN & REVENUS ═══════════════════════════════════════════════
   Trois grandeurs, trois traitements visuels, jamais mélangés :
   le parc mensuel (bleu plein), le présumé (hachuré), les sorties
   (rouge). Tout le reste est de l'encre. Aucune case ne s'affiche
   pour dire qu'elle est vide : un tiret suffit. */
:root{
  --rv-sur:#0073ea; --rv-sur-d:#0060b9; --rv-pres:#9dc4ea;
  --rv-out:#bb3354; --rv-in:#037f4c; --rv-flou:#9699a6;
}
.rvb{padding-bottom:60px}
.rvtop .anb{display:inline-flex;gap:2px}

/* ── Le bandeau du parc ─────────────────────────────────────────── */
.rvb .rvhero{display:grid;grid-template-columns:minmax(320px,1.05fr) 2fr;gap:0;
 border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
.rvb .rvh-main{padding:22px 24px 20px;background:linear-gradient(160deg,#f2f8ff,#fbfdff 70%);
 border-right:1px solid var(--line);display:flex;flex-direction:column;gap:0}
.rvb .rvh-k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-weight:650}
.rvb .rvh-v{font-size:44px;line-height:1.02;font-weight:760;letter-spacing:-.028em;color:var(--rv-sur-d);
 margin:7px 0 2px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px}
.rvb .rvh-v i{font-size:15px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.rvb .rvh-s{font-size:12px;color:var(--ink-2)}
.rvb .rvh-s b.rvup{color:var(--ok)}
.rvb .rvh-s b.rvdn{color:var(--rv-out)}
.rvb .rvmet{display:flex;height:7px;border-radius:99px;overflow:hidden;background:var(--line);margin:15px 0 9px}
.rvb .rvmet .rvms{background:var(--rv-sur)}
.rvb .rvmet .rvmp{background:repeating-linear-gradient(115deg,var(--rv-pres) 0 4px,#cfe3f7 4px 8px)}
.rvb .rvleg{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--ink-2)}
.rvb .rvleg span{display:flex;align-items:center;gap:7px}
.rvb .rvleg i{width:9px;height:9px;border-radius:2px;flex:0 0 9px}
.rvb .rvleg .rvls{background:var(--rv-sur)}
.rvb .rvleg .rvlp{background:repeating-linear-gradient(115deg,var(--rv-pres) 0 3px,#cfe3f7 3px 6px)}

.rvb .rvh-side{display:grid;grid-template-columns:repeat(4,1fr)}
.rvb .rvh-t{padding:20px 18px;border-left:1px solid var(--line-3);display:flex;flex-direction:column;gap:3px}
.rvb .rvh-t:first-child{border-left:0}
.rvb .rvh-t .k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:650}
.rvb .rvh-t .vv{font-size:24px;font-weight:730;letter-spacing:-.02em;color:var(--ink);
 font-variant-numeric:tabular-nums;line-height:1.15}
.rvb .rvh-t .vv.rvnul{color:var(--ink-4)}
/* « /mois » se rendait en italique dans le grand chiffre : une unité n'a
   pas à pencher, et à côté de trois chiffres droits ça se voyait. */
.rvb .rvh-t .vv i{font-style:normal;font-size:13px;font-weight:600;color:var(--ink-4);
 letter-spacing:0;margin-left:3px}
.rvb .rvh-t .s{font-size:11px;color:var(--ink-3);line-height:1.42}
.rvb .rvh-t.rvobj{background:var(--sunken)}
.rvb .rvh-t.rvobj .vv{color:var(--rv-sur-d)}
.rvb .rvobjb{display:block;height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin:5px 0 3px}
.rvb .rvobjb i{display:block;height:100%;background:var(--rv-sur);border-radius:99px}

/* ── La courbe ──────────────────────────────────────────────────── */
.rvb .rvklg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)}
.rvb .rvklg i{width:9px;height:9px;border-radius:2px;margin-left:8px}
.rvb .rvklg i:first-child{margin-left:0}
.rvb .rvklg .rvps{background:var(--rv-sur)}
.rvb .rvklg .rvpp{background:repeating-linear-gradient(115deg,var(--rv-pres) 0 3px,#cfe3f7 3px 6px)}
.rvb .rvklg .rvge{background:var(--rv-in)}
.rvb .rvklg .rvgs{background:var(--rv-out)}
.rvb .rvk{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;padding:4px 2px 0}
.rvb .rvkc{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.rvb .rvkv{font-size:10.5px;font-weight:650;color:var(--ink-2);font-variant-numeric:tabular-nums;
 white-space:nowrap;flex:0 0 auto;text-align:center;padding-bottom:3px}
.rvb .rvkb{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
 width:100%;max-width:56px}
.rvb .rvkstack{display:flex;flex-direction:column;justify-content:flex-end;width:100%;
 border-radius:4px 4px 0 0;overflow:hidden}
.rvb .rvkb i{display:block;width:100%}
.rvb .rvkstack .rvps{background:var(--rv-sur)}
.rvb .rvkstack .rvpp{background:repeating-linear-gradient(115deg,var(--rv-pres) 0 4px,#cfe3f7 4px 8px)}
.rvb .rvkc.rvnow .rvkstack{box-shadow:0 0 0 2px var(--rv-sur-d)}
.rvb .rvkc.rvnow .rvkv{color:var(--rv-sur-d)}
.rvb .rvkc.rvfut .rvkb{opacity:.55}
.rvb .rvkl{font-size:10.5px;color:var(--ink-3);text-transform:capitalize}
.rvb .rvkc.rvnow .rvkl{color:var(--ink);font-weight:680}
.rvb .rvkc.rvnow .rvkl{position:relative}
.rvb .rvkc.rvnow .rvkl::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-4px;width:16px;height:2px;background:var(--rv-sur-d);border-radius:2px}
.rvb .rvkd{margin-top:10px;align-items:stretch;position:relative}
.rvb .rvkd .rvkc{justify-content:center}
.rvb .rvzero{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-2)}
.rvb .rvkg{display:flex;flex-direction:column;width:100%;max-width:56px;align-items:center}
.rvb .rvgu{display:flex;align-items:flex-end;height:28px;width:100%;justify-content:center}
.rvb .rvgd{display:flex;align-items:flex-start;height:28px;width:100%;justify-content:center}
.rvb .rvkg i{display:block;width:9px;position:relative;z-index:1}
.rvb .rvgu i{border-radius:2px 2px 0 0}
.rvb .rvgd i{border-radius:0 0 2px 2px}
.rvb .rvkdl{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3);
 padding:2px 2px 0}
.rvb .rvkg .rvge{background:var(--rv-in)}
.rvb .rvkg .rvgs{background:var(--rv-out)}

/* ── Renouvellements ────────────────────────────────────────────── */
.rvb .rvnl{display:flex;flex-direction:column;gap:1px}
.rvb .rvn{display:grid;grid-template-columns:64px 1fr auto 92px;align-items:center;gap:12px;
 padding:9px 12px;border-radius:5px;color:inherit;border-left:3px solid var(--line)}
.rvb .rvn:hover{background:var(--sunken);text-decoration:none}
.rvb .rvn-w{font-size:10.5px;font-weight:680;text-transform:uppercase;letter-spacing:.05em;
 padding:3px 0;color:var(--ink-2)}
.rvb .rvn-n{font-size:12.5px;font-weight:620;display:flex;flex-direction:column;min-width:0}
.rvb .rvn-n i{font-size:11px;font-weight:400;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvb .rvn-m{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rvb .rvn-m i{font-size:10px;font-weight:500;color:var(--ink-3);margin-left:2px}
.rvb .rvn-f{font-size:11px;color:var(--ink-3);text-align:right}
.rvb .rvn-urgent{border-left-color:var(--rv-out);background:#fdf2f4}
.rvb .rvn-urgent .rvn-w{color:var(--rv-out)}
.rvb .rvn-bientot{border-left-color:var(--signal)}
.rvb .rvn-bientot .rvn-w{color:var(--warn)}

/* ── Par closer ─────────────────────────────────────────────────── */
.rvb .rvcsl{display:flex;flex-direction:column;gap:13px}
.rvb .rvcs{display:grid;grid-template-columns:1fr auto;grid-template-areas:'n v' 'b b' 's s';gap:3px 10px}
.rvb .rvcs-n{grid-area:n;font-size:12.5px;font-weight:620}
.rvb .rvcs-v{grid-area:v;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.rvb .rvcs-b{grid-area:b;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.rvb .rvcs-b i{display:block;height:100%;background:var(--rv-sur);border-radius:99px}
.rvb .rvcs-s{grid-area:s;font-size:11px;color:var(--ink-3)}

/* ── À compléter ────────────────────────────────────────────────── */
.rvb .rvfix{border:1px solid var(--signal-line);background:#fffdf8}
.rvb .rvfix .w-head{border-bottom-color:var(--signal-line)}
.rvb .rvfix .w-foot.rvff{border:0;padding:0 0 14px;margin:0}
.rvb .rvxl{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:6px}
.rvb .rvxplus{display:none}
.rvb .rvxtout{margin-top:10px;align-self:flex-start;padding:6px 13px;border:1px solid var(--signal-line);
 border-radius:5px;background:var(--paper);font-size:12px;font-weight:620;color:var(--warn)}
.rvb .rvxtout:hover{background:var(--signal-t)}
.rvb .rvx{display:grid;grid-template-columns:1fr auto auto 104px;align-items:center;gap:10px;
 padding:8px 11px;background:var(--paper);border:1px solid var(--line);border-radius:5px}
.rvb .rvx-n{font-size:12.5px;font-weight:600;display:flex;flex-direction:column;min-width:0}
.rvb .rvx-n i{font-size:10.5px;font-weight:400;color:var(--ink-3);overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.rvb .rvx-m{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rvb .rvx-m i{font-size:10px;font-weight:500;color:var(--ink-3)}
.rvb .rvx-d{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.rvb .rvx-s{height:28px;border:1px solid var(--line);border-radius:4px;background:var(--paper);
 padding:0 6px;font-size:12px}
.rvb .rvx-s:hover{border-color:var(--rv-sur)}

/* ── Le détail mois par mois ────────────────────────────────────── */
.rvb .rvm{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);padding:0}
.rvb .rvmh{display:flex;align-items:center;gap:14px;padding:11px 16px;background:var(--sunken);
 border-bottom:1px solid var(--line)}
.rvb .rvmt{font-size:14px;font-weight:730;letter-spacing:-.012em}
.rvb .rvmn{font-size:11px;color:var(--ink-3)}
.rvb .rvmv{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.rvb .rvmv b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.rvb .rvmv i{font-size:10px;color:var(--ink-3)}
.rvb .rvmv.rvout b{color:var(--rv-out)}
.rvb .rvmv.rvtot{padding-left:14px;border-left:1px solid var(--line)}
.rvb .rvmv.rvtot b{color:var(--rv-sur-d)}
.rvb .rvtw{overflow-x:auto}
.rvb .rvt{width:100%;border-collapse:collapse;font-size:12.5px}
.rvb .rvt th{text-align:left;font-size:10.5px;font-weight:650;letter-spacing:.055em;text-transform:uppercase;
 color:var(--ink-3);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--paper)}
.rvb .rvt td{padding:9px 12px;border-bottom:1px solid var(--line-3);vertical-align:middle}
.rvb .rvt tbody tr:last-child td{border-bottom:0}
.rvb .rvt tbody tr:hover{background:#fafbfd}
.rvb .rvt .rc-m, .rvb .rvt .rc-v, .rvb .rvt .rc-e, .rvb .rvt .rc-d{text-align:right}
.rvb .rvt th.rc-m, .rvb .rvt th.rc-v, .rvb .rvt th.rc-e, .rvb .rvt th.rc-d{text-align:right}
.rvb .rc-n{min-width:210px;position:relative;padding-left:18px!important}
.rvb .rvname{font-weight:620;color:var(--ink)}
.rvb .rvname:hover{color:var(--rv-sur);text-decoration:none}
.rvb .rvent{display:block;font-size:10.5px;color:var(--ink-3)}
.rvb .rvr .rvbar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.rvb .rv-vivant .rvbar{background:var(--rv-sur)}
.rvb .rv-bientot .rvbar{background:var(--signal)}
.rvb .rv-urgent .rvbar{background:var(--rv-out)}
.rvb .rv-fini .rvbar{background:var(--ink-4)}
.rvb .rv-flou .rvbar{background:repeating-linear-gradient(0deg,var(--ink-4) 0 3px,transparent 3px 6px)}
.rvb .rvoff{display:inline-block;padding:2px 7px;border-radius:3px;background:var(--brand-tint);
 color:var(--brand-deep);font-size:11px;font-weight:600}
.rvb .rvu{font-size:10px;color:var(--ink-3);margin-left:2px}
.rvb .rvnil{color:var(--ink-4)}
.rvb .rvok{color:var(--ok);font-weight:670}
.rvb .rvdur{padding:3px 9px;border:1px solid var(--line);border-radius:4px;background:var(--paper);
 font-size:11.5px;font-weight:620;font-variant-numeric:tabular-nums;white-space:nowrap}
.rvb .rvdur:hover{border-color:var(--rv-sur);color:var(--rv-sur)}
.rvb .rvdur.rvvide{border-style:dashed;border-color:var(--signal-line);color:var(--warn);background:var(--signal-t)}
.rvb .rvfin{display:block;font-size:12px;font-weight:600;white-space:nowrap}
.rvb .rvfin.f-urgent{color:var(--rv-out)}
.rvb .rvfin.f-bientot{color:var(--warn)}
.rvb .rvfin.f-fini{color:var(--ink-3)}
.rvb .rvrest{display:block;font-size:10.5px;color:var(--ink-3)}
.rvb .rvcl{font-size:11.5px;color:var(--ink-2)}
.rvb .rc-o{max-width:150px}
.rvb .rc-c{white-space:nowrap}

/* Le petit menu des durées */
.durmenu{position:fixed;z-index:400;background:var(--paper);border:1px solid var(--line);
 border-radius:6px;box-shadow:var(--lift);padding:4px;display:flex;flex-direction:column;min-width:112px}
.durmenu button{text-align:left;padding:6px 10px;border-radius:4px;font-size:12.5px}
.durmenu button:hover{background:var(--brand-tint);color:var(--brand-deep)}
.durmenu .rvraz{border-top:1px solid var(--line-3);margin-top:3px;color:var(--ink-3);font-size:11.5px}

@media (max-width:1180px){
  .rvb .rvhero{grid-template-columns:1fr}
  .rvb .rvh-main{border-right:0;border-bottom:1px solid var(--line)}
  .rvb .rvh-side{grid-template-columns:repeat(2,1fr)}
  .rvb .rvh-t:nth-child(3){border-left:0}
  .rvb .rvh-t:nth-child(n+3){border-top:1px solid var(--line-3)}
}

/* Virements à rapprocher */
.rvb .rvorph{border:1px solid #f2d3da;background:#fffbfc}
.rvb .rvorph .w-head{border-bottom-color:#f2d3da}
.rvb .rvorph .w-foot.rvff{border:0;padding:0 0 14px;margin:0;background:none}
.rvb .rvol{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:5px}
.rvb .rvox{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;
 padding:8px 11px;background:var(--paper);border:1px solid var(--line);border-radius:5px}
.rvb .rvox-d{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rvb .rvox-l{font-size:12px;font-weight:580;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvb .rvox-a{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

.rvb .rvflou{margin-top:14px;padding:11px 13px;background:var(--signal-t);
 border:1px solid var(--signal-line);border-radius:6px;font-size:11.5px;
 line-height:1.5;color:var(--ink-2)}
.rvb .rvflou b{display:block;color:var(--warn);font-size:12px;margin-bottom:2px}
.rvb .rvflou a{display:inline-block;margin-top:5px;font-weight:640;color:var(--warn)}

/* ══ FICHE — la vue livraison ════════════════════════════════════
   Le CSM et le chef de projet travaillent sur la même fiche que le
   commercial, mais la vente n'y est pas : ni montants, ni durée
   d'engagement, ni canal d'acquisition. À la place, le brief. */
.fkpis.fkliv .fk{border-left-color:var(--ok)}
.fkpis.fkliv .fkv a{font-weight:600}
.pan.pbrief{border-color:var(--brand-line)}
.pan.pbrief .pan-h{background:var(--brand-tint);border-bottom-color:var(--brand-line)}
.dtxt.bw{color:var(--warn);background:var(--signal-t);border:1px solid var(--signal-line);
 border-radius:5px;padding:8px 10px;margin-bottom:8px}

/* Les deux conversations : celle de la vente, celle du client. */
.atab.atab-g.on{border-bottom-color:var(--ok);color:var(--ok)}
.compose.cmp-g{border-color:#bfe3d2;background:#f6fdf9}
.compose.cmp-g .hint{color:var(--ok)}

/* ══ LES ENCAISSEMENTS ═══════════════════════════════════════════
   Un projet se règle en deux fois, un abonnement se prélève chaque
   mois. Une ligne par client, une pastille par échéance : la couleur
   dit si l'argent est arrivé, pas si la case est remplie. */
.rvb .rvenc .w-foot.rvff{border:0;padding:0 0 14px;margin:0;background:none}
.rvb .rvegm{display:flex;align-items:baseline;gap:5px;font-size:11px;color:var(--ink-3)}
.rvb .rvegm b{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rvb .rvegm b+i{margin-right:9px}
.rvb .rvegm b.ok{color:var(--ok)}
.rvb .rvegm b.bad{color:var(--rv-out)}
.rvb .rvegm b.soft{color:var(--ink-3)}
.rvb .rvecl{display:flex;flex-direction:column;gap:7px}
.rvb .rvec{border:1px solid var(--line);border-radius:6px;padding:9px 11px 10px;background:var(--paper)}
.rvb .rvec.r{border-color:#f2d3da;background:#fffbfc}
.rvb .rvec.k{border-color:#c9e8d8;background:#f8fdfa}
.rvb .rvec-h{display:flex;align-items:center;gap:9px}
.rvb .rvec-n{font-size:13px;font-weight:640;color:var(--ink)}
.rvb .rvec-n:hover{color:var(--rv-sur);text-decoration:none}
.rvb .rvec-m{font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
 padding:2px 7px;border:1px solid var(--line);border-radius:99px;color:var(--ink-2);background:var(--sunken)}
.rvb .rvec-m:hover{border-color:var(--rv-sur);color:var(--rv-sur)}
.rvb .rvec-r{font-size:11.5px;font-weight:650;color:var(--rv-out)}
.rvb .rvec-t{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rvb .rvec-t i{font-size:10.5px;font-weight:500;color:var(--ink-3);margin-left:3px}
.rvb .rvec-b{height:4px;border-radius:99px;background:var(--line);overflow:hidden;margin:7px 0 8px}
.rvb .rvec-b i{display:block;height:100%;border-radius:99px}
.rvb .rvec-b i.ok{background:var(--ok)}
.rvb .rvec-e{display:flex;flex-wrap:wrap;gap:5px}
.rvb .rve{display:inline-flex;align-items:baseline;gap:5px;padding:3px 8px;border-radius:4px;
 font-size:11px;font-variant-numeric:tabular-nums;border:1px solid transparent}
.rvb .rve b{font-weight:650;font-size:10px;letter-spacing:.03em;text-transform:uppercase}
.rvb .rve-paye{background:var(--ok-t);color:var(--ok);border-color:#c9e8d8}
.rvb .rve-retard{background:#fdeef1;color:var(--rv-out);border-color:#f2d3da}
.rvb .rve-partiel{background:var(--signal-t);color:var(--warn);border-color:var(--signal-line)}
.rvb .rve-avenir{background:var(--sunken);color:var(--ink-3);border-color:var(--line)}
.rvb .rvox{grid-template-columns:48px 1fr auto 150px}
.rvb .rvox-s{height:26px;border:1px solid var(--line);border-radius:4px;background:var(--paper);
 padding:0 5px;font-size:11.5px;max-width:150px}
.rvb .rvox-s:hover{border-color:var(--rv-sur)}
.rvb .rvec.g{border-color:var(--line);background:var(--sunken)}
.rvb .rvec-g{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.rvb .rve-nonsuivi{background:#eff0f4;color:var(--ink-3);border-color:var(--line-2);
 border-style:dashed}

/* ══ URGENT — les paiements en attente ═══════════════════════════
   La seule section de la page sur laquelle il faut agir aujourd'hui.
   Elle est en haut, elle est rouge, et chaque ligne porte son geste. */
.rvb .rvurg{border:1px solid #e8b4bf;background:var(--paper);overflow:hidden}
.rvb .rvurg-h{display:flex;align-items:center;gap:11px;padding:11px 15px;
 background:linear-gradient(90deg,#fdeef1,#fff8f9);border-bottom:1px solid #f2d3da}
.rvb .rvurg-b{font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
 padding:3px 8px;border-radius:3px;background:var(--rv-out);color:#fff}
.rvb .rvurg-h b{font-size:13.5px;font-weight:680}
.rvb .rvurg-m{font-size:15px;font-weight:760;color:var(--rv-out);font-variant-numeric:tabular-nums}
.rvb .rvurg-a{font-size:11.5px;font-weight:640;padding:5px 11px;border:1px solid #e8b4bf;
 border-radius:5px;background:var(--paper);color:var(--rv-out)}
.rvb .rvurg-a:hover{background:#fdeef1}
.rvb .rvurg-b2{padding:12px 15px 14px}
.rvb .rvurg-n{font-size:11.5px;color:var(--ink-2);line-height:1.5;margin-bottom:11px}
.rvb .rvul{display:flex;flex-direction:column;gap:1px}
.rvb .rvu{display:grid;grid-template-columns:64px 1fr auto 62px 128px;align-items:center;
 gap:11px;padding:8px 10px;border-radius:5px}
.rvb .rvu:hover{background:var(--sunken)}
.rvb .rvu-j{font-size:10.5px;font-weight:680;text-transform:uppercase;letter-spacing:.04em;
 color:var(--ink-3);font-variant-numeric:tabular-nums}
.rvb .rvu-j.w{color:var(--warn)}
.rvb .rvu-j.v{color:var(--rv-out)}
.rvb .rvu-n{font-size:12.5px;font-weight:620;display:flex;flex-direction:column;min-width:0}
.rvb .rvu-n a{color:var(--ink)}
.rvb .rvu-n a:hover{color:var(--rv-sur);text-decoration:none}
.rvb .rvu-n i{font-size:10.5px;font-weight:400;color:var(--ink-3);overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.rvb .rvu-m{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rvb .rvu-l{font-size:11px;color:var(--rv-sur)}
.rvb .rvu-l.off{color:var(--ink-4)}
.rvb .rvu-r{font-size:11.5px;font-weight:620;padding:5px 10px;border:1px solid var(--line);
 border-radius:5px;background:var(--paper);white-space:nowrap}
.rvb .rvu-r:hover{border-color:var(--rv-out);color:var(--rv-out);background:#fdeef1}

/* La fenêtre de relance */
.rlz{display:flex;flex-direction:column;gap:11px;min-width:520px;max-width:600px}
.rlz-h b{display:block;font-size:16px;font-weight:700}
.rlz-h span{font-size:12px;color:var(--ink-2)}
.rlz-l{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:650;
 letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.rlz-l input,.rlz-l textarea{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;
 color:var(--ink);padding:8px 10px;border:1px solid var(--line);border-radius:5px;
 background:var(--paper);line-height:1.55;resize:vertical}
.rlz-l input:focus,.rlz-l textarea:focus{outline:none;border-color:var(--brand)}
.rlz-n{font-size:11px;color:var(--ink-3)}
.rlz-f{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}

/* ══ LA LISTE DE TÂCHES DE LA FICHE ══════════════════════════════
   Un rond, un titre, une date. Coché : le titre se barre et la ligne
   s'efface sans disparaître — on veut voir ce qui a été fait. */
.ptach .pan-h .ct{font-variant-numeric:tabular-nums}
.ptach .pan-h button{font-size:11.5px;font-weight:620;color:var(--brand);padding:2px 6px;
 border-radius:4px}
.ptach .pan-h button:hover{background:var(--brand-tint)}
.tkbar{height:3px;border-radius:99px;background:var(--line);overflow:hidden;margin:2px 0 9px}
.tkbar i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .18s}
.tkl{display:flex;flex-direction:column;gap:1px}
.tk{display:grid;grid-template-columns:20px 1fr auto auto;align-items:center;gap:8px;
 padding:5px 4px;border-radius:5px}
.tk:hover{background:var(--sunken)}
.tkc{width:17px;height:17px;flex:0 0 17px;border:1.5px solid var(--ink-4);border-radius:50%;
 padding:0;display:grid;place-items:center;background:var(--paper);transition:background .13s,border-color .13s}
.tkc:hover{border-color:var(--ok)}
.tkc svg{width:11px;height:11px;fill:none;stroke:transparent;stroke-width:2.2;
 stroke-linecap:round;stroke-linejoin:round}
.tk.ok .tkc{background:var(--ok);border-color:var(--ok)}
.tk.ok .tkc svg{stroke:#fff}
.tkc:disabled{opacity:.5;cursor:default}
.tkt{font-size:12.5px;line-height:1.42;cursor:pointer;min-width:0}
.tkt:hover{color:var(--brand)}
.tk.ok .tkt{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--ink-3)}
.tkd{font-size:10.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.tkd.nd{color:var(--ink-4)}
.tk.tard .tkd{color:var(--alerte,#bb3354);font-weight:640}
.tk.ok .tkd{color:var(--ink-4)}
.tkp{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.tkp.p-u{background:#bb3354}.tkp.p-h{background:#fdab3d}.tkp.p-b{background:var(--ink-4)}
.tk.ok .tkp{opacity:.35}
.fsrc b .fset{font-style:normal;font-weight:600;opacity:.82}

/* ══ SEO · GEO · GOOGLE ══════════════════════════════════════════
   Trois tableaux de mesure. La règle : un chiffre ne s'affiche jamais
   seul, il porte son unité et sa comparaison. Les barres dans les
   cellules servent à comparer sans lire, la couleur de la position
   dit le palier (top 3, première page, au-delà). */
.sqb{padding-bottom:60px}
.sqb .sqhero{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;
 border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
.sqb .sqk{padding:17px 18px;border-left:1px solid var(--line-3);display:flex;
 flex-direction:column;gap:2px;min-width:0}
.sqb .sqk:first-child{border-left:0}
.sqb .sqk-k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink-3);font-weight:650}
.sqb .sqk-v{font-size:27px;font-weight:750;letter-spacing:-.022em;line-height:1.1;
 font-variant-numeric:tabular-nums;color:var(--ink)}
.sqb .sqk-d{font-size:11px;color:var(--ink-3)}
.sqb .sqk-d b{font-weight:680}
.sqb .sqk-d b.up{color:var(--ok)}.sqb .sqk-d b.dn{color:#bb3354}
.sqb .sqk-q{font-size:10.5px;color:var(--ink-4);line-height:1.4;margin-top:3px}

.sqb .sqt{width:100%;border-collapse:collapse;font-size:12.5px}
.sqb .sqt th{text-align:right;font-size:10.5px;font-weight:650;letter-spacing:.05em;
 text-transform:uppercase;color:var(--ink-3);padding:8px 11px;white-space:nowrap;
 border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0}
.sqb .sqt th.l{text-align:left}
.sqb .sqt td{padding:7px 11px;border-bottom:1px solid var(--line-3);text-align:right;
 font-variant-numeric:tabular-nums;white-space:nowrap}
.sqb .sqt td.l{text-align:left;white-space:normal;max-width:420px}
.sqb .sqt tbody tr:hover{background:#fafbfd}
.sqb .sqt tr.neuf td.l{box-shadow:inset 2px 0 0 var(--ok)}
.sqb .sqq{font-weight:560}
.sqb .sqm{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:3px;
 font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
 background:var(--sunken);color:var(--ink-3)}
.sqb .sqm.n{background:var(--ok-t);color:var(--ok)}
.sqb .sqm.ia{background:#f4ecfb;color:#7a45ad}
.sqb .sqp{font-weight:700}
.sqb .sqpd{margin-left:5px;font-size:10.5px;font-weight:680}
.sqb .sqpd.up{color:var(--ok)}.sqb .sqpd.dn{color:#bb3354}
.sqb .sq-n{color:var(--ink-4)}
.sqb .sq-d{font-size:11.5px;font-weight:640;color:var(--ink-3)}
.sqb .sq-d.up{color:var(--ok)}.sqb .sq-d.dn{color:#bb3354}
.sqb .sqpc{font-size:10px;color:var(--ink-3);margin-left:4px;font-style:normal}
.sqb .sqj{display:inline-block;width:52px;height:4px;border-radius:99px;background:var(--line);
 overflow:hidden;margin-right:7px;vertical-align:middle}
.sqb .sqj i{display:block;height:100%;border-radius:99px}
.sqb .sqai{font-weight:640}
.sqb .sqdom{display:block;font-size:10.5px;color:var(--ink-4);font-style:normal}

.sqb .sqsplit{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.sqb .sqs{padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--sunken)}
.sqb .sqs.ok{border-color:#c9e8d8;background:#f8fdfa}
.sqb .sqs b{display:block;font-size:22px;font-weight:750;font-variant-numeric:tabular-nums}
.sqb .sqs span{display:block;font-size:12px;color:var(--ink-2);margin-bottom:4px}
.sqb .sqs i{font-size:11px;color:var(--ink-3);font-style:normal;line-height:1.45}

.sqb .sqrows{display:flex;flex-direction:column;gap:9px}
.sqb .sqr{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:10px}
.sqb .sqr .sqj{width:100%}
.sqb .sqr-n{font-size:12px;font-weight:600}
.sqb .sqr-v{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.sqb .sqr-v i{display:block;font-size:10px;font-weight:400;color:var(--ink-3);font-style:normal}

.sqb .sqchain{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;padding:4px 0 6px}
.sqb .sqc{flex:1 1 0;min-width:96px;padding:11px 12px;border:1px solid var(--line);
 border-radius:6px;background:var(--paper);display:flex;flex-direction:column;gap:1px}
.sqb .sqc.ok{border-color:#c9e8d8;background:#f8fdfa}
.sqb .sqc b{font-size:19px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.15}
.sqb .sqc span{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.sqb .sqc em{font-size:11px;color:var(--ink-2);font-style:normal;font-weight:620}
.sqb .sqchain i{align-self:center;color:var(--ink-4);font-style:normal;font-size:13px}

@media (max-width:1180px){
  .sqb .sqhero{grid-template-columns:repeat(2,1fr)}
  .sqb .sqk:nth-child(3){border-left:0}
  .sqb .sqk:nth-child(n+3){border-top:1px solid var(--line-3)}
  .sqb .sqsplit{grid-template-columns:1fr}
}
.f3d.f3x{color:var(--ink-4);font-weight:500;font-style:italic;cursor:help}

/* ══ LE DÉTAIL DERRIÈRE UN CHIFFRE ══════════════════════════════
   Une tuile cliquable se voit : le curseur change, un « voir → »
   apparaît au survol, et le bord s'éclaire. */
.ck.ckc{cursor:pointer;position:relative;transition:border-color .12s,background .12s}
.ck.ckc:hover{border-color:var(--brand);background:var(--brand-tint)}
.ck .ckgo{position:absolute;right:11px;top:10px;font-size:10.5px;font-weight:650;
 color:var(--brand);opacity:0;transition:opacity .12s}
.ck.ckc:hover .ckgo{opacity:1}
.f3.f3c{cursor:pointer;border-radius:5px;transition:background .12s}
.f3.f3c:hover{background:var(--brand-tint)}

.drl{display:flex;flex-direction:column;min-width:min(1080px,92vw);max-width:1080px;
 max-height:82vh}
.drl-h b{display:block;font-size:17px;font-weight:730;letter-spacing:-.015em}
.drl-h > span{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.drl-m{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.drl-m i{font-size:11.5px;font-style:normal;color:var(--ink-2);font-weight:600;
 background:var(--sunken);padding:3px 9px;border-radius:99px}
.drl-s{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 2px;
 padding:9px 11px;background:var(--brand-tint);border:1px solid var(--brand-line);border-radius:6px}
.drl-sl{font-size:10.5px;font-weight:680;letter-spacing:.06em;text-transform:uppercase;
 color:var(--brand-deep)}
.drl-st{display:inline-flex;align-items:baseline;gap:6px;font-size:12px;
 background:var(--paper);border:1px solid var(--brand-line);border-radius:99px;padding:3px 10px}
.drl-st b{font-weight:700}
.drl-st em{font-style:normal;font-size:10.5px;color:var(--ok);font-weight:640}
.drl-b{flex:1 1 auto;overflow:auto;margin-top:12px;border:1px solid var(--line);border-radius:6px}
.drt{width:100%;border-collapse:collapse;font-size:12.5px}
.drt th{position:sticky;top:0;background:var(--paper);text-align:right;padding:8px 11px;
 font-size:10.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
 color:var(--ink-3);border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
.drt th.l{text-align:left}
.drt td{padding:7px 11px;border-bottom:1px solid var(--line-3);text-align:right;white-space:nowrap}
.drt td.l{text-align:left;white-space:normal}
.drt tbody tr{cursor:pointer}
.drt tbody tr:hover{background:var(--brand-tint)}
.drt td b{font-weight:620}
.drt td i{display:block;font-size:10.5px;color:var(--ink-3);font-style:normal}
.dpill{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:620;
 background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.dset{font-weight:640;color:var(--ok)}
.dnil{color:var(--ink-4)}
.dtag{display:inline-block;margin:0 4px 3px 0;padding:1px 7px;border-radius:3px;
 background:var(--sunken);color:var(--ink-2);font-size:10.5px}
.drl-f{display:flex;align-items:center;gap:8px;padding-top:12px}
/* Un tableau long défile dans son cadre : toutes les lignes sont là. */
.sqb .tbl-wrap.sqscroll{max-height:min(70vh,760px);overflow:auto}

/* Win & Revenus : quatre chiffres, rien de plus dans le bandeau. */
.rvb .rvhero.rvh4{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr}
.rvb .rvh4 .rvh-t{border-left:1px solid var(--line-3);padding:20px 20px}
.rvb .rvh4 .rvh-t:first-child{border-left:0;
 background:linear-gradient(160deg,#f2f8ff,#fbfdff 70%)}
.rvb .rvh4 .rvh-t.grand .vv{font-size:38px;color:var(--rv-sur-d);display:flex;
 align-items:baseline;gap:5px}
.rvb .rvh4 .rvh-t.grand .vv i{font-size:14px;font-weight:600;color:var(--ink-3)}
.rvb .rvh4 .rvobj{background:var(--sunken)}
.rvb .rvobjb{display:block;height:5px;border-radius:99px;background:var(--line);
 overflow:hidden;margin:5px 0 3px}
.rvb .rvobjb i{display:block;height:100%;background:var(--rv-sur);border-radius:99px}
@media (max-width:1180px){.rvb .rvhero.rvh4{grid-template-columns:1fr 1fr}}

/* ══ INSTANTLY — les campagnes de cold email ═════════════════════
   Un tableau de mesure : les nombres alignés à droite, le taux jugé
   par sa couleur, et le repère du métier écrit sous le tableau. */
.instt{width:100%;border-collapse:collapse;font-size:12.5px}
.instt th{text-align:right;font-size:10.5px;font-weight:650;letter-spacing:.05em;
 text-transform:uppercase;color:var(--ink-3);padding:8px 10px;white-space:nowrap;
 border-bottom:1px solid var(--line);background:var(--paper)}
.instt th.l{text-align:left}
.instt td{padding:8px 10px;border-bottom:1px solid var(--line-3);text-align:right;
 white-space:nowrap;font-variant-numeric:tabular-nums}
.instt td.l{text-align:left;white-space:normal}
.instt tbody tr:last-child td{border-bottom:0}
.instt tbody tr:hover{background:#fafbfd}
.instt td b{font-weight:660}
.instt td i{display:block;font-size:10.5px;color:var(--ink-3);font-style:normal}
.instj{display:inline-block;width:46px;height:4px;border-radius:99px;background:var(--line);
 overflow:hidden;margin-right:7px;vertical-align:middle}
.instj i{display:block;height:100%;background:var(--brand);border-radius:99px}
.instpc{display:block;font-size:10px;color:var(--ink-4);font-style:normal}
.instst{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:620}
.instst.s-on{background:var(--ok-t);color:var(--ok)}
.instst.s-off{background:var(--sunken);color:var(--ink-3)}
.instx{font-weight:700}
.instx.ok{color:var(--ok)}
.instx.moy{color:var(--warn)}
.instx.bad{color:var(--alerte,#bb3354)}
.cbfoot{font-size:12px;color:var(--ink-2);line-height:1.6;margin:14px -17px -17px;
 padding:12px 17px;background:var(--line-3);border-top:1px solid var(--line-2)}
.cbfoot b{color:var(--ink)}

/* ══ LES VUES ENREGISTRÉES ═══════════════════════════════════════
   Une rangée de pastilles sous le titre. Celle qui est active porte
   le fond plein ; le compte à droite dit combien de lignes elle
   garde, pour savoir avant de cliquer. */
.vsav{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:6px 0 2px}
.vsb{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;
 border:1px solid var(--line);background:var(--paper);font-size:12px;font-weight:580;
 color:var(--ink-2);white-space:nowrap;transition:border-color .12s,background .12s,color .12s}
.vsb:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-tint)}
.vsb.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:640}
.vsb.on:hover{background:var(--brand-deep);color:#fff}
.vsb .vn{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:99px;
 background:var(--sunken);color:var(--ink-2);font-variant-numeric:tabular-nums}
.vsb.on .vn{background:rgba(255,255,255,.24);color:#fff}
.vsb .vmoi{font-style:normal;color:var(--signal);font-size:14px;line-height:1}
.vsb.vplus{font-size:15px;font-weight:700;padding:2px 10px;color:var(--ink-3)}
.vsb.vdel{color:var(--ink-3);padding:3px 9px}
.vsb.vdel:hover{border-color:#bb3354;color:#bb3354;background:#fdeef1}

.vnw{display:flex;flex-direction:column;gap:12px;min-width:min(520px,90vw)}
.vnw-h b{display:block;font-size:16px;font-weight:730}
.vnw-h span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.5}
.vnw-c{display:flex;align-items:baseline;gap:8px;font-size:12.5px}
.vnw-c i{font-style:normal;font-size:11px;color:var(--ink-3)}
.vnw-r{font-size:11.5px;color:var(--ink-2);padding:9px 11px;background:var(--sunken);
 border-radius:5px;line-height:1.55}
.vnw-r b{color:var(--ink)}
.lot{display:flex;flex-direction:column;gap:12px;min-width:min(460px,90vw)}
.lot-h b{display:block;font-size:16px;font-weight:730}
.lot-h span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.5}
.lot select{font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:5px;
 background:var(--paper);font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}

/* ══ LE JOURNAL D'UNE FICHE ══════════════════════════════════════ */
.jr{display:grid;grid-template-columns:26px 1fr auto;align-items:start;gap:10px;
 padding:8px 4px;border-bottom:1px solid var(--line-3)}
.jr:last-child{border-bottom:0}
.jr-a{width:24px;height:24px;border-radius:50%;background:var(--sunken);color:var(--ink-2);
 display:grid;place-items:center;font-size:10px;font-weight:700;flex:0 0 24px}
.jr-t{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.jr-t b{color:var(--ink);font-weight:640}
.jr-t em{font-style:normal;font-weight:620;color:var(--ink)}
.jr-v{display:flex;align-items:center;gap:7px;margin-top:3px;flex-wrap:wrap}
.jr-v i{font-style:normal;color:var(--ink-4)}
.jr-av,.jr-ap{font-size:11.5px;padding:2px 8px;border-radius:3px;max-width:280px;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jr-av{background:var(--sunken);color:var(--ink-3);text-decoration:line-through}
.jr-ap{background:var(--brand-tint);color:var(--brand-deep);font-weight:600}
.jr-d{font-size:10.5px;color:var(--ink-3);white-space:nowrap;padding-top:2px}
/* Le « i » d'une colonne : discret dans l'en-tête, lisible au survol. */
.mb thead th .infoi.coli{margin-left:5px;vertical-align:middle;opacity:.5}
.mb thead th:hover .infoi.coli{opacity:1}

/* ══ LA FRISE (TIMELINE) ═════════════════════════════════════════
   Une grille de semaines, une barre par ligne, posée en pourcentage.
   Le trait du jour traverse tout ; une barre en retard passe au rouge
   parce que c'est la seule chose qu'on cherche en ouvrant la frise. */
.tlv{padding:0 26px 60px}
.tlhead{display:flex;align-items:center;gap:8px;padding:12px 0 10px}
.tlnav{width:28px;height:28px;border:1px solid var(--line);border-radius:6px;
 background:var(--paper);font-size:15px;color:var(--ink-2);display:grid;place-items:center}
.tlnav:hover{border-color:var(--brand);color:var(--brand)}
.tlnav.tlnow{width:auto;padding:0 11px;font-size:12px;font-weight:620}
.tlt{font-size:13.5px;font-weight:680;text-transform:capitalize}
.tlinfo{font-size:11.5px;color:var(--ink-3)}
.tlwrap{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--paper);
 overflow:hidden}
.tlmois{position:relative;height:30px;border-bottom:1px solid var(--line);background:var(--sunken);
 margin-left:230px}
.tlmi{position:absolute;top:0;height:30px;display:flex;align-items:center;padding-left:10px;
 font-size:11.5px;font-weight:650;color:var(--ink-2);text-transform:capitalize;
 border-left:1px solid var(--line)}
.tlgrille{position:absolute;left:230px;right:0;top:30px;bottom:0;pointer-events:none;z-index:0}
.tlsem{position:absolute;top:0;bottom:0;width:1px;background:var(--line-3)}
.tlsem.fort{background:var(--line)}
.tlauj{position:absolute;top:0;bottom:0;width:2px;background:var(--brand);opacity:.5;z-index:2}
.tlgrp{position:relative;z-index:1}
.tlgh{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;font-weight:660;
 background:var(--sunken);border-bottom:1px solid var(--line-3);border-top:1px solid var(--line-3)}
.tlgp{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.tlgn{font-size:10.5px;font-weight:700;color:var(--ink-3);background:var(--paper);
 padding:1px 7px;border-radius:99px}
.tlrow{display:grid;grid-template-columns:230px 1fr;align-items:center;min-height:30px;
 border-bottom:1px solid var(--line-3)}
.tlrow:last-child{border-bottom:0}
.tlrow:hover{background:#fafbfd}
.tlrn{font-size:12px;padding:5px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 border-right:1px solid var(--line)}
.tlpiste{position:relative;height:30px}
.tlbar{position:absolute;top:6px;height:18px;border-radius:4px;cursor:pointer;
 background:color-mix(in srgb,var(--c) 22%,transparent);
 border:1px solid color-mix(in srgb,var(--c) 55%,transparent);
 display:flex;align-items:center;padding:0 7px;overflow:hidden;transition:filter .12s}
.tlbar:hover{filter:brightness(.96)}
.tlbar .tlnom{font-size:10.5px;font-weight:620;color:color-mix(in srgb,var(--c) 82%,#000);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlbar.fini{background:var(--ok-t);border-color:#c9e8d8}
.tlbar.fini .tlnom{color:var(--ok);text-decoration:line-through}
.tlbar.tard{background:#fdeef1;border-color:#e8b4bf}
.tlbar.tard .tlnom{color:#bb3354;font-weight:700}
.tlbar i{font-style:normal;font-weight:700;opacity:.6;font-size:12px}
.tlav{margin-right:auto}.tlap{margin-left:auto}
@media (max-width:900px){
  .tlmois,.tlgrille{margin-left:0;left:0}
  .tlrow{grid-template-columns:120px 1fr}
  .tlrn{font-size:11px;padding:5px 8px}
}
/* Une barre courte porte son texte à côté, pas dedans. */
.tlbar.mince{min-width:8px}
.tlcote{position:absolute;top:8px;font-size:10.5px;color:var(--ink-3);white-space:nowrap;
 cursor:pointer;font-variant-numeric:tabular-nums}
.tlcote:hover{color:var(--brand)}
.lienbox{font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:5px;
 background:var(--sunken);font-family:ui-monospace,monospace;width:100%}

/* ══ LA VUE GALERIE ══════════════════════════════════════════════
   Une agence vidéo reconnaît ses lignes à l'image, pas au nom. */
.galv{padding:14px 26px 60px}
.gsec{margin-bottom:22px}
.gsh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:680;margin-bottom:10px}
.gsp{width:9px;height:9px;border-radius:2px;flex:0 0 9px}
.gsn{font-size:10.5px;font-weight:700;color:var(--ink-3);background:var(--sunken);
 padding:1px 8px;border-radius:99px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.gcard{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);
 cursor:pointer;transition:border-color .12s,box-shadow .12s}
.gcard:hover{border-color:var(--brand);box-shadow:0 3px 12px -4px rgba(0,0,0,.16)}
.gcv{position:relative;aspect-ratio:16/10;background:var(--sunken);overflow:hidden;
 display:grid;place-items:center}
.gcv img{width:100%;height:100%;object-fit:cover;display:block}
.gcv.vide{background:linear-gradient(140deg,var(--sunken),var(--line-3))}
.gci{font-size:26px;font-weight:750;color:var(--ink-4);letter-spacing:-.02em}
.gcst{position:absolute;left:8px;bottom:8px;font-size:10.5px;font-weight:680;padding:2px 8px;
 border-radius:3px;background:color-mix(in srgb,var(--c) 90%,#fff);color:#fff;
 max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcb{padding:9px 11px 10px;display:flex;flex-direction:column;gap:4px}
.gcn{font-size:12.5px;font-weight:640;line-height:1.35;display:block;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gct{font-size:11px;color:var(--ink-3);line-height:1.4;display:-webkit-box;
 -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcf{display:flex;align-items:center;gap:6px;margin-top:2px}
.gcg{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink-2);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcd{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.gcm{font-size:10px;font-weight:700;color:var(--ink-3);background:var(--sunken);
 padding:1px 6px;border-radius:99px}
.tmps{font-weight:620;font-variant-numeric:tabular-nums}

/* ══ LA CHARGE DE TRAVAIL ════════════════════════════════════════
   Une ligne par personne, une colonne par semaine. Trois paliers de
   couleur, pas un dégradé : on veut décider, pas admirer. */
.chb{padding-bottom:60px}
.chcap{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--ink-3);
 margin-right:10px}
.chleg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-3)}
.chleg i{width:11px;height:11px;border-radius:2px;margin-left:8px}
.chleg i:first-child{margin-left:0}
.cht{width:100%;border-collapse:collapse;font-size:12.5px}
.cht th{text-align:center;font-size:10.5px;font-weight:650;letter-spacing:.04em;
 text-transform:uppercase;color:var(--ink-3);padding:7px 6px;white-space:nowrap;
 border-bottom:1px solid var(--line);background:var(--paper)}
.cht th.l{text-align:left;padding-left:12px;min-width:190px}
.cht .chnow{display:block;font-size:9px;font-style:normal;color:var(--brand);font-weight:700}
.cht td{padding:0;border-bottom:1px solid var(--line-3);text-align:center;
 font-variant-numeric:tabular-nums}
.cht td.l{text-align:left;padding:8px 12px}
.cht td.n{padding:8px 6px;font-weight:640}
.cht tbody tr:hover{background:#fafbfd}
.cht tr.chorph td.l i{font-style:normal;color:var(--warn);font-weight:640}
.chqui{display:inline-flex;align-items:center;gap:7px;font-weight:620}
.chret{color:#bb3354;font-weight:700}
.cht td.chc{position:relative;min-width:52px;height:34px;font-weight:700}
.cht td.chc.cliq{cursor:pointer}
.cht td.chc.cliq:hover{outline:2px solid var(--brand);outline-offset:-2px}
.chbar{position:absolute;left:0;right:0;bottom:0;height:3px;display:flex;align-items:flex-end}
.chbar i{display:block;width:100%;background:currentColor;opacity:.45}
.p-vide{color:var(--ink-4)}
.p-ok{background:#e6f9f1;color:var(--ok)}
.p-plein{background:#e5f4ff;color:var(--brand-deep)}
.p-trop{background:var(--signal-t);color:var(--warn)}
.p-noye{background:#fdeef1;color:#bb3354}
.chleg .p-ok,.chleg .p-plein,.chleg .p-trop,.chleg .p-noye{display:inline-block}
.cht tfoot td{border-top:2px solid var(--line);background:var(--sunken);font-weight:700;
 padding:8px 6px}
.chdesq .chphrase{font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.chdesq .chphrase b{color:var(--ink)}

/* Les fenêtres qui portent un tableau prennent la place qu'il faut. */
.mo-c:has(.drl){max-width:min(1120px,94vw)}
.mo-c:has(.rlz){max-width:min(640px,94vw)}
.mo-c:has(.vnw),.mo-c:has(.lot){max-width:min(560px,94vw)}
.drl{min-width:0}
.drl-b{max-height:min(62vh,640px)}

/* ══ LES AUTOMATISATIONS ═════════════════════════════════════════
   Chaque règle se lit comme une phrase française, porte son
   interrupteur et son compteur. Douze tournaient sans être visibles. */
.aut{display:flex;flex-direction:column;gap:12px;min-width:0}
.aut-h b{display:block;font-size:16.5px;font-weight:730}
.aut-h span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.aut-b{display:flex;flex-direction:column;gap:6px;max-height:min(56vh,520px);overflow:auto}
.autr{display:grid;grid-template-columns:36px 1fr 26px;align-items:start;gap:10px;
 padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:var(--paper)}
.autr.off{opacity:.55;background:var(--sunken)}
.auttg{width:32px;height:18px;border-radius:99px;background:var(--ink-4);position:relative;
 padding:0;transition:background .14s;flex:0 0 32px;margin-top:2px}
.auttg i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
 background:#fff;transition:transform .14s}
.auttg.on{background:var(--ok)}
.auttg.on i{transform:translateX(14px)}
.autn{font-size:12.5px;font-weight:680}
.autp{font-size:12px;color:var(--ink-2);line-height:1.55;margin-top:2px}
.autp b{color:var(--ink);font-weight:640}
.autp i{font-style:italic;color:var(--ink-3)}
.autm{font-size:10.5px;color:var(--ink-3);margin-top:4px}
.autx{width:22px;height:22px;border-radius:5px;color:var(--ink-4);font-size:12px;
 display:grid;place-items:center}
.autx:hover{background:#fdeef1;color:#bb3354}
.aut-f{display:flex;align-items:center;gap:8px}
.autnew{min-width:min(680px,92vw)}
.autbloc{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 12px;
 background:var(--sunken);border-radius:7px}
.autbloc:empty{display:none}
.autalors{flex-direction:column;align-items:stretch;gap:8px}
.autlab{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
 color:var(--ink-3)}
.autmot{font-size:12px;color:var(--ink-2)}
.aut select,.aut input{font-size:12.5px;padding:6px 9px;border:1px solid var(--line);
 border-radius:5px;background:var(--paper);max-width:230px}
.aut input.autnum{width:56px}
.autcond{display:flex;align-items:center;gap:7px;flex-wrap:wrap;width:100%}
.autact{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;
 color:var(--ink-2)}
.autplus{align-self:flex-start;font-size:12px;color:var(--brand);padding:4px 0}

/* Une fenêtre plus haute que l'écran doit défiler, sinon ses boutons
   de validation restent sous la ligne de flottaison et la fenêtre
   paraît sans issue. */
.mo-c{max-height:92vh;overflow:auto}
.mo-c:has(.autnew){max-width:min(720px,94vw)}
/* Invités et corbeille portent des lignes à trois colonnes : à 520 px
   le bouton de reprise sortait de la fenêtre. */
.mo-c:has(.inv){max-width:min(680px,94vw)}
.aut .rlz-f{position:sticky;bottom:-26px;background:var(--paper);padding:12px 0 0;
 margin-bottom:-4px;border-top:1px solid var(--line-3)}

/* ══ LES INVITÉS EXTERNES ════════════════════════════════════════ */
.inv{display:flex;flex-direction:column;gap:14px;min-width:min(600px,92vw)}
.inv-h b{display:block;font-size:16.5px;font-weight:730}
.inv-h span{display:block;font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.55}
.inv-b{display:flex;flex-direction:column;gap:5px;max-height:min(40vh,340px);overflow:auto}
.invr{display:grid;grid-template-columns:32px 1fr 24px;align-items:center;gap:10px;
 padding:9px 11px;border:1px solid var(--line);border-radius:7px}
.inva{width:30px;height:30px;border-radius:50%;background:var(--brand-tint);
 color:var(--brand-deep);display:grid;place-items:center;font-size:11px;font-weight:700}
.invn{font-size:12.5px;font-weight:640;display:flex;align-items:center;gap:7px}
.invl{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
 padding:1px 7px;border-radius:3px;background:var(--sunken);color:var(--ink-3)}
.invl.e{background:var(--signal-t);color:var(--warn)}
.invm{font-size:10.5px;color:var(--ink-3);margin-top:1px}
.invm b{color:var(--warn)}
.invnew{display:flex;flex-direction:column;gap:9px;padding:12px;background:var(--sunken);
 border-radius:7px}
.invf{display:flex;gap:7px;flex-wrap:wrap}
.invf input,.invf select{font-size:12.5px;padding:7px 10px;border:1px solid var(--line);
 border-radius:5px;background:var(--paper);flex:1 1 150px;min-width:0}
.invnew .btn.primary{align-self:flex-start}

/* ══ LES WIDGETS ═════════════════════════════════════════════════
   Des graphiques composés par celui qui s'en sert. Barres par défaut :
   c'est la forme qui se lit sans légende. */
.wgzone{grid-column:span 12}
.wggrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.wgc{border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden;
 display:flex;flex-direction:column}
.wgc.w-4{grid-column:span 4}.wgc.w-6{grid-column:span 6}.wgc.w-12{grid-column:span 12}
.wgh{display:flex;align-items:baseline;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line-3);
 background:var(--sunken)}
.wgh b{font-size:12.5px;font-weight:680}
.wgs{font-size:10.5px;color:var(--ink-3)}
.wgx{width:20px;height:20px;border-radius:4px;color:var(--ink-4);font-size:11px;
 display:grid;place-items:center;flex:0 0 20px}
.wgx:hover{background:#fdeef1;color:#bb3354}
.wgb{padding:12px;flex:1}
.wg-err,.wg-vide{font-size:12px;color:var(--ink-3);padding:8px 0}
.wg-nb{text-align:center;padding:14px 0}
.wg-nb b{display:block;font-size:38px;font-weight:760;letter-spacing:-.03em;
 font-variant-numeric:tabular-nums;color:var(--brand-deep);line-height:1.05}
.wg-nb span{font-size:11.5px;color:var(--ink-3)}
.wg-bars{display:flex;flex-direction:column;gap:7px}
.wg-b{display:grid;grid-template-columns:minmax(70px,32%) 1fr auto;align-items:center;gap:9px}
.wg-bk{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-bt{height:9px;border-radius:99px;background:var(--line);overflow:hidden}
.wg-bt i{display:block;height:100%;border-radius:99px}
.wg-bv{font-size:12px;font-weight:680;font-variant-numeric:tabular-nums;white-space:nowrap}
.wg-plus{font-size:10.5px;color:var(--ink-3);padding-top:3px}
.wg-an{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wg-ring{width:124px;height:124px;border-radius:50%;flex:0 0 124px;display:grid;place-items:center}
.wg-hole{width:82px;height:82px;border-radius:50%;background:var(--paper);display:grid;
 place-items:center}
.wg-hole b{font-size:15px;font-weight:740;font-variant-numeric:tabular-nums}
.wg-leg{flex:1 1 150px;display:flex;flex-direction:column;gap:5px;min-width:0}
.wg-li{display:grid;grid-template-columns:11px 1fr auto;align-items:center;gap:7px}
.wg-li i{width:9px;height:9px;border-radius:2px}
.wg-lk{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-lv{font-size:11.5px;font-weight:660;font-variant-numeric:tabular-nums;white-space:nowrap}
.wg-lv em{font-style:normal;font-size:10px;color:var(--ink-3);margin-left:5px}
.wgempty{padding:18px;text-align:center}
.wgempty b{display:block;font-size:13.5px;margin-bottom:5px}
.wgempty span{font-size:12px;color:var(--ink-3);line-height:1.6;display:block;max-width:520px;
 margin:0 auto}
@media (max-width:900px){.wgc.w-4,.wgc.w-6{grid-column:span 12}}

/* ── La corbeille d'un tableau ──────────────────────────────────── */
/* Classes propres : .invl et .invr appartiennent à la liste des
   invités (libellé en capitales, grille avec avatar) et déformeraient
   ces lignes-là. */
.cor-l{display:flex;flex-direction:column;gap:5px;max-height:min(52vh,460px);overflow:auto}
.cor-r{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;
  padding:9px 11px;border:1px solid var(--line);border-radius:7px}
.cor-i{min-width:0}
.cor-i b{display:block;font-size:12.5px;font-weight:640;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cor-m{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.cor-b{font-size:12px;padding:5px 10px;white-space:nowrap}

/* ── L'import d'un CSV ─────────────────────────────────────────── */
.imp{gap:12px}
.impf{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px dashed var(--line-2);
  border-radius:8px;background:var(--sunken)}
.impfb{flex:none;font:600 12.5px var(--f);padding:7px 13px;border-radius:7px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.impfb:hover{border-color:var(--brand);color:var(--brand)}
.impfn{font-size:12px;color:var(--ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.impmap{display:flex;flex-direction:column;gap:4px;max-height:min(34vh,300px);overflow:auto;
  margin-bottom:14px}
.impm{display:grid;grid-template-columns:1fr 16px 1fr;align-items:center;gap:8px}
.impmh{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.impma{color:var(--ink-4);text-align:center;font-size:12px}
.impm select{width:100%;font-size:12.5px;padding:5px 7px;border:1px solid var(--line);
  border-radius:6px;background:var(--paper);color:var(--ink)}
.improw{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.impl{display:flex;flex-direction:column;gap:4px;font:600 11px var(--f);
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);flex:1;min-width:180px}
.impl select{font-size:12.5px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;
  background:var(--paper);color:var(--ink);text-transform:none;letter-spacing:0;font-weight:500}
.impprev{display:flex;flex-direction:column;gap:7px}
.impp{border:1px solid var(--line);border-radius:7px;padding:9px 11px;
  display:flex;flex-wrap:wrap;gap:4px 18px}
.imppc{display:flex;flex-direction:column;min-width:0}
.imppc span{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-4)}
.imppc b{font-size:12.5px;font-weight:600;max-width:230px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.impko{font-size:12.5px;color:#9a3327;background:#fdeef1;border:1px solid #f3cdd6;
  border-radius:7px;padding:10px 12px;line-height:1.55}

/* Le compte des tableaux privés qu'une case d'espace n'ouvre pas. */
.acc-pv{display:inline-grid;place-items:center;min-width:14px;height:14px;margin-left:5px;
  padding:0 3px;border-radius:7px;background:#b06f16;color:#fff;font:700 9.5px/1 var(--f);
  font-style:normal;vertical-align:1px}
.acc-l .pz .acc-pv{margin-left:4px}

/* La consigne au-dessus du lien du formulaire. */
.nformn{margin:2px 10px 6px;font:500 11px/1.45 var(--f);color:var(--ink-3)}

/* Tout tableau trop large défile dans son propre cadre, sans jamais
   faire défiler la page de côté. */
.tblx{overflow-x:auto;overscroll-behavior-x:contain;max-width:100%}
.tblx > table{min-width:max-content}
.tblx::-webkit-scrollbar{height:9px}
.tblx::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px}
.tblx::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}

/* La consigne du formulaire, en tête de l'espace Formation. */
/* .wsform est la colonne centrée ; .wsf-c est le cadre à l'intérieur,
   aligné au pixel avec la liste des tableaux en dessous. */
.wsform{padding:18px 32px 0}
.wsf-c{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.wsf-t{flex:1;min-width:260px}
.wsf-t b{display:block;font-size:14.5px;font-weight:660;color:var(--ink)}
.wsf-t span{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.wsf-b{display:flex;gap:8px;flex-wrap:wrap}

/* ── L'identité d'une ligne : le client, puis l'action ─────────── */
/* Sur les Tâches, le nom contient déjà le client ; on le sort en tête
   pour que le tableau se parcoure par client, et l'action passe en
   seconde ligne au lieu d'être coupée à quarante caractères. */
.nml:has(.nmcl){display:flex;flex-direction:column;gap:1px;min-width:0;white-space:normal}
.nmcl{font-weight:660;font-size:13px;color:var(--ink);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nmac{font-size:12px;line-height:1.35;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mb tr:has(.nmcl) td{vertical-align:middle}

/* ── D'où l'on vient : la ligne cliquée, rappelée sur la fiche client ── */
.fdep{display:flex;align-items:center;gap:11px;margin:0 0 2px;padding:9px 14px;
  background:var(--sunken);border:1px solid var(--line-2);border-radius:9px}
.fdi{flex:none;width:24px;height:24px;display:grid;place-items:center;font-size:14px;
  background:var(--paper);border:1px solid var(--line);border-radius:6px}
.fdt{min-width:0}
.fdt i{display:block;font:600 10px var(--f);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);font-style:normal}
.fdt b{display:block;font-size:13px;font-weight:620;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52ch}

/* ── Les factures du client, sur sa fiche ─────────────────────── */
.facl{display:flex;flex-direction:column}
/* ⚠ Les trois dernières colonnes étaient en « auto » : une facture sans
   lien n'affichait aucun bouton, sa colonne se repliait, et le montant
   de cette ligne-là se décalait de vingt pixels par rapport aux autres.
   Sur dix-neuf factures, une colonne de chiffres qui zigzague se voit
   tout de suite et donne l'impression que rien n'est aligné. On fige
   donc la largeur des trois colonnes de droite. */
.fac{display:grid;grid-template-columns:1fr 64px 74px 50px;align-items:center;gap:9px;
  padding:7px 0;border-bottom:1px solid var(--line-3)}
.fcs{text-align:center}
.fcm{text-align:right}
.fac:last-child{border-bottom:0}
.fcn{min-width:0}
.fcn b{display:block;font-size:12.5px;font-weight:620;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcn span{display:block;font-size:11px;color:var(--ink-4)}
.fcs{font:600 10.5px var(--f);padding:2px 7px;border-radius:11px;white-space:nowrap}
.fcs.s-ok{background:#e8f6ee;color:#1a7f4b}
.fcs.s-att{background:#fdf1e0;color:#8a5a12}
.fcs.s-ko{background:#fdeef1;color:#9a3327}
.fcs.s-nd{background:var(--sunken);color:var(--ink-3)}
.fcm{font-size:12.5px;font-weight:640;font-variant-numeric:tabular-nums;white-space:nowrap}
.fca{display:flex;gap:3px;justify-content:flex-end}
.fca a,.fca button{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-3);
  font-size:11px;cursor:pointer;text-decoration:none}
.fca a:hover,.fca button:hover{border-color:var(--brand);color:var(--brand)}
.facp{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line-2)}
.facp span{display:flex;flex-direction:column}
.facp i{font:600 10px var(--f);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-4);font-style:normal}
.facp b{font-size:13px;font-weight:660;font-variant-numeric:tabular-nums}
.facp .ko b{color:#9a3327}

/* ── La vue par défaut, épinglée ───────────────────────────────── */
.vsb.vdef{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand-tint)}
.vpin{font-size:9.5px;margin-right:3px;font-style:normal}
.vpine{opacity:0;margin-left:5px;font-size:9.5px;font-style:normal;cursor:pointer;
  transition:opacity .12s}
.vsb:hover .vpine{opacity:.45}
.vsb .vpine:hover{opacity:1}
.vsb.vdef .vpine{display:none}

/* La barre de période d'un tableau de canal : ses chiffres en dépendent. */
.chper{padding:8px 0 0}
.chper .perbar{margin:0}

/* Le mode d'emploi (SOP / Process) : un écran à part, pas un tableau de
   travail. Plus petit, plus discret, toujours cliquable. */
.nrow.dashmini{padding-top:4px;padding-bottom:4px;opacity:.72}
.nrow.dashmini .nm{font-size:11.5px;letter-spacing:.01em}
.nrow.dashmini .gl{font-size:10px}
.nrow.dashmini:hover{opacity:1}
.nrow.dashmini.sel{opacity:1}
.navsep.mini{margin:4px 12px 6px}

/* ── Une seule ligne d'options ─────────────────────────────────── */
/* Cinq lignes de réglages avant la première donnée : le tableau
   commençait à 42 % de la hauteur de l'écran. Les onglets de personne
   et les vues enregistrées partagent une ligne, les onglets de vue
   entrent dans la barre d'outils. On vient voir le tableau. */
.bhrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:0}
.bhrow .btabs{padding:0;border:0}
.bhrow .vues,.bhrow .vsav{padding:0;margin:0}
.toolbar .tvues{display:flex;align-items:center;gap:14px;flex:none}
.toolbar .tvues .btab{padding:4px 0 5px;font-size:13px}
.tsep{flex:none;width:1px;height:20px;background:var(--line);margin:0 4px}

/* Le contenu du titre de groupe reste à gauche pendant le défilement. */
.gh-in{position:sticky;left:26px;display:inline-flex;align-items:baseline;gap:10px;
  background:var(--ground);padding-right:14px;z-index:5}

/* ── La couleur d'un canal, partout la même ────────────────────── */
.cdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;
  vertical-align:1px;flex:none}
/* Le MRR signé porte sa part, en trait fin sous le montant : derrière
   le chiffre, le bloc de couleur se lisait comme un surlignage et pas
   comme une mesure. Le trait, lui, se compare d'une ligne à l'autre. */
.wt td.cbar{position:relative;padding-bottom:11px!important;min-width:118px}
.wt td.cbar .cbf{position:absolute;right:13px;bottom:7px;height:3px;border-radius:2px}

/* ── Le cadenas : fermé = sombre, ouvert = franchement ouvert ──── */
/* « Là je le vois pas très bien : c'est légèrement ouvert. » Un tableau
   privé porte un cadenas plein et sombre sur fond gris ; un tableau
   ouvert porte un cadenas vert sur fond vert clair. On distingue les
   deux du coin de l'œil, sans lire l'infobulle. */
.lockic,.tlock{display:inline-grid!important;place-items:center;width:18px;height:18px;
  border-radius:5px;flex:0 0 auto}
.lockic.shut,.tlock.ferme{color:#111827;background:rgba(17,24,39,.11)}
.lockic.open,.tlock.ouvert{color:#0f7a52;background:rgba(15,122,82,.15)}
.nrow.sel .lockic.shut{color:#111827}
.nrow.sel .lockic.open{color:#0f7a52}
.lockic svg,.tlock svg{width:11px;height:11px}

/* ── Les en-têtes de colonnes : tous du même fond ──────────────── */
/* « Company » était blanc et les autres gris : la ligne d'en-tête se
   lisait en deux morceaux. */
.mb th,.mb th.first,.mb th.chk{background:var(--sunken)!important}
/* Un titre long dans une colonne étroite débordait de sa case et
   passait derrière la colonne figée : « Rôle d… » apparaissait à
   gauche de « Name ». Il est maintenant coupé net. */
.mb th{overflow:hidden;text-overflow:ellipsis}
.mb th>span,.mb th{max-width:100%}

/* ── Le titre d'un groupe : fond transparent ───────────────────── */
/* Le fond gris posé pour le rendre lisible au défilement faisait une
   étiquette moche. Le titre n'a rien derrière lui : il n'a pas besoin
   de fond. */
.gh-in{background:transparent}

/* Le bord de la colonne figée : une ombre douce dit que le reste passe
   dessous. Sans elle, une colonne à moitié défilée ressemble à un
   défaut d'affichage. */
.mb td.first,.mb th.first{box-shadow:6px 0 8px -6px rgba(18,24,40,.16)}

/* ── La pastille de couleur d'un groupe ────────────────────────── */
/* Elle doit se voir et donner envie d'être cliquée : c'est par elle
   qu'on choisit la couleur du groupe. */
.grp-head .gdot{width:12px;height:12px;border-radius:4px;flex:0 0 12px;position:relative;top:0;
  border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:.12s}
.grp-head button.gdot:hover{transform:scale(1.25);box-shadow:0 0 0 3px rgba(0,0,0,.08)}

/* ── Le cadenas : rouge fermé, vert ouvert ─────────────────────── */
/* Demandé tel quel : « quand c'est privé, en rouge ; quand c'est
   ouvert, en vert ». Deux couleurs franches, lues sans réfléchir. */
.lockic.shut,.tlock.ferme{color:#b4232a!important;background:rgba(180,35,42,.13)!important}
.lockic.open,.tlock.ouvert{color:#12855a!important;background:rgba(18,133,90,.15)!important}
.nrow.sel .lockic.shut{color:#b4232a!important}
.nrow.sel .lockic.open{color:#12855a!important}

/* ── Deux familles dans la barre d'outils ──────────────────────── */
/* « Tableau / Kanban / Calendrier », c'est le TYPE d'écran. Le reste,
   ce sont les réglages de cet écran. Un vrai trait, pas un espace. */
.toolbar .tvues{padding-right:16px;margin-right:2px;border-right:1px solid var(--line);
  min-height:26px}
.tsep{display:none}

/* ── L'état d'une ligne : coloré, mais posé ────────────────────── */
/* Pleine case et à angle droit, un état devenait un pavé de peinture :
   sur quinze lignes, l'écran ne montrait plus que de l'orange. On
   garde la couleur d'un bord à l'autre — c'est ce qui rend la colonne
   lisible en diagonale — avec un léger retrait et des coins arrondis,
   pour qu'elle se pose dans la case au lieu de la remplacer. */
.mb .slab:not(.vide){margin:3px 4px;height:auto;min-height:26px;border-radius:6px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.07)}
/* Une case d'état vide reste vide : avec le retrait et l'ombre, elle
   dessinait un cadre creux sur toutes les lignes non renseignées. */
.mb .slab.vide{background:none;box-shadow:none;min-height:0;margin:0}
.mb td.stat .cell,.mb td[data-type="status"] .cell,.mb td[data-type="color"] .cell{
  display:flex;align-items:center}

/* Le titre d'un groupe porte la couleur du groupe : on retrouve sa
   bande de couleur dans le titre, au lieu d'un bleu unique. */
.grp-head .gtitle{color:var(--gc,var(--mdy-blue))}
.grp-head .caret{color:var(--gc,var(--mdy-blue));opacity:.75}

/* Le petit « i » d'une colonne se pose SUR la ligne du titre : en
   `display:grid` il passait à la ligne et l'en-tête faisait deux
   étages, avec le « i » perdu à gauche sous le titre. */
.mb th .coli{display:inline-grid!important;place-items:center;
  margin-left:5px;vertical-align:-2px;width:13px;height:13px;flex:none}
.mb th{white-space:nowrap;line-height:1.35}

/* Retirer une pièce : discret, et à sa place à droite de « ouvrir ». */
.papdel{
  flex:0 0 auto; width:22px; height:22px; margin-left:2px;
  border:1px solid transparent; border-radius:7px; background:none;
  color:var(--ink-3); font-size:15px; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .12s, color .12s, border-color .12s;
}
.pap:hover .papdel{ opacity:1; }
.papdel:hover{ color:var(--danger, #b42318); border-color:var(--line); }
.papdel:focus-visible{ opacity:1; outline:2px solid var(--brand); outline-offset:1px; }

/* L'écran de celui qui vient d'être invité et n'a encore accès à rien.
   Il ne doit jamais ressembler à une panne. */
.vide-acces{ display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:24px; background:var(--bg); }
.vide-acces .va-c{ max-width:520px; text-align:center; }
.vide-acces .va-i{ display:block; font-size:34px; margin-bottom:14px; }
.vide-acces h1{ font-size:22px; font-weight:650; color:var(--ink); margin:0 0 10px; }
.vide-acces p{ font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0 0 10px; }
.vide-acces .va-q{ color:var(--ink-3); font-size:13.5px; }
.vide-acces a{ color:var(--brand); font-weight:600; }

/* L'écran d'erreur : on dit ce qui se passe, et on laisse deux portes. */
.ecr-err{ display:flex; align-items:center; justify-content:center; min-height:70vh; padding:24px; }
.ecr-err .ee-c{ max-width:560px; text-align:center; }
.ecr-err h1{ font-size:21px; font-weight:650; color:var(--ink); margin:0 0 8px; }
.ecr-err p{ font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0 0 14px; }
.ecr-err code{ display:block; font-size:12px; color:var(--ink-3); background:var(--sunken);
  border:1px solid var(--line); border-radius:8px; padding:9px 12px; margin:0 0 16px;
  word-break:break-word; text-align:left; }
.ecr-err .ee-b{ display:flex; gap:8px; justify-content:center; }

/* Les deux droits qui ne dépendent d'aucun espace : l'argent, les papiers.
   Un interrupteur qui dit son état en toutes lettres — « oui » / « non » —
   plutôt qu'une pastille qu'il faut apprendre à lire. */
.acc-t th.acc-d{ width:66px; text-align:center; font-size:11.5px; }
.acc-t td.acc-d{ text-align:center; }
.acc-d .sw{
  min-width:46px; padding:3px 9px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--paper);
  color:var(--ink-3); font-size:11.5px; font-weight:600;
  transition:background .12s, color .12s, border-color .12s;
}
.acc-d .sw.on{ background:var(--ok-t, #e8f6ee); border-color:#bfe3cd; color:#0f7a52; }
.acc-d .sw:hover{ border-color:var(--line-strong, #c7ccdd); }
.acc-d .sw:disabled{ opacity:.5; cursor:default; }

/* ─── Mois par mois ───────────────────────────────────────────────
   Une ligne par mois, huit colonnes, et le détail qui se déplie
   dessous. Pas de graphique : des chiffres qu'on lit et qu'on clique. */
/* Huit colonnes de chiffres ne tiennent pas dans la colonne de lecture
   de 820 px : elles se serrent, les libellés se coupent, et on ne lit
   plus rien. Cet écran-ci prend la largeur dont il a besoin, centré. */
.pro.moisv{ max-width:1440px; }
.moisv .pro-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.moisv .pro-h > div:first-child{ max-width:640px; }
.mo-prof{ display:flex; gap:4px; flex:0 0 auto; }
.mo-prof button{
  padding:5px 11px; border:1px solid var(--line); background:var(--paper);
  border-radius:8px; font-size:12.5px; color:var(--ink-3); cursor:pointer;
}
.mo-prof button.on{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }

.mo-l{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); }
.mo-th, .mo-h{
  display:grid;
  grid-template-columns:150px repeat(6, minmax(112px, 1fr)) minmax(96px, .8fr);
  gap:12px; align-items:center; width:100%; text-align:left;
}
.mo-th{
  padding:9px 16px; background:var(--sunken); border-bottom:1px solid var(--line);
  font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-4);
}
.mo-r{ border-bottom:1px solid var(--line); }
.mo-r:last-child{ border-bottom:0; }
.mo-h{ padding:11px 16px; border:0; background:none; cursor:pointer; font:inherit; }
.mo-h:hover{ background:var(--sunken); }
.mo-r.on .mo-h{ background:var(--sunken); }
.mo-r.cours .mo-m b{ color:var(--brand); }
.mo-m{ display:flex; flex-direction:column; gap:1px; }
.mo-m b{ font-size:14px; font-weight:650; color:var(--ink); text-transform:capitalize;
  white-space:nowrap; }
.mo-m i{ font-style:normal; font-size:11px; color:var(--brand); }
.mo-v{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mo-v b{ font-size:14px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.mo-v b.z{ color:var(--ink-4); font-weight:400; }
.mo-v i{ font-style:normal; font-size:11px; color:var(--ink-4); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.mo-v.du b{ color:#b4232a; }
.mo-v.ok b{ color:var(--ink-4); font-weight:400; }
.mo-v.neg b{ color:#b4232a; }
.mo-v.pos b{ color:#12855a; }
.mo-bar{ display:block; height:3px; border-radius:2px; background:var(--line); margin-top:3px; }
.mo-bar i{ display:block; height:100%; border-radius:2px; background:var(--brand); }

.mo-d{ padding:0 16px 16px; background:var(--sunken); }
.mo-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.mo-c{ background:var(--paper); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.mo-ct{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 12px; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:650; color:var(--ink-2);
}
.mo-ct span{ font-weight:500; color:var(--ink-4); }
.mo-cl{ max-height:320px; overflow-y:auto; }
.mo-li{ display:grid; grid-template-columns:1fr auto; gap:2px 10px;
  padding:7px 12px; border-bottom:1px solid var(--line-soft, #f0f1f6); }
.mo-li:last-child{ border-bottom:0; }
.mo-n{ border:0; background:none; padding:0; font:inherit; text-align:left; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.mo-n:hover{ color:var(--brand); text-decoration:underline; }
.mo-n.plat{ cursor:default; font-weight:500; }
.mo-n.plat:hover{ color:var(--ink); text-decoration:none; }
.mo-x{ font-size:12.5px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.mo-x.du{ color:#b4232a; }
.mo-dev{ display:block; font-style:normal; font-size:10.5px; color:var(--ink-4); font-weight:400; }
.mo-y{ grid-column:1 / -1; font-size:11px; color:var(--ink-4); }
.mo-vide{ padding:14px 12px; font-size:12px; color:var(--ink-4); }
@media (max-width:1100px){
  .mo-th, .mo-h{ grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; }
  .mo-th span:nth-child(n+6), .mo-h .mo-v:nth-child(n+6){ display:none; }
}

/* Les abonnements qui reviennent, et les conseils. Deux listes sobres :
   ce qui compte, c'est le chiffre de droite et la phrase qui l'explique. */
.ck-p{ margin:0 0 10px; font-size:12.5px; line-height:1.55; color:var(--ink-3); }
.abo-l{ border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.abo-th, .abo-r{ display:grid; grid-template-columns:1fr 78px 92px 104px; gap:8px; align-items:center; }
.abo-th{ padding:6px 11px; background:var(--sunken); border-bottom:1px solid var(--line);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-4); }
.abo-r{ padding:7px 11px; border-bottom:1px solid var(--line-soft,#f0f1f6); font-size:12.5px; }
.abo-r:last-child{ border-bottom:0; }
.abo-n{ display:flex; flex-direction:column; min-width:0; }
.abo-n i{ font-style:normal; font-size:10.5px; color:var(--ink-4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.abo-m, .abo-v{ color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums; }
.abo-a{ text-align:right; font-variant-numeric:tabular-nums; }
.abo-a b{ font-weight:650; color:var(--ink); }

.cons-l{ display:flex; flex-direction:column; gap:8px; }
.cons-r{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start;
  padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.cons-r.couper{ border-color:#f3c9cc; background:#fdf4f4; }
.cons-r.identifier{ border-color:#f2e0bd; background:#fffaf0; }
.cons-b{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 7px; border-radius:999px; background:var(--sunken); color:var(--ink-3); white-space:nowrap; }
.cons-r.couper .cons-b{ background:#b4232a; color:#fff; }
.cons-r.identifier .cons-b{ background:#a9750f; color:#fff; }
.cons-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cons-t b{ font-size:13px; color:var(--ink); }
.cons-t i{ font-style:normal; font-size:11.5px; line-height:1.5; color:var(--ink-3); }
.cons-v{ font-size:13.5px; font-weight:650; color:var(--ink); white-space:nowrap;
  font-variant-numeric:tabular-nums; }

.dc-f{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.dc-ft{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-4); margin-bottom:6px; }
.dc-fl{ display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center;
  padding:3px 0; font-size:12px; }
.dc-fn{ color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-fc{ font-size:10.5px; color:var(--ink-4); }
.dc-fv{ font-weight:600; font-variant-numeric:tabular-nums; }
.abo-a i{ display:block; font-style:normal; font-size:10.5px; color:var(--ink-4); font-weight:400; }
.abo-a i.ponc{ color:var(--ink-4); opacity:.8; }
.abo-m.reg{ color:var(--ink-2); font-weight:600; }

/* ─── Le panneau des dates ────────────────────────────────────────
   Trois façons de choisir, parce qu'on ne cherche pas toujours la même
   chose : un mois, une période toute faite, ou deux dates. */
/* ── Le choix d'une période ──────────────────────────────────────────
   Vingt-quatre mois empilés dans une colonne qui défile, ça débordait du
   panneau, ça recouvrait les cartes et les derniers mois étaient coupés
   en bas. Une année à la fois, ses douze mois en grille : tout tient,
   rien ne défile, et on voit l'année qu'on regarde. */
.pdatepop{
  position:fixed; z-index:500; width:352px; max-width:calc(100vw - 20px);
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 16px 48px rgba(16,20,38,.18); padding:14px 14px 12px;
}
.pdt{ font-size:12.5px; font-weight:650; color:var(--ink); margin-bottom:10px; }

/* Les années : des onglets, pas une liste de plus. */
.pdy{ display:flex; gap:4px; margin-bottom:10px;
  background:var(--sunken); border-radius:9px; padding:3px; }
.pdy button{ flex:1; border:0; background:transparent; border-radius:7px;
  padding:5px 0; font:600 12px var(--f); color:var(--ink-3); cursor:pointer; }
.pdy button:hover{ color:var(--ink); }
.pdy button.on{ background:var(--paper); color:var(--ink);
  box-shadow:0 1px 3px rgba(16,20,38,.12); }

/* Les douze mois de l'année choisie, quatre par ligne. */
.pdm{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.pdm button, .pdq button{
  position:relative; padding:7px 4px; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); font:500 12px var(--f); color:var(--ink-2); cursor:pointer;
}
.pdm button i{ display:block; font-style:normal; font-size:8.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); margin-top:1px; }
.pdm button:hover:not(:disabled), .pdq button:hover:not(:disabled){
  border-color:var(--brand); color:var(--brand); }
.pdm button.on, .pdq button.on{ background:var(--brand); border-color:var(--brand);
  color:#fff; font-weight:600; }
.pdm button.on i{ color:rgba(255,255,255,.75); }
.pdm button:disabled, .pdq button:disabled{ opacity:.32; cursor:default; }
.pdm button.encours{ border-color:var(--brand); }

/* L'année entière et les quatre trimestres, sur une ligne. */
.pdq{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:5px; margin-top:7px; }
.pdq .pdfull{ font-size:11.5px; }

.pdd{ display:flex; align-items:center; gap:8px; margin-top:11px;
  padding-top:11px; border-top:1px solid var(--line-3); }
.pdd label{ flex:1; display:flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--ink-4); }
.pdd input{
  flex:1; min-width:0; padding:5px 6px; border:1px solid var(--line);
  border-radius:7px; font-size:11.5px; color:var(--ink); background:var(--paper);
}
.pdf{ display:flex; gap:6px; justify-content:flex-end; margin-top:10px; }
.pdf .btn{ font-size:12px; padding:5px 11px; }

/* HT ou TTC : deux mots, pas un menu. Et chaque chiffre porte sa mention. */
.tvasw{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  margin-right:10px; flex:0 0 auto; }
.tvasw button{ border:0; background:var(--paper); padding:4px 10px; font-size:11.5px;
  font-weight:600; color:var(--ink-4); cursor:pointer; }
.tvasw button.on{ background:var(--brand); color:#fff; }
.tvasw button:not(.on):hover{ background:var(--sunken); color:var(--ink-2); }
.tvatag{ font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.04em;
  color:var(--ink-4); background:var(--sunken); border-radius:4px; padding:1px 4px;
  margin-left:5px; vertical-align:2px; }
.mo-th i.thx{ font-style:normal; font-size:9px; font-weight:700; color:var(--ink-4);
  background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:0 3px; margin-left:3px; }
.mo-prof .tvasw{ margin-right:8px; }

/* ── L'unité, dite partout où un chiffre pourrait être lu de travers ──
   Un montant sans son unité oblige à se souvenir de l'interrupteur du
   haut. Ces petites étiquettes coûtent trois pixels et suppriment la
   question. */
.wt th i.thx{ font-style:normal; font-size:9px; font-weight:700; color:var(--ink-4);
  background:var(--sunken); border-radius:3px; padding:0 3px; margin-left:3px;
  vertical-align:1px; }
.w-head h2 .uh{ font-size:10px; font-weight:700; color:var(--ink-4);
  background:var(--sunken); border-radius:3px; padding:1px 5px; margin-left:6px;
  vertical-align:2px; letter-spacing:.02em; }
.wt td em.vir{ display:block; font-style:normal; font-size:10px; color:var(--ink-4);
  font-weight:500; margin-top:1px; }

/* ═══ LE PORTEFEUILLE ══════════════════════════════════════════════
   Un client par ligne. L'écran d'avant empilait le rapprochement Qonto,
   les devis d'un tableau Monday et la facturation historique : il
   parlait de contrats quand la question porte sur des clients. */


/* Les quatre chiffres de tête. Pas de dégradés : ce tableau se lit
   longtemps, il ne se regarde pas une seconde. */
.pf-tg{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.pf-t{ background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:13px 16px 14px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.pf-t.a{ border-left:3px solid #0073ea; } .pf-t.b{ border-left:3px solid #00a86b; }
.pf-t.c{ border-left:3px solid #e2445c; } .pf-t.d{ border-left:3px solid #a25ddc; }
.pf-te{ font:600 10px var(--f); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); }
.pf-tv{ font-family:var(--d); font-size:27px; font-weight:650; letter-spacing:-.8px;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.15; }
.pf-ts{ font-size:11.5px; color:var(--ink-4); }

.pf-avert{ background:#fff8e6; border:1px solid #f0d9a0; border-radius:10px;
  padding:10px 14px; font-size:12.5px; color:#7a5a12; line-height:1.55; margin-bottom:14px; }
.pf-avert b{ color:#5c4209; }

/* Les filtres : des puces qui disent combien, pas un menu déroulant. */
.pf-f{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.pf-fl{ font:600 10.5px var(--f); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-4); margin-right:2px; }
.pf-p{ border:1px solid var(--line); background:var(--paper); border-radius:20px;
  padding:4px 12px; font-size:12px; color:var(--ink-3); cursor:pointer; }
.pf-p b{ color:var(--ink); font-weight:650; }
.pf-p:hover:not(:disabled){ border-color:var(--brand); color:var(--brand); }
.pf-p.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pf-p.on b{ color:#fff; }
.pf-p:disabled{ opacity:.4; cursor:default; }

/* Le tableau. Une grille, pas un <table> : les lignes doivent pouvoir
   porter une barre et deux niveaux de texte sans se déformer. */
.pf-tab{ background:var(--paper); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; margin-bottom:18px; }
.pf-th, .pf-r{ display:grid;
  grid-template-columns:minmax(220px,2.4fr) repeat(4,minmax(96px,1fr)) minmax(120px,1.1fr);
  align-items:center; gap:10px; padding:0 16px; }
.pf-th{ background:var(--sunken); border-bottom:1px solid var(--line); }
.pf-th button{ border:0; background:none; padding:9px 0; cursor:pointer; text-align:right;
  font:600 10px var(--f); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); }
.pf-th button.pf-c1{ text-align:left; }
.pf-th button:hover{ color:var(--ink-2); }
.pf-th button.tri{ color:var(--brand); }
.pf-th button.tri::after{ content:' ↓'; }

.pf-r{ border-bottom:1px solid var(--line-3); padding-top:9px; padding-bottom:9px;
  cursor:pointer; }
.pf-r:last-child{ border-bottom:0; }
.pf-r:hover{ background:var(--sunken); }
.pf-r .pf-c1{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; min-width:0; }
.pf-r .pf-c1 b{ font-size:13.5px; font-weight:600; color:var(--ink); }
.pf-r .pf-c1 em{ font-style:normal; font-size:11px; color:var(--ink-4); }
.pf-et{ font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; border-radius:4px; padding:1px 5px; }
.pf-et.abonne{ background:#e3f7ee; color:#0a6b41; }
.pf-et.doit{ background:#fde8ea; color:#a3243a; }
.pf-et.parti{ background:#eceef3; color:#61687a; }
.pf-et.ponctuel{ background:#e8f0fd; color:#0a4fa8; }
.pf-et.dormant{ background:var(--sunken); color:var(--ink-4); }
.pf-neuf{ font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; background:#f3e8ff; color:#6b21a8; border-radius:4px; padding:1px 5px; }

.pf-v{ text-align:right; font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums;
  position:relative; min-width:0; }
.pf-v i{ display:block; font-style:normal; font-size:10.5px; color:var(--ink-4); }
.pf-v.du{ color:var(--alerte); font-weight:600; }
.pf-v .dash{ color:var(--ink-5); }
.pf-bar{ display:block; height:2px; background:var(--line); border-radius:2px; margin-top:3px; }
.pf-bar i{ display:block; height:2px; background:#00a86b; border-radius:2px; }
.pf-d{ font-size:12px; color:var(--ink-2); }
.pf-vide{ padding:26px; text-align:center; font-size:13px; color:var(--ink-4); }

/* Les deux listes d'action, côte à côte. */
.pf-g{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:1100px){ .pf-g{ grid-template-columns:1fr; }
  .pf-tg{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.pf-s{ background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.pf-sh{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line-3); }
.pf-sh b{ font-size:13.5px; font-weight:650; color:var(--ink); }
.pf-sh span{ font-size:11.5px; color:var(--ink-4); }
.pf-l{ max-height:420px; overflow-y:auto; }
.pf-li{ display:grid; grid-template-columns:1fr auto; gap:2px 12px;
  padding:8px 16px; border-bottom:1px solid var(--line-3); cursor:pointer; }
.pf-li:hover{ background:var(--sunken); }
.pf-ln{ font-size:12.5px; font-weight:600; color:var(--ink); }
.pf-lx{ font-size:13px; font-weight:650; color:var(--ink); text-align:right;
  font-variant-numeric:tabular-nums; }
.pf-ly{ grid-column:1/-1; font-size:11px; color:var(--ink-4); }
.pf-age{ font-style:normal; margin-left:6px; font-weight:700; font-size:10px;
  border-radius:4px; padding:0 4px; background:var(--sunken); color:var(--ink-4); }
.pf-age.tarde{ background:#fff2e0; color:#9a5a06; }
.pf-age.vieille{ background:#fde8ea; color:#a3243a; }
.pf-age.perdue{ background:#a3243a; color:#fff; }
.pf-orph{ font-style:normal; font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; background:#fff2e0; color:#9a5a06; border-radius:4px;
  padding:1px 5px; margin-left:6px; }
.pf-plus{ padding:8px 16px; font-size:11.5px; color:var(--ink-4); }
.pf-sf{ padding:11px 16px; border-top:1px solid var(--line-3); font-size:12px;
  color:var(--ink-3); line-height:1.55; background:var(--sunken); }
.pf-sf b{ color:var(--ink); }
.pf-li{ grid-template-columns:1fr auto auto; align-items:center; }
.pf-ln[data-cli]{ cursor:pointer; }
.pf-ln[data-cli]:hover{ color:var(--brand); }
.pf-rel{ grid-row:1/3; grid-column:3; align-self:center; border:1px solid var(--line);
  background:var(--paper); border-radius:7px; padding:4px 10px; font-size:11.5px;
  color:var(--ink-3); cursor:pointer; white-space:nowrap; }
.pf-rel:hover{ border-color:var(--brand); color:var(--brand); }
.facp .ko em{ display:block; font-style:normal; font-size:10px; font-weight:500;
  color:var(--ink-4); margin-top:1px; }
.pf-th button i.thx{ font-style:normal; font-size:8.5px; font-weight:700; color:var(--ink-5);
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:0 3px; margin-left:3px; }

/* ═══ À QUI EST CET ARGENT ? ═══════════════════════════════════════
   Une ligne par payeur, le montant en jeu bien visible, et les candidats
   à portée de clic. L'écran doit se traiter au rythme d'une décision par
   seconde : c'est le seul moyen que soixante-seize lignes se fassent. */
.pro.orph{ max-width:1240px; }
.orph-f{ display:flex; gap:4px; background:var(--sunken); border-radius:9px; padding:3px; }
.orph-f button{ border:0; background:transparent; border-radius:7px; padding:6px 12px;
  font:600 12px var(--f); color:var(--ink-3); cursor:pointer; }
.orph-f button b{ margin-left:5px; color:var(--ink-4); font-weight:700; }
.orph-f button.on{ background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgba(16,20,38,.12); }
.orph-f button.on b{ color:var(--brand); }

.orph-l{ background:var(--paper); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; margin-top:6px; }
.orph-r{ display:grid; grid-template-columns:minmax(200px,1.5fr) 120px minmax(300px,1.6fr);
  gap:12px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line-3); }
.orph-r:last-child{ border-bottom:0; }
.orph-r:hover{ background:var(--sunken); }
.orph-r.occupe{ opacity:.45; pointer-events:none; }
.orph-r.hs{ opacity:.7; }
.orph-i b{ display:block; font-size:13.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orph-i span{ font-size:11px; color:var(--ink-4); }
.orph-m{ text-align:right; font-family:var(--d); font-size:16px; font-weight:650;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.orph-c{ display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.orph-b{ border:1px solid var(--line); background:var(--paper); border-radius:7px;
  padding:4px 9px; font-size:12px; color:var(--ink-2); cursor:pointer; white-space:nowrap; }
.orph-b i{ font-style:normal; font-size:9.5px; color:var(--ink-5); margin-left:5px; }
.orph-b.sug:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.orph-b.sug:hover i{ color:rgba(255,255,255,.7); }
.orph-b.autre{ color:var(--brand); border-style:dashed; }
.orph-b.autre:hover{ background:var(--brand); color:#fff; border-style:solid; }
.orph-b.hors{ color:var(--ink-4); }
.orph-b.hors:hover{ border-color:var(--alerte); color:var(--alerte); }
.orph-hs{ font-size:11.5px; color:var(--ink-4); }
.orph-note{ margin-top:12px; background:var(--sunken); border-radius:10px;
  padding:12px 15px; font-size:12.5px; color:var(--ink-3); line-height:1.6; }
.orph-note b{ color:var(--ink); }
.orph-vide{ padding:40px; text-align:center; font-size:13.5px; color:var(--ink-4);
  background:var(--paper); border:1px solid var(--line); border-radius:12px; }
.orph-res{ margin-top:10px; max-height:300px; overflow-y:auto; }
.orph-rr{ display:block; width:100%; text-align:left; border:0; background:none;
  padding:8px 10px; border-radius:8px; font-size:13px; color:var(--ink); cursor:pointer; }
.orph-rr:hover{ background:var(--sunken); }
.orph-rr i{ font-style:normal; font-size:11px; color:var(--ink-4); margin-left:8px; }

/* Le lien depuis l'avertissement du portefeuille. */
.pf-avb{ display:inline-block; margin-left:8px; border:1px solid #d8be7e; background:#fff;
  border-radius:7px; padding:3px 10px; font-size:12px; font-weight:600;
  color:#7a5a12; cursor:pointer; }
.pf-avb:hover{ background:#7a5a12; color:#fff; border-color:#7a5a12; }
.orph-fl{ color:var(--ink-5); font-size:16px; }
.orph-vide span{ display:block; margin-top:8px; font-size:12.5px; color:var(--ink-5); }

/* Les onglets d'un écran : une seule barre, la même partout. Avant, trois
   écrans avaient chacun leur façon de dessiner « les deux faces du même
   sujet » — des boutons soulignés ici, des pilules là. */
.onglets{ display:flex; gap:2px; margin:0 0 16px; border-bottom:1px solid var(--line); }
.ong{ border:0; background:none; padding:8px 14px 10px; margin-bottom:-1px;
  font:600 13px var(--f); color:var(--ink-4); cursor:pointer;
  border-bottom:2px solid transparent; }
.ong:hover{ color:var(--ink-2); }
.ong.on{ color:var(--ink); border-bottom-color:var(--brand); }

/* Dans la coquille unique, la grille de widgets n'a plus à se donner ses
   propres marges : la page s'en charge. */
.pagex .board{ padding:0; }

/* ══ L'ANCIENNE BARRE DE TITRE, À LA MÊME ÉCHELLE ═════════════════════
   Six écrans utilisent encore `.topbar` : les accès, la synchronisation,
   la charge, le SEO, les appels, l'UTM. Les réécrire tous demanderait un
   risque sans rapport avec le gain ; il suffit qu'ils soient à la même
   échelle que les autres. Même taille de titre, même graisse, même
   approche — la couture ne se voit plus entre deux écrans.
   Les TABLEAUX gardent leur barre à eux : un tableau n'est pas une page
   de pilotage, et son titre est un nom modifiable, pas un intitulé. */
#view > .topbar:not(.bhead){ padding:24px 32px 0; border-bottom:1px solid var(--line); }
#view > .topbar:not(.bhead) .title-row{ margin-bottom:14px; }
#view > .topbar:not(.bhead) .title-row h1{
  font-family:var(--d); font-size:28px; font-weight:650; letter-spacing:-.7px; color:var(--ink);
}
#view > .topbar:not(.bhead) .hsub{ font-size:13.5px; color:var(--ink-3); }
/* Un emoji collé au titre : décoratif, jamais informatif, et jamais le
   même d'un écran à l'autre. */
#view > .topbar:not(.bhead) .title-row h1 em{ display:none; }
#view > .topbar:not(.bhead) + .board{ padding-top:20px; }

/* ── Un payeur ouvert, ligne par ligne ─────────────────────────────
   Quand un libellé recouvre plusieurs clients — « OKITO », huit
   restaurants — la seule décision de groupe possible est fausse. On
   descend donc à la ligne, et chacune se range seule. */
.orph-r{ position:relative; }
.orph-d{ grid-column:1/-1; margin:10px 0 2px; border-top:1px solid var(--line-3);
  padding-top:10px; }
.orph-dn{ font-size:11.5px; color:var(--ink-4); margin-bottom:8px; line-height:1.5; }
.orph-charge{ font-size:12.5px; color:var(--ink-4); padding:10px 0; }
.orph-dl{ display:grid; grid-template-columns:92px 1fr 100px 90px; gap:10px;
  align-items:center; padding:6px 0; border-bottom:1px solid var(--line-3); }
.orph-dl:last-child{ border-bottom:0; }
.orph-dl.range{ opacity:.5; }
.orph-dd{ font-size:11.5px; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.orph-dt{ font-size:12.5px; color:var(--ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orph-dt i{ font-style:normal; color:var(--ink-4); margin-left:6px; font-size:11px; }
.orph-dg{ font-style:normal; font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-5); background:var(--sunken);
  border-radius:4px; padding:1px 5px; margin-left:6px; }
.orph-dm{ text-align:right; font-size:12.5px; font-weight:640;
  font-variant-numeric:tabular-nums; }
.orph-dl .orph-b{ justify-self:end; }
.orph-ok{ justify-self:end; font-size:11.5px; color:var(--ok); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90px; }
.orph-b.det{ color:var(--ink-3); }
.orph-b.det.on{ background:var(--sunken); border-color:var(--ink-4); color:var(--ink); }
/* L'indice qui transforme un doute en décision : vingt-sept lignes au
   même montant, toutes du même compte Stripe, ce n'est pas un nom
   ambigu — c'est un abonné unique. Sans le dire, on laisse quelqu'un
   renoncer devant un groupe qui n'avait aucune ambiguïté. */
.orph-ind{ grid-column:1/-1; margin-top:8px; font-size:11.5px; line-height:1.5;
  border-radius:8px; padding:7px 11px; }
.orph-ind.seul{ background:#e9f6ef; color:#16603f; }
.orph-ind.multi{ background:#fff4e5; color:#8a5a12; }

/* ── Une échéance dépassée doit se voir de l'autre bout de l'écran ──
   Un tableau de tâches qui affiche « 27 juil. » en gris le 13 septembre
   ne sert à rien : le retard EST l'information. Trois états, et un seul
   attire l'œil. */
.dcell.ech{ display:inline-flex; flex-direction:column; line-height:1.2;
  font-variant-numeric:tabular-nums; }
.dcell.ech i{ font-style:normal; font-size:10px; font-weight:600; letter-spacing:.01em; }
.dcell.ech.aven{ color:var(--ink-2); }
.dcell.ech.aven i{ color:var(--ink-5); font-weight:500; }
.dcell.ech.auj{ color:#8a5a12; font-weight:600; }
.dcell.ech.auj i{ color:#b0730d; }
.dcell.ech.ret{ color:#a3243a; font-weight:600; }
.dcell.ech.ret i{ color:#c0202b; }
/* Au-delà d'un mois, ce n'est plus un retard, c'est un oubli. */
.dcell.ech.ret-loin{ color:#fff; background:#a3243a; border-radius:6px;
  padding:2px 7px; font-weight:600; }
.dcell.ech.ret-loin i{ color:rgba(255,255,255,.82); font-weight:500; }
/* Le compteur de retard en tête de groupe : lisible sans être criard,
   et cliquable — un chiffre qu'on ne peut pas ouvrir n'est qu'une
   affiche. */
.gret{ margin-left:10px; border:1px solid #f0c9ce; background:#fdeef1; color:#a3243a;
  border-radius:20px; padding:2px 10px; font:600 11.5px var(--f); cursor:pointer;
  white-space:nowrap; }
.gret:hover{ background:#a3243a; border-color:#a3243a; color:#fff; }
.gret.on{ background:#a3243a; border-color:#a3243a; color:#fff; }
.gret.on::after{ content:' ✕'; opacity:.7; }
/* Quand la transaction porte le nom du client, il n'y a rien à écrire en
   dessous : la ligne se centre au lieu de laisser un vide. */
.nmcl.seul{ line-height:1.35; }
.nml:has(.nmcl.seul){ justify-content:center; }

/* ── Une étape vide reste une bande, même en glissant dessus ───────
   La bande verticale de 42 pixels était déjà dessinée plus haut ; elle
   n'avait simplement jamais été posée par le code, donc « Nouveau lead »
   et « À relancer » occupaient 288 pixels de vide qu'il fallait franchir
   au défilement avant d'atteindre les colonnes qui portent le pipeline.
   Deux ajouts seulement : la bande s'élargit pendant qu'on survole avec
   une carte — sinon la cible est plus petite que ce qu'on tient — et
   redevient une colonne normale dès qu'elle en reçoit une. */

/* ── Pourquoi une étape vide garde toute sa largeur ────────────────
   J'ai essayé de réduire « Nouveau lead » et « À relancer » à une bande,
   puisqu'elles sont à zéro et qu'il faut les franchir au défilement. Le
   pipeline (.kb2, plus haut) dit l'inverse, et il a raison : une colonne
   vide repliée en bande devient une cible où l'on ne peut plus rien
   lâcher, et c'est précisément l'étape vers laquelle on veut déplacer une
   carte. Les colonnes restent donc toutes à la même largeur.

   Trace laissée exprès : la classe « kvide » n'est plus posée par le
   code, et les règles qui la dessinaient — vestiges d'une version
   antérieure — sont retirées. Sans cette note, quelqu'un refera l'essai. */

/* ── Le taux de remplissage d'une colonne, dans le menu Masquer ────
   Trente-quatre colonnes dont sept vides : sans ce chiffre, on ne sait
   pas lesquelles on peut cacher sans rien perdre. Le logiciel compte et
   propose ; il ne décide pas — une colonne vide aujourd'hui peut être
   celle qu'on s'apprête à remplir. */
.hrow{ display:flex; align-items:center; gap:8px; }
.hrow > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.hn{ font-style:normal; font-size:10px; font-weight:600; color:var(--ink-5);
  font-variant-numeric:tabular-nums; flex:0 0 auto; }
.hn.zero{ color:#a3243a; }
.hnet{ display:block; width:100%; text-align:left; border:0; background:var(--sunken);
  border-radius:8px; padding:8px 11px; margin:0 0 6px; cursor:pointer;
  font:600 12.5px var(--f); color:var(--ink); }
.hnet:hover{ background:var(--brand); color:#fff; }
.hnet i{ display:block; font-style:normal; font-size:10.5px; font-weight:500;
  color:var(--ink-4); margin-top:1px; }
.hnet:hover i{ color:rgba(255,255,255,.75); }

/* ── Le lien d'une note, visible sur la ligne ──────────────────────
   « Configurer Fathom » porte une note qui contient le lien
   d'affiliation — c'est tout l'objet de la ligne. Caché derrière une
   bulle, il n'existait pas. Sorti, il se clique. */
.ntlien{ display:inline-flex; align-items:center; margin-left:6px; padding:1px 7px;
  border-radius:20px; background:var(--sunken); border:1px solid var(--line);
  font-size:10.5px; font-weight:600; color:var(--brand); text-decoration:none;
  white-space:nowrap; flex:0 0 auto; max-width:170px; overflow:hidden;
  text-overflow:ellipsis; }
.ntlien:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ═══ LA LIGNE TELLE QU'ELLE EST ═══════════════════════════════════
   « Configurer Fathom » — une vidéo de deux minutes — s'ouvrait avec
   « MRR : à saisir », « Valeur du contrat » et « Aucune source : on ne
   sait pas ce qui a amené ce client ». La fiche riche du CRM était
   servie à toutes les lignes de tous les tableaux. Pour tout ce qui
   n'est pas un client, on montre ce que Monday montrait : le nom, les
   colonnes, les notes, les fichiers. */
.fshero{ padding:22px 28px 16px; border-bottom:1px solid var(--line); }
.fshero h1{ font-family:var(--d); font-size:24px; font-weight:650; letter-spacing:-.5px;
  margin:0 0 4px; color:var(--ink); }
.fsb{ font-size:12px; color:var(--ink-4); }

.fsg{ display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:0;
  flex:1; min-height:0; }
@media (max-width:900px){ .fsg{ grid-template-columns:1fr; } }
.fsc{ padding:18px 24px 40px; overflow-y:auto; border-right:1px solid var(--line); }
.fsn{ padding:18px 24px 40px; overflow-y:auto; min-width:0; }

.fspan{ margin-bottom:22px; }
.fsh{ font:600 10.5px var(--f); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:9px; padding-bottom:7px;
  border-bottom:1px solid var(--line-3); }
.fsl{ display:grid; grid-template-columns:minmax(96px,38%) 1fr; gap:12px;
  padding:7px 0; align-items:baseline; }
.fsk{ font-size:12px; color:var(--ink-4); }
.fsv{ font-size:13px; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.fsv .dash{ color:var(--ink-5); }
/* Les champs vides sont là si on les cherche, jamais au premier plan. */
.fspan.vides{ opacity:.55; }
.fspan.vides:hover{ opacity:1; }
.fspj{ display:block; font-size:12.5px; color:var(--brand); text-decoration:none;
  padding:5px 0; }
.fspj:hover{ text-decoration:underline; }

/* ═══ LE SOMMAIRE D'UNE FORMATION ══════════════════════════════════
   Deux cent six leçons en dizaines de chapitres d'une seule ligne :
   affichées en tableau, chacune traînait cinq lignes de mobilier pour
   une ligne de contenu. Ce n'est pas un tableau, c'est un sommaire. */
.fo{ max-width:1020px; margin:0 auto; padding:22px 26px 70px; }

.fo-h{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding:14px 18px; background:var(--paper);
  border:1px solid var(--line); border-radius:12px; margin-bottom:18px; }
.fo-hi b{ display:block; font-family:var(--d); font-size:20px; font-weight:650;
  letter-spacing:-.4px; color:var(--ink); }
.fo-hi span{ font-size:12.5px; color:var(--ink-4); }
.fo-pr{ display:flex; align-items:center; gap:10px; min-width:200px; }
.fo-pb{ display:block; flex:1; height:6px; background:var(--sunken);
  border-radius:99px; overflow:hidden; }
.fo-pb i{ display:block; height:6px; background:var(--ok); border-radius:99px;
  transition:width .2s ease; }
.fo-pt{ font-size:11.5px; font-weight:600; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

.fo-ch{ margin-bottom:20px; }
.fo-cht{ display:flex; align-items:baseline; gap:10px; padding:0 4px 8px;
  border-bottom:1px solid var(--line); margin-bottom:2px; }
.fo-cht b{ font-size:14px; font-weight:650; color:var(--ink); }
.fo-cht span{ font-size:11.5px; color:var(--ink-4); }

.fo-l{ display:grid; grid-template-columns:26px 30px 1fr 58px auto;
  align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line-3); }
.fo-l:hover{ background:var(--sunken); }
.fo-l.lue .fo-t{ color:var(--ink-4); }
.fo-ck{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line-strong);
  background:var(--paper); cursor:pointer; font-size:11px; font-weight:700;
  color:transparent; display:grid; place-items:center; padding:0; }
.fo-ck:hover{ border-color:var(--ok); }
.fo-l.lue .fo-ck{ background:var(--ok); border-color:var(--ok); color:#fff; }
.fo-n{ font-size:11.5px; color:var(--ink-5); text-align:right;
  font-variant-numeric:tabular-nums; }
.fo-t{ font-size:13.5px; color:var(--ink); cursor:pointer; min-width:0; }
.fo-t:hover{ color:var(--brand); }
.fo-ty{ font-style:normal; font-size:10px; color:var(--ink-4); margin-left:8px;
  background:var(--sunken); border-radius:4px; padding:1px 6px; white-space:nowrap; }
.fo-d{ font-size:12px; color:var(--ink-4); text-align:right;
  font-variant-numeric:tabular-nums; }
.fo-a{ display:flex; gap:5px; justify-content:flex-end; }
.fo-b{ border:1px solid var(--line); border-radius:7px; padding:4px 10px;
  font-size:11.5px; font-weight:600; text-decoration:none; white-space:nowrap; }
.fo-b.vid{ color:var(--brand); }
.fo-b.vid:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.fo-b.doc{ color:var(--ink-3); }
.fo-b.doc:hover{ background:var(--ink-2); border-color:var(--ink-2); color:#fff; }
.fo-vide{ font-size:11px; color:var(--ink-5); }

@media (max-width:760px){
  .fo-l{ grid-template-columns:26px 1fr auto; }
  .fo-n, .fo-d{ display:none; }
}

/* ═══ ENREGISTRER UN APPEL TÉLÉPHONIQUE ════════════════════════════
   Fathom n'écoute que les visios. Un appel court passé au téléphone
   n'existait nulle part, et ce qui s'y disait mourait avec la journée. */

/* Le bouton vit dans la conversation, à côté de « Publier » : c'est là
   que la note atterrit, donc c'est là qu'on la déclenche. */
.btn.enrb{ display:inline-flex; align-items:center; gap:7px; }
.btn.enrb .enrb-d{ width:8px; height:8px; border-radius:50%;
  background:var(--alerte); flex:0 0 8px; }
.btn.enrb:hover{ border-color:var(--alerte); color:var(--alerte); }

.enrz{ margin:0 0 12px; }

/* ── Ce qu'on lit avant de démarrer ──────────────────────────────
   Deux consignes, pas un paragraphe : l'une évite d'enregistrer sa
   propre voix seule, l'autre évite d'enfreindre la loi. */
.enr-k{ background:var(--paper); border:1px solid var(--line);
  border-radius:11px; padding:14px 16px 12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); }
.enr-kh{ display:flex; align-items:flex-start; gap:11px; }
.enr-ki{ width:30px; height:30px; border-radius:50%; flex:0 0 30px;
  display:grid; place-items:center; font-size:14px;
  background:var(--alerte); color:#fff; }
.enr-kh b{ display:block; font-family:var(--d); font-size:14.5px; color:var(--ink); }
.enr-kh span{ display:block; font-size:12px; color:var(--ink-3); margin-top:1px; }
.enr-kl{ list-style:none; margin:11px 0 0; padding:0;
  border-top:1px solid var(--line-2); }
.enr-kl li{ position:relative; padding:9px 0 0 18px; font-size:12.5px;
  color:var(--ink-2); line-height:1.55; }
.enr-kl li::before{ content:''; position:absolute; left:4px; top:16px;
  width:5px; height:5px; border-radius:50%; background:var(--ink-4); }
.enr-kl li b{ color:var(--ink); font-weight:600; }
.enr-k.err .enr-ki{ background:var(--alerte); font-weight:700; }
.enr-f{ display:flex; gap:7px; justify-content:flex-end; margin-top:12px; }
.enr-f .btn{ font-size:12px; padding:6px 12px; }

/* ── Pendant l'appel ─────────────────────────────────────────────
   Le chrono, la jauge et l'arrêt sur une seule ligne : tant que ça
   tourne, c'est la seule chose à regarder. */
.enr-on{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#131313; border-radius:11px; padding:11px 14px; }
.enr-on b{ font-family:var(--d); font-size:16px; font-variant-numeric:tabular-nums;
  color:#fff; letter-spacing:.01em; }
.enr-on .sp{ flex:1 1 10px; }
.enr-vu{ width:110px; height:22px; flex:0 0 110px; opacity:.95; }
.enr-l{ font-size:11.5px; color:#9a9a9a; }
.enr-l.mut{ color:#ffb4a8; }
.enr-on .btn{ font-size:12px; padding:6px 12px; flex:none;
  background:transparent; border-color:#3a3a3a; color:#e6e6e6; }
.enr-on .btn:hover{ border-color:#6a6a6a; color:#fff; }
.enr-on .btn.primary{ background:var(--alerte); border-color:var(--alerte); color:#fff; }
.enr-on .btn.primary:hover{ filter:brightness(1.08); }
/* Le point qui bat : on doit voir que ça tourne sans lire le chrono. */
.enr-pt{ width:10px; height:10px; border-radius:50%; background:var(--alerte);
  flex:0 0 10px; animation:enrbat 1.1s ease-in-out infinite; }
@keyframes enrbat{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* ── Après l'arrêt, le temps que ça transcrive ───────────────────── */
.enr-att{ display:flex; align-items:center; gap:11px;
  background:var(--sunken); border:1px solid var(--line);
  border-radius:11px; padding:12px 15px; }
.enr-att b{ display:block; font-family:var(--d); font-size:14px; color:var(--ink); }
.enr-att span{ display:block; font-size:12px; color:var(--ink-3); line-height:1.5; }
.enr-sp{ width:17px; height:17px; flex:0 0 17px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--alerte);
  animation:enrtourne .8s linear infinite; }
@keyframes enrtourne{ to{ transform:rotate(360deg) } }

@media (prefers-reduced-motion:reduce){
  .enr-pt, .enr-sp{ animation:none }
}

@media (max-width:620px){
  .enr-vu{ display:none }
}

/* La transcription, pliée sous le compte rendu : on la déplie quand on
   cherche une phrase exacte, pas à chaque relecture. */
.upd details{ margin:8px 0; }
.upd details summary{ cursor:pointer; font-size:12px; color:var(--ink-3);
  padding:4px 0; }
.upd details summary:hover{ color:var(--brand); }
.upd details p{ font-size:12.5px; color:var(--ink-2); line-height:1.65;
  background:var(--sunken); border-radius:8px; padding:10px 12px; margin:6px 0 0; }

/* ── Déposer sa photo de profil ────────────────────────────────────
   L'écran renvoyait vers le compte Google. Celui qui entre par un lien
   d'invitation n'en a pas, et restait deux initiales grises dans toutes
   les listes du logiciel. */
.pphoto{ display:flex; gap:6px; flex:none; }
.pphoto .btn{ font-size:11.5px; padding:5px 10px; }

/* ── Les écrans, qui ne sont pas des tableaux ──────────────────────
   Le Cockpit, l'Acquisition, les Revenus ne se partagent pas comme un
   tableau : ils s'ouvrent. Le tableau ci-dessous est la seule place où
   ça se règle. */
.acc-ecr{ width:100%; border-collapse:collapse; margin-top:8px; }
.acc-ecr th{ font-size:11px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; text-align:center; padding:7px 6px;
  border-bottom:1px solid var(--line); white-space:nowrap; }
.acc-ecr th:first-child{ text-align:left; }
.acc-ecr td{ padding:7px 6px; border-bottom:1px solid var(--line-3);
  text-align:center; vertical-align:middle; }
.acc-ecr td:first-child{ text-align:left; }
.acc-ecr td b{ display:block; font-size:12.5px; }
.acc-ecr td i{ font-style:normal; font-size:11px; color:var(--ink-3); }
.acc-ecr tr:last-child td{ border-bottom:0; }

/* ── Les confettis d'une affaire gagnée ────────────────────────────
   Par-dessus tout, et transparent aux clics : on doit pouvoir
   continuer à travailler pendant que ça tombe. */
.confettis{ position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:9999; }

/* Un compte de l'ancien outil, encore posé sur une ligne : on le montre
   pour pouvoir l'enlever, pas pour qu'on le choisisse. */
.ppl label.ancien{ opacity:.6; }
.ppl .anc{ font-style:normal; font-size:10.5px; color:var(--ink-3);
  border:1px solid var(--line); border-radius:9px; padding:1px 6px; margin-left:5px; }

/* ── Ce qui est ouvert hors direction ──────────────────────────────
   « J'aimerais être sûr que personne n'a accès. » La réponse est une
   liste, en tête de l'écran, refaite à chaque ouverture. */
.acc-audit{ border:1px solid var(--signal-line); background:var(--signal-t);
  border-radius:10px; padding:13px 15px; margin:0 0 16px; }
.acc-audit.ok{ border-color:#bfe6d4; background:var(--ok-t); }
.acc-audit > b{ display:block; font-size:13.5px; color:var(--ink); }
.acc-audit > span{ display:block; font-size:11.5px; color:var(--ink-2);
  line-height:1.55; margin-top:3px; }
.aud-l{ display:flex; align-items:center; gap:9px; margin-top:10px;
  padding-top:9px; border-top:1px solid rgba(0,0,0,.06); flex-wrap:wrap; }
.aud-l > b{ font-size:12.5px; flex:none; }
.aud-b{ display:flex; gap:5px; flex-wrap:wrap; }
.aud-b i{ font-style:normal; font-size:11px; background:var(--paper);
  border:1px solid var(--line); border-radius:11px; padding:2px 8px; color:var(--ink-2); }

/* « à rattacher » est un bouton, pas un constat : soixante-huit appels
   attendaient qu'on puisse les placer à la main. */
button.aporph{ font:inherit; font-size:11.5px; color:var(--signal);
  background:var(--signal-t); border:1px solid var(--signal-line);
  border-radius:11px; padding:2px 9px; cursor:pointer; }
button.aporph:hover{ background:var(--signal); color:#fff; border-color:var(--signal); }

/* ── Le motif d'une affaire perdue ─────────────────────────────────
   Demandé au moment du geste, quand on sait encore pourquoi. */
.perte-l{ display:flex; flex-wrap:wrap; gap:7px; margin:4px 0 2px; }
.perte-b{ font:inherit; font-size:12.5px; font-weight:600; color:#fff;
  background:var(--c,#9195a8); border:0; border-radius:14px;
  padding:6px 13px; cursor:pointer; }
.perte-b:hover{ filter:brightness(1.08); }

/* ── Le choix du créneau de démarrage ──────────────────────────────
   Trois lundis par mois, chacun avec son chef de projet. */
.dem-l{ display:flex; flex-direction:column; gap:12px; margin:6px 0 2px;
  max-height:52vh; overflow-y:auto; }
.dem-m > b{ display:block; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.dem-m{ display:flex; flex-direction:column; }
.dem-m .dem-b + .dem-b{ margin-top:5px; }
.dem-b{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  font:inherit; background:var(--paper); border:1px solid var(--line);
  border-radius:9px; padding:9px 12px; cursor:pointer; }
.dem-b:hover{ border-color:var(--brand); background:var(--brand-tint); }
.dem-b.att{ opacity:.5; }
.dem-b i{ font-style:normal; font-size:11px; font-weight:600; color:var(--ink-3);
  width:66px; flex:none; }
.dem-b span{ flex:1; font-size:13.5px; font-weight:600; color:var(--ink); }
.dem-b em{ font-style:normal; font-size:11.5px; color:var(--brand-deep);
  background:var(--brand-tint); border-radius:10px; padding:2px 9px; }
.dem-b:hover em{ background:var(--paper); }

/* ══════════════════════════════════════════════════════════════════
   LA FRISE DE PRODUCTION
   Un calendrier de production dans une grille à colonnes n'est pas un
   calendrier : c'est une liste de dates. Ici, ce qui porte
   l'information c'est la POSITION et la LONGUEUR des barres.

   Parti pris : on ne ressemble pas à l'outil qu'on remplace. Fond
   profond, un seul accent par phase, les chiffres en chasse fixe,
   beaucoup d'air. Aucune pastille arrondie posée sur du gris.
   ══════════════════════════════════════════════════════════════════ */
/* ⚠ Le parti pris d'origine était un fond profond — « on ne ressemble
   pas à l'outil qu'on remplace ». À l'usage c'est un bloc noir de six
   cents pixels au milieu d'une application blanche : lourd, et les
   couleurs de phase y crient. Tout l'écran de production est passé en
   clair, et c'est la couleur des étapes qui porte l'information. */
.frz{ margin:0 0 22px; }

/* ── L'en-tête : ce qui se passe maintenant, pas le nom de l'écran ── */
.frz-h{ padding:4px 2px 18px; display:flex; align-items:flex-end;
  gap:30px; flex-wrap:wrap; }
.frz-eb{ display:block; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-4); margin-bottom:6px; }
.frz-ht{ flex:1 1 300px; min-width:0; }
.frz-ht h2{ margin:0; font-family:var(--d); font-size:26px; line-height:1.1;
  letter-spacing:-.022em; color:var(--ink); text-wrap:balance; }
.frz-ht p{ margin:6px 0 0; font-size:13px; color:var(--ink-2); line-height:1.5; }
.frz-hk{ display:flex; gap:24px; flex-wrap:wrap; }
.frz-hk > div{ min-width:74px; }
.frz-hk span{ display:block; font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); margin-bottom:3px; }
.frz-hk b{ display:block; font-family:var(--d); font-size:15px; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ── Le bandeau client ────────────────────────────────────────────
   Le chef de projet n'entre pas dans le CRM, et ne doit pas y entrer :
   le CRM porte les montants, les sources, les négociations. Mais il a
   besoin du secteur, du contact et du Drive : cette moitié-là, et pas
   une ligne de plus. */
.frz-client:empty{ display:none; }
.frz-client{ background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:15px 20px 14px; margin:0 0 14px; }
.frzc-h{ display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.frzc-h .sp{ flex:1; }
.frzc-cr{ font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.frzc-h b{ font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); }
.frzc-dr{ font-size:12px; font-weight:600; }
.frzc-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(162px,1fr));
  gap:2px 24px; }
.frzc-f{ margin:0; padding:6px 0; border-bottom:1px solid var(--line-3); min-width:0; }
.frzc-f dt{ font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:2px; }
.frzc-f dd{ margin:0; font-size:13px; color:var(--ink); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Le créneau et le chef de projet : ce sont eux qui décident du reste. */
.frzc-f.vif dd{ color:var(--brand-deep); }
.frzc-n{ margin:11px 0 0; font-size:12px; color:var(--ink-3); }

/* Décaler le batch : trois choix, depuis l'en-tête de la frise. */
.frz-act{ border-left:1px solid var(--line); padding-left:22px; }
.frz-act > span{ display:block; font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); margin-bottom:3px; }
.frz-dec{ font:inherit; font-size:12.5px; font-weight:600; color:var(--ink);
  background:var(--line-3); border:1px solid var(--line);
  border-radius:8px; padding:5px 12px; cursor:pointer; white-space:nowrap; }
.frz-dec:hover{ background:var(--brand-tint); border-color:var(--brand-line);
  color:var(--brand-deep); }

/* ═══ LA FRISE DU BATCH, EN CLAIR ═════════════════════════════════
   ⚠ Deux essais avant celui-ci. Une frise sur fond SOMBRE : un bloc
   lourd au milieu d'une application blanche, et les couleurs de phase
   qui criaient. Puis une grille de mois façon agenda : joli, mais un
   batch de trois semaines y prend quatre écrans de haut, et deux étapes
   simultanées se retrouvent sur deux lignes séparées par sept jours de
   cases vides — alors que « qu'est-ce qui tourne en même temps » est
   justement la question. Une ligne par étape, en clair, et compact. */
.prz{ background:var(--paper); border:1px solid var(--line); border-radius:14px;
  margin:0 0 16px; overflow:hidden; }

/* L'en-tête : les mois, puis la règle des jours. Discrète — c'est
   l'échelle, pas le sujet. */
.prz-h{ background:var(--sunken); border-bottom:1px solid var(--line); }
.prz-mois{ display:flex; padding:9px 0 0; }
.prz-mois span{ width:var(--w); flex:none; font-size:11px; font-weight:650;
  letter-spacing:.01em; color:var(--ink-2); text-transform:capitalize;
  border-left:1px solid var(--line-3); padding:0 0 6px 8px;
  overflow:hidden; white-space:nowrap; }
.prz-mois span:first-child{ border-left:0; padding-left:14px; }
.prz-mois i{ font-style:normal; color:var(--ink-4); margin-left:4px; font-weight:400; }

.prz-regle{ display:flex; }
.prz-regle span{ flex:1 1 0; min-width:0; text-align:center; padding:0 0 8px;
  font-variant-numeric:tabular-nums; }
.prz-regle i{ display:block; font-style:normal; font-size:8px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-4); }
.prz-regle b{ display:block; font-size:12px; font-weight:500; color:var(--ink-2); }
.prz-regle .we b, .prz-regle .we i{ color:var(--ink-4); }
.prz-regle .auj b{ color:#fff; background:var(--ink); border-radius:50%;
  width:17px; height:17px; line-height:17px; margin:0 auto; font-weight:700; }

/* Le corps : une ligne par étape. Trente pixels, pas plus — quatre
   semaines de production tiennent sous les deux cents pixels. */
/* ⚠ Trente pixels par ligne, et les points de tournage se posaient SUR
   la barre : on lisait « T②nage ① ». Quatre pixels de plus, et ils
   passent dessous — la barre garde son nom, les points leur place. */
.prz-corps{ position:relative; display:flex;
  height:calc(var(--r) * 46px + 20px); padding-top:12px; }
.prz-col{ flex:1 1 0; min-width:0; border-left:1px solid var(--line-3); }
.prz-col:first-child{ border-left:0; }
.prz-col.we{ background:var(--sunken); }

/* Aujourd'hui : un trait, pas une couleur de fond. On doit savoir où
   l'on est sans que ça prenne le dessus sur les étapes. */
.prz-auj{ position:absolute; top:0; bottom:0; width:0; z-index:6;
  border-left:1.5px dashed var(--brand); }
.prz-auj i{ position:absolute; top:-1px; left:6px; font-style:normal;
  font-size:9px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--brand-deep); white-space:nowrap; }

.prz-l{ position:absolute; left:0; right:0; height:46px;
  top:calc(12px + var(--i) * 46px); }

/* La barre d'une étape. Une surface franche, son nom dedans, sa durée à
   droite. Pas de dégradé, pas d'ombre portée. */
.prz-b{ position:absolute; box-sizing:border-box; left:var(--x); width:var(--w);
  height:32px; min-width:30px; background:var(--c); border:0; border-radius:8px;
  display:flex; align-items:center; gap:8px; padding:0 10px; text-align:left;
  cursor:pointer; overflow:hidden; touch-action:none; }
.prz-nom{ font-size:12.5px; font-weight:600; color:#fff; letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; }
.prz-j{ font-size:10.5px; color:rgba(255,255,255,.75); flex:none;
  font-variant-numeric:tabular-nums; }
.prz-ok{ flex:none; font-size:10px; font-weight:800; color:#fff;
  background:rgba(255,255,255,.3); border-radius:50%; width:15px; height:15px;
  display:grid; place-items:center; line-height:1; }
/* Ce qui est fait s'apaise : la frise doit montrer ce qui reste. */
.prz-b.fait{ opacity:.4; }
.prz-b.avenir{ opacity:.9; }
.prz-b.ok{ opacity:.45; }
.prz-b.ok .prz-nom{ text-decoration:line-through; text-decoration-thickness:1.5px; }
.prz-b.vif{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--c); }
.prz-b.bloque{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--alerte); }
.prz-b:hover{ filter:brightness(1.08); z-index:5; }
.prz-b:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.prz-b.prise{ filter:brightness(1.12); z-index:9;
  box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--c),
             0 8px 20px -8px rgba(0,0,0,.35); }
/* Une étape d'un ou deux jours : son nom ne tient pas dedans, il se
   pose à côté. « L… » ne dit rien. */
.prz-b.court{ justify-content:center; overflow:visible; padding:0 4px; }
.prz-b.court .prz-nom{ position:absolute; left:calc(100% + 8px);
  color:var(--ink); font-weight:600; }
.prz-b.court .prz-j{ display:none; }
.prz-b.court.ok .prz-nom{ color:var(--ink-3); }

/* L'attente chez le client : de la fin du travail à la date limite.
   Hachurée, parce que ce n'est pas du travail — c'est du temps qui passe
   ailleurs. En rouge quand la limite est dépassée : là, ce n'est plus
   nous qui sommes en retard. */
.prz-att{ position:absolute; box-sizing:border-box; left:var(--x); width:var(--w);
  height:32px; border-radius:8px; touch-action:none; cursor:pointer;
  border:1px dashed color-mix(in srgb, var(--c) 55%, var(--paper));
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--c) 22%, transparent) 0 5px, transparent 5px 10px); }
.prz-att.tard{ border-color:var(--alerte);
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--alerte) 26%,
    transparent) 0 5px, transparent 5px 10px); }

/* Les tournages posés sur les vidéos : un point par jour, avec leur
   nombre. C'est la seule chose qui relie la frise au détail des scripts,
   et elle se lit sans cliquer. */
.prz-pt{ position:absolute; top:25px; transform:translateX(-50%); z-index:7;
  width:16px; height:16px; border-radius:50%; background:var(--paper);
  border:1.5px solid #2563a8; display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--paper); }
.prz-pt b{ font-size:9px; font-weight:700; color:#2563a8;
  font-variant-numeric:tabular-nums; line-height:1; }

/* Les poignées : elles ne se voient qu'au survol de leur ligne. Une
   frise couverte de poignées ne se lit plus. */
.frz-poi{ position:absolute; top:0; bottom:0; width:11px; z-index:8;
  cursor:ew-resize; touch-action:none; opacity:0; transition:opacity .1s ease; }
.frz-poi.g{ left:0; }
.frz-poi.d{ right:0; }
.frz-poi::after{ content:''; position:absolute; top:50%; transform:translateY(-50%);
  left:4px; width:3px; height:11px; border-radius:2px;
  background:rgba(255,255,255,.9); box-shadow:0 0 0 1px rgba(0,0,0,.18); }
.prz-l:hover .frz-poi{ opacity:1; }
.prz-att .frz-poi::after{ background:color-mix(in srgb, var(--c) 70%, var(--ink)); }
.prz.glisse .frz-poi{ opacity:0; }
.prz.glisse .prz-b:hover{ filter:none; }
.prz-l:hover .prz-b{ cursor:grab; }
.prz-b.prise{ cursor:grabbing; }

/* Les dates pendant le geste : sans elles on déplace à l'aveugle. */
.prz-glis{ position:absolute; top:-26px; transform:translateX(-50%); z-index:14;
  background:var(--ink); color:#fff; font-size:11px; font-weight:600;
  border-radius:7px; padding:4px 9px; white-space:nowrap; pointer-events:none;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.45); font-variant-numeric:tabular-nums; }
.prz-glis b{ font-weight:750; }

@media (max-width:760px){
  .prz-nom{ font-size:10.5px; }
  .prz-j{ display:none; }
}

/* La fiche du client, ouverte depuis son tableau de production. */
/* ⚠ « Ouvrir la fiche du client » était une pastille pâle posée entre
   deux titres : on ne la voyait pas, et c'est pourtant l'endroit où
   vivent l'adresse, le contact et le brief. C'est maintenant un bouton,
   et il a l'air d'un bouton. */
.frzc-f2{ font:inherit; font-size:12.5px; font-weight:650; color:#fff;
  background:var(--brand); border:1px solid var(--brand);
  border-radius:9px; padding:7px 15px; cursor:pointer; display:flex;
  align-items:center; gap:8px; flex:none;
  box-shadow:0 2px 8px -3px color-mix(in srgb, var(--brand) 70%, transparent); }
.frzc-f2:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }
.frzc-fi{ font-size:13px; line-height:1; }

/* Le chef de projet et son remplaçant : des noms qu'on change. Ça se
   voit — un trait pointillé dessous — sans faire un champ de saisie
   d'une information qu'on lit vingt fois pour la changer une. */
.frzc-ed{ font:inherit; font-size:12.5px; font-weight:600; color:var(--ink);
  background:none; border:0; padding:0; cursor:pointer;
  border-bottom:1px dashed var(--line); }
.frzc-ed:hover{ color:var(--brand-deep); border-bottom-color:var(--brand); }

/* ── Le fichier que le client valide ──────────────────────────────
   Les scripts et le casting partent en PDF. C'est le geste qui
   ferme l'étape : sans pièce jointe, le client ne valide rien, et le
   batch attend sans que personne sache pourquoi. */
.expz{ display:flex; align-items:center; gap:18px; margin:0 0 14px;
  padding:14px 18px; background:var(--paper); border:1px solid var(--line);
  border-radius:13px; }
.expz-c{ flex:1; min-width:0; }
.expz-c b{ display:block; font-size:13.5px; color:var(--ink); }
.expz-c span{ display:block; font-size:12px; color:var(--ink-2);
  line-height:1.5; margin-top:3px; max-width:76ch; }
.expz-b{ flex:none; font-size:12.5px; font-weight:650; color:#fff;
  background:var(--brand); border-radius:9px; padding:8px 16px;
  text-decoration:none; white-space:nowrap; }
.expz-b:hover{ background:var(--brand-deep); }
@media (max-width:720px){ .expz{ flex-direction:column; align-items:stretch; }
  .expz-b{ text-align:center; } }

/* ── Ce qui est réservé à la direction ────────────────────────────
   La fiche ouverte depuis un tableau de production est la MÊME que celle
   du CRM : même écran, mêmes lignes au même endroit. Les valeurs
   sensibles y sont remplacées par trois points — on voit qu'un MRR
   existe, on ne voit pas combien. Retirer les lignes aurait fait une
   deuxième fiche, avec ses propres surprises. */
/* ⚠ C'étaient trois points sur fond gris. « Flouter » veut dire autre
   chose : on voit qu'il y a quelque chose, de quelle longueur, et on ne
   le lit pas. Trois points disent « caché » ; un flou dit « pas pour
   vous », ce qui est la vérité et se comprend sans explication. */
.flou{ filter:blur(4.5px); user-select:none; pointer-events:none;
  color:var(--ink-3); letter-spacing:.02em; display:inline-block;
  vertical-align:baseline; }
/* Une tuile ou une ligne floutée ne se clique pas et ne s'édite pas :
   un champ qu'on ne peut pas lire n'a pas à s'ouvrir sous le curseur. */
.fk:has(.flou){ cursor:default; }
@media print{ .flou{ filter:none; color:transparent; background:var(--line);
  border-radius:4px; } }



/* Le dossier Drive, sur la fiche ouverte depuis la production. C'est la
   seule chose que ce panneau garde de ce côté-là. */
.dbtn{ font:inherit; font-size:12.5px; font-weight:600; color:var(--ink);
  background:var(--line-3); border:1px solid var(--line); border-radius:9px;
  padding:8px 14px; cursor:pointer; width:100%; text-align:left; }
.dbtn:hover{ background:var(--brand-tint); border-color:var(--brand-line);
  color:var(--brand-deep); }

/* ── La relecture, mois par mois ──────────────────────────────────
   Un client signé trois mois reçoit trois lots. Un lien par mois, dans
   l'ordre où ils arrivent : celui du mois en cours en avant, les
   suivants en attente, les passés discrets mais toujours ouvrables. */
.revm{ background:var(--paper); border:1px solid var(--line); border-radius:14px;
  margin:0 0 16px; overflow:hidden; }
.revm-h{ padding:15px 20px 13px; border-bottom:1px solid var(--line-3); }
.revm-h > div{ display:flex; flex-direction:column; gap:2px; }
.revm-h b{ font-size:14.5px; color:var(--ink); }
.revm-n{ display:block; font-size:12px; color:var(--ink-2); line-height:1.5;
  margin-top:6px; max-width:82ch; }
.revm-l{ list-style:none; margin:0; padding:0; }
.revm-l li{ display:flex; align-items:center; gap:14px; padding:11px 20px;
  border-bottom:1px solid var(--line-3); }
.revm-l li:last-child{ border-bottom:0; }
.revm-l li.avenir{ opacity:.62; }
.revm-m{ flex:0 0 190px; display:flex; flex-direction:column; }
.revm-m b{ font-size:13.5px; color:var(--ink); }
.revm-m span{ font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.revm-l li.vif .revm-m b::before{ content:'●'; font-size:7px; vertical-align:middle;
  margin-right:6px; color:var(--ok); }
.revm-lien{ flex:1; min-width:0; font-size:12.5px; font-weight:600;
  color:var(--brand-deep); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.revm-v{ flex:1; font-size:12px; color:var(--ink-3); }
.revm-go{ flex:none; font:inherit; font-size:12.5px; font-weight:650; color:#fff;
  background:var(--brand); border:0; border-radius:9px; padding:7px 14px;
  cursor:pointer; }
.revm-go:hover{ background:var(--brand-deep); }
.revm-go:disabled{ opacity:.6; cursor:default; }
.revm-cp{ flex:none; font:inherit; font-size:12px; font-weight:600; color:var(--ink);
  background:var(--line-3); border:1px solid var(--line); border-radius:8px;
  padding:6px 12px; cursor:pointer; }
.revm-cp:hover{ background:var(--brand-tint); color:var(--brand-deep); }
.revm-dr{ flex:none; font-size:15px; text-decoration:none; opacity:.7; }
.revm-dr:hover{ opacity:1; }
@media (max-width:760px){ .revm-l li{ flex-wrap:wrap; } .revm-m{ flex-basis:100%; } }

/* La dette d'engagement, dans l'en-tête du bandeau client. Discrète
   quand tout est livré, ambrée quand des mois signés ne sont pas encore
   au calendrier — là, il manque vraiment quelque chose. */
.frzc-de{ font-size:11.5px; font-weight:600; color:var(--ink-2);
  background:var(--line-3); border-radius:20px; padding:3px 11px; }
.frzc-de.ok{ color:var(--ok-deep, #1c7a4a); background:var(--ok-tint, #e6f6ed); }
.frzc-de.att{ color:#8a5a00; background:#fdf0d5; }


/* Prolonger : le geste qui comble l'écart entre ce que le client a signé
   et ce que le calendrier porte. Ambré quand il manque des mois, gris
   quand tout est planifié — c'est alors un geste de renouvellement. */
.frzc-pl{ font:inherit; font-size:11.5px; font-weight:650; color:#8a5a00;
  background:#fdf0d5; border:1px solid #f0d9a8; border-radius:20px;
  padding:3px 11px; cursor:pointer; }
.frzc-pl:hover{ background:#f7e3b8; }
.frzc-pl.calme{ color:var(--ink-2); background:var(--line-3); border-color:var(--line); }
.frzc-pl.calme:hover{ background:var(--brand-tint); color:var(--brand-deep);
  border-color:var(--brand-line); }

/* ── Le mois, à côté du titre ─────────────────────────────────────
   Sur un tableau de production, un groupe EST un mois. Le sélecteur
   choisit donc un groupe, et le même choix vaut pour le calendrier et
   pour les trois onglets : c'est le même client, le même mois, la même
   question. Il est à côté du nom du client parce que c'est la deuxième
   chose qu'on lit en arrivant — « Heyi, où ? en novembre ». */
.mois-sel{ position:relative; margin-left:4px; }
.mois-b{ font:inherit; display:inline-flex; align-items:baseline; gap:6px;
  background:var(--line-3); border:1px solid var(--line); border-radius:9px;
  padding:5px 11px; cursor:pointer; color:var(--ink); }
.mois-b:hover{ background:var(--brand-tint); border-color:var(--brand-line); }
.mois-b i{ font-style:normal; font-size:12px; line-height:1; align-self:center; }
.mois-b b{ font-size:13px; font-weight:650; text-transform:capitalize; }
.mois-b span{ font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.mois-b em{ font-style:normal; font-size:10px; color:var(--ink-4); align-self:center; }
.mois-l{ position:absolute; top:calc(100% + 5px); left:0; z-index:40;
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.3); padding:5px;
  max-height:340px; overflow-y:auto; min-width:174px; }
.mois-l button{ display:flex; justify-content:space-between; gap:12px; width:100%;
  font:inherit; font-size:13px; text-align:left; background:none; border:0;
  border-radius:7px; padding:7px 11px; cursor:pointer; color:var(--ink);
  text-transform:capitalize; }
.mois-l button span{ color:var(--ink-3); font-variant-numeric:tabular-nums;
  text-transform:none; }
.mois-l button:hover{ background:var(--line-3); }
.mois-l button.on{ background:var(--brand); color:#fff; font-weight:600; }
.mois-l button.on span{ color:rgba(255,255,255,.7); }

/* Un mois dont les lignes ne sont pas encore posées. On ne les fabrique
   pas tout seul pour les quarante mois d'un gros client : le groupe
   existe, les lignes viennent quand le mois approche — ou d'un clic. */
.mvide{ display:flex; align-items:center; gap:16px; margin:0 0 14px;
  padding:16px 20px; background:var(--paper); border:1px dashed var(--line);
  border-radius:13px; }
.mvide-c{ flex:1; }
.mvide-c b{ display:block; font-size:13.5px; color:var(--ink); }
.mvide-c span{ display:block; font-size:12px; color:var(--ink-2);
  line-height:1.5; margin-top:3px; }
.mvide-b{ flex:none; font:inherit; font-size:12.5px; font-weight:650; color:#fff;
  background:var(--brand); border:0; border-radius:9px; padding:8px 16px;
  cursor:pointer; }
.mvide-b:hover{ background:var(--brand-deep); }
.mvide-b:disabled{ opacity:.6; cursor:default; }

/* ── Glisser une phase ────────────────────────────────────────────
   Un calendrier qui ne se corrige que par un formulaire ne se corrige
   pas. On attrape la barre pour la décaler, ses bords pour l'allonger,
   le bord de la zone hachurée pour repousser la date limite du client.
   Les poignées ne se voient qu'au survol de leur ligne : une frise
   couverte de poignées ne se lit plus. */
.frz-poi{ position:absolute; top:0; bottom:0; width:11px; z-index:5;
  cursor:ew-resize; touch-action:none; opacity:0; transition:opacity .1s ease; }
.frz-poi.g{ left:0; }
.frz-poi.d{ right:0; }
.frz-poi::after{ content:''; position:absolute; top:50%; transform:translateY(-50%);
  left:3px; width:3px; height:13px; border-radius:2px;
  background:rgba(255,255,255,.92); box-shadow:0 0 0 1px rgba(0,0,0,.18); }
.frz-l:hover .frz-poi{ opacity:1; }
.frz-att .frz-poi::after{ background:color-mix(in srgb, var(--c) 75%, #fff); }

/* L'étiquette qui suit la barre : les dates au jour près, pendant qu'on
   glisse. Sans elle on déplace à l'aveugle et on relâche au hasard. */
.frz-glis{ position:absolute; top:-2px; transform:translateX(-50%); z-index:12;
  background:#fff; color:#14141a; font-size:11.5px; font-weight:600;
  border-radius:7px; padding:4px 10px; white-space:nowrap; pointer-events:none;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.6); font-variant-numeric:tabular-nums; }
.frz-glis b{ font-weight:750; }

/* Un mois qui ne porte aucune étape garde sa bande et perd son nom : un
   batch d'octobre affichait « Octobre 2026 · Novembre 2026 » parce que
   le dessin débordait de quelques jours. */

/* Un geste qu'on ne devine pas n'existe pas. Une ligne sous la frise,
   discrète, et le calendrier devient manipulable pour qui le découvre. */
.frz-aide{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:0 2px 10px; }
.frz-aide span{ font-size:11.5px; color:var(--ink-3); line-height:1.5; }
.frz-aide em{ font-style:normal; font-size:10.5px; color:var(--ink-3);
  border:1px solid var(--line); border-radius:6px; padding:2px 8px;
  background:var(--sunken); }
/* Une barre au clavier doit se voir quand elle a le focus. */

/* La semaine de marge après le batch : de la place pour faire glisser
   une étape qui a pris du retard. En retrait, et nommée — huit jours de
   numéros sans nom de mois feraient douter de ce qu'on regarde. */

/* ── Le document d'une cellule ────────────────────────────────────
   Un script de vidéo s'écrivait dans un champ d'une ligne. Ici c'est
   une page : large, calme, et qui s'enregistre toute seule. */
.docz{ position:fixed; inset:0; z-index:140; background:rgba(14,14,20,.62);
  display:flex; align-items:flex-start; justify-content:center;
  padding:34px 20px; overflow-y:auto; }
.docz-c{ width:min(960px,100%); background:var(--paper); border-radius:16px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6); display:flex;
  flex-direction:column; overflow:hidden; }
.docz-h{ display:flex; align-items:center; gap:16px; padding:15px 20px;
  border-bottom:1px solid var(--line); }
.docz-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
.docz-t b{ font-size:15px; color:var(--ink); }
.docz-t span{ font-size:12px; color:var(--ink-3); }
.docz-e{ flex:none; font-size:11.5px; color:var(--ink-3); }
.docz-z{ padding:6px 8px 10px; }
/* Dans un document, la zone d'écriture respire : une page, pas un champ. */
.docz .edr{ border:0; }
.docz .edr-z{ padding:22px 30px 60px; font-size:14.5px; line-height:1.7; }
.docz .edr-t{ position:sticky; top:0; z-index:2; background:var(--paper);
  border-bottom:1px solid var(--line-3); }
.sans-defile{ overflow:hidden; }

/* Un tableau écrit dans un document : des filets, des en-têtes, et des
   cases où l'on peut cliquer pour écrire. */
.edr-z table{ border-collapse:collapse; width:100%; margin:10px 0 14px;
  font-size:13.5px; }
.edr-z th, .edr-z td{ border:1px solid var(--line); padding:7px 10px;
  vertical-align:top; min-width:60px; }
.edr-z th{ background:var(--line-3); font-weight:650; text-align:left; }
.edr-z blockquote{ margin:10px 0; padding:4px 0 4px 14px;
  border-left:3px solid var(--line); color:var(--ink-2); }
.edr-z h3{ font-size:16.5px; margin:18px 0 6px; }
.edr-z hr{ border:0; border-top:1px solid var(--line); margin:18px 0; }

/* Une cellule de long texte se lit sur plusieurs lignes et dit qu'elle
   s'ouvre : c'est un document, pas un champ. */
.prop dd.doc{ cursor:pointer; }
.prop dd.doc:hover{ color:var(--brand-deep); }

/* Un long texte, sur la fiche d'une ligne : il s'ouvre en document. Le
   dire, sinon personne ne clique — et le script reste dans Google Docs. */
.fsl.fsdoc{ cursor:pointer; position:relative; }
.fsl.fsdoc:hover{ background:var(--brand-tint); }
.fsl.fsdoc .fsv{ display:block; max-height:3.4em; overflow:hidden; }
.fsdo{ position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:600; color:var(--brand-deep); opacity:0;
  transition:opacity .1s ease; }
.fsl.fsdoc:hover .fsdo{ opacity:1; }

/* ── La case, sur la barre de l'étape ─────────────────────────────
   Elle vivait dans une liste sous la frise, qui répétait les mêmes
   dates et prenait la moitié de l'écran — celle qui manquait au
   calendrier. On coche là où on regarde. */
.prz-tick{ flex:none; width:17px; height:17px; border-radius:5px; padding:0;
  border:1.5px solid rgba(255,255,255,.75); background:rgba(255,255,255,.14);
  color:#fff; font-size:10px; font-weight:800; line-height:1; cursor:pointer;
  display:grid; place-items:center; z-index:9; }
.prz-tick:hover{ background:rgba(255,255,255,.34); }
.prz-b.ok .prz-tick{ background:#fff; color:var(--c); border-color:#fff; }
/* Une étape d'un ou deux jours : la case seule, le nom à côté. */
.prz-b.court{ padding:0 3px; }
.prz-b.court .prz-tick{ width:14px; height:14px; }

/* La barre n'est plus un bouton — elle porte la case — mais elle garde
   son focus visible : on la déplace aussi au clavier. */
.prz-b:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ── De l'air dans les tableaux ───────────────────────────────────
   Trente-deux pixels par ligne, c'était calé sur l'outil qu'on
   remplace. Sur un tableau de scripts — des phrases, pas des chiffres —
   on lit quinze lignes serrées comme un relevé bancaire, et l'œil ne
   trouve plus la ligne qu'il suivait. Quarante-deux, et le tableau se
   parcourt. C'est la dernière règle du fichier : elle gagne. */
.mb td .cell{ min-height:42px; padding:10px 12px; line-height:21px; }
.mb td.first .cell{ padding:10px 12px 10px 16px; }
.mb td.stat .cell{ min-height:42px; padding:0 8px; }
.slab{ min-height:42px; }
.mb td.chk .cell, .mb th.chk{ min-height:42px; }
.mb thead th{ padding-top:9px; padding-bottom:9px; }
/* Une cellule de long texte montre deux lignes : un script ou un
   concept ne tient jamais sur une. */
.mb td[data-type="long_text"] .cell{ white-space:normal; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-align:left; }

/* ── Le document d'un batch ───────────────────────────────────────
   Une page blanche par mois, où l'on écrit la stratégie puis les
   scripts. Large, calme, et elle s'enregistre toute seule. */
.docb{ background:var(--paper); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; }
.docb-h{ display:flex; align-items:center; gap:18px; padding:15px 22px;
  border-bottom:1px solid var(--line); }
.docb-t{ flex:1; min-width:0; }
.docb-t b{ display:block; font-size:15px; color:var(--ink); text-transform:capitalize; }
.docb-t span{ display:block; font-size:12px; color:var(--ink-2); line-height:1.5;
  margin-top:3px; max-width:78ch; text-transform:none; }
.docb-e{ flex:none; font-size:11.5px; color:var(--ink-3); white-space:nowrap; }
.docb-pdf{ flex:none; font-size:12.5px; font-weight:650; color:#fff;
  background:var(--brand); border-radius:9px; padding:8px 16px;
  text-decoration:none; white-space:nowrap; }
.docb-pdf:hover{ background:var(--brand-deep); }
.docb .edr{ border:0; }
.docb .edr-t{ position:sticky; top:0; z-index:2; background:var(--paper);
  border-bottom:1px solid var(--line-3); }
/* La zone d'écriture : une vraie page, pas un champ. */
.docb .edr-z{ padding:26px 38px 80px; font-size:14.5px; line-height:1.75;
  max-width:88ch; margin:0 auto; }

/* ── Un panneau sous cadenas ──────────────────────────────────────
   Retirer un panneau ne dit rien : on ne sait pas s'il n'existe pas ou
   s'il est interdit, et on finit par demander « où est le contrat ? ».
   Un cadenas répond sans rien montrer — le panneau est à sa place, avec
   son nom, et il ne s'ouvre pas. */
.pan.pverr{ background:var(--sunken); border-style:dashed; }
.pan.pverr .pan-h b{ color:var(--ink-4); }
.pv-l{ display:inline-grid; place-items:center; width:20px; height:20px;
  border-radius:6px; background:var(--line-3); color:var(--ink-4); flex:none; }
.pv-l svg{ fill:currentColor; }
.pv-t{ font-size:12px; color:var(--ink-3); line-height:1.55; }
.rec-col.l .pan.pverr, .rec-col.r .pan.pverr{ background:none; border:0;
  border-bottom:1px solid var(--line); }

/* ── La production, sur la fiche du client ────────────────────────
   Le créneau, le chef de projet, son remplaçant et ce qu'on doit
   encore. Ça vivait sur un bandeau du tableau de production, qui
   répétait la moitié de cette fiche. */
.pan.pprod .pan-h b{ color:var(--brand-deep); }
.pp-go{ font-size:11.5px; font-weight:600; margin-left:auto; }
.pp-ed{ font:inherit; font-size:13px; font-weight:600; color:var(--ink);
  background:none; border:0; padding:0; cursor:pointer;
  border-bottom:1px dashed var(--line); }
.pp-ed:hover{ color:var(--brand-deep); border-bottom-color:var(--brand); }
.pp-de{ margin:9px 0 0; font-size:12px; font-weight:600; color:var(--ink-2);
  background:var(--line-3); border-radius:8px; padding:7px 10px; line-height:1.5; }
.pp-de span{ display:block; font-weight:400; margin-top:2px; }
.pp-de.ok{ color:var(--ok-deep, #1c7a4a); background:var(--ok-tint, #e6f6ed); }
.pp-de.att{ color:#8a5a00; background:#fdf0d5; }
.pp-pl{ display:block; width:100%; margin:9px 0 2px; font:inherit; font-size:12.5px;
  font-weight:650; color:var(--ink); background:var(--line-3);
  border:1px solid var(--line); border-radius:9px; padding:8px 12px; cursor:pointer; }
.pp-pl:hover{ background:var(--brand-tint); border-color:var(--brand-line);
  color:var(--brand-deep); }
.pp-pl.att{ color:#8a5a00; background:#fdf0d5; border-color:#f0d9a8; }
.pp-pl.att:hover{ background:#f7e3b8; }

/* Le bouton qui ouvre la fiche, dans l'en-tête du calendrier. */
.frz-actb{ display:flex; gap:7px; }
.frz-fc{ font:inherit; font-size:12.5px; font-weight:650; color:#fff;
  background:var(--brand); border:1px solid var(--brand); border-radius:8px;
  padding:5px 12px; cursor:pointer; white-space:nowrap; }
.frz-fc:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }
.frz-fc:disabled{ opacity:.6; cursor:default; }

/* Un nom sans compte reste choisissable — le créneau le désigne — mais
   on dit en face que l'accès ne s'ouvrira pas. */
.ppl .sc{ font-style:normal; font-size:10.5px; color:var(--warn-ink, var(--ink-3));
  border:1px solid var(--line); border-radius:9px; padding:1px 6px; margin-left:5px; }

/* ══ DE L'AIR SUR LES BORDS ═══════════════════════════════════════
   Demande de Tony, 22 septembre 2026 : « tout est trop collé, il faut
   toujours de l'espace sur les bords ».
   Les écrans se sont construits l'un après l'autre, chacun avec sa
   marge à lui : 20 px pour la grille, 22 pour son en-tête, 26 pour le
   kanban et le calendrier, 32 pour les écrans de pilotage — et ZÉRO
   pour le calendrier de production, dont la carte touchait les deux
   bords de la fenêtre. Trois valeurs différentes sur le même écran se
   voient : c'est ce qui fait « fait maison ».
   Une seule mesure, ici, pour tout le logiciel, et elle se resserre
   sur les petits écrans où la place est comptée. */
/* « Un tout petit peu d'espace, mais léger » : 16 px entre la barre de
   gauche et le contenu, 12 px sur petit écran. */
:root{ --gx:16px; }
@media (max-width:760px){  :root{ --gx:12px; } }

/* L'en-tête d'un tableau, et celui des écrans qui n'en sont pas un. */
.bhead .topbar{ padding-left:var(--gx); padding-right:var(--gx); }
#view > .topbar:not(.bhead){ padding-left:var(--gx); padding-right:var(--gx); }

/* La grille : le titre du groupe, son trait, les lignes, l'ajout. */
.tblscroll{ padding-left:var(--gx); padding-right:var(--gx); }
.grp-head{ padding-left:var(--gx); padding-right:var(--gx); }
.grp-head::after{ left:var(--gx); right:var(--gx); }
.grp-add{ padding-left:var(--gx); padding-right:var(--gx); }

/* Les autres façons de regarder un tableau. */
.kb{ padding-left:var(--gx); padding-right:var(--gx); }
.galv{ padding-left:var(--gx); padding-right:var(--gx); }
.cal{ padding-left:var(--gx); padding-right:var(--gx); }
.chanview{ padding-left:var(--gx); padding-right:var(--gx); }
.tlv{ padding-left:var(--gx); padding-right:var(--gx); }

/* Les écrans de pilotage et l'accueil d'un espace. */
.ckp, .pf, .pro, .pagex{ padding-left:var(--gx); padding-right:var(--gx); }
.wshero{ padding-left:var(--gx); padding-right:var(--gx); }
.wsl{ padding-left:var(--gx); padding-right:var(--gx); }

/* ⚠ Le calendrier de production, le document du batch et les deux
   bandeaux du dessus : ils touchaient le bord gauche ET le bord droit.
   On donne la marge aux cartes elles-mêmes, pas au conteneur : la
   grille, quand elle s'affiche au même endroit, a déjà la sienne et
   les deux se seraient additionnées. */
.boardview.bv-prod > .frz,
.boardview.bv-prod > .docb,
.boardview > .expz,
.boardview > .revz{ margin-left:var(--gx); margin-right:var(--gx); }

/* Et de l'air sous le dernier élément : une liste qui s'arrête net au
   ras de la fenêtre donne l'impression qu'il en manque. */
.boardview{ padding-bottom:88px; }

/* La fiche client suit la même mesure : son bandeau du haut, le nom, la
   bande de chiffres et l'alerte du prochain rendez-vous s'alignent tous
   sur le bord de l'écran, pas chacun sur le sien (18, 26 et 26 px). */
.rec-top{ padding-left:var(--gx); padding-right:var(--gx); }
.fhero{ padding-left:var(--gx); padding-right:var(--gx); }
.fkpis .fk:first-child{ padding-left:var(--gx); }
.fkpis .fk:last-child{ padding-right:var(--gx); }
.fnext, .fnext-r{ margin-left:var(--gx); margin-right:var(--gx); }
/* Le corps de la fiche, et les écrans à widgets (Acquisition, Qui voit
   quoi, Charge de travail) qui se posaient sur 26 px. */
.rec-body{ padding-left:var(--gx); padding-right:var(--gx); }
.board{ padding-left:var(--gx); padding-right:var(--gx); }
.acc{ padding-left:var(--gx); padding-right:var(--gx); }

/* ⚠ « Qui voit quoi » débordait de la fenêtre par la droite : les
   dernières colonnes (Wecraft, Tony…) étaient coupées et rien ne
   défilait. Cause : `margin:0 auto` sur un élément de boîte flexible
   annule l'étirement — l'écran prenait la largeur de son contenu au
   lieu de celle de la fenêtre, et le tableau ne pouvait plus défiler
   dans son cadre. Ses frères (Cockpit, portefeuille…) posent tous
   `width:100%` ; celui-ci l'avait oublié. */
.acc{ width:100%; min-width:0; }
/* Le kanban « serré » (.kb2) redéclare son padding après la mesure
   commune : il repasse dessus lui aussi. */
.kb.kb2{ padding-left:var(--gx); padding-right:var(--gx); }

/* ══ LA FICHE CLIENT, RESPIRÉE ════════════════════════════════════
   Demande de Tony, 22 septembre : « les fiches clients plus aérées,
   les récaps et les briefs pas noirs comme ça, plus propre, plus beau,
   plus UX ; la bande du haut plus petite ; que les blocs ne soient pas
   collés ; qu'on puisse scroller la conversation ».
   Rien n'est déplacé : ce sont les mêmes blocs, au même endroit, avec
   l'air qui leur manquait. */

/* ── La bande de chiffres : plus discrète ───────────────────────── */
.fkpis{ background:var(--line-3); }
.fk{ padding:11px var(--gx) 11px; gap:2px; }
.fkk{ font-size:9px; letter-spacing:.09em; color:var(--ink-4); }
.fkv{ font-size:16.5px; font-weight:650; letter-spacing:-.015em; }
.fkn{ font-size:10.5px; }
/* Le nom du client reprend la place que les chiffres laissent. */
.fhero{ padding-top:22px; padding-bottom:18px; }

/* ── Les panneaux : de l'air entre eux, et dedans ───────────────── */
.rec-col.l, .rec-col.r{ padding:6px 0 40px; }
.rec-col.l .pan, .rec-col.r .pan{ padding:4px 0 6px; }
.pan-h{ padding:17px 20px 7px; }
.pan-b{ padding:4px 20px 18px; }
.pan-b.tight{ padding:2px 20px 16px; }
.prop{ padding:9px 0; gap:14px; grid-template-columns:118px minmax(0,1fr); }
.prop dt{ font-size:11px; line-height:19px; }
.prop dd{ font-size:12.5px; line-height:19px; min-height:19px; }

/* ── La colonne du milieu : la conversation défile, et respire ─── */
.rec-col.c{ padding:18px var(--gx) 40px; }
.atabs{ gap:22px; padding:0 18px; }
.atab{ padding:13px 0 11px; font-size:12.5px; transition:color .14s, border-color .14s; }
.atlb{ padding-top:4px; }
/* La zone d'écriture d'une note : une vraie boîte, pas une ligne. */
.edr-z{ min-height:96px; max-height:52vh; padding:14px 16px; font-size:13.5px; line-height:1.7; }

/* ── Une note : plus lisible, et elle se soulève au survol ──────── */
.upd{ border-radius:14px; margin-bottom:16px; border-color:var(--line-2);
  box-shadow:0 1px 2px rgba(16,18,32,.04);
  transition:box-shadow .18s ease, border-color .18s ease; }
.upd:hover{ box-shadow:0 6px 18px rgba(16,18,32,.07); border-color:var(--line); }
.upd-h{ padding:15px 20px 0; gap:11px; }
.upd-av{ width:30px; height:30px; font-size:11.5px; flex:0 0 30px; }
.upd-b{ padding:12px 20px 18px; font-size:13.5px; line-height:1.72; }
.upd-b p{ margin:0 0 11px; }
.upd-b ul{ margin:6px 0 13px; padding-left:20px; }
.upd-b li{ margin:5px 0; }
.upd-b h2, .upd-b h3{ font-family:var(--d); font-size:14.5px; font-weight:650;
  margin:18px 0 7px; color:var(--ink); }
.upd-f, .upd-rep, .upd-assets{ padding-left:20px; padding-right:20px; }

/* ── Un brief, un récap : ça se lit comme un document ───────────────
   ⚠ C'était un pavé noir posé au milieu d'une fiche claire, suivi de
   pastilles rouges pleines et d'un mur de texte bleu souligné — chaque
   puce du récap Fathom étant un lien vers sa seconde d'enregistrement.
   On ne lit pas ça, on le subit.
   Même information, même ordre : un titre, des intertitres, du texte
   noir. On vise les styles en ligne pour que les notes DÉJÀ écrites
   changent d'allure sans qu'on aille les réécrire une par une. */
.upd-b div[style*="#131313"]{
  background:none !important; padding:0 0 12px !important; margin:0 0 14px !important;
  border:0 !important; border-bottom:1px solid var(--line-2) !important; border-radius:0 !important;
}
.upd-b div[style*="#131313"] > span:first-child{
  color:var(--ink-4) !important; font-size:9.5px !important; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; display:block; margin-bottom:5px;
}
.upd-b div[style*="#131313"] > div{
  color:var(--ink) !important; font-family:var(--d); font-size:18px !important;
  font-weight:650; letter-spacing:-.02em; line-height:1.25;
}
.upd-b div[style*="#131313"] span[style*="#c9c9c9"]{
  color:var(--ink-3) !important; font-size:11.5px !important; display:block; margin-top:5px;
}
/* Les intertitres : un titre de section, pas une étiquette rouge. */
.upd-b p:has(> span[style*="background:#B22924"]){ margin:22px 0 2px; }
.upd-b span[style*="background:#B22924"]{
  background:none !important; color:var(--ink-2) !important; padding:0 !important;
  border-radius:0 !important; font-size:10px !important; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  display:block; padding-bottom:6px !important; border-bottom:1px solid var(--line-3) !important;
}
/* Le texte reste du texte : un lien ne se signale qu'au survol, et le
   repère d'écoute d'un récap tient en un caractère. */
.upd-b a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.upd-b a:hover{ color:var(--brand); border-bottom-color:var(--brand); }
.upd-b a.tsq{
  border:0; color:var(--ink-4); font-size:11px; margin-left:5px; text-decoration:none;
  padding:0 4px; border-radius:5px; vertical-align:1px;
}
.upd-b a.tsq:hover{ color:var(--brand); background:var(--brand-tint); }
/* La ligne des sources, en bas du brief : discrète, mais lisible. */
.upd-b p[style*="#888"]{ color:var(--ink-4) !important; font-size:11px !important;
  border-top:1px solid var(--line-3); padding-top:10px; margin-top:16px; }

/* ── L'activité : mêmes règles, même air ────────────────────────── */
.aitem{ border-radius:12px; margin-bottom:12px; border-color:var(--line-2);
  transition:box-shadow .18s ease; }
.aitem:hover{ box-shadow:0 5px 16px rgba(16,18,32,.06); }
.aitem-h{ padding:15px 18px; }
.aitem-b{ padding-left:18px; padding-right:18px; line-height:1.7; }
.amonth{ margin:22px 0 10px; }

/* ── Deux ou trois animations, et pas une de plus ───────────────── */
@media (prefers-reduced-motion:no-preference){
  #rec.on .rec-body{ animation:recmonte .22s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes recmonte{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  .pan{ transition:border-color .16s ease; }
}

/* ── Qui s'occupe de ce client : deux rôles, deux personnes ─────────
   Le setter décroche le rendez-vous, le closer le conclut. Ils étaient
   l'un dans la source (« Ads · Karl », comme si Karl était un canal) et
   l'autre seul sous l'étiquette « Commercial ». */
.fteam{ display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.fow{ display:flex; align-items:center; gap:9px; min-width:0; }
.fow span{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.fow i{ font-style:normal; font-size:9px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-4); }
.fow b{ font-size:13px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px; }
@media (max-width:1100px){ .fteam{ gap:12px; } .fow b{ max-width:90px; } }

/* Quand le tableau est trié sur la dernière activité, la date se lit à
   côté du nom : sans elle, l'ordre est un mystère. */
.nmwhen{ flex:0 0 auto; margin-left:auto; padding-left:10px; font-size:10.5px;
  color:var(--ink-4); white-space:nowrap; font-variant-numeric:tabular-nums; }
.mb tr:hover .nmwhen{ color:var(--ink-3); }

/* ── Un peu de couleur, là où elle dit quelque chose ────────────────
   Demande de Tony. Pas de décor : la couleur sert à reconnaître le
   type de note d'un coup d'œil dans une conversation qui en empile
   vingt. Un brief avant rendez-vous est violet, un compte rendu
   d'appel est vert, une note écrite à la main reste neutre. */
.upd.n-brief{ --nc:var(--brand); }
.upd.n-appel{ --nc:#157a52; }
.upd.n-brief::before, .upd.n-appel::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--nc); border-radius:14px 0 0 14px;
}
.upd{ position:relative; }

/* L'en-tête d'un brief ou d'un récap prend la couleur de son type. */
.upd-b div[style*="#131313"]{ border-bottom-color:var(--nc, var(--line-2)) !important; }
.upd-b div[style*="#131313"] > span:first-child{ color:var(--nc, var(--ink-4)) !important; }
.upd-b div[style*="#131313"] > div{ color:var(--ink) !important; }

/* Les intertitres du brief : le mot en couleur, le filet aussi. */
.upd-b span[style*="background:#B22924"]{
  color:var(--nc, var(--brand-deep)) !important;
  border-bottom-color:color-mix(in srgb, var(--nc, var(--brand)) 28%, transparent) !important;
}
.upd-b a.tsq{ color:var(--nc, var(--brand)); }
.upd-b a.tsq:hover{ background:color-mix(in srgb, var(--nc, var(--brand)) 12%, transparent); }
/* Un nom propre en gras dans un brief : il ressort sans crier. */
.upd-b b, .upd-b strong{ color:var(--ink); font-weight:650; }

/* Le visage de l'auteur suit le même code couleur. */
.upd.n-brief .upd-av, .upd.n-appel .upd-av{ background:var(--nc); }

/* ── Les questions d'un appel, et ce qu'on a répondu ────────────────
   Fathom relève les questions posées pendant l'appel. Elles arrivaient
   en markdown brut — « #### Combien ça coûte chez Esekai ? » — et se
   lisaient comme une erreur. Une question se surligne : c'est ce qu'on
   relit avant de rappeler. */
.upd-b p.qx{
  margin:18px 0 8px; padding:9px 13px; border-radius:10px;
  background:color-mix(in srgb, var(--nc, var(--brand)) 8%, transparent);
  border-left:3px solid var(--nc, var(--brand));
  font-weight:650; font-size:13.5px; color:var(--ink); line-height:1.5;
}
.upd-b p.qx + ul, .upd-b p.qx + p{ margin-top:0; }
.upd-b em.rpl{
  font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--nc, var(--ink-4));
  border:1px solid color-mix(in srgb, var(--nc, var(--brand)) 26%, transparent);
  border-radius:20px; padding:2px 8px; margin-right:7px; vertical-align:1px;
}
/* Les chiffres d'un compte rendu — un prix, un volume — se retrouvent
   d'un coup d'œil sans qu'on ait à relire la phrase. */
.upd-b li{ padding-left:2px; }
.upd-b ul{ list-style:none; padding-left:4px; }
.upd-b ul li{ position:relative; padding-left:18px; }
.upd-b ul li::before{
  content:""; position:absolute; left:3px; top:.62em; width:5px; height:5px;
  border-radius:50%; background:color-mix(in srgb, var(--nc, var(--ink-4)) 55%, transparent);
}

/* ── Le titre d'une note : surligné, comme au feutre ────────────────
   Demande de Tony. Le titre d'un brief ou d'un compte rendu doit se
   voir d'un coup d'œil quand on descend une conversation : c'est le
   seul mot qui dit de quoi parle le bloc de vingt lignes qui suit. */
.upd-b div[style*="#131313"] > div{
  display:inline; padding:2px 9px; margin-left:-3px; border-radius:7px;
  background:color-mix(in srgb, var(--nc, var(--brand)) 13%, transparent);
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  line-height:1.5;
}
.upd-b div[style*="#131313"]{ padding-bottom:14px !important; }
/* Le lien vers l'enregistrement devient un bouton : c'est ce qu'on
   ouvre après avoir lu, et il se cherchait dans une ligne grise. */
.upd-b a.ecoute{
  display:inline-flex; align-items:center; gap:6px; margin-left:10px;
  border:1px solid color-mix(in srgb, var(--nc, var(--brand)) 32%, transparent);
  background:color-mix(in srgb, var(--nc, var(--brand)) 8%, transparent);
  color:var(--nc, var(--brand)) !important; border-radius:20px;
  padding:3px 11px; font-size:11px; font-weight:650; text-decoration:none;
  vertical-align:1px; white-space:nowrap;
}
.upd-b a.ecoute:hover{
  background:var(--nc, var(--brand)); color:#fff !important;
  border-color:var(--nc, var(--brand));
}

/* ── La conversation prend la place ─────────────────────────────────
   « Faut voir beaucoup dès que j'appuie sur le fichier client. »
   Les deux colonnes latérales rendent ce qu'elles n'utilisent pas. */
.rec-col.l{ width:330px; }
.rec-col.r{ width:286px; }
@media(min-width:1680px){ .rec-col.l{ width:360px; } .rec-col.r{ width:310px; } }
@media(min-width:2000px){ .rec-col.l{ width:380px; } .rec-col.r{ width:330px; } }
/* Et la zone où l'on écrit : une vraie page, pas une ligne. */
.edr-z{ min-height:140px; }
.compose{ margin-bottom:18px; }

/* ── La hiérarchie d'un compte rendu ────────────────────────────────
   Trois niveaux, trois traitements. Ils arrivaient tous les trois en
   gras : à plat, donc illisible en diagonale. Un compte rendu de
   quarante minutes se parcourt par ses titres, ou ne se parcourt pas.

   · la SECTION  — « Informations sur l'affaire », « Questions/Réponses »
   · le SOUS-TITRE — « Prospect », « Budget », « État actuel »
   · la QUESTION — surlignée, c'est ce qu'on relit avant de rappeler  */
.upd-b p.hx{
  margin:28px 0 12px; padding:0 0 8px; font-family:var(--d);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nc, var(--ink-2));
  border-bottom:1px solid color-mix(in srgb, var(--nc, var(--line)) 30%, transparent);
}
.upd-b p.hx:first-child{ margin-top:6px; }
.upd-b p.sx{
  margin:18px 0 7px; display:block; width:fit-content; max-width:100%;
  padding:4px 11px; border-radius:8px;
  background:color-mix(in srgb, var(--nc, var(--brand)) 9%, transparent);
  font-size:12.5px; font-weight:650; color:var(--ink); letter-spacing:-.005em;
}
.upd-b p.sx + p, .upd-b p.sx + ul{ margin-top:0; }
/* Une question reste le niveau le plus fort : elle garde sa barre. */
.upd-b p.qx{ margin-top:20px; }

/* ── Une note longue se lit en diagonale ────────────────────────────
   « Pas aussi long. Les questions, mets-les en FAQ : quand je clique,
   ça déroule. » Un compte rendu de quarante minutes fait deux écrans ;
   on veut la liste de ce qui s'est dit, et ouvrir ce qu'on cherche. */
.upd-b p.qx.qa-q{ cursor:pointer; padding-left:34px; position:relative;
  user-select:none; transition:background .14s ease; }
.upd-b p.qx.qa-q::before{
  content:"›"; position:absolute; left:14px; top:50%; margin-top:-.62em;
  font-size:16px; line-height:1.2; color:var(--nc, var(--brand));
  transition:transform .18s ease; display:inline-block;
}
.upd-b p.qx.qa-q.on::before{ transform:rotate(90deg); }
.upd-b p.qx.qa-q:hover{
  background:color-mix(in srgb, var(--nc, var(--brand)) 15%, transparent);
}
.upd-b p.qx.qa-q:focus-visible{ outline:2px solid var(--nc, var(--brand)); outline-offset:2px; }
.qa-r{ display:none; }
.qa-r.on{ display:block; padding:2px 0 6px 14px;
  border-left:2px solid color-mix(in srgb, var(--nc, var(--brand)) 22%, transparent);
  margin:2px 0 14px 14px; }
@media (prefers-reduced-motion:no-preference){
  .qa-r.on{ animation:qaouvre .16s ease both; }
  @keyframes qaouvre{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
}
.qa-all{
  display:inline-block; margin:14px 0 4px; font:inherit; font-size:11.5px; font-weight:650;
  color:var(--nc, var(--brand)); background:none; border:0; padding:3px 0; cursor:pointer;
  border-bottom:1px dashed color-mix(in srgb, var(--nc, var(--brand)) 40%, transparent);
}
.qa-all:hover{ border-bottom-style:solid; }

/* La note coupée, et son bouton pour tout lire. */
.upd-b.coupe{ max-height:460px; overflow:hidden; position:relative; }
.upd-b.coupe::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:110px;
  background:linear-gradient(to bottom, transparent, var(--paper) 78%);
  pointer-events:none;
}
.upd-plus{
  display:block; width:calc(100% - 40px); margin:0 20px 14px; font:inherit; font-size:12px;
  font-weight:650; color:var(--nc, var(--brand)); background:var(--sunken);
  border:1px solid var(--line-2); border-radius:9px; padding:8px; cursor:pointer;
  transition:background .14s ease, border-color .14s ease;
}
.upd-plus:hover{ background:color-mix(in srgb, var(--nc, var(--brand)) 8%, transparent);
  border-color:color-mix(in srgb, var(--nc, var(--brand)) 30%, transparent); }

/* ── Et la conversation, en plus grand ──────────────────────────── */
.upd-b{ font-size:14px; line-height:1.75; }
.upd-h .who b{ font-size:14px; }
.edr-z{ font-size:14px; min-height:150px; }
.atab{ font-size:13px; }

/* ── Chaque couleur veut dire quelque chose ─────────────────────────
   « Ne souligne pas tout de la même couleur, varie, pense à tout. »
   Une note tout en vert se lit aussi mal qu'une note tout en noir :
   l'œil n'a rien à quoi se raccrocher. La couleur n'est donc pas un
   décor, elle dit de quoi parle le bloc — et on retrouve le prix d'un
   coup d'œil dans un compte rendu de quarante minutes. */
.upd-b [data-ton="argent"]  { --nc:#a96a00; }   /* budget, prix, facture */
.upd-b [data-ton="temps"]   { --nc:#c2610c; }   /* délais, échéances     */
.upd-b [data-ton="risque"]  { --nc:#ab2f2b; }   /* objections, blocages  */
.upd-b [data-ton="action"]  { --nc:#2563a8; }   /* ce qu'on fait ensuite */
.upd-b [data-ton="client"]  { --nc:#6d4bc0; }   /* la personne en face   */
.upd-b [data-ton="produit"] { --nc:#0f766e; }   /* l'offre, les formats  */

/* ── Moins de place en haut, plus de place pour la conversation ─────
   « Je veux moins voir tout en haut : CPA, MRR, blablabla. Ces box-là,
   plus longues, plus grosses. » La bande de chiffres est un rappel,
   pas le sujet : elle se tasse. Tout ce qu'elle rend part à la
   conversation, qui est l'endroit où l'on travaille. */
.fhero{ padding-top:14px; padding-bottom:12px; }
.fav{ width:42px; height:42px; border-radius:11px; font-size:15px; }
.fht h1{ font-size:20px; }
.fk{ padding:7px var(--gx) 7px; gap:0; }
.fkk{ font-size:8.5px; letter-spacing:.1em; }
.fkv{ font-size:14px; font-weight:650; line-height:1.35; }
.fkn{ font-size:9.5px; line-height:1.35; }
.fnext{ padding:10px 14px; margin-bottom:12px; }
.fn-t b{ font-size:13px; } .fn-t span{ font-size:11.5px; }

/* Les colonnes latérales rendent encore un peu : la conversation est
   la seule colonne où l'on écrit. */
.rec-col.l{ width:300px; }
.rec-col.r{ width:258px; }
@media(min-width:1680px){ .rec-col.l{ width:330px; } .rec-col.r{ width:286px; } }
@media(min-width:2000px){ .rec-col.l{ width:360px; } .rec-col.r{ width:310px; } }
.rec-col.c{ padding:14px 22px 40px; }
/* La boîte des notes prend toute la largeur qui reste, et la zone
   d'écriture une vraie hauteur. */
.upd{ margin-bottom:18px; }
.upd-b.coupe{ max-height:520px; }
.edr-z{ min-height:170px; max-height:60vh; }

/* ⚠ Les colonnes de la fiche sont des pistes de GRILLE : donner une
   largeur à `.rec-col` ne changeait rien du tout, c'est la grille qui
   décide. C'est elle qu'on règle — d'où la conversation qui ne
   s'élargissait pas quand on croyait l'élargir. */
.rec-body{ grid-template-columns:300px minmax(0,1fr) 258px;
  padding:14px 18px 34px; gap:14px; }
@media(min-width:1680px){ .rec-body{ grid-template-columns:330px minmax(0,1fr) 286px; } }
@media(min-width:2000px){ .rec-body{ grid-template-columns:360px minmax(0,1fr) 310px; } }

/* ── Tout l'écran pour la conversation ──────────────────────────────
   Un clic sur ⤢ : les deux colonnes s'effacent, les notes prennent la
   largeur. Le choix se garde d'une fiche à l'autre. */
#rec.convmax .rec-body{ grid-template-columns:minmax(0,1fr); }
#rec.convmax .rec-col.l, #rec.convmax .rec-col.r{ display:none; }
#rec.convmax .rec-col.c{ padding-left:0; padding-right:0; }
#rec.convmax .upd-b{ max-width:none; }
.atab.atgrand{ margin-left:auto; font-size:15px; padding:10px 4px 8px;
  color:var(--ink-4); border-bottom-color:transparent; }
.atab.atgrand:hover{ color:var(--brand); }

/* ── Petit ne veut pas dire tassé ───────────────────────────────────
   « Rien à faire dans l'immédiat, c'est tout collé en haut. Faut que
   ce soit plus aéré. » J'avais réduit les tailles ET l'espace : les
   deux à la fois, ça donne un en-tête comprimé. La taille reste petite
   — c'est un rappel, pas le sujet — et l'air revient. */
.fhero{ padding-top:20px; padding-bottom:16px; }
.fk{ padding:14px var(--gx) 13px; gap:3px; }
.fkpis{ margin-bottom:0; }
/* Le bandeau d'alerte ne colle plus à la bande de chiffres. */
.fnext, .fnext-r{ margin-top:16px; margin-bottom:16px; padding:13px 16px; }
.rec-body{ padding-top:6px; }
/* Les trois colonnes respirent entre elles. */
.rec-body{ gap:18px; }
.rec-col.c{ padding:16px 20px 44px; }

/* ── Et les tableaux, partout ───────────────────────────────────────
   Une ligne de tableau se lit d'autant mieux qu'elle a de la hauteur :
   c'est ce qui sépare une grille d'un listing. */
.mb td .cell{ min-height:46px; padding:12px 13px; }
.mb th{ padding-top:4px; padding-bottom:11px; }
.grp-head{ padding-bottom:12px; }
.grp{ margin-bottom:30px; }
.mb tr.addr .addrow{ height:44px; }

/* ══ LE SURLIGNAGE, AVEC RETENUE ══════════════════════════════════
   « Je t'ai dit de surligner, mais pas TOUT surligner. Fais-le beau,
   intelligemment, hyper pro, hyper premium. »
   Une page où tout est surligné ne surligne plus rien. On garde la
   couleur pleine pour les trois choses qu'on ne doit pas rater dans un
   compte rendu — l'argent, une échéance, une objection — et tout le
   reste redevient de la typographie : un titre se reconnaît à sa
   graisse et à un filet, pas à un fond de couleur. */

/* Le sous-titre ordinaire : plus de pastille, un filet à gauche. */
.upd-b p.sx{
  background:none; padding:0 0 0 12px; border-radius:0;
  border-left:2px solid var(--line-2);
  font-size:13px; font-weight:650; color:var(--ink); margin:20px 0 8px;
}
/* Les trois qui comptent gardent leur teinte — et elles seules. */
.upd-b p.sx[data-ton="argent"], .upd-b p.sx[data-ton="temps"],
.upd-b p.sx[data-ton="risque"], .upd-b p.sx[data-ton="action"]{
  border-left-color:var(--nc); color:var(--nc);
}
/* Les autres tons ne teintent plus le texte : ils ne servent qu'aux
   questions, où la couleur aide à retrouver un sujet dans la liste. */
.upd-b p.sx[data-ton="client"], .upd-b p.sx[data-ton="produit"]{
  border-left-color:var(--line-2); color:var(--ink);
}

/* La question : une ligne, pas un pavé. Le fond n'apparaît qu'au
   survol et quand elle est ouverte — c'est-à-dire quand on la lit. */
.upd-b p.qx{
  background:none; border-left:2px solid var(--line-2);
  border-radius:0 8px 8px 0; padding:10px 14px 10px 32px;
  font-weight:600; font-size:13.5px; color:var(--ink);
  margin:2px 0; transition:background .14s ease, border-color .14s ease;
}
.upd-b p.qx.qa-q::before{ left:12px; color:var(--ink-4); }
.upd-b p.qx.qa-q:hover{
  background:var(--sunken); border-left-color:var(--nc, var(--brand));
}
.upd-b p.qx.qa-q:hover::before{ color:var(--nc, var(--brand)); }
.upd-b p.qx.qa-q.on{
  background:color-mix(in srgb, var(--nc, var(--brand)) 7%, transparent);
  border-left-color:var(--nc, var(--brand)); color:var(--ink);
}
.upd-b p.qx.qa-q.on::before{ color:var(--nc, var(--brand)); }

/* Le titre de la note reste surligné : c'est le seul. */
.upd-b div[style*="#131313"] > div{
  background:color-mix(in srgb, var(--nc, var(--brand)) 14%, transparent);
}

/* ── Plus de hauteur pour la conversation ──────────────────────────
   Tout ce que l'en-tête rend, la conversation le prend. */
.fhero{ padding-top:15px; padding-bottom:12px; }
.fav{ width:38px; height:38px; border-radius:10px; font-size:14px; }
.fht h1{ font-size:18.5px; }
.fk{ padding:11px var(--gx) 10px; }
.fnext, .fnext-r{ margin-top:12px; margin-bottom:12px; padding:11px 15px; }
.fn-i{ width:28px; height:28px; }
.rec-body{ padding-top:4px; padding-bottom:22px; }
.rec-col.c{ padding-top:12px; padding-bottom:26px; }

/* ══ RETOUR AU NOIR ET ROUGE ══════════════════════════════════════
   « Laisse comme avant, mais améliore. Comme avant, c'est noir et
   rouge. » C'est l'identité d'Esekai, et un brief se reconnaissait à
   son bandeau noir au bout de deux mois d'habitude. On la remet —
   proprement, pas telle quelle : mêmes couleurs, meilleure exécution.
   Tout le reste du travail reste en place : les phrases recousues, les
   dièses traduits, les liens qui ne mangent plus le texte, les
   questions en accordéon, la note qui se coupe. */
.upd.n-brief, .upd.n-appel{ --nc:#B22924; }
.upd-b [data-ton]{ --nc:#B22924; }              /* une seule couleur */

/* Le bandeau : noir, avec l'air qui lui manquait. */
.upd-b div[style*="#131313"]{
  background:#131313 !important; border:0 !important;
  border-radius:12px !important; padding:16px 20px 15px !important;
  margin:0 0 18px !important;
}
.upd-b div[style*="#131313"] > span:first-child{
  color:#f0625a !important; font-size:9.5px !important; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:7px;
}
.upd-b div[style*="#131313"] > div{
  color:#fff !important; background:none !important; padding:0 !important;
  margin:0 !important; display:block; font-family:var(--d);
  font-size:19px !important; font-weight:650; letter-spacing:-.02em; line-height:1.25;
}
.upd-b div[style*="#131313"] span[style*="#c9c9c9"]{
  color:#9a9a9a !important; font-size:11.5px !important; display:block; margin-top:8px;
}
/* Le bouton d'écoute, en rouge sur le noir. */
.upd-b a.ecoute{
  border-color:rgba(240,98,90,.45); background:rgba(240,98,90,.12);
  color:#f0625a !important;
}
.upd-b a.ecoute:hover{ background:#B22924; border-color:#B22924; color:#fff !important; }

/* Les intertitres : la pastille rouge, mieux posée. */
.upd-b span[style*="background:#B22924"]{
  background:#B22924 !important; color:#fff !important;
  display:inline-block; padding:4px 11px !important; border-radius:6px !important;
  font-size:9.5px !important; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; border:0 !important;
}
.upd-b p:has(> span[style*="background:#B22924"]){ margin:26px 0 10px; }

/* Le filet de la note, et le visage de l'auteur. */
.upd.n-brief::before, .upd.n-appel::before{ background:#131313; }
.upd.n-brief .upd-av, .upd.n-appel .upd-av{ background:#131313; }

/* Sous-titres et questions : noir, et le rouge pour ce qui s'ouvre. */
.upd-b p.sx{ border-left-color:var(--line-2) !important; color:var(--ink) !important; }
.upd-b p.sx[data-ton]{ border-left-color:#131313 !important; color:var(--ink) !important; }
.upd-b p.qx.qa-q:hover{ background:var(--sunken); border-left-color:#131313; }
.upd-b p.qx.qa-q:hover::before{ color:#B22924; }
.upd-b p.qx.qa-q.on{ background:rgba(178,41,36,.055); border-left-color:#B22924; }
.upd-b p.qx.qa-q.on::before{ color:#B22924; }
.upd-b em.rpl{ color:#B22924; border-color:rgba(178,41,36,.3); }
.upd-b a.tsq{ color:#B22924; }
.upd-b a.tsq:hover{ background:rgba(178,41,36,.1); }
.qa-all{ color:#B22924; border-bottom-color:rgba(178,41,36,.4); }
.upd-plus{ color:#131313; }
.upd-plus:hover{ background:rgba(178,41,36,.06); border-color:rgba(178,41,36,.3); }

/* ⚠ Le titre d'un brief ou d'un récap était NOIR sur NOIR : la règle
   « un nom propre en gras ressort » repeignait le <b> du bandeau, et
   un <b> l'emporte sur la couleur héritée de son parent. Dans le
   bandeau, le gras suit la couleur du bandeau. */
.upd-b div[style*="#131313"] b,
.upd-b div[style*="#131313"] strong{ color:inherit !important; font-weight:650; }
.upd-b div[style*="#131313"] > span:first-child b{ color:#f0625a !important; }
.upd-b span[style*="background:#B22924"] b{ color:#fff !important; }

/* ── D'où l'on vient : un fil d'Ariane, pas un titre ────────────────
   Ouvrir un contact ou une tâche ouvre la fiche du CLIENT — c'est la
   règle, et elle est bonne. Mais la ligne d'origine s'affichait en
   gras au-dessus du nom du client, si haut qu'on croyait avoir ouvert
   le contact. Elle redevient ce qu'elle est : un rappel discret de
   l'endroit d'où l'on a cliqué. */
.fdep{ background:none; border:0; padding:4px var(--gx) 0; margin:0;
  gap:7px; align-items:baseline; }
.fdi{ display:none; }
.fdt{ display:flex; align-items:baseline; gap:6px; }
.fdt i{ display:inline; font-size:9.5px; letter-spacing:.09em; color:var(--ink-4); }
.fdt i::after{ content:" ›"; color:var(--line-strong, var(--ink-4)); }
.fdt b{ display:inline; font-size:11.5px; font-weight:500; color:var(--ink-3); }
.fdep .btn{ font-size:11px; padding:3px 9px; color:var(--ink-3); }

/* ── Plus de troncature : on défile, on voit tout ───────────────────
   Le bouton « Lire la suite » coupait la note au milieu d'une phrase.
   Une note se lit en descendant. */
.upd-b.coupe{ max-height:none; overflow:visible; }
.upd-b.coupe::after{ display:none; }
.upd-plus{ display:none; }

/* ── La boîte de conversation prend la hauteur ──────────────────────
   « Cette boxe-là, plus longue, plus grande. » Ce qui la bridait,
   c'était l'en-tête : le nom, la bande de chiffres et un bandeau vert
   qui occupait soixante pixels pour dire qu'il n'y avait RIEN à
   signaler. Un écran ne doit pas payer soixante pixels pour une bonne
   nouvelle : le bandeau ne s'affiche plus que s'il y a quelque chose à
   faire. */
.fnext.ok{ display:none; }
.fhero{ padding-top:12px; padding-bottom:10px; }
.fav{ width:34px; height:34px; border-radius:9px; font-size:13px; }
.fht h1{ font-size:17.5px; }
.fk{ padding:9px var(--gx) 9px; }
.fkv{ font-size:15px; }
.rec-body{ padding-top:10px; padding-bottom:16px; }
.rec-col.c{ padding-top:0; padding-bottom:18px; }
.rec-col.c > .pan{ min-height:100%; }

/* ══ UN SEUL TRAITEMENT DE TITRE ══════════════════════════════════
   « Je comprends pas pourquoi le récap de l'appel et le brief, c'est
   différent. Je veux juste que tu soulignes en rouge. »
   Il avait raison : le brief titrait avec des pastilles rouges, le
   compte rendu avec des filets gris. Deux notes du même logiciel qui
   ne se ressemblent pas, c'est deux logiciels.
   Un seul traitement, partout : le titre de section en petites
   capitales, souligné de rouge. Rien d'autre. */
.upd-b p.sx, .upd-b p.hx{
  display:block; width:fit-content; max-width:100%;
  background:none !important; border:0 !important;
  border-bottom:2px solid #B22924 !important;
  padding:0 0 5px !important; margin:26px 0 12px !important;
  font-family:var(--f); font-size:10.5px !important; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink) !important; line-height:1.4;
}
.upd-b p.sx + p, .upd-b p.sx + ul,
.upd-b p.hx + p, .upd-b p.hx + ul{ margin-top:0; }
.upd-b p.hx:first-child, .upd-b p.sx:first-child{ margin-top:8px !important; }

/* Le brief titrait en pastille pleine : même traitement que le récap. */
.upd-b span[style*="background:#B22924"]{
  background:none !important; color:var(--ink) !important;
  border:0 !important; border-bottom:2px solid #B22924 !important;
  border-radius:0 !important; padding:0 0 5px !important;
  display:inline-block; width:fit-content; font-size:10.5px !important; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
}
.upd-b span[style*="background:#B22924"] b{ color:var(--ink) !important; font-weight:700; }
.upd-b p:has(> span[style*="background:#B22924"]){ margin:26px 0 12px; }

/* ══ UN SEUL DÉFILEMENT, ET LES ONGLETS QUI RESTENT ═══════════════
   « Fixe la partie conversation/sales quand on scrolle. Et quand on
   scrolle, le truc à gauche et à droite, ça scrolle aussi. »
   Les trois colonnes défilaient CHACUNE dans son coin : on descendait
   dans les notes et les deux côtés restaient plantés. Un seul
   défilement, celui de la fiche, et la barre d'onglets reste collée en
   haut de la conversation — c'est elle qui dit où l'on est. */
/* ⚠ Deux essais pour arriver ici, et la leçon vaut d'être écrite.
   · Faire défiler la fiche ENTIÈRE : avec trois colonnes de hauteurs
     différentes, on dépasse le bas de la plus courte et on se retrouve
     devant du vide — la conversation quittait l'écran au bout de
     700 px.
   · Le bon comportement est celui que Tony décrit : « fixe la boîte du
     milieu ; quand je mets ma souris sur le côté, ça scrolle à gauche
     et à droite directement. » Chaque colonne défile donc chez elle,
     sous la souris, et le cadre de la fiche ne bouge jamais. La barre
     d'onglets, elle, reste collée en haut de la conversation. */
/*  Le logiciel avait DÉJÀ le bon découpage : le cadre de la fiche ne
    bouge pas, chaque colonne défile chez elle, et le fil des notes
    (.atlb) a son propre ascenseur. Mes deux essais se battaient contre
    lui. On le remet, et on lui donne la hauteur que l'en-tête a
    libérée. */
.rec.on{ overflow:hidden; }                     /* le cadre ne glisse plus */
.rec-body{ overflow:hidden; align-items:stretch; }
.rec-col{ overflow-y:auto !important; overscroll-behavior:contain;
  max-height:calc(100dvh - 172px); height:auto; }
.rec-col.c > .pan{ min-height:0; overflow:visible; }
.atabs{ position:sticky; top:0; z-index:4; }
/* Le fil des notes : tout ce que l'en-tête a rendu lui revient. */
.atlb{ max-height:calc(100dvh - 300px); min-height:300px; }
.atabs{
  position:sticky; top:0; z-index:4; background:var(--paper);
  border-radius:12px 12px 0 0; box-shadow:0 1px 0 var(--line);
}
/* La boîte : un peu moins large, et elle descend plus bas. */
.rec-body{ grid-template-columns:316px minmax(0,1fr) 274px; padding-bottom:40px; }
@media(min-width:1680px){ .rec-body{ grid-template-columns:344px minmax(0,1fr) 300px; } }
@media(min-width:2000px){ .rec-body{ grid-template-columns:372px minmax(0,1fr) 324px; } }
.rec-col.c{ padding:0 26px 8px; }

/* Plus de hauteur utile pour les trois colonnes : l'alerte « à
   relancer, sans date » a disparu (l'appel pose l'échéance lui-même),
   et la fiche garde le strict nécessaire au-dessus. */
.rec-body{ padding-top:8px; padding-bottom:8px; }
.rec-col.c{ padding:0 24px 10px; }
.rec-col.l, .rec-col.r{ padding-bottom:16px; }

/* ══ MOINS ZOOMÉ, ET DE VRAIES CARTES SUR LES CÔTÉS ═══════════════
   « C'est un peu trop zoomé. Entre les colonnes, pas trop d'espace,
   mais un petit espace quand même. Les boxes à droite et à gauche,
   bien propres, avec une belle bordure. »
   Les deux côtés étaient des colonnes nues posées sur le fond ; seule
   celle du milieu avait une carte. Maintenant les trois se
   ressemblent : même fond, même bordure, même arrondi, la même ombre
   d'un pixel — et l'écart entre elles passe de dix-huit à dix. */
.rec-body{ gap:10px; padding:8px 14px 10px; }
.rec-col.l, .rec-col.r{
  background:var(--paper); border:1px solid var(--line-2) !important;
  border-radius:14px; box-shadow:0 1px 2px rgba(16,18,32,.04);
  padding:2px 0 8px;
}
.rec-col.c{ padding:0 8px; }
.rec-col.c > .pan{ border-radius:14px; border-color:var(--line-2);
  box-shadow:0 1px 2px rgba(16,18,32,.04); }
.atabs{ border-radius:13px 13px 0 0; }
/* Le premier et le dernier panneau d'une carte épousent ses coins. */
.rec-col.l .pan:first-child, .rec-col.r .pan:first-child{ padding-top:2px; }
.rec-col.l .pan:last-child, .rec-col.r .pan:last-child{ border-bottom:0; }

/* ── Un cran de densité en moins partout ──────────────────────────── */
.pan-h{ padding:14px 16px 6px; }
.pan-b{ padding:3px 16px 15px; }
.pan-b.tight{ padding:1px 16px 13px; }
.pan-h b{ font-size:9px; letter-spacing:.11em; }
.prop{ padding:8px 0; gap:12px; grid-template-columns:110px minmax(0,1fr); }
.prop dt{ font-size:10.5px; line-height:18px; }
.prop dd{ font-size:12px; line-height:18px; min-height:18px; }
.fht h1{ font-size:17px; }
.fpill, .fht .fpill{ font-size:10.5px; }
.upd-b{ font-size:13.5px; line-height:1.7; }
.upd-h .who b{ font-size:13px; }
.upd-h .who span{ font-size:11px; }
.atab{ font-size:12.5px; padding:12px 0 10px; }
.qacts-r .qact{ font-size:11px; }
.edr-z{ font-size:13.5px; min-height:130px; }

/* Les cartes ne se voyaient pas : bordure trop claire sur un fond
   presque blanc. Le fond de la fiche descend d'un ton, la bordure
   monte d'un ton, et l'ombre se pose vraiment. Trois cartes nettes. */
#rec.on{ background:var(--ground) !important; }
.rec-col.l, .rec-col.r, .rec-col.c > .pan{
  border-color:var(--line) !important;
  /* Deux ombres : une courte qui pose la carte, une longue et très
     douce qui la détache du fond. C'est ce qui fait « propre » sans
     qu'on voie l'effet. */
  box-shadow:0 1px 2px rgba(16,18,32,.05), 0 6px 18px rgba(16,18,32,.05) !important;
}
/* Les séparations à l'intérieur d'une carte restent des filets fins. */
.rec-col.l .pan, .rec-col.r .pan{ border-bottom-color:var(--line-3); }

/* ══ L'ALIGNEMENT, AU PIXEL ═══════════════════════════════════════
   « Les logos, il n'y a rien qui s'établit bien, c'est pas centré du
   tout. Les box de commentaires, il écrit 1, 2, 2 : faut que tout soit
   bien aligné à droite. Dis-toi que je suis perfectionniste. »

   1. La barre latérale. Une ligne avec un emoji réservait 14 px à son
   icône, une ligne avec un logo de marque en réservait 16 ou 17 : les
   NOMS ne commençaient donc pas au même endroit d'une ligne à l'autre.
   Même case pour tous, 18 px, et le dessin centré dedans. */
.nrow .gl, .nrow .bmk{
  flex:0 0 18px !important; width:18px; height:18px;
  display:inline-flex !important; align-items:center; justify-content:center;
  margin:0 !important; text-align:center;
}
.nrow .bmk svg{ width:15px !important; height:15px !important; display:block; }
.nrow .gl.emo{ font-size:12px; line-height:1; }
.nrow .car{ flex:0 0 10px; text-align:center; }

/* 2. La première colonne d'un tableau. La bulle de notes et la date de
   dernière activité portaient toutes les deux « margin-left:auto » :
   la première mangeait l'espace libre, la seconde se collait derrière,
   et leur position dépendait donc de la longueur du nom. Deux colonnes
   de largeur fixe, à droite, identiques d'une ligne à l'autre. */
.mb td.first .cell.nmc{ gap:0; }
.mb td.first .nml{ flex:1 1 auto; min-width:0; }
.mb td.first .ntb{
  margin-left:0 !important; flex:0 0 52px; width:52px;
  justify-content:center; padding:0; border-left:0;
}
.mb td.first .ntb i{ right:auto; left:calc(50% + 4px); }
.mb td.first .nmwhen{
  margin-left:0 !important; flex:0 0 74px; width:74px;
  text-align:right; padding-left:0;
}
.mb td.first .subn, .mb td.first .openhint{ flex:0 0 auto; }

/* ── Le pied d'une carte kanban, aligné lui aussi ───────────────────
   Même défaut que dans les tableaux : la bulle de notes se plaçait au
   fil du texte, donc sa position dépendait du nombre (1 ou 27). D'une
   carte à l'autre, elle sautait de dix pixels. Largeur fixe pour la
   bulle, la date collée au bord droit, et le reste au ressort. */
.kcard .kf{ display:flex; align-items:center; gap:7px; }
.kcard .kf .ksp{ flex:1 1 auto; min-width:0; }
.kcard .kf .knt{
  flex:0 0 30px; display:inline-flex; align-items:center; gap:3px;
  justify-content:flex-end; font-variant-numeric:tabular-nums;
}
.kcard .kf .kd{ flex:0 0 auto; min-width:52px; text-align:right; }
.kcard .kf .amt{ flex:0 0 auto; margin-left:0 !important; }
.kcard .kf .ksrc{ flex:0 0 auto; }

/* ── Une tâche dans une colonne étroite ─────────────────────────────
   Le titre et la date se partageaient la largeur sur UNE ligne : dans
   une colonne de 274 px, « Go - Envoyer le contrat 1 mois + lien de
   paiement acompte 1500 € » tombait à un mot par ligne pendant que
   « en retard · 13 sept. 2026 » occupait la moitié. La date passe en
   dessous, le titre prend toute la largeur. */
.tk{ grid-template-columns:20px minmax(0,1fr); grid-auto-rows:min-content;
  align-items:start; gap:4px 8px; padding:7px 4px; }
.tk .tkc{ grid-row:1; margin-top:1px; }
.tk .tkt{ grid-column:2; font-size:12.5px; line-height:1.45; }
.tk .tkd, .tk .tkp{ grid-column:2; justify-self:start; font-size:10.5px; }
.tk .tkd{ margin-top:1px; }

/* ══ LA CLOCHE, ET L'AIR SUR LES ÉCRANS DE LISTE ══════════════════ */

/* ⚠ « La cloche a disparu. » Elle était là — c'est sa pastille qui la
   recouvrait ENTIÈREMENT : dessinée pour un chiffre à un caractère
   (16 px de large), elle en faisait 28 avec « 9+ » et sa bordure, soit
   exactement la taille du bouton. On ne voyait plus qu'un rectangle
   rouge. La pastille se pose maintenant dans le coin, plus petite, et
   déborde légèrement au lieu de manger l'icône. */
.gicon.gbell{ width:32px; height:32px; }
.gicon.gbell svg{ width:20px; height:20px; }
.gbadge{
  /* ⚠ La règle d'origine est en `box-sizing:content-box` : une hauteur
     de 14 px y devient 18 px une fois la bordure ajoutée, et « 9+ »
     élargissait la pastille à 24 px — soit, aux trois quarts, la
     cloche elle-même. On repasse en `border-box` : ce qui est écrit
     est ce qui s'affiche. */
  box-sizing:border-box;
  top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px;
  font-size:9.5px; line-height:12px; border-width:2px;
}

/* ── Les écrans de liste (Appels, Renouvellements, Réponses…) ──────
   « C'est hyper collé, tout est collé. » Les quatre chiffres se
   touchaient, le bandeau collait au tableau, et une ligne de tableau
   faisait 36 px — la hauteur d'un bouton, pas d'une ligne qu'on lit. */
.cards4{ gap:14px; margin-bottom:20px; }
.ck{ padding:18px 20px; border-radius:14px; border-color:var(--line-2);
  box-shadow:0 1px 2px rgba(16,18,32,.04); }
.ckk{ font-size:9.5px; letter-spacing:.11em; }
.ckv{ line-height:1.25; margin-top:4px; }
.ckn{ margin-top:3px; }
.note, .warn-box, .danger-box{ margin-bottom:20px; }

.mtw{ margin-top:4px; }
.mtb{ border-radius:14px; border-color:var(--line-2);
  box-shadow:0 1px 2px rgba(16,18,32,.04); }
.mtb th{ height:44px; padding:0 14px; font-size:11px; font-weight:600;
  letter-spacing:.04em; color:var(--ink-3); background:var(--sunken); }
.mtb th.c1, .mtb th.c2{ padding-left:20px; }
.mtb td{ height:52px; padding:10px 14px; line-height:1.45; }
.mtb td.c1{ padding-left:20px; }
.mtb td.c3{ padding-right:18px; }
.mtb tbody tr:hover td:not(.p){ background:var(--sunken); }
/* Les deux lignes d'une cellule — la date et la durée, le titre et
   l'adresse — ne se collent plus l'une à l'autre. */
.mtb td i, .mtb td .hm, .mtb .apj i, .mtb .apt i{
  display:block; font-style:normal; margin-top:3px;
  font-size:11px; color:var(--ink-3); line-height:1.4;
}
.mcell{ height:34px; border-radius:8px; margin:0 6px; }

/* ═══ « TU VEUX SYNCHRONISER QUOI ? » ══════════════════════════════
   Un bouton qui ne dit pas ce qu'il fait ne se presse pas, et un
   compte rendu qui disparaît au bout de deux secondes ne se lit pas.
   Le panneau nomme les quatre sources, donne l'heure de leur dernière
   lecture, et garde le rapport à l'écran jusqu'au passage suivant. */
.syncp{
  border:1px solid var(--line-2); border-radius:14px; background:var(--paper);
  padding:18px 20px 20px; margin-bottom:20px;
  box-shadow:0 1px 2px rgba(16,18,32,.04);
}
.syncp-h{ display:flex; flex-direction:column; gap:4px; margin-bottom:16px; }
.syncp-h b{ font-size:13.5px; font-weight:650; color:var(--ink); letter-spacing:-.15px; }
.syncp-h i{ font-style:normal; font-size:12.5px; line-height:1.55; color:var(--ink-3); max-width:76ch; }

.syncp-g{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media (max-width:1100px){ .syncp-g{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.syncp-att{ font-size:12.5px; color:var(--ink-3); }
.syncs{
  border:1px solid var(--line-2); border-radius:11px; background:var(--sunken);
  padding:12px 14px 13px; display:flex; flex-direction:column; gap:3px; min-width:0;
}
.syncs b{ font-size:12.5px; font-weight:650; color:var(--ink); }
.syncs i{ font-style:normal; font-size:11.5px; line-height:1.45; color:var(--ink-3); }
.syncs span{ font-size:11px; color:var(--ink-3); margin-top:3px;
  font-variant-numeric:tabular-nums; }
/* Une autorisation expirée ne doit pas se lire dans les journaux du
   serveur : elle s'affiche ici, et elle se voit. */
.syncs.ko{ border-color:#e9c6c4; background:#fdf6f5; }
.syncs.ko span{ color:var(--mdy-red-dark); font-weight:600; }

.syncp-r{ margin-top:16px; border-top:1px solid var(--line-2); padding-top:14px; }
.syncp-en{ font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.syncp-pts{ display:inline-flex; gap:3px; }
.syncp-pts i{ width:4px; height:4px; border-radius:50%; background:var(--brand);
  animation:syncpt 1.1s infinite ease-in-out; }
.syncp-pts i:nth-child(2){ animation-delay:.16s; }
.syncp-pts i:nth-child(3){ animation-delay:.32s; }
@keyframes syncpt{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .syncp-pts i{ animation:none; opacity:.6; } }

.syncp-fin{ display:flex; align-items:baseline; gap:8px; margin-bottom:9px; }
.syncp-fin b{ font-size:13px; font-weight:650; color:var(--ink); }
.syncp-fin span{ font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.syncp-l{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.syncp-l li{ font-size:12.5px; line-height:1.55; color:var(--ink-2);
  padding-left:20px; position:relative; }
.syncp-l li::before{ position:absolute; left:0; top:0; font-size:11px; }
.syncp-l li.ok::before{ content:'✓'; color:#16875a; }
.syncp-l li.ko::before{ content:'✗'; color:var(--mdy-red); }
.syncp-l li.ko{ color:var(--mdy-red-dark); }
.syncp-n{ margin:12px 0 0; font-size:12px; line-height:1.6; color:var(--ink-3);
  max-width:84ch; }

/* ═══ LES BORDS ═══════════════════════════════════════════════════
   « Tout est collé avec les bordures. » Le titre d'un écran avait sa
   gouttière (36 px), le CONTENU n'en avait aucune : `.boardview` était
   en `padding:4px 0`. Les quatre chiffres, le bandeau jaune et le
   tableau touchaient donc la barre de gauche et le bord droit de la
   fenêtre, dans tous les écrans à la fois.
   La gouttière passe sur le conteneur, et ceux qui portaient déjà la
   leur la rendent — sinon on la compterait deux fois. */
.boardview:not(.galv):not(.tlv){
  padding-left:var(--gx); padding-right:var(--gx);
}
.boardview > .board, .boardview > .kb, .boardview > .tblscroll,
.boardview > .grp-head, .boardview > .grp-add, .boardview > .cal,
.boardview > .chanview, .boardview > .acc, .boardview > .ckp,
.boardview > .pf, .boardview > .pro, .boardview > .pagex,
.boardview > .wshero, .boardview > .wsl{
  padding-left:0; padding-right:0;
}
.boardview > .grp-head::after{ left:0; right:0; }
.boardview > .expz, .boardview > .revz,
.boardview.bv-prod > .frz, .boardview.bv-prod > .docb{
  margin-left:0; margin-right:0;
}

/* Le haut de l'écran ne colle plus aux onglets, et les onglets ne
   collent plus au titre : trois blocs, trois respirations. */
#view > .topbar:not(.bhead){ padding-bottom:2px; }
/* ⚠ RÈGLE : JAMAIS de marge intérieure (padding) haute ou gauche sur
   `.boardview`. C'est le conteneur qui défile ; ses en-têtes figés
   (sticky) s'arrêtent au bord de sa marge, et tout ce qui défile passe
   dans l'interstice — des lignes au-dessus de l'en-tête du groupe, des
   colonnes à gauche des cases à cocher. Trois fois en deux jours.
   L'espace se met sur le CONTENU (premier enfant), pas sur le conteneur. */
.boardview{ padding-top:0 !important; }
.boardview > :first-child{ margin-top:18px; }
/* Un tableau qui n'a qu'une vue n'a pas d'onglets : pas de filet orphelin */
.toolbar .tvues:not(:has(.btab)){ display:none }

/* Les écrans de canal (Meta Ads, Google Ads, Cold email…) centraient
   leur contenu dans une colonne de 1280 px : le titre se posait à
   36 px du bord, les chiffres à 62 px. Deux alignements dans le même
   écran, et sur un grand écran une colonne flottant au milieu. La
   gouttière du conteneur suffit — le contenu s'aligne sur son titre. */
.boardview > .optview, .boardview > .fnlview, .boardview > .chanview{
  max-width:none; margin-left:0; margin-right:0;
}
.boardview > .chanview{ padding:0 0 60px; }

/* « Reçu le » se pliait en trois lignes — « 22 / sept. / 2026 » — parce
   que la colonne prenait ce qui restait. Une date ne se coupe pas. */
.opt-tbl th, .opt-tbl .od, .opt-tbl .oa, .opt-tbl .ot{ white-space:nowrap; }
.opt-tbl td{ height:46px; }

/* ═══ LA GOUTTIÈRE ET LA COLONNE FIGÉE ════════════════════════════
   La gouttière de `.boardview` (36 px) et le retrait du groupe laissent
   une bande à gauche de la colonne figée. En faisant défiler le tableau,
   les colonnes passaient DANS cette bande, à gauche des cases à cocher :
   « les trucs se mettent par-dessus ». La case figée prolonge donc son
   fond jusqu'au bord — invisible au repos, elle cache ce qui défile. */
.boardview .mb th.chk{ overflow:visible; }
.boardview .mb th.chk::before, .boardview .mb td.chk::before{
  content:""; position:absolute; top:0; bottom:-1px; right:100%; width:240px;
  background:var(--bvfond, #fff); pointer-events:none;
}

/* Le tableau portait SA propre gouttière en plus de celle de l'écran :
   36 + 36 px entre la barre de gauche et la première case. Une seule
   suffit — celle de l'écran, sur laquelle le titre s'aligne. */
.boardview .tblscroll, .boardview .grp-head, .boardview .grp-add{ padding-left:0; }

/* ═══ LES BOÎTES MAIL DE L'ÉQUIPE ══════════════════════════════════
   Le piège des mails est invisible : une boîte non branchée ne produit
   aucune erreur, juste des affaires qui ne bougent jamais. Ce panneau
   la montre, et donne les deux seuls gestes possibles — la brancher
   soi-même, ou envoyer le lien à la personne. */
.mbx{
  border:1px solid var(--line-2); border-radius:14px; background:var(--paper);
  padding:20px 22px 18px; margin-bottom:20px;
  box-shadow:0 1px 2px rgba(16,18,32,.04);
}
.mbx-att{ font-size:12.5px; color:var(--ink-3); }
.mbx-h{ display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
.mbx-h b{ font-size:13.5px; font-weight:650; color:var(--ink); letter-spacing:-.15px; }
.mbx-h i{ font-style:normal; font-size:12.5px; line-height:1.6; color:var(--ink-3); max-width:82ch; }
.mbx-c{ font-size:11.5px; font-weight:600; color:var(--ok); margin-top:4px;
  font-variant-numeric:tabular-nums; }
.mbx-c.ko{ color:var(--mdy-red-dark); }
.mbx-ko{ font-size:11.5px; color:var(--mdy-red-dark); margin-top:2px; }

.mbx-l{ display:flex; flex-direction:column; gap:1px; border:1px solid var(--line-2);
  border-radius:11px; overflow:hidden; background:var(--line-3); }
.mbx-i{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--paper); }
.mbx-p{ flex:0 0 18px; text-align:center; font-size:13px; color:var(--ink-4); }
.mbx-i.on .mbx-p{ color:var(--ok); font-weight:700; }
.mbx-n{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.mbx-n b{ font-size:13px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mbx-n i{ font-style:normal; font-size:11.5px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mbx-s{ flex:0 0 auto; font-size:11.5px; color:var(--mdy-red-dark); }
.mbx-i.on .mbx-s{ color:var(--ink-3); }
.mbx-b{
  flex:0 0 auto; border:1px solid var(--brand); background:var(--brand); color:#fff;
  border-radius:7px; padding:6px 12px; font:600 11.5px var(--f); cursor:pointer;
}
.mbx-b:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }
.mbx-b.off{ background:none; color:var(--ink-2); border-color:var(--line-2); }
.mbx-b.off:hover{ background:var(--sunken); border-color:var(--ink-4); }
.mbx-b:disabled{ opacity:.6; cursor:default; }

.mbx-f{ display:flex; align-items:flex-start; gap:14px; margin-top:16px;
  padding-top:15px; border-top:1px solid var(--line-2); }
.mbx-f .btn{ flex:0 0 auto; }
.mbx-f span{ font-size:12px; line-height:1.6; color:var(--ink-3); max-width:78ch; }
@media (max-width:820px){ .mbx-f{ flex-direction:column; gap:10px; } }

/* ═══ LE BLOC DU GROUPE NE BOUGE PAS ══════════════════════════════
   « Le bloc Entreprise doit être statique : quand tu scrolles, il ne
   bouge pas — mais ça scrolle quand même. » Le bloc (nom du groupe +
   ligne des titres de colonnes) remontait de 26 px avant de se figer,
   puis les titres glissaient sous lui. Il se fige maintenant là où il
   est au repos : l'espace au-dessus fait partie du bloc (padding blanc)
   au lieu d'être une marge qui s'en va. Les lignes défilent dessous, et
   une ombre douce apparaît sous les titres dès qu'on quitte le haut. */
.boardview > .grp:first-child{ margin-top:0; }
.boardview .grp-head{
  top:0 !important; height:53px; box-sizing:border-box; padding-top:18px;
  background:var(--paper, #fff); white-space:nowrap;
}
.boardview .mb thead th{ top:53px !important; transition:box-shadow .2s ease; }
.boardview.defile .mb thead th{ box-shadow:0 8px 14px -10px rgba(16,24,40,.28); }
/* La case d'en-tête des cases à cocher était en `display:grid` : une
   cellule qui n'est plus une cellule ne se fige pas en haut — elle
   défilait et laissait voir les lignes à gauche des titres. */
.boardview .mb th.chk{ display:table-cell; text-align:center; vertical-align:middle; }
/* Les icônes dessinées (calendrier, horloge, document) s'alignent sur le texte */
svg.ico{ vertical-align:-2px; flex:none; }

/* Le blocage qui ne se devine pas : l'API Gmail éteinte sur le projet
   Google. Le jeton est bon, l'autorisation est bonne, et Google répond
   quand même 403. Tant que ce n'est pas écrit en grand, on cherche du
   côté des utilisateurs et on ne trouve rien. */
.mbx-blq{
  border:1px solid #e9c6c4; background:#fdf6f5; border-radius:11px;
  padding:14px 16px; margin-bottom:14px; display:flex; flex-direction:column; gap:4px;
}
.mbx-blq b{ font-size:13px; color:var(--mdy-red-dark); }
.mbx-blq span{ font-size:12.5px; line-height:1.6; color:var(--ink-2); max-width:84ch; }
.mbx-blq a{ color:var(--mdy-red-dark); font-weight:600; text-decoration:underline; }

.mbx-s.ok{ color:var(--ink-3); }
.mbx-s.att{ color:var(--warn); }
.mbx-s.ko{ color:var(--mdy-red-dark); }
.mbx-i .mbx-b{ text-decoration:none; }
.mbx-r{ margin-top:14px; padding-top:13px; border-top:1px solid var(--line-2); }

/* ── La preuve : les derniers mails réellement suivis ───────────── */
.mbx-pr{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2); }
.mbx-pr > b{ display:block; font-size:12px; font-weight:650; color:var(--ink);
  letter-spacing:.02em; margin-bottom:9px; }
.mbx-pl{ display:flex; flex-direction:column; gap:1px; border:1px solid var(--line-2);
  border-radius:10px; overflow:hidden; background:var(--line-3); }
.mbx-pi{ display:flex; align-items:baseline; gap:12px; padding:9px 14px;
  background:var(--paper); cursor:pointer; min-width:0; }
.mbx-pi:hover{ background:var(--sunken); }
.mbx-pq{ flex:0 0 88px; font-size:11px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; }
.mbx-pc{ flex:0 0 172px; font-size:12.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mbx-ps{ flex:1 1 auto; font-size:12px; color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── L'angle mort, nommé ───────────────────────────────────────────
   Un trou qu'on voit se referme ; un trou invisible reste pour
   toujours. C'est la seule mesure honnête de « est-ce qu'on traque
   tout ? » — et elle doit tendre vers zéro. */
.mbx-inc{ margin-top:16px; padding:15px 16px; border:1px solid var(--signal-line);
  background:var(--signal-t); border-radius:11px; }
.mbx-inc > b{ display:block; font-size:13px; font-weight:650; color:var(--warn);
  margin-bottom:4px; }
.mbx-inc > i{ display:block; font-style:normal; font-size:12.5px; line-height:1.6;
  color:var(--ink-2); max-width:86ch; margin-bottom:12px; }
.mbx-il{ display:flex; flex-direction:column; gap:1px; border:1px solid var(--line-2);
  border-radius:10px; overflow:hidden; background:var(--line-3); }
.mbx-ii{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--paper); }
.mbx-ia{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.mbx-ia b{ font-size:12.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mbx-ia i{ font-style:normal; font-size:11.5px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mbx-ok{ margin-top:16px; padding:13px 16px; border:1px solid #bfe6d2;
  background:#f0faf5; border-radius:11px; font-size:12.5px; line-height:1.6;
  color:var(--ink-2); }
.mbx-ok b{ color:var(--ok); }

/* ── Le compte qui tombe juste ─────────────────────────────────────
   « Comment je peux être sûr qu'on traque tout ? » Par une addition :
   tout ce qui a été lu est soit un robot écarté, soit un mail posé sur
   une fiche, soit un interlocuteur pas encore reconnu — et celui-là
   est nommé juste en dessous. Rien ne se perd entre les deux. */
.mbx-cpt{ display:flex; align-items:stretch; gap:10px; margin-top:16px;
  padding-top:15px; border-top:1px solid var(--line-2); flex-wrap:wrap; }
.mbx-ct{ flex:1 1 150px; min-width:0; border:1px solid var(--line-2); border-radius:11px;
  background:var(--sunken); padding:12px 14px; display:flex; flex-direction:column; gap:2px; }
.mbx-ct b{ font-size:21px; font-weight:700; color:var(--ink); line-height:1.15;
  font-variant-numeric:tabular-nums; letter-spacing:-.4px; }
.mbx-ct span{ font-size:11.5px; color:var(--ink-3); line-height:1.4; }
.mbx-ct span i{ display:block; font-style:normal; font-size:10.5px; color:var(--ink-4);
  margin-top:2px; }
.mbx-ct.ok{ border-color:#bfe6d2; background:#f4fbf7; }
.mbx-ct.ok b{ color:var(--ok); }
.mbx-ct.att{ border-color:var(--signal-line); background:var(--signal-t); }
.mbx-ct.att b{ color:var(--warn); }
.mbx-eq{ align-self:center; font-size:14px; color:var(--ink-4); flex:0 0 auto; }
@media (max-width:900px){ .mbx-eq{ display:none; } }

/* ═══ LE DÉTAIL D'UN MOIS ══════════════════════════════════════════
   Quatre colonnes dans UN seul panneau, séparées par un filet : plus de
   cartes flottantes de hauteurs différentes, plus de grande carte blanche
   pour dire « personne n'a signé ». Chaque colonne annonce son total ;
   une liste longue défile dans sa colonne au lieu d'allonger la page. */
.mo-d{ padding:4px 18px 20px; background:var(--sunken, #f6f7fb); }
.mo2{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  background:var(--paper, #fff); border:1px solid var(--line, #e6e9ef); border-radius:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.04); overflow:hidden; }
@media (max-width:1250px){ .mo2{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:700px){ .mo2{ grid-template-columns:1fr; } }
.mo2-c{ min-width:0; border-left:1px solid var(--line, #e6e9ef); display:flex; flex-direction:column; }
.mo2-c:first-child{ border-left:0; }
@media (max-width:1250px){ .mo2-c:nth-child(3){ border-left:0; } .mo2-c:nth-child(n+3){ border-top:1px solid var(--line, #e6e9ef); } }
.mo2-h{ display:flex; align-items:baseline; gap:8px; padding:14px 18px 12px;
  border-bottom:1px solid var(--line, #e6e9ef); position:relative; }
.mo2-h::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--mo2-a); }
.mo2-new{ --mo2-a:#579bfc; } .mo2-in{ --mo2-a:#00c875; } .mo2-du{ --mo2-a:#e2445c; } .mo2-out{ --mo2-a:#a1a7b3; }
.mo2-t{ font-size:12px; font-weight:650; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-2, #323338); }
.mo2-n{ font-size:11px; font-weight:600; color:var(--ink-3, #676879); background:var(--sunken, #f1f2f6);
  border-radius:9px; padding:1px 7px; }
.mo2-s{ margin-left:auto; font-size:15px; font-weight:700; color:var(--ink, #1f2129); white-space:nowrap; }
.mo2-du .mo2-s{ color:#d83a52; }
.mo2-s i, .mo2-m i{ font-style:normal; font-weight:500; font-size:11px; color:var(--ink-4, #9699a6); margin-left:3px; }
.mo2-l{ max-height:330px; overflow-y:auto; padding:4px 0 8px; overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 18px), transparent); }
.mo2-r{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:1px;
  padding:8px 18px; border-bottom:1px solid rgba(0,0,0,.04); }
.mo2-r:last-child{ border-bottom:0; }
.mo2-r:hover{ background:rgba(87,155,252,.05); }
.mo2-nm{ font:inherit; font-size:13px; font-weight:600; color:var(--ink, #1f2129); text-align:left;
  background:none; border:0; padding:0; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mo2-nm:hover{ color:var(--mdy-blue, #0073ea); text-decoration:underline; text-underline-offset:2px; }
.mo2-nm.plat{ cursor:default; }
.mo2-nm.plat:hover{ color:inherit; text-decoration:none; }
.mo2-m{ font-size:13px; font-weight:600; color:var(--ink, #1f2129); text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.mo2-m.du{ color:#d83a52; }
.mo2-y{ grid-column:1 / -1; font-size:11.5px; color:var(--ink-4, #9699a6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mo2-v{ margin:0; padding:18px; font-size:12.5px; color:var(--ink-4, #9699a6); }

/* ═══ GEO : les visites d'un assistant ════════════════════════════ */
.geo-row{ cursor:pointer; }
.geo-row:hover td{ background:rgba(162,93,220,.05); }
.geo-row.on td{ background:rgba(162,93,220,.07); }
.geo-car{ display:inline-block; width:14px; color:#a25ddc; font-size:11px; }
.geo-det > td{ padding:0 !important; background:var(--sunken, #f6f7fb); }
.geo-d{ padding:14px 16px 18px; }
.geo-g{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:0;
  background:var(--paper, #fff); border:1px solid var(--line, #e6e9ef); border-radius:12px; overflow:hidden; text-align:left; }
@media (max-width:1100px){ .geo-g{ grid-template-columns:1fr; } }
.geo-c{ min-width:0; border-left:1px solid var(--line, #e6e9ef); }
.geo-c:first-child{ border-left:0; }
.geo-c h3{ margin:0; padding:12px 16px; font-size:12px; font-weight:650; text-transform:uppercase; letter-spacing:.02em;
  color:var(--ink-2, #323338); border-bottom:1px solid var(--line, #e6e9ef); border-top:3px solid #a25ddc; }
.geo-c h3 span{ font-size:11px; color:var(--ink-3, #676879); background:var(--sunken, #f1f2f6); border-radius:9px; padding:1px 7px; margin-left:6px; }
.geo-l{ max-height:300px; overflow-y:auto; }
.geo-r{ display:grid; grid-template-columns:92px minmax(0,1fr); column-gap:12px; padding:9px 16px;
  border-bottom:1px solid rgba(0,0,0,.04); }
.geo-r:last-child, .geo-r2:last-child{ border-bottom:0; }
.geo-j{ grid-row:span 3; font-size:12px; font-weight:600; color:var(--ink-2, #323338); }
.geo-p{ font-size:13px; font-weight:600; color:var(--ink, #1f2129); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.geo-m, .geo-s{ font-size:11.5px; color:var(--ink-4, #9699a6); }
.geo-s i{ font-style:normal; } .geo-ok{ color:#00a35c; font-weight:600; }
.geo-r2{ display:flex; align-items:baseline; gap:10px; padding:8px 16px; border-bottom:1px solid rgba(0,0,0,.04); }
.geo-r2 .geo-p{ flex:1; font-weight:500; } .geo-r2 b{ font-size:13px; }
.geo-r2 i{ font-style:normal; font-size:11.5px; color:var(--ink-4, #9699a6); margin-left:auto; white-space:nowrap; }
.geo-f{ font:inherit; font-size:13px; font-weight:600; background:none; border:0; padding:0; cursor:pointer;
  color:var(--ink, #1f2129); text-align:left; }
.geo-f:hover{ color:var(--mdy-blue, #0073ea); text-decoration:underline; }
.geo-vide{ margin:0; padding:14px 16px; font-size:12.5px; line-height:1.55; color:var(--ink-4, #9699a6); }

/* Le nombre d'affaires derrière une somme miroir : « 4 500 € ² » dit
   que le total vient de deux contrats, sans allonger la colonne. */
.mrn{ font-style:normal; font-size:9.5px; font-weight:700; color:var(--ink-4);
  vertical-align:super; }

/* ═══ NOUVEAU TABLEAU, DÉCRIT À L'ASSISTANT ═══════════════════════ */
.mo-c.mo-ia{ max-width:640px; padding:30px 34px 26px; border-radius:16px; }
.ia-h{ display:flex; align-items:center; margin-bottom:18px; }
.ia-h h2{ margin:0; font-size:26px; font-weight:700; letter-spacing:-.3px; }
.ia-x{ margin-left:auto; border:0; background:none; font-size:18px; color:var(--ink-3, #676879);
  cursor:pointer; width:32px; height:32px; border-radius:8px; }
.ia-x:hover{ background:var(--sunken, #f1f2f6); }
.ia-zone{ position:relative; border-radius:14px; padding:2px;
  background:linear-gradient(120deg, #ff7eb3, #a25ddc 30%, #579bfc 60%, #00c875 85%, #fdab3d); }
.ia-zone textarea{ display:block; width:100%; box-sizing:border-box; border:0; outline:0; resize:none;
  border-radius:12px 12px 0 0; padding:14px 16px 8px; font:inherit; font-size:15px; line-height:1.5;
  color:var(--ink, #1f2129); background:var(--paper, #fff); }
.ia-zone textarea::placeholder{ color:var(--ink-3, #676879); }
.ia-zone.occupe{ opacity:.75; }
.ia-zone:not(:has(.ia-idees)) textarea{ border-radius:12px; padding-bottom:14px; }
.ia-idees{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:6px 14px 12px;
  background:var(--paper, #fff); border-radius:0 0 12px 12px; }
.ia-chip{ font:inherit; font-size:13px; padding:5px 10px; border-radius:7px; border:0; cursor:pointer;
  background:var(--sunken, #f1f2f6); color:var(--ink-2, #323338); }
.ia-chip:hover{ background:#e6e9f4; }
.ia-rot{ margin-left:auto; border:0; background:none; font-size:17px; cursor:pointer; color:var(--ink-3, #676879);
  width:30px; height:30px; border-radius:50%; }
.ia-rot:hover{ background:var(--sunken, #f1f2f6); }
.ia-ex{ display:flex; align-items:center; gap:9px; margin:16px 0 20px; font-size:14px; color:var(--ink, #1f2129); cursor:pointer; }
.ia-ex input{ width:17px; height:17px; accent-color:var(--mdy-blue, #0073ea); }
.ia-conf b{ display:block; font-size:14px; font-weight:600; margin-bottom:10px; }
.ia-radios{ display:flex; gap:26px; flex-wrap:wrap; }
.ia-radios label{ display:flex; align-items:center; gap:7px; font-size:14px; cursor:pointer; }
.ia-radios input{ width:17px; height:17px; accent-color:var(--mdy-blue, #0073ea); }
.ia-kd{ display:block; margin-top:9px; font-size:13px; color:var(--ink-3, #676879); }
.ia-dos{ margin-top:16px; display:flex; align-items:center; gap:10px; }
.ia-dos label{ font-size:13px; color:var(--ink-3, #676879); }
.ia-dos select{ max-width:260px; }
.ia-f{ display:flex; justify-content:flex-end; margin-top:22px; }
.ia-f .btn{ padding:10px 20px; font-size:15px; }
.ia-ou{ display:flex; align-items:center; gap:14px; margin:20px 0 6px; color:var(--ink-3, #676879); font-size:13px; }
.ia-ou::before, .ia-ou::after{ content:""; flex:1; height:1px; background:var(--line, #e6e9ef); }
.ia-man{ display:block; margin:0 auto; border:0; background:none; font:inherit; font-size:14px;
  color:var(--ink, #1f2129); cursor:pointer; padding:8px 12px; border-radius:8px; }
.ia-man:hover{ background:var(--sunken, #f1f2f6); }
.ia-fil{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; max-height:40vh; overflow-y:auto; }
.ia-b{ max-width:85%; padding:10px 13px; border-radius:12px; font-size:14px; line-height:1.5; white-space:pre-wrap; }
.ia-b.moi{ align-self:flex-end; background:var(--mdy-blue, #0073ea); color:#fff; border-bottom-right-radius:4px; }
.ia-b.lui{ align-self:flex-start; background:var(--sunken, #f1f2f6); color:var(--ink, #1f2129); border-bottom-left-radius:4px; }
.ia-sug{ display:flex; flex-wrap:wrap; gap:8px; }
.ia-sug .ia-chip{ background:#fff; border:1px solid var(--line, #e6e9ef); }
.ia-sug .ia-chip:hover{ border-color:var(--mdy-blue, #0073ea); color:var(--mdy-blue, #0073ea); }
.ia-wait{ display:flex; align-items:center; gap:10px; margin-top:14px; font-size:13.5px; color:var(--ink-2, #323338); }
.ia-dots{ display:inline-flex; gap:4px; }
.ia-dots i{ width:6px; height:6px; border-radius:50%; background:#a25ddc; animation:ia-p 1s infinite ease-in-out; }
.ia-dots i:nth-child(2){ animation-delay:.15s; background:#579bfc; } .ia-dots i:nth-child(3){ animation-delay:.3s; background:#00c875; }
@keyframes ia-p{ 0%,80%,100%{ transform:scale(.6); opacity:.5 } 40%{ transform:scale(1); opacity:1 } }

/* ── Un lead sans entreprise ───────────────────────────────────────
   Un opt-in n'est qu'une affaire : un numéro laissé sur une publicité
   n'est pas un client. Le bloc le dit, et donne le geste qui le fait
   devenir un prospect — au moment où le commercial l'a décidé, pas
   avant. */
.lead-b{
  display:flex; align-items:center; gap:14px; margin:0 0 14px;
  padding:13px 15px; border:1px solid var(--signal-line);
  background:var(--signal-t); border-radius:12px;
}
.lead-t{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lead-t b{ font-size:12.5px; font-weight:650; color:var(--warn); }
.lead-t span{ font-size:11.5px; line-height:1.5; color:var(--ink-2); }
.lead-b .btn{ flex:0 0 auto; }
/* Le bloc vit dans la colonne de gauche (≈ 280 px) : il s'empile
   toujours, et le bouton prend toute la largeur. */
.lead-b{ flex-direction:column; align-items:stretch; }
.lead-b .btn{ justify-content:center; }

/* ── Calendrier vide / jour du shooting d'un restaurant ───────────── */
.frz-vide{max-width:560px;margin:48px auto;padding:28px 32px;border:1px solid #e6e9ef;border-radius:12px;
  background:#fff;display:flex;flex-direction:column;gap:8px;text-align:center}
.frz-vide b{font-size:17px;color:#323338}
.frz-vide span{color:#676879;font-size:13.5px;line-height:1.5}
.frz-vide .frz-shoot{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:10px}
.frz-shoot input[type=date]{height:34px;padding:0 10px;border:1px solid #c3c6d4;border-radius:6px;font:inherit}

/* ── Bac à sable (test.esekai.agency) ─────────────────────────────── */
.bas-bandeau{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:9999;
  background:#b45309;color:#fff;font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);pointer-events:none}

/* La photo d'une étape, en vignette sur sa barre de frise */
.prz-nom .prz-photo{width:34px;height:34px;object-fit:cover;border-radius:6px;margin-left:8px;
  vertical-align:middle;box-shadow:0 1px 4px rgba(0,0,0,.25);pointer-events:none}