/* ═══════════════════════════════════════════════════════════════════════════
   Donna · Page header Attio-style (Margot, mai 2026)
   
   APPROCHE v962 : inspirée du fonctionnement de la page Compte (.cpt-topbar
   dans .cpt-main, sticky top:0 sans gap).
   
   1. On vire le padding-top de .shellv2-main (était 25px via layout-tokens.css)
      → le .ph peut maintenant coller au top du scrollable container.
   2. Le .ph déborde latéralement (margin-x négatif) pour aller bord à bord,
      compensant le padding-x:24px de .shellv2-main.
   3. Padding interne re-calculé pour que le contenu (icon + title) reste à
      14px du bord visuel (= 14 + 24px compensé).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fallbacks pour les variables que donna n'a pas encore définies en v2.0 */
:root{
  --ph-border-hi: var(--border-hi, var(--border));
  --ph-text-dim: var(--text-dim, var(--muted));
  --ph-s2: var(--s2, var(--surface));
  --ph-radius: 4px;
}

/* ═══ FIX KEY : vire le padding-top de .shellv2-main pour permettre au .ph
   de coller vraiment au top. Le padding-bottom + padding-x restent. ═══ */
body.shell-v2-on .shellv2-main{
  padding-top: 0 !important;
}

/* ───── Header (40px) ───── */
/* [v964] Le .ph est maintenant direct child de .shellv2-main (pas dans #page-X).
   Pas besoin de compenser le margin-left:56px de #page-X car le .ph n'est plus dedans. */
.ph{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 60;
  box-sizing: border-box;
  flex-shrink: 0;
  /* Margin négatif latéral pour déborder du padding-x:24px de .shellv2-main
     et aller bord à bord (comme .cpt-topbar dans compte-page). Les 4 valeurs
     sont explicites pour éviter qu'un margin top hérité (= 0 ici) ne foire. */
  margin-top: 0 !important;
  margin-right: calc(-1 * var(--shellv2-main-px, 24px)) !important;
  /* [v980] 12px était trop gros visuellement.
     [v981] Anthony : "20px partout sur toutes les pages" — niveau confort
     visuel idéal entre sticky header et carte du contenu. */
  margin-bottom: 20px !important;
  margin-left: calc(-1 * var(--shellv2-main-px, 24px)) !important;
  /* Padding interne = 14px (Margot) + 24px (padding parent compensé) */
  padding: 0 calc(14px + var(--shellv2-main-px, 24px));
  /* NOTE v1123 : la border-bottom est virée chirurgicalement pour Biens et
     Clients via l'override !important dans shell-v2.css L3464+ (v1122 fix
     Margot pages). Les autres pages (Agenda/Dossiers/Compta/etc.) gardent
     la border par défaut. */
}

/* [v965] Vire le gap:16 du .shellv2-main flex quand il contient un .ph.
   Sans ça, le gap s'ajoute au margin-bottom 12 du .ph = 28px de gap entre
   header et contenu, inconsistant. Avec gap:0 seul le margin-bottom 12 du
   .ph compte → padding uniforme partout. Classe ajoutée par JS (plus robuste
   qu'un :has(> .ph) selector qui peut foirer en cache). */
body.shell-v2-on .shellv2-main.shellv2-main--has-ph{
  gap: 0 !important;
}

/* [v965] Force tous les #page-X sibling du .ph à coller (pas de margin-top
   résiduel hérité). Concerne TOUTES les pages quand le .ph est présent. */
body.shell-v2-on .shellv2-main--has-ph > [id^="page-"]{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* [v960] Neutralise le margin-top du premier élément qui SUIT le .ph */
.ph + *{
  margin-top: 0 !important;
}

body.page-agenda-active.shell-v2-on .shellv2-main{
  padding-top: 0 !important;
}
/* [v969] Anthony : "il faut du padding entre chaque truc". On garde donc le
   margin-bottom:12px par défaut du .ph en mode agenda aussi (avant v966 on
   l'avait viré pour coller la toolbar). + margin-bottom 12px sur .agenda-top
   pour espacer toolbar/grille (voir plus bas). */
/* La .agenda-top reste sticky (utile en vue liste/long scroll) MAIS sous la
   .ph (40px). En vue mois full-screen, sticky n'est pas activé (pas de scroll
   page), .agenda-top est juste après la .ph en flow flex normal. */
body.shell-v2-on #page-agenda .agenda-top{
  top: 40px !important;
}
/* Day-headers vue mois : top:0 relatif au .mois-main (scroll interne) */
body.shell-v2-on #page-agenda .agenda-day-header{
  top: 0 !important;
}
/* Vue liste : pareil, scroll-context différent */
body.shell-v2-on #page-agenda .list-dh{
  top: calc(40px + var(--agenda-top-h, 108px) + 14px) !important;
}

body.shell-v2-on #page-agenda .cal{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* Le #page-agenda lui-même doit être flex column pour que .cal flex:1 fonctionne.
   [v986] CRITIQUE : conditionné à body.page-agenda-active. Sans ça, ce
   display:flex !important battait le display:none inline de switchPage →
   #page-agenda restait visible (40px) sur TOUTES les autres pages, créant
   un gap fantôme entre .ph et le contenu (visible flagrant sur Tâches).
   Trouvé via DevTools tooltip "div#page-agenda 1202×40" sur la zone blanche. */
body.page-agenda-active.shell-v2-on #page-agenda{
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* .mois-wrap legacy height calc(100vh - 80px - 108px - 24px) faussé en mode
   flex full-screen. .mois-main fait déjà flex:1 → laisse le flex décider. */
body.page-agenda-active.shell-v2-on #page-agenda .mois-wrap{
  height: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════
   [v967] AGENDA — Toolbar style Tâches compact + fix gap header
   
   Anthony 11mai 20h : "filtres au-dessus doivent être dans une barre dans
   le même style que la page Tâches (même taille etc)". Pattern à reproduire
   = .t-toolbar (tc.css L781) : padding 6-8px, fond surface, border carte,
   radius lg, font 11-12px.
   
   ALSO Anthony : "encore trop de gap entre header et contenu agenda".
   Investigation : la .agenda-header legacy a padding 14px 24px, et le
   .cal contenant n'a aucun margin/padding. Mais le rendu visuel montrait
   ~150px de gap. CAUSE probable : .cal-filters (deuxième sous-barre dans
   .agenda-top) qui prend ~40px + .agenda-header ~50px + margin .ph 12px.
   FIX : tout compacter, retirer borders/paddings excessifs.
   ══════════════════════════════════════════════════════════════════════ */

/* La .agenda-top wrapper : juste un sticky, pas de styles propres */
body.shell-v2-on #page-agenda .agenda-top{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: none !important;
  /* [v968] Anthony : "il faut qu'elle soit décalée, pas par dessus".
     CAUSE : position:sticky;top:40px legacy → sans scroll actif, le browser
     traite l'élément comme position:relative;top:40px → décalage visuel de
     40px vers le bas SANS pousser le contenu suivant → chevauchement par-
     dessus la grille (les jours 11-17 passaient SOUS la toolbar).
     FIX : position:static pour rester en flow naturel. La .ph est déjà
     sticky top:0 et joue le rôle de header collant. */
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* Toolbar principale (nav + titre + view switch + icons) : style .t-toolbar */
body.shell-v2-on #page-agenda .agenda-header,
body.shell-v2-on #page-agenda .cal-top{
  padding: 6px 10px !important;
  gap: 8px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg, 8px) !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  min-height: 0 !important;
}

/* [v969] Espace 12px entre la toolbar agenda (.agenda-top wrapper) et la
   grille calendrier qui suit. Sans ça la grille est collée directement sous
   la dernière sous-barre (.cal-filters). */
body.shell-v2-on #page-agenda .agenda-top{
  margin-bottom: 12px !important;
}

/* Titre dates : compact comme .t-toolbar (font 12-13px max) */
body.shell-v2-on #page-agenda .agenda-title,
body.shell-v2-on #page-agenda .cal-title{
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -.2px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.shell-v2-on #page-agenda .agenda-title .year,
body.shell-v2-on #page-agenda .cal-title .year{
  font-weight: 500 !important;
  color: var(--muted) !important;
  margin-left: 4px !important;
  font-size: 12px !important;
}

/* Boutons nav (‹ Aujourd'hui ›) : compacts comme .t-prio-seg button */
body.shell-v2-on #page-agenda .agenda-nav-btn{
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  min-width: 24px !important;
  height: 24px !important;
  border-radius: var(--radius, 4px) !important;
}

/* Switch vue (Mois Semaine 3 jours...) : compact */
body.shell-v2-on #page-agenda .agenda-view-switch,
body.shell-v2-on #page-agenda .view-toggle{
  padding: 2px !important;
  border-radius: var(--radius, 4px) !important;
}
body.shell-v2-on #page-agenda .agenda-view-switch button,
body.shell-v2-on #page-agenda .view-toggle button{
  padding: 3px 9px !important;
  font-size: 11px !important;
  border-radius: 3px !important;
  height: 22px !important;
}

/* Boutons icon (filtre, search, sync, zoom, refresh, settings) : 24x24 */
body.shell-v2-on #page-agenda .agenda-settings-btn{
  width: 24px !important;
  height: 24px !important;
  border-radius: var(--radius, 4px) !important;
}
/* SVG inside icon-btns : 13px (was 14-16) */
body.shell-v2-on #page-agenda .agenda-settings-btn svg{
  width: 13px !important;
  height: 13px !important;
}

/* Filter bar (Types : #J #M #V...) : sous la toolbar, même look carte mais
   margin-top 8px pour bien la séparer */
body.shell-v2-on #page-agenda .agenda-filter-bar,
body.shell-v2-on #page-agenda .cal-filters{
  padding: 5px 10px !important;
  margin: 8px 0 0 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg, 8px) !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Pills filtres types (#J #M...) : taille discrète */
body.shell-v2-on #page-agenda .agenda-filter-pills{
  gap: 4px !important;
}
body.shell-v2-on #page-agenda .agenda-filter-pill,
body.shell-v2-on #page-agenda .f-chip{
  padding: 3px 8px !important;
  font-size: 11px !important;
  height: auto !important;
  min-height: 0 !important;
}

/* ── Fix gap S1 (PERSISTE après v966) ──
   Investigation v967 : peut-être que c'est le margin-bottom 12px du .ph qui
   s'additionne au margin-top éventuel de .cal/.agenda-top en mode flex. On
   force tous les espaces verticaux entre .ph et .cal à 0 en mode agenda. */
body.page-agenda-active.shell-v2-on #page-agenda > .cal{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.page-agenda-active.shell-v2-on #page-agenda > .cal > .agenda-top{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Espace propre entre .ph et toolbar = 12px (margin-bottom .ph), pas plus */

/* ══════════════════════════════════════════════════════════════════════
   [v966] CHIPS FILTRES ACTIFS — Hors du .ph, entre rail donna IA et tableau
   
   En v965 j'avais essayé de réinjecter les chips dans .ph-l (à côté du
   titre). Anthony : "doivent être entre donna scan et le tableau" (v980).
   Donc on les sort du .ph et on les met dans la page elle-même via
   _ensureActiveChipsBar() (clients-page.js + biens-page.js), qui crée un
   <div class="page-chips-bar"> inséré APRÈS le rail donna.
   ══════════════════════════════════════════════════════════════════════ */
.page-chips-bar{
  margin: 12px 0 12px 0; /* [v980] 12px top : sépare du rail; 12px bottom : sépare du tableau */
}
.page-chips-bar .active-chips{
  margin-top: 0; /* override du margin-top:8px par défaut de .active-chips */
}

.ph-l{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.ph-icon{
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--ph-text-dim);
  flex-shrink: 0;
}
.ph-icon svg{
  width: 14px;
  height: 14px;
  display: block;
}
.ph-title{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.ph-meta{
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ph-meta::before{
  content: '·';
  margin-right: 6px;
  color: var(--ph-border-hi);
}
.ph-r{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ───── Buttons ───── */
.ph-btn{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: var(--ph-radius);
  color: var(--ph-text-dim);
  cursor: pointer;
  padding: 0;
  transition: background 80ms, color 80ms;
}
.ph-btn:hover{
  background: var(--ph-s2);
  color: var(--text);
}
.ph-btn svg{
  width: 14px;
  height: 14px;
  display: block;
}

.ph-add{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 8px;
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: var(--ph-radius);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 80ms;
  white-space: nowrap;
}
.ph-add:hover{
  background: var(--ph-text-dim);
}
.ph-add svg{
  width: 12px;
  height: 12px;
  display: block;
}
.ph-add.ghost{
  width: 26px;
  padding: 0;
  background: transparent;
  color: var(--ph-text-dim);
  border: 1px solid var(--border);
}
.ph-add.ghost:hover{
  background: var(--ph-s2);
  color: var(--text);
  border-color: var(--ph-border-hi);
}

/* [v1014] .ph-tab : tabs dans le header (utilisé sur Aide pour switch
   Centre d'aide / Mes tickets sans avoir une tab bar séparée dans le
   contenu). Style sobre, look "secondary nav". */
.ph-tab{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  background: transparent;
  color: var(--ph-text-dim);
  border: none;
  border-radius: var(--ph-radius);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 80ms, color 80ms;
  white-space: nowrap;
}
.ph-tab:hover{
  background: var(--ph-s2);
  color: var(--text);
}
.ph-tab[data-active="true"]{
  background: var(--ph-s2);
  color: var(--text);
}
.ph-tab svg{ width: 13px; height: 13px; display: block; }
.ph-tab .ph-tab-badge{
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-left: 2px;
  background: var(--border);
  color: var(--text);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

/* [v1014] Override pour vue article Aide : .ph standard + back en
   position:absolute pour que "Aide" reste à la même position X que la
   page Aide home. Classe ajoutée par window.aideUpdatePhBreadcrumb. */
.ph.ph-aide-article{
  position: sticky; /* hérite déjà mais explicite */
}
.ph.ph-aide-article .ph-back{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* ───── Back chevron + Breadcrumb ───── */
.ph-back{
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: var(--ph-radius);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  margin-right: 2px;
  flex-shrink: 0;
  transition: background 80ms, color 80ms;
}
.ph-back:hover{
  background: var(--ph-s2);
  color: var(--text);
}
.ph-back svg{
  width: 14px;
  height: 14px;
  display: block;
}
.ph-crumb{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
}
.ph-crumb-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--ph-radius);
  color: var(--ph-text-dim);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 80ms, color 80ms;
}
.ph-crumb-link:hover{
  background: var(--ph-s2);
  color: var(--text);
}
.ph-crumb-sep{
  display: inline-grid;
  place-items: center;
  color: var(--ph-border-hi);
  flex-shrink: 0;
}
.ph-crumb-current{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   [v977] AGENDA VUE MOIS — Side panel intégré à droite (style Margot natif)
   
   Anthony 12mai 07h55 : restaurer le design original Margot — panel toujours
   visible à droite de la grille, intégré au flow grid, hauteur = celle de
   la grille (cellule grid 2). Référence : screenshot Margot où panel et
   grille font la même hauteur, séparés par une border-left subtile.
   ══════════════════════════════════════════════════════════════════════ */
body.shell-v2-on #page-agenda .mois-wrap > .side{
  /* Override le display:none legacy v975 (déjà commenté mais ceinture+bretelles) */
  display: flex !important;
  flex-direction: column !important;
  /* Cellule grid : prend la hauteur du parent .mois-wrap automatiquement */
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Visual : sépare de la grille mois par une border-left subtile */
  border-left: 1px solid var(--border) !important;
  background: var(--surface) !important;
  padding: 18px 20px !important;
}

/* [v978] Force display:flex même quand .sheet-closed est présent (init mobile).
   En desktop le panel doit TOUJOURS être visible — la classe .sheet-closed
   ne concerne que mobile (media max-width:700px). */
@media (min-width: 701px){
  body.shell-v2-on #page-agenda .mois-wrap > .side.sheet-closed{
    display: flex !important;
  }
}

/* [v978] Jour J en cercle parfait (pas ovale) : force width=height + flex-shrink 0.
   Sans flex-shrink:0, le flex parent peut réduire width et casser le ratio. */
body.shell-v2-on #page-agenda .cal-day.today .dnum,
body.shell-v2-on #page-agenda .cal-day.today .agenda-day-number{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  flex: 0 0 22px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* Cellule grid 1 (mois-main) : flex column pour que cal-grid prenne tout */
body.shell-v2-on #page-agenda .mois-wrap > .mois-main{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.shell-v2-on #page-agenda .mois-wrap > .mois-main > .cal-grid{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   [v980] PAGE VIEW SWITCHER — Mini barre boutons icônes
   [v981] Anthony : "doit être AU-DESSUS de la barre donna pas à côté".
   Donc on retire le float:right, on le met en flex justify-end pleine ligne,
   au-dessus du rail donna (1er enfant du mainV2/pageEl, devant le rail).
   ══════════════════════════════════════════════════════════════════════ */
.page-view-switcher{
  display: flex;
  justify-content: flex-end;
  gap: 0;
  margin: 0 0 12px 0;
}
.page-view-switcher-inner{
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--s2, rgba(0,0,0,.04));
  border: 1px solid var(--border);
  border-radius: 6px;
}
.page-view-switcher .pvs-btn{
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  padding: 0;
}
.page-view-switcher .pvs-btn:hover{
  background: var(--surface);
  color: var(--text);
}
.page-view-switcher .pvs-btn[data-active="true"]{
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.page-view-switcher .pvs-btn svg{
  width: 13px;
  height: 13px;
}

/* [v1025] Bloc #page-tasks ZERO padding/margin MIGRÉ vers layout-tokens.css
   (où il est censé être depuis le début — layout-tokens est la source of
   truth pour les paddings de pages). Cf CSS_HIERARCHY.md §2.5 + ROLLBACK.md
   r1025-2. */

/* [v997] Anthony : .t-aside devient une card surface (style .fside Clients).
   Le padding:6px de tc.css doit s'appliquer (pas reset à 0 comme avant).
   Top sticky reste à 0 pour rester collé au top scroll. */
body.shell-v2-on .t-aside{
  top: 0 !important;
}

body.shell-v2-on #biens-content.content{
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   [v989] PAGE TOOLBAR ROW — chips filtres + view-switcher sur même ligne
   
   Anthony : view-switcher Biens "sous l'encadré donna, aligné à droite
   avec le reste du contenu, sur la même ligne que les filtres actifs".
   
   Structure : .page-toolbar-row > [.page-chips-bar (gauche) | .page-view-switcher (droite)]
   ══════════════════════════════════════════════════════════════════════ */
.page-toolbar-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  min-height: 30px; /* hauteur du switcher pour alignement même si chips empty */
}
.page-toolbar-row > .page-chips-bar{
  margin: 0; /* override le margin 12px 0 par défaut de .page-chips-bar */
  flex: 1 1 auto;
  min-width: 0;
}
.page-toolbar-row > .page-view-switcher{
  margin: 0; /* override le margin par défaut */
  flex-shrink: 0;
}
.page-toolbar-spacer{
  flex: 1 1 auto;
}

/* ══════════════════════════════════════════════════════════════════════
   [v990] KPI STRIP MARGOT — handoff donna.zip /handoff-kpi-strip/
   [v992] REMPLACÉ par .kpi-strip-card (handoff donna__1_.zip
   /handoff-kpi-strip-card/) : strip dans une card unique avec border +
   radius. Anthony : "utilise le style dans le nouveau zip... arrondis
   plus les coins pour que ça fit avec le style des autres pages".
   Radius : 8px (au lieu du 4px du handoff) pour matcher les cards Margot.
   ══════════════════════════════════════════════════════════════════════ */
.kpi-strip-card{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px; /* [v992] 8px au lieu de var(--radius)=4px pour matcher cards Margot */
  padding: 10px 0;
  font-feature-settings: 'cv11','ss01';
}
.kpi-strip-card-item{
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 20px;
  border-right: 1px solid var(--border);
  color: var(--text);
}
.kpi-strip-card-item:last-child{ border-right: 0 }
.kpi-strip-card-v{
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kpi-strip-card-l{
  font-size: 12px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}
/* Responsive — sous 720px : grid 2 colonnes (radius extérieur conservé) */
@media (max-width: 720px){
  .kpi-strip-card{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }
  .kpi-strip-card-item{
    padding: 10px 12px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    align-items: baseline;
  }
  .kpi-strip-card-item:nth-child(2n){ border-right: 0 }
  .kpi-strip-card-item:nth-last-child(-n+2):not(:nth-child(odd):last-child){ border-bottom: 0 }
  .kpi-strip-card-item:last-child{ border-bottom: 0 }
  .kpi-strip-card-v{ font-size: 16px }
  .kpi-strip-card-l{ font-size: 11.5px }
}

/* [v990] Dossiers vf-margot : la barre devient un flex container pour le
   switcher.
   [v993] FIX : ne PAS utiliser display:flex !important — ça override le
   display:none inline appliqué par switchVendTab sur la barre du tab
   inactif → les boutons d'une autre vue restaient visibles. On utilise
   :not([style*="display:none"]) pour ne cibler que la barre visible. */
body.shell-v2-on #page-vendeurs .vend-filters-bar.vf-margot:not([style*="display: none"]):not([style*="display:none"]){
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* [v993] Le switcher est désormais injecté dans .vend-main-toolbar (parent
   fixe), plus dans vf-margot. Voir styles .vend-main-toolbar ci-dessous. */

/* ══════════════════════════════════════════════════════════════════════
   [v998] MASQUER TOUTES LES SCROLLBARS — Anthony 12mai 11h00
   
   "on peut masquer les scroll bar partout ?"
   
   Le scroll reste 100% fonctionnel (roue de souris, touch, drag de barre
   invisible, raccourcis clavier, programmatique). Seul l'affichage de la
   barre est caché.
   
   Couvre :
   - WebKit (Chrome/Safari/Edge/Opera) : ::-webkit-scrollbar display:none
   - Firefox : scrollbar-width: none
   - IE / Edge legacy : -ms-overflow-style: none
   ══════════════════════════════════════════════════════════════════════ */
*::-webkit-scrollbar{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
*{
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* Body et html aussi (certaines règles ciblent specifically) */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none !important;
}
html, body{
  scrollbar-width: none;
  -ms-overflow-style: none;
}