/* ═══════════════════════════════════════════════════════
   shell-v2.css — Refonte Margot v213
   Sidebar 220px · pg-hero · navbar mobile 5-items (+ central)
   Vire : <header>, <nav class="sidenav">, <div class="mobile-tabbar">
   ═══════════════════════════════════════════════════════ */

/* ══════════ Cacher l'ancien shell ══════════ */
/* NB: header et nav.sidenav ne sont PAS enfants directs de body dans l'index actuel
   (ils sont wrappés dans une div) — on utilise le sélecteur descendant, pas le combinator >.
   Le body.shell-v2-off sert de trappe de rollback si besoin. */

/* [#fix-navbar-before-login v606] GARDE-FOU CSS : tant que body.app-ready
   n'est pas posé (= loader complètement disparu, app fully ready), cache la
   navbar shell-v2 + tabbar PWA + sheet host. body.app-ready est posé en
   TOUT DERNIER lieu dans initApp, après le fade-out du loader (cf. boot.js).
   Avant on utilisait body.app-loaded qui était posé au début d'initApp →
   navbar visible pendant l'écran de chargement. Le mount JS check aussi
   cette classe (cf. shell-v2.js mount()), ceinture+bretelles. */
body:not(.app-ready) .shellv2-root,
body:not(.app-ready) #__pwa_tabbar_host,
body:not(.app-ready) #__pwa_sheet_host {
  display: none !important;
}

/* Cloche notif + label fixed (hors header) — Option b actée : supprimés */
body.shell-v2-on #notif-fixed-wrap { display: none !important; }
body.shell-v2-on #notif-label { display: none !important; }

/* style.css:217 met body{padding-top:80px} pour réserver la place du header fixed.
   Header caché → on vire ce padding. */
body.shell-v2-on { padding-top: 0 !important; overflow-x: hidden !important; }
html:has(body.shell-v2-on) { overflow-x: hidden !important; }

/* Également les popups contextuels de l'ancienne mobile-tabbar */
body.shell-v2-on #tb-contacts-popup,
body.shell-v2-on #tb-dossiers-popup,
body.shell-v2-on #tb-more-popup,

/* Les pages avaient margin-left:56px inline pour la sidenav fixed 56px.
   Avec la nouvelle sidebar en grid, on remet à 0 — le grid gère le layout. */
body.shell-v2-on [id^="page-"] { margin-left: 0 !important; }

/* Wrapper principal du shell v2 desktop
   PATTERN : page entière = 100vh sans scroll body. Le MAIN a son propre scroll
   interne, la sidebar reste figée (100vh fixe dans la grid cell). */
.shellv2-root{
  display:grid;
  grid-template-columns: 220px 1fr;
  height: 100vh;
  max-height: 100vh;
  /* [#full-width] max-width retiré : sur grand écran (>1560px) ça créait des
     marges blanches à gauche et à droite. Maintenant l'app prend toute la
     largeur disponible. */
  background: var(--bg);
  overflow: hidden;
}
.shellv2-main{
  min-width: 0;
  /* [v1024] padding retiré : layout-tokens.css L52 override avec
     `padding: var(--shellv2-main-pt) var(--shellv2-main-px) var(--shellv2-main-pb) !important`
     (= 25px 24px 40px). Notre `padding: 32px 24px 40px` sans !important était
     mort de toute façon. Cf CSS_HIERARCHY.md §2.1. */
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
/* [#56 v8] Compensation #page-clients : pour une raison liée au layout interne
   (clients-layout grid + sub-line + chips filtres), le titre apparaît plus haut
   sur Clients que sur les autres pages malgré le même padding global de
   .shellv2-main. On ajoute donc un padding-top sur #page-clients pour aligner.
   !important nécessaire car #page-clients a un padding inline (0 24px 40px).
   [v995] Anthony : gap au-dessus du rail donna trop grand sur Clients vs
   Dossiers/Tâches/Agenda/Compta. Le padding-top:24px était la cause. Retiré
   pour aligner avec les autres pages (le shellv2-main gère déjà son padding). */
body.shell-v2-on #page-clients{
  padding-top: 0 !important;
}
.shellv2-main::-webkit-scrollbar{ width: 6px; }
.shellv2-main::-webkit-scrollbar-thumb{ background: var(--s3, rgba(0,0,0,.15)); border-radius: 3px; }
.shellv2-main::-webkit-scrollbar-track{ background: transparent; }

/* ══════════ Sidebar .sb ══════════
   Simple : height 100vh, pas de sticky/fixed car la grid cell est déjà 100vh.
   overflow-y auto pour si le menu dépasse. */
.sb{
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 14px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  scrollbar-width: none;
}
.sb::-webkit-scrollbar{ width: 0; display: none; }

/* Bloque scroll page html/body quand shell-v2 desktop actif */
@media (min-width: 901px){
  html:has(body.shell-v2-on){
    height: 100vh;
    overflow: hidden;
  }
  body.shell-v2-on{
    height: 100vh !important;
    max-height: 100vh;
    overflow: hidden;
  }
}
.sb-brand{
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 10px;
}
.sb-brand .mark{
  width: 24px; height: 24px;
  border-radius: var(--radius);
  background: var(--text); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800; font-size: 14px;
  letter-spacing: -.5px;
}
.sb-brand .name{
  font-family: 'Plus Jakarta Sans', var(--font-display), sans-serif;
  font-weight: 800; font-size: 18px;
  letter-spacing: -.5px;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--text); /* fallback si gradient-clip non supporté */
}
.sb-brand .ver{
  display: inline-flex;
  align-items: center;
  /* [v1169 Anthony "écris un peu plus petit que ça rentre dans la navbar"]
     'beta v2.1 b1169' = 15 chars vs 'v2.1 b1168' = 10 chars (50% plus long).
     Réduit font-size 9.5→8px + padding latéral 7→5px + letter-spacing
     pour compenser. */
  font-size: 8px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .2px;
  margin-left: auto;
  padding: 2px 5px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 4px;
  text-transform: none;
  line-height: 1.3;
  white-space: nowrap;
  /* [v1167 Anthony "redescend un tout petit peu le badge pour aligne au
     milieu avec le logo"] Le align-items:center du parent centre le badge
     dans le flex container, mais la baseline visuelle du wordmark "donna"
     (Plus Jakarta Bold 18px) occupe surtout la partie haute du container.
     Push 2px vers le bas pour aligner avec le centre OPTIQUE du logo. */
  margin-top: 2px;
}

/* Bouton Recherche -> palette ⌘K */
.sb-search{
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12.5px; color: var(--muted);
  cursor: pointer; transition: all .12s;
  width: 100%;
  font-family: inherit;
}
.sb-search:hover{ background: var(--s3); border-color: var(--border-hi); color: var(--text); }
.sb-search svg{ opacity: .7; flex-shrink: 0; }
.sb-search .lbl{ flex: 1; text-align: left; }
.sb-search kbd{
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  padding: 1px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
}

.sb-nav{
  display: flex; flex-direction: column; gap: 1px;
}
/* [v677] Sidebar items : valeurs copiées DIRECT de donna stay (style.css
   lignes 308-336). Anthony m'a envoyé le zip de donna stay comme référence,
   et en fait sa structure CSS est quasi-identique à celle de donna —
   mes changements v675/v676 essayaient d'augmenter taille/poids mais ça
   n'allait pas. La vraie référence c'est ces valeurs simples. */
.sb-item{
  display: flex; align-items: center; gap: 11px;
  padding: 7px 11px;
  border-radius: var(--radius);
  font-size: 13.5px; font-weight: 500;
  letter-spacing: -.1px;
  color: var(--text-dim);
  cursor: pointer; transition: all .12s;
  border: none; background: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.sb-item svg{ opacity: .7; flex-shrink: 0; }
.sb-item:hover{ background: var(--s2); color: var(--text); }
.sb-item:hover svg{ opacity: 1; }
.sb-item[data-active="true"]{
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text);
  font-weight: 500;
  position: relative;
}
.sb-item[data-active="true"] svg{ opacity: 1; color: var(--accent); }
.sb-item[data-active="true"]::before{
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px;
}
.sb-count{
  margin-left: auto;
  font-size: 11.5px; font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sb-item[data-active="true"] .sb-count{ color: var(--text-dim); }

/* [v1142] Raccourci clavier affiché à droite des items shortcuts (cmd+F / cmd+T).
   Style pill discret, plus visible que sb-count (compteur) mais reste sobre. */
.sb-kbd{
  margin-left: auto;
  display: inline-flex; align-items: center;
  padding: 1px 5px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: 3px;
  letter-spacing: .3px;
  line-height: 1.5;
}
.sb-item:hover .sb-kbd{
  color: var(--text-dim);
  border-color: var(--border-hi);
}

/* User card bottom — ouvre modal Compte (bug report dedans) */
.sb-user{
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--s2);
  cursor: pointer; transition: all .12s;
  font-family: inherit;
  width: 100%;
  text-align: left;
}
.sb-user:hover{ background: var(--s3); border-color: var(--border-hi); }
.sb-user .av{
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--mauve, #8257e5));
  color: #fff;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
  flex-shrink: 0;
}
.sb-user-meta{ flex: 1; min-width: 0; }
.sb-user-name{
  font-size: 12.5px; font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-role{
  font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user svg{ opacity: .5; flex-shrink: 0; }

/* ══════════ [v1022] Page hero LEGACY SUPPRIMÉ ══════════
   .pg-hero, .pg-hero-l, .pg-hero-r, .pg-hero h1, .pg-hero h1 .count, .pg-hero .sub
   → tous supprimés. Migré vers .ph Margot (page-header.css) en v957. Cf
   CSS_HIERARCHY.md §2.3. Le bloc .pg-filters/filter ci-dessous reste vivant
   (utilisé par clients-page.js pour les chips filtres). */

/* ══════════ Filter bar pg-filters (sous le hero) ══════════ */
.pg-filters{
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.pg-filter{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-size: 11.5px; font-weight: 500;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.pg-filter:hover{ background: var(--s3); }
.pg-filter.on{
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.pg-filter .x{ opacity: .6; margin-left: 2px; }
.pg-filter-sep{
  width: 1px; height: 16px;
  background: var(--border);
  margin: 0 4px;
}

/* ══════════ Boutons génériques .b (scoped Margot) ══════════
   [v1022] .pg-hero .b retiré du sélecteur groupé (legacy mort). */
.shellv2-root .b,
.m-topbar-noh .b{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  transition: all .12s;
  cursor: pointer;
  font-family: inherit;
}
.shellv2-root .b:hover,
.m-topbar-noh .b:hover{ background: var(--s2); border-color: var(--border-hi); }
.shellv2-root .b.primary,
.m-topbar-noh .b.primary{
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 600;
}
.shellv2-root .b.primary:hover,
.m-topbar-noh .b.primary:hover{ background: var(--text-dim); border-color: var(--text-dim); }
.shellv2-root .b.ghost{
  background: transparent; border-color: transparent;
  color: var(--text-dim);
}
.shellv2-root .b.ghost:hover{ background: var(--s2); color: var(--text); }
.shellv2-root .b.icon,
.m-topbar-noh .b.icon{
  padding: 7px; width: 32px; height: 32px;
  justify-content: center;
}
.shellv2-root .b.sm,
.m-topbar-noh .b.sm{
  padding: 4px 9px;
  font-size: 11px; height: 26px;
}

/* ══════════ Mobile topbar (par page, pas global) ══════════ */
.m-topbar-noh{
  display: none; /* Activé seulement sur mobile via media query */
  padding: 14px 16px 10px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.m-topbar-noh h2{
  font-family: 'Plus Jakarta Sans', var(--font-display), sans-serif;
  font-size: 19px; font-weight: 700;
  letter-spacing: -.4px;
  margin: 0;
  color: var(--text);
}
.m-topbar-noh .sub{
  font-size: 11.5px; color: var(--muted);
  margin-top: 2px;
}
.m-topbar-noh-actions{
  display: flex; gap: 5px; flex-shrink: 0;
}
.m-topbar-noh-actions .b{
  padding: 6px 10px; font-size: 11.5px; height: 30px;
}
.m-topbar-noh-actions .b.icon{
  width: 30px; height: 30px; padding: 0;
}

/* ══════════ Mobile tabbar (5 items, + central) ══════════ */
.phone-tabbar-5{
  display: none; /* Activé en mobile via media */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0));
  z-index: 500;
  grid-template-columns: 1fr 1fr 56px 1fr 1fr;
  align-items: center;
}
.phone-tabbar-5 button{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: 10px; font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  min-height: 48px;
}
.phone-tabbar-5 button svg{ opacity: .75; }
.phone-tabbar-5 button[data-active="true"]{ color: var(--text); font-weight: 600; }
.phone-tabbar-5 button[data-active="true"] svg{ opacity: 1; color: var(--accent); }

/* Bouton + central proéminent */
.phone-tabbar-5 button.plus{
  padding: 0;
  justify-self: center;
}
.phone-tabbar-5 button.plus .plus-inner{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(20,22,31,.18);
  transition: transform .12s;
}
.phone-tabbar-5 button.plus:active .plus-inner{ transform: scale(.92); }
.phone-tabbar-5 button.plus .plus-inner svg{
  opacity: 1;
  stroke: var(--bg);
}

/* ══════════ Page Clients ══════════ */
#page-clients .clients-filters + .clients-table,
#page-clients .clients-table { margin-top: 18px; }
#page-clients .clients-filters { margin-bottom: 4px; }

/* ══════════ Clients layout : sidebar filtres + main ══════════ */
#page-clients .clients-layout{
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 18px;
  align-items: start;
  /* [v996] margin-top: 14px supprimé — même bug que .biens-layout-shellv2 v995.
     Créait un gap supplémentaire au-dessus du rail donna vs autres pages.
     Anthony : "sur Clients ça n'a pas bougé". La vraie cause était ici, pas
     dans le padding-top de #page-clients (déjà à 0 via layout-tokens.css v712). */
}
/* CRITICAL : min-width:0 sur la grid cell main pour que overflow-x du table-wrap
   fonctionne. Sans ça, la grille essaie de matcher le contenu (min-width: auto)
   et la scrollbar horizontale ne peut pas apparaître sur mobile. */
#page-clients .clients-main{
  min-width: 0;
}

/* ══════════ Sidebar filtres style Margot (.fside) ══════════ */
.clients-sidefilters{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding-bottom: 20px;
}
.clients-sidefilters::-webkit-scrollbar{ width: 3px; }
.clients-sidefilters::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 99px; }

/* Sur mobile : layout en 1 colonne, sidebar cachée (accessible via bottom sheet) */
@media (max-width: 900px){
  #page-clients .clients-layout{
    grid-template-columns: 1fr;
  }
  #page-clients > .clients-layout > .clients-sidefilters{ display: none !important; }
  /* Le rail collapse n'a pas de sens sur mobile non plus */
  #page-clients .biens-side-rail{ display: none !important; }
}

/* ══════════ Collapse layout : rail 44px ══════════ */
#page-clients .clients-layout[data-collapsed="true"]{
  grid-template-columns: 44px 1fr;
}
/* Quand collapsed, la sidebar devient juste un container pour le rail : 
   on reset les styles desktop (sticky, max-height, overflow) */
#page-clients .clients-layout[data-collapsed="true"] .clients-sidefilters{
  display: block;
  max-height: none;
  overflow: visible;
  position: static;
  background: transparent;
  border: none !important;
  padding: 0;
}
.biens-side-rail{
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 10px);
  padding: 6px 4px;
  height: fit-content;
  position: sticky; top: 20px;
}
.rail-btn{
  width: 36px; height: 36px;
  border-radius: var(--radius, 6px);
  background: transparent; border: none;
  display: grid; place-items: center;
  color: var(--text-dim);
  cursor: pointer; transition: all .12s;
  position: relative;
  font-family: inherit;
}
.rail-btn:hover{ background: var(--s2); color: var(--text); }
.rail-btn[data-active="true"]{ background: var(--s2); color: var(--text); }
.rail-btn .dot-badge{
  position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}
.rail-btn.expand{
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 4px;
  padding-bottom: 6px;
  height: auto; min-height: 36px;
}

/* ══════════ Active filter chips dans le pg-hero ══════════ */
.active-chips{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.active-chips .lbl{
  font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted);
  margin-right: 2px;
}
.afchip{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 9px;
  font-size: 11.5px; font-weight: 500;
  background: var(--s2); border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
}
.afchip .k{ color: var(--muted); font-size: 10.5px; }
.afchip .v{ font-weight: 600; letter-spacing: -.1px; }
.afchip .x{
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 2px;
  color: var(--muted);
  cursor: pointer;
  margin-left: 2px;
  background: transparent; border: none;
  padding: 0;
}
.afchip .x:hover{ background: var(--s3, var(--border)); color: var(--text); }
.afchip-clear{
  font-size: 11px; color: var(--accent); font-weight: 500;
  background: none; border: none; cursor: pointer;
  padding: 3px 6px;
  font-family: inherit;
}
.afchip-clear:hover{ text-decoration: underline; }

.fside{
  background: var(--surface);
  /* [#card-borders v606] var(--border) trop subtil sur tous thèmes (surtout
     noir). Passé à color-mix sur var(--text) 30% qui s'adapte au thème :
     light → border noir 30%, noir → border blanc 30%. Bien visible partout. */
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  flex-shrink: 0;
}

/* ══════════ Collapse header (desktop sidebar uniquement) ══════════ */
.fside-collapse{
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 8px 14px;
  background: var(--s2);
  /* [#card-borders v606] cf. .fside */
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: var(--radius-lg, 8px);
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: -2px;
}
.fside-collapse .btn-c{
  width: 24px; height: 24px;
  background: transparent; border: none;
  border-radius: 3px;
  display: grid; place-items: center;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  transition: all .12s;
}
.fside-collapse .btn-c:hover{ background: var(--s3, var(--border)); color: var(--text); }
.fside-head{
  padding: 10px 14px 8px;
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between;
}
.fside-head .dim{
  font-size: 11px; text-transform: none; letter-spacing: 0;
  font-weight: 500; color: var(--text-dim);
}
.fside-head .dim strong{ color: var(--text); font-weight: 600; }
.fside-seg{
  display: flex; margin: 4px 10px 10px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 4px);
  padding: 2px;
}
.fside-seg button{
  flex: 1; padding: 4px 8px;
  font-size: 11px; font-weight: 500;
  background: transparent; color: var(--muted);
  border: none; border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.fside-seg button[data-active="true"]{
  background: var(--text); color: var(--bg); font-weight: 600;
}
.fside-list{
  display: flex; flex-direction: column;
  padding: 0 6px 6px;
}
.fside-row{
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: var(--radius, 4px);
  font-size: 12.5px; font-weight: 500; color: var(--text);
  cursor: pointer; transition: background .12s;
  background: transparent; border: none;
  text-align: left; width: 100%;
  font-family: inherit;
}
.fside-row:hover{ background: var(--s2); }
.fside-row[data-active="true"]{
  background: var(--s2); color: var(--text); font-weight: 600;
}
.fside-row .dot{
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; background: var(--muted);
}
.fside-row[data-active="true"] .dot{ background: var(--accent); }
.fside-row .av{
  width: 22px; height: 22px;
  /* [v999] Anthony : carré arrondi (border-radius:5px) au lieu de rond
     (border-radius:50%) pour matcher le style des avatars dans la table
     (.avatar { border-radius: 7px } proportionnel à 28px). */
  border-radius: 5px;
  font-size: 9px; font-weight: 700;
  display: grid; place-items: center; color: #fff;
  flex-shrink: 0;
}
/* [v999] Couleurs unies (pas de gradient) pour cohérence avec les avatars
   de la table. Tokens Donna: accent / chaud / froid / green / tiede / muted. */
.fside-row .av-a{ background: var(--accent); }
.fside-row .av-b{ background: var(--chaud); }
.fside-row .av-c{ background: var(--froid); }
.fside-row .av-d{ background: var(--green); }
.fside-row .av-e{ background: var(--tiede); }
.fside-row .av-f{ background: var(--muted); }
.fside-row .lbl{
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fside-row .cnt{
  font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fside-row[data-active="true"] .cnt{ color: var(--text-dim); }
.fside-row .cnt.zero{ opacity: .35; }

/* Couleurs dot pour statut (réutilise les vars donna) */
.fside-row .dot.statut-hot{ background: var(--chaud); }
.fside-row .dot.statut-mid{ background: var(--tiede); }
.fside-row .dot.statut-low{ background: var(--froid); }
.fside-row .dot.statut-stale{ background: var(--muted); }
.fside-row[data-active="true"] .dot.statut-hot,
.fside-row[data-active="true"] .dot.statut-mid,
.fside-row[data-active="true"] .dot.statut-low,
.fside-row[data-active="true"] .dot.statut-stale{ /* garde la couleur spécifique */ }

/* Les chips Type/Statut (.clients-filters) sont redondants avec la sidebar
   sur desktop → on les cache quand la sidebar est visible */
@media (min-width: 901px){
  #page-clients .clients-main .clients-filters{ display: none; }
  /* m-only = mobile only : caché sur desktop */
  
}
@media (max-width: 900px){
  /* d-only = desktop only : caché sur mobile */
  
  /* Les chips restent cachés sur mobile aussi — on utilise le bottom sheet */
  #page-clients .clients-main .clients-filters{ display: none; }
}

/* Animations bottom sheet mobile */
@keyframes cpSlideUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes cpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Sidebar dans le bottom sheet : reset sticky desktop + gap ajusté */
/* Note : .clients-sidefilters-mobile reçoit ses styles inline depuis clients-page.js
   (position:absolute, top:70 bottom:70, overflow-y:auto). On n'override pas ici. */
/* Dans le sheet, les fside sont plus aérés (style card Margot) */
.clients-sidefilters-mobile .fside,
.biens-sidefilters-mobile .fside{
  background: var(--surface);
  /* [#card-borders v607] override mobile re-mettait var(--border) qui annulait
     mon fix sur .fside. Aligné sur le même color-mix 30% pour visibilité. */
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: 12px;
  padding: 4px 0 6px;
}
.clients-sidefilters-mobile .fside-head,
.biens-sidefilters-mobile .fside-head{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  padding: 12px 16px 6px;
}
.clients-sidefilters-mobile .fside-head .dim,
.biens-sidefilters-mobile .fside-head .dim{
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}
.clients-sidefilters-mobile .fside-head .dim strong,
.biens-sidefilters-mobile .fside-head .dim strong{
  color: var(--text);
  font-weight: 700;
}
.clients-sidefilters-mobile .fside-seg,
.biens-sidefilters-mobile .fside-seg{
  margin: 6px 12px 10px;
  padding: 3px;
  border-radius: 10px;
}
.clients-sidefilters-mobile .fside-seg button,
.biens-sidefilters-mobile .fside-seg button{
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
}
.clients-sidefilters-mobile .fside-list,
.biens-sidefilters-mobile .fside-list{
  padding: 2px 8px 8px;
  gap: 1px;
}
.clients-sidefilters-mobile .fside-row,
.biens-sidefilters-mobile .fside-row{
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 8px;
  gap: 12px;
}
.clients-sidefilters-mobile .fside-row .av,
.biens-sidefilters-mobile .fside-row .av{
  width: 28px; height: 28px;
  font-size: 11px;
}
.clients-sidefilters-mobile .fside-row .dot,
.biens-sidefilters-mobile .fside-row .dot{
  width: 8px; height: 8px;
}
.clients-sidefilters-mobile .fside-row .cnt,
.biens-sidefilters-mobile .fside-row .cnt{
  font-size: 12.5px;
  font-weight: 500;
}
.clients-sidefilters-mobile .fside-chips,
.biens-sidefilters-mobile .fside-chips{
  padding: 0 12px 10px;
  gap: 6px;
}
.clients-sidefilters-mobile .fchip,
.biens-sidefilters-mobile .fchip{
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
}
.clients-sidefilters-mobile .fside-reset-wrap,
.biens-sidefilters-mobile .fside-reset-wrap{
  padding: 4px 4px;
}
.clients-sidefilters-mobile .fside-reset-btn,
.biens-sidefilters-mobile .fside-reset-btn{
  padding: 10px;
  font-size: 13px;
  border-radius: 10px;
}

/* Reset button */
.fside-reset-wrap{
  padding: 0 2px;
}
.fside-reset-btn{
  width: 100%; padding: 7px;
  font-size: 11px; font-weight: 500;
  color: var(--text-dim); background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius, 4px);
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.fside-reset-btn:hover{
  color: var(--text);
  border-color: var(--border-hi, var(--muted));
}

/* ══════════ v2.1.x — Filtres Budget/Surface (sliders) + Pièces (pills) ══════════ */
.fside-range{
  /* Hérite de .fside */
}
.fside-range-vals{
  display: flex;
  justify-content: space-between;
  padding: 0 14px 6px;
  font-size: 11.5px;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fside-range-vals .dim{
  color: var(--muted);
  font-weight: 500;
}
.fside-range-track{
  position: relative;
  padding: 4px 14px 14px;
  height: 32px;
}
/* Les 2 sliders sont superposés (technique double-thumb) */
.fside-range-track input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 14px;
  right: 14px;
  width: calc(100% - 28px);
  top: 12px;
  height: 4px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  z-index: 1;
}
.fside-range-track input[type="range"]:first-of-type{
  /* Premier slider en arrière-plan pour montrer le track gris */
  z-index: 0;
}
.fside-range-track input[type="range"]::-webkit-slider-runnable-track{
  height: 4px;
  background: var(--border);
  border-radius: 99px;
}
.fside-range-track input[type="range"]::-moz-range-track{
  height: 4px;
  background: var(--border);
  border-radius: 99px;
}
.fside-range-track input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  cursor: pointer;
  pointer-events: auto;
  margin-top: -6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform .1s;
}
.fside-range-track input[type="range"]::-webkit-slider-thumb:hover{
  transform: scale(1.15);
}
.fside-range-track input[type="range"]::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
/* Pills "Toutes / 1P+ / 2P+ / 3P+ / 4P+" */
.fside-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 4px;
}
.fside-pill{
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 9px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius, 4px);
  color: var(--text-dim);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  text-align: center;
}
.fside-pill:hover{
  background: var(--s2);
  color: var(--text);
}
.fside-pill[data-active="true"]{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ══════════ Fix agenda : ancienne sticky top:80px (header) → top:0 ══════════
   La page agenda utilise .agenda-top en position:sticky top:80px pour se coller
   sous l'ancien header. Avec le nouveau shell sans header, on remet à 0. */
body.shell-v2-on .agenda-top { top: 0 !important; }
/* Recalcule aussi les max-height calc(100vh - X) qui intégraient 80px de header */
body.shell-v2-on .agenda-week-wrap {
  max-height: calc(100vh - 140px);
}
/* Mobile agenda : idem */
@media (max-width: 900px){
  body.shell-v2-on .agenda-week-wrap {
    max-height: calc(100vh - 130px);
  }
}

/* Typo : force Plus Jakarta Sans sur les titres agenda pour rester aligné Margot UI */
body.shell-v2-on .agenda-header,
body.shell-v2-on .agenda-month-title,
body.shell-v2-on .agenda-day-title,
body.shell-v2-on .agenda-title {
  font-family: 'Plus Jakarta Sans', var(--font-display), sans-serif;
}

/* ══════════ Kanban Dossiers (Vendeurs) — style Margot ══════════
   Scroll horizontal externe (wrap) — pas de scroll interne vertical aux colonnes,
   c'est la page qui scroll naturellement (comportement demandé par Anthony).
   v387 : même layout mobile et desktop (scroll horizontal + colonnes 260px)
   v392 : scroll interne horizontal + vertical par colonne, scroll snapping mobile,
          smooth sur tous viewports */
body.shell-v2-on .vend-board-wrap{
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 12px;
  width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-x: contain !important;
  /* hauteur : remplit jusqu'au bas du viewport */
  max-height: calc(100vh - 220px);
  height: calc(100vh - 220px) !important;
  /* Scroll snap pour que chaque colonne s'accroche naturellement */
  scroll-snap-type: x proximity !important;
}
body.shell-v2-on .vend-board{
  display: flex;
  gap: 12px;
  min-width: max-content;
  padding: 4px 4px 12px;
  align-items: stretch;
  height: 100%;
  max-height: 100%;
  flex-wrap: nowrap;
}
body.shell-v2-on .vk-col{
  width: 260px !important;
  min-width: 260px;
  max-width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 100%;
  height: 100%;
  /* v2.1.x — Scroll vertical interne. Le code JS append les cards directement
     dans .vk-col (pas de wrapper .vk-col-body), donc on rend la colonne elle-même
     scrollable. Le header devient sticky pour rester visible. */
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-align: start !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}
/* Header sticky pour qu'il reste visible quand on scroll les cards */
body.shell-v2-on .vk-col > .vk-col-hdr{
  position: sticky !important;
  top: 0;
  z-index: 2 !important;
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  flex-shrink: 0;
  margin: 0 -8px;
  padding-left: 18px;
  padding-right: 18px;
}
/* Scroll vertical interne à chaque colonne */
body.shell-v2-on .vk-col-body{
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 8px 8px 2px;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-y: contain !important;
}
/* Scrollbars fines et discrètes Margot 2.0 */
body.shell-v2-on .vend-board-wrap::-webkit-scrollbar{
  height: 8px !important;
}
body.shell-v2-on .vend-board-wrap::-webkit-scrollbar-track{
  background: transparent !important;
}
body.shell-v2-on .vend-board-wrap::-webkit-scrollbar-thumb{
  background: var(--border) !important;
  border-radius: 99px;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}
body.shell-v2-on .vend-board-wrap::-webkit-scrollbar-thumb:hover{
  background: var(--muted) !important;
  background-clip: padding-box !important;
  border: 2px solid transparent !important;
}
body.shell-v2-on .vk-col-body::-webkit-scrollbar,
body.shell-v2-on .vk-col::-webkit-scrollbar{
  width: 6px;
}
body.shell-v2-on .vk-col-body::-webkit-scrollbar-track,
body.shell-v2-on .vk-col::-webkit-scrollbar-track{
  background: transparent !important;
}
body.shell-v2-on .vk-col-body::-webkit-scrollbar-thumb,
body.shell-v2-on .vk-col::-webkit-scrollbar-thumb{
  background: transparent !important;
  border-radius: 99px;
  transition: background .2s;
}
body.shell-v2-on .vk-col-body:hover::-webkit-scrollbar-thumb,
body.shell-v2-on .vk-col:hover::-webkit-scrollbar-thumb{
  background: var(--border) !important;
}
body.shell-v2-on .vk-col-body::-webkit-scrollbar-thumb:hover,
body.shell-v2-on .vk-col::-webkit-scrollbar-thumb:hover{
  background: var(--muted) !important;
}

/* Top-border coloré par étape (via data-etape) — mobile + desktop */
body.shell-v2-on .vk-col-hdr{
  border-top: 2px solid var(--muted) !important;
  border-bottom: none !important;
  padding: 12px 4px 10px;
  margin-bottom: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.shell-v2-on .vk-col[data-etape="perdu"]     .vk-col-hdr{ border-top-color: var(--chaud) !important; }
body.shell-v2-on .vk-col[data-etape="perdu"]     { opacity: .8; }
body.shell-v2-on .vk-col[data-etape="attente"]   .vk-col-hdr{ border-top-color: var(--muted) !important; }
body.shell-v2-on .vk-col[data-etape="mandat"]    .vk-col-hdr{ border-top-color: var(--accent) !important; }
body.shell-v2-on .vk-col[data-etape="offre"]     .vk-col-hdr{ border-top-color: var(--froid, #3b82f6) !important; }
body.shell-v2-on .vk-col[data-etape="compromis"] .vk-col-hdr{ border-top-color: var(--tiede, #ba7517) !important; }
body.shell-v2-on .vk-col[data-etape="acte"]      .vk-col-hdr{ border-top-color: var(--green) !important; }

/* Label uppercase coloré par étape */
body.shell-v2-on .vk-col-label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted) !important;
}
body.shell-v2-on .vk-col[data-etape="perdu"]     .vk-col-label{ color: var(--chaud) !important; }
body.shell-v2-on .vk-col[data-etape="mandat"]    .vk-col-label{ color: var(--accent) !important; }
body.shell-v2-on .vk-col[data-etape="offre"]     .vk-col-label{ color: var(--froid, #3b82f6) !important; }
body.shell-v2-on .vk-col[data-etape="compromis"] .vk-col-label{ color: var(--tiede, #ba7517) !important; }
body.shell-v2-on .vk-col[data-etape="acte"]      .vk-col-label{ color: var(--green) !important; }

/* Count : pill s2 */
body.shell-v2-on .vk-col-count{
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted) !important;
  padding: 2px 9px;
  background: var(--s2) !important;
  border-radius: 999px;
  border: none !important;
}

@media (min-width: 901px){
  /* Cards : padding généreux, radius-lg, ombre subtile */
  body.shell-v2-on .vk-card{
    padding: 14px 15px 13px;
    gap: 8px;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.02);
    transition: all .14s ease;
    display: flex;
    flex-direction: column;
  }
  body.shell-v2-on .vk-card:hover{
    border-color: var(--text-dim) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.07);
    transform: translateY(-2px) !important;
  }
  
  /* Name uppercase, 13.5px, serré, letter-spacing -0.3 */
  body.shell-v2-on .vk-card-name{
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.3px;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--text) !important;
    margin-bottom: 0;
  }
  
  /* Adresse : 11.5px text-dim, tabular */
  body.shell-v2-on .vk-card-addr{
    font-size: 11.5px;
    color: var(--text-dim) !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
    margin: 0;
  }
} /* /@media 901 - fermeture avant les règles universelles v390 */

/* v390 — Prices row : flex baseline justify-between (mobile + desktop) */
body.shell-v2-on .vk-card-prices{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
  flex-wrap: wrap;
}
body.shell-v2-on .vk-card-price{
  font-family: 'Plus Jakarta Sans', var(--font-display), sans-serif;
  font-weight: 700;
  letter-spacing: -.4px;
  font-variant-numeric: tabular-nums !important;
  color: var(--accent);
  line-height: 1;
}
body.shell-v2-on .vk-card-hono{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--green, #1D9E75);
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.2px;
  line-height: 1;
}

@media (min-width: 901px){
  body.shell-v2-on .vk-card-price{
    font-size: 17px;
  }
  body.shell-v2-on .vk-card-hono{
    font-size: 12.5px;
  }
  body.shell-v2-on .vk-card-days{
    font-size: 11px;
    color: var(--text-dim) !important;
    font-variant-numeric: tabular-nums !important;
  }
}

/* ══════ Badges Margot (.kb) — mobile + desktop (v391) ══════ */
body.shell-v2-on .vk-card .kb{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px !important;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: -.1px;
  background: var(--s2) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border) !important;
  line-height: 1.2;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap;
}
body.shell-v2-on .vk-card .kb.days{
  color: #D85A30 !important;
  background: rgba(216, 90, 48, .12) !important;
  border-color: rgba(216, 90, 48, .25) !important;
}
body.shell-v2-on .vk-card .kb.exclu{
  color: var(--accent) !important;
  background: rgba(124, 106, 247, .14) !important;
  border-color: rgba(124, 106, 247, .3) !important;
}
body.shell-v2-on .vk-card .kb.simple{
  color: #3B82F6 !important;
  background: rgba(59, 130, 246, .1) !important;
  border-color: rgba(59, 130, 246, .25) !important;
}
body.shell-v2-on .vk-card .kb.delegation{
  color: #BA7517 !important;
  background: rgba(186, 117, 23, .12) !important;
  border-color: rgba(186, 117, 23, .25) !important;
}
body.shell-v2-on .vk-card .kb.es{
  color: #047857 !important;
  background: rgba(4, 120, 87, .1);
  border-color: rgba(4, 120, 87, .25);
  min-width: 20px !important;
  justify-content: center;
}
body.shell-v2-on .vk-card .kb.dpe{
  width: 18px;
  min-width: 18px;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  border: none !important;
  padding: 2px 0;
}
body.shell-v2-on .vk-card .kb.dpe.a{ background: #00a650 !important; }
body.shell-v2-on .vk-card .kb.dpe.b{ background: #50b848 !important; }
body.shell-v2-on .vk-card .kb.dpe.c{ background: #c3d54e !important; color: #2a2a2a !important; }
body.shell-v2-on .vk-card .kb.dpe.d{ background: #fff200 !important; color: #2a2a2a !important; }
body.shell-v2-on .vk-card .kb.dpe.e{ background: #f7af00 !important; }
body.shell-v2-on .vk-card .kb.dpe.f{ background: #f57d29 !important; }
body.shell-v2-on .vk-card .kb.dpe.g{ background: #e52e1e !important; }

@media (min-width: 901px){
  body.shell-v2-on .vk-card .vend-instinct-badge,
  body.shell-v2-on .vk-card .vend-instinct-btn{
    font-size: 10px;
    padding: 1px 7px;
    height: auto;
  }
  
  /* ══════ Cards kanban compactes (réduction demande Anthony v283) ══════ */
  body.shell-v2-on .vk-card{
    padding: 9px 10px 8px;
    gap: 4px;
    border-radius: 10px;
  }
  body.shell-v2-on .vk-card-name{
    font-size: 12px;
    line-height: 1.2;
  }
  body.shell-v2-on .vk-card-addr{
    font-size: 10.5px;
    line-height: 1.3;
  }
  body.shell-v2-on .vk-card-price{
    font-size: 13px;
  }
  body.shell-v2-on .vk-card .kb{
    font-size: 9.5px;
    padding: 1px 6px;
  }
  body.shell-v2-on .vk-card .kb.dpe{
    width: 16px;
    min-width: 16px;
    padding: 1px 0;
  }
  body.shell-v2-on .vk-badges{
    margin-top: 4px;
  }
}

/* Sidebar : cacher scrollbar pour UX propre */
.sb::-webkit-scrollbar{ width: 0 !important; display: none !important; }
.sb{ scrollbar-width: none !important; -ms-overflow-style: none !important; }

/* ══════════ Filtres Dossiers/Pipeline — style Margot (groupes pill) ══════════
   Chaque filtre : [label petit muted] + [select bold text] dans un pill avec border.
   Les boutons (Archivés, Voir perdus, Tout analyser) partagent le même visual. */
body.shell-v2-on .vend-filters-bar.vf-margot{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0;
}
body.shell-v2-on .vend-filters-bar.vf-margot .vf-g{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 4px); /* [v994] 10px → 4px (var --radius), plus carré style Margot CLAUDE.md */
  padding: 6px 10px 6px 12px;
  transition: border-color .12s;
}
body.shell-v2-on .vend-filters-bar.vf-margot .vf-g:hover{
  border-color: var(--border-hi, var(--muted));
}
body.shell-v2-on .vend-filters-bar.vf-margot .vf-g label{
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .1px;
  cursor: pointer;
  user-select: none;
}
body.shell-v2-on .vend-filters-bar.vf-margot .vf-g select,
body.shell-v2-on .vend-filters-bar.vf-margot .vf-g .vend-sel{
  background: transparent;
  border: none !important;
  padding: 0 18px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 10px !important;
}
body.shell-v2-on .vend-filters-bar.vf-margot .vf-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 4px); /* [v994] 6px → var --radius (4px light, 3px noir), plus carré style Margot CLAUDE.md */
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
body.shell-v2-on .vend-filters-bar.vf-margot .vf-btn:hover{
  border-color: var(--border-hi, var(--muted));
  background: var(--s2);
}
body.shell-v2-on .vend-filters-bar.vf-margot .vf-btn-perdu{
  color: var(--text-dim);
}
body.shell-v2-on .vend-filters-bar.vf-margot .vf-btn-analyze{
  color: var(--accent);
  background: rgba(124, 106, 247, .08);
  border-color: rgba(124, 106, 247, .25);
}
body.shell-v2-on .vend-filters-bar.vf-margot .vf-btn-analyze:hover{
  background: rgba(124, 106, 247, .15);
  border-color: rgba(124, 106, 247, .4);
}

/* [v992] Anthony : style boutons Afficher perdus / Colonnes / Archivés
   comme le bouton "Graphique" de Compta : icône en accent violet, label
   en text normal. */
body.shell-v2-on .vend-filters-bar.vf-margot .vf-btn svg{
  color: var(--accent);
  flex-shrink: 0;
}
body.shell-v2-on .vend-filters-bar.vf-margot .vf-btn.active svg,
body.shell-v2-on .vend-filters-bar.vf-margot .vf-btn[data-active="true"] svg{
  color: var(--bg);
}
body.shell-v2-on .vend-filters-bar.vf-margot .vf-btn.active,
body.shell-v2-on .vend-filters-bar.vf-margot .vf-btn[data-active="true"]{
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* ══════════ Compta : KPI cards style Margot ══════════
   Scope limité à .ca-kpi-row > .kpi-card pour ne pas toucher la table ou autres.
   Inline styles JS gardent priorité pour les couleurs de valeur (var(--green), etc). */
body.shell-v2-on .ca-kpi-row{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 14px !important;
}
body.shell-v2-on .ca-kpi-row > .kpi-card{
  position: relative;
  padding: 12px 14px 14px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg, 12px);
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
/* Retire l'accent bar ::before legacy */
body.shell-v2-on .ca-kpi-row > .kpi-card::before{
  display: none !important;
}
/* Label : uppercase 9.5px 600 muted letter-spacing */
body.shell-v2-on .ca-kpi-row > .kpi-card .kpi-lbl{
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-bottom: 6px;
}
/* Value : 21px 700 Plus Jakarta Sans tabular-nums — override le 18px inline */
body.shell-v2-on .ca-kpi-row > .kpi-card .kpi-val{
  font-family: 'Plus Jakarta Sans', var(--font-display), sans-serif;
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -.5px !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.05;
  margin-bottom: 3px;
}
/* NET line (le div après kpi-val) : 11px text-dim */
body.shell-v2-on .ca-kpi-row > .kpi-card > div:last-child:not(.kpi-icon):not(.kpi-val):not(.kpi-lbl){
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.1px !important;
  opacity: 1 !important;
  margin-top: 0;
}
/* Badge icon : top-right, 22x22 rounded, pas d'emoji flottant */
body.shell-v2-on .ca-kpi-row > .kpi-card .kpi-icon{
  position: absolute !important;
  top: 10px;
  right: 10px;
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px;
  display: grid !important;
  place-items: center !important;
  font-size: 12px !important;
  opacity: 1 !important;
  background: var(--s2);
}

/* ══════════ Toolbar Vendeurs unifiée (tabs + filtres sur même ligne) ══════════ */
body.shell-v2-on .vend-main-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 4px;
}
body.shell-v2-on .vend-main-toolbar .vend-tabs-bar{
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
body.shell-v2-on .vend-main-toolbar .vend-filters-bar.vf-margot{
  flex: 1 1 auto;
  min-width: 0;
}
/* [v993] Switcher injecté directement dans .vend-main-toolbar (parent fixe
   qui contient les 2 barres vf-estis/vf-kanban). Margin-left:auto le pousse
   à droite, indépendamment de la barre active. Order:99 garantit que même
   si le DOM le place avant, il reste visuellement à droite. */
body.shell-v2-on .vend-main-toolbar > .page-view-switcher{
  margin-left: auto;
  flex-shrink: 0;
  order: 99;
}

/* ══════════ Vue Pipeline : scroll interne verrouillé (desktop only) ══════════
   Quand #page-vendeurs a la classe .vt-kanban-mode :
   - .vend-board-wrap : max-height viewport-based + scroll horizontal interne
   - .vk-col : max-height limite + overflow hidden (header + body split)
   - .vk-col-body : flex 1 + scroll vertical interne */

/* Page vendeurs : retire le double padding .vend-page (24 legacy + 24 shell-v2 = 48 total).
   Sous shell-v2, c'est .shellv2-main qui gère déjà le padding. */
body.shell-v2-on #page-vendeurs .vend-page{
  padding: 0;
  min-height: 0;
  gap: 16px;
}
body.shell-v2-on #page-vendeurs .vend-table-wrap,
body.shell-v2-on #page-vendeurs .table-wrap{
  margin-left: 0;
  margin-right: 0;
}

/* ══════════ Page Compta & Suivi — styles Margot (sans toucher aux rows de table) ══════════ */
/* Retire double padding .ca-content (20/24 legacy + 20/24 shell-v2) */

/* v2.1.x — Le wrap du tableau prend tout l'espace restant et scroll en interne */

/* v2.1.x — thead sticky pour rester visible pendant le scroll */

/* KPI cards Margot : 5 colonnes, couleur par card */

/* Supprime la barre gradient du haut (legacy k1/k2/k3/k4/k5) */

/* Icon badge top-right pour chaque KPI */
/* v2.1.x — Fond transparent (avant: bg gris s2) selon retour Anthony */

/* Couleurs par KPI (match Margot : encaissé=green, prod=accent, offre=text, prévi=chaud, agence=tiede) */

/* Toolbar filtres Margot : conteneur surface + pills noires */

/* Pills : active = noir, inactive = transparent */

/* Séparateur visuel entre groupes de pills */

/* Boutons Graphique / Colonnes / Calculs : style action Margot */

/* Bouton Graphique : icon chart violet (accent) quand inactif, blanc quand actif */

/* Chart wrapper : surface + radius Margot + plus grand (prend la place de la table) */

/* ══════════ Chart Margot custom (HTML/CSS pur, pas Chart.js) ══════════ */
/* Par défaut caché ; visible quand .open est ajouté par toggleChart */

/* Body : 12 mois en colonnes flex, hauteur fixée */

/* cs-mo-bar : prend tout l'espace restant, bars ancrées en bas */

/* Footer : 2 barres de progression d'objectif (encaissé consultant + CA HT agence) */

/* Mini sub-label sous le nom du mois (CA agence mensuel) */

@media (min-width: 901px){
  /* Quand le main a .kanban-lock : scroll global désactivé, kanban gère son scroll interne */
  body.shell-v2-on .shellv2-main.kanban-lock{
    overflow: hidden;
  }
  /* En mode kanban, #page-vendeurs prend toute la hauteur dispo, flex column */
  body.shell-v2-on #page-vendeurs.vt-kanban-mode{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0;
    height: 100%;
    max-height: 100%;
  }
  /* Enfants directs de page-vendeurs : [data-pg-hero] auto, .vend-page prend le reste */
  body.shell-v2-on #page-vendeurs.vt-kanban-mode > [data-pg-hero]{
    flex: 0 0 auto;
  }
  body.shell-v2-on #page-vendeurs.vt-kanban-mode > .vend-page{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 16px;
    padding: 0;
  }
  /* Enfants de .vend-page : KPIs et toolbar restent auto, #vt-kanban prend le reste */
  body.shell-v2-on #page-vendeurs.vt-kanban-mode .vend-page > *:not(#vt-kanban){
    flex: 0 0 auto;
  }
  /* #vt-kanban prend tout le reste de la hauteur */
  body.shell-v2-on #page-vendeurs.vt-kanban-mode #vt-kanban{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Le wrap : flex 1 + scroll horizontal interne + FALLBACK max-height explicite
     (au cas où la cascade flex échoue sur un layout, on force la hauteur via calc) */
  body.shell-v2-on #page-vendeurs.vt-kanban-mode #vt-kanban .vend-board-wrap{
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - 220px);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
  }
  /* Le board : height 100% pour que les cols s'étirent verticalement */
  body.shell-v2-on #page-vendeurs.vt-kanban-mode #vt-kanban .vend-board{
    height: 100%;
    align-items: stretch;
  }
  /* Les colonnes : flex column avec overflow hidden (header visible + body scroll)
     + FALLBACK max-height explicite */
  body.shell-v2-on #page-vendeurs.vt-kanban-mode .vk-col{
    height: 100%;
    max-height: calc(100vh - 240px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.shell-v2-on #page-vendeurs.vt-kanban-mode .vk-col > .vk-col-hdr{
    flex: 0 0 auto;
  }
  /* Body de colonne : flex 1 + scroll vertical interne CRITIQUE */
  body.shell-v2-on #page-vendeurs.vt-kanban-mode .vk-col-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin !important;
  }
  body.shell-v2-on #page-vendeurs.vt-kanban-mode .vk-col-body::-webkit-scrollbar{ width: 5px; }
  body.shell-v2-on #page-vendeurs.vt-kanban-mode .vk-col-body::-webkit-scrollbar-thumb{ background: var(--s3, rgba(0,0,0,.15)); border-radius: 3px; }
}

/* ══════════ Mobile responsive ══════════ */
@media (max-width: 900px){
  /* Le grid de la sidebar passe en 1 col, sidebar cachée */
  .shellv2-root{
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  body.shell-v2-on .sb{ display: none !important; }
  .shellv2-main{
    padding: 0 0 calc(80px + env(safe-area-inset-bottom, 0)) !important;
  }
  /* Active la topbar mobile et la tabbar 5-items */
  body.shell-v2-on .m-topbar-noh{ display: flex !important; }
  body.shell-v2-on .phone-tabbar-5{ display: grid !important; }

  
  body.shell-v2-on .pg-filters{
    margin: 0 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 8px 10px;
    scrollbar-width: none;
  }
  body.shell-v2-on .pg-filters::-webkit-scrollbar{ display: none; }
  body.shell-v2-on .pg-filter{ white-space: nowrap; flex-shrink: 0; }
}

/* ══════════ Cards Map list : override compact pour panel étroit (v401)
   NOTE : toutes les vieilles règles vignettes shell-v2 ont été supprimées en v401
   car elles bataillaient avec le redesign Margot v397 dans style.css.
   Le CSS source de vérité pour les vignettes est maintenant style.css. ══════════ */
/* v406 — Overrides map-split-list : voir style.css pour toutes les règles.
   Ici on garde juste les fond/bordure du panel. */
body.shell-v2-on #page-biens #map-split-list{
  background: var(--bg) !important;
  border-right: 1px solid var(--border) !important;
}

/* ══════════ Padding uniforme pour toutes les pages sous shell-v2 ══════════
   Toutes les pages doivent avoir le même espacement sous la navbar et sur les côtés,
   pour un feeling cohérent. Référence : #page-clients = 0 24px 40px */

.pg-breadcrumb .b.ghost{ padding: 4px 8px; }
.pg-breadcrumb .sep{ opacity: .4; }

.pg-breadcrumb .meta{
  margin-left: auto;
  font-size: 11px; color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Page Biens — styling Margot (refonte v234)
 * Override les styles existants sans toucher au HTML/JS de biens.js.
 * Scoped sur body.shell-v2-on pour ne pas impacter le comportement legacy.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Cache l'ancienne sidebar biens legacy (remplacée par biens-page.js) */
body.shell-v2-on #page-biens #biens-sidebar,
body.shell-v2-on #page-biens [id="biens-sidebar"],
body.shell-v2-on #page-biens > .main > .sidebar,
body.shell-v2-on #page-biens #biens-sb-overlay,
body.shell-v2-on #page-biens [id="biens-sb-overlay"],
body.shell-v2-on #page-biens > .main > .sidebar-overlay,
body.shell-v2-on #page-biens > .main > .sidebar > .sidebar-close-row{
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none;
  position: absolute !important;
  left: -9999px;
}
/* Reset le layout legacy de page-biens (margin-left:56px relique de l'ancienne sidebar) */
body.shell-v2-on #page-biens{
  margin-left: 0;
}
body.shell-v2-on #page-biens > .main{
  display: block;
  margin: 0;
  padding: 0;
}

/* Nouveau layout 2 colonnes : aside 248px + main */
body.shell-v2-on .biens-layout-shellv2{
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 18px;
  align-items: start;
  /* [v995] margin-top: 14px supprimé — créait un gap supplémentaire au-dessus
     du rail donna vs Dossiers/Tâches/Agenda/Compta. Anthony : "S2 et S3 sont
     les gaps des pages client et bien, c'est un poil trop haut". */
}
body.shell-v2-on .biens-main-v2{ min-width: 0; }
body.shell-v2-on .biens-sidefilters{
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
  position: sticky; top: 14px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding-bottom: 20px;
}
body.shell-v2-on .biens-sidefilters::-webkit-scrollbar{ width: 3px; }
body.shell-v2-on .biens-sidefilters::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 99px; }

/* Section Consultant scrollable interne — le parent .fside overflow:hidden
   doit être neutralisé ici pour permettre le scroll de la liste interne */
body.shell-v2-on .biens-sidefilters .fside-consultant,
body.shell-v2-on .clients-sidefilters .fside-consultant{
  overflow: visible;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
body.shell-v2-on .biens-sidefilters .fside-consultant .fside-list,
body.shell-v2-on .clients-sidefilters .fside-consultant .fside-list{
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}
body.shell-v2-on .biens-sidefilters .fside-consultant .fside-list::-webkit-scrollbar,
body.shell-v2-on .clients-sidefilters .fside-consultant .fside-list::-webkit-scrollbar{ width: 3px; }
body.shell-v2-on .biens-sidefilters .fside-consultant .fside-list::-webkit-scrollbar-thumb,
body.shell-v2-on .clients-sidefilters .fside-consultant .fside-list::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 99px; }

/* Padding-bottom sur chaque .fside pour éviter que le dernier row/chip colle au bord */
body.shell-v2-on .biens-sidefilters .fside,
body.shell-v2-on .clients-sidefilters .fside{
  padding-bottom: 14px;
}
body.shell-v2-on .biens-sidefilters .fside-chips,
body.shell-v2-on .clients-sidefilters .fside-chips{
  padding-bottom: 4px;
}

/* Collapse layout : rail 44px */
body.shell-v2-on .biens-layout-shellv2[data-collapsed="true"]{
  grid-template-columns: 44px 1fr;
}
body.shell-v2-on .biens-layout-shellv2[data-collapsed="true"] .biens-sidefilters{
  position: sticky; top: 20px;
  max-height: none; overflow: visible;
}

/* Chips de filtres (.fside-chips + .fchip) — v605 : aligné sur le style
   .fside-pill de Clients (cf. shell-v2.css l906). Avant : actif noir plein
   sur fond gris s2. Maintenant : actif violet accent sur fond transparent.
   Cohérent avec la sidebar Clients pour une UI uniforme. */
body.shell-v2-on .biens-sidefilters .fside-chips{
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 10px 10px;
}
body.shell-v2-on .biens-sidefilters .fchip{
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 9px;
  font-size: 11.5px; font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius, 4px);
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
  white-space: nowrap;
  text-align: center;
}
body.shell-v2-on .biens-sidefilters .fchip:hover{
  background: var(--s2);
  color: var(--text);
}
body.shell-v2-on .biens-sidefilters .fchip[data-active="true"]{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
body.shell-v2-on .biens-sidefilters .fchip[data-disabled="true"]{
  opacity: .35; pointer-events: none;
}

/* Dots statut biens (spécifique) */
body.shell-v2-on .biens-sidefilters .fside-row .dot.statut-mandat{ background: var(--accent); }
body.shell-v2-on .biens-sidefilters .fside-row .dot.statut-vendu{ background: var(--green); }
body.shell-v2-on .biens-sidefilters .fside-row .dot.statut-suspendu{ background: var(--muted); }

/* Mobile biens : sidebar cachée, layout 1col */
@media (max-width: 900px){
  body.shell-v2-on .biens-layout-shellv2{
    grid-template-columns: 1fr;
  }
  /* Cache UNIQUEMENT la sidebar dans le layout desktop, PAS celle dans le bottom sheet mobile */
  body.shell-v2-on .biens-layout-shellv2 > .biens-sidefilters{ display: none !important; }
  body.shell-v2-on .biens-layout-shellv2 > .biens-side-rail{ display: none !important; }
  /* La sidebar dans le sheet mobile : reset les styles desktop (sticky, max-height) */
  /* Note : .biens-sidefilters-mobile reçoit ses styles inline depuis biens-page.js
     (position:absolute avec top/bottom). On n'override pas ici. */
}

/* Topbar biens : sur desktop, le view-seg est dans le pg-hero → cache l'ancien ctrl-row */
body.shell-v2-on #page-biens .ctrl-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
@media (min-width: 901px){
  body.shell-v2-on #page-biens .ctrl-row{ display: none !important; }
}
body.shell-v2-on #page-biens #biens-count{
  font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* [v1022] .pg-hero-viewseg supprimé : segm view-switcher utilisé pour les toggles
   du .ph HeatMatch (Biens/Acquéreurs/Densité). PAGES.heatmap.actionsHtml retiré
   en v1017, les toggles déplacés inline dans le contenu via .page-view-switcher
   (cf desktop-heatmap.css). Le sélecteur n'a plus aucun usage. */

/* View-seg (Tableau / Vignettes / Carte) — style Margot */
body.shell-v2-on #page-biens .bvbtn{
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--text-dim) !important;
  border: none !important;
  border-radius: 3px;
  box-shadow: none;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer;
  transition: all .12s;
}
body.shell-v2-on #page-biens .bvbtn:hover{
  color: var(--text) !important;
}
body.shell-v2-on #page-biens .bvbtn.active{
  background: var(--text) !important;
  color: var(--bg) !important;
  font-weight: 600;
  border: none !important;
  box-shadow: none;
  border-radius: 3px;
}
/* Wrap des 3 boutons en segment control */
body.shell-v2-on #page-biens .ctrl-row > div:last-child{
  display: inline-flex;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  padding: 2px !important;
  gap: 0;
}

/* Vignettes : cards style Margot avec photo en haut, body, foot gris */
body.shell-v2-on #biens-grid-view{
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
body.shell-v2-on #biens-grid-view > div{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg, 12px) !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  transition: all .15s;
}
body.shell-v2-on #biens-grid-view > div:hover{
  border-color: var(--border-hi, var(--muted)) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06));
}
/* Photo : aspect ratio 16/10 avec placeholder Margot */
body.shell-v2-on #biens-grid-view > div > [id^="bvcard-photo-"]{
  aspect-ratio: 16/10;
  height: auto;
  background: linear-gradient(135deg, var(--s3, var(--s2)), var(--s2)) !important;
  position: relative;
}
/* Corps : padding + typo Margot */
body.shell-v2-on #biens-grid-view > div > div:nth-child(2){
  padding: 11px 13px 12px !important;
  gap: 5px !important;
  flex: 1;
}
/* Prix en Plus Jakarta Sans dans le foot — sépare visuellement (fond s2) */
body.shell-v2-on #biens-grid-view > div > div:nth-child(2) > div:last-child{
  margin-top: auto;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}
body.shell-v2-on #biens-grid-view > div > div:nth-child(2) > div:last-child > div:first-child{
  font-family: 'Plus Jakarta Sans', var(--font-display), sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.3px;
}

/* Table biens : style Margot btbl (headers uppercase, DPE square coloré) */
body.shell-v2-on #biens-table-view{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}
body.shell-v2-on #biens-table-view thead th{
  padding: 10px 14px;
  font-size: 10.5px; font-weight: 600 !important;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted) !important;
  background: var(--s2) !important;
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap;
  text-align: left;
}
body.shell-v2-on #biens-table-view tbody td{
  padding: 10px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle !important;
  white-space: nowrap;
}
body.shell-v2-on #biens-table-view tbody tr:last-child td{
  border-bottom: none !important;
}
body.shell-v2-on #biens-table-view tbody tr:hover td{
  background: var(--s2) !important;
}
/* Mobile biens : table scrollable horizontalement */
@media (max-width: 900px){
  body.shell-v2-on #page-biens .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Cache la vue tableau sur mobile — Margot dit que c'est pas user-friendly */
  body.shell-v2-on #page-biens #biens-table-view{
    display: none !important;
  }
  /* Cache aussi le bouton Tableau du view-seg sur mobile */
  body.shell-v2-on #page-biens #biens-view-table{
    display: none !important;
  }
  
  /* Vignettes mobile : cards horizontales (photo gauche 110px + body droite) */
  body.shell-v2-on #biens-grid-view{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
  }
  body.shell-v2-on #biens-grid-view > div{
    flex-direction: row;
    min-height: 110px;
  }
  /* Photo : 110px carrée à gauche, pas aspect-ratio 16/10 */
  body.shell-v2-on #biens-grid-view > div > [id^="bvcard-photo-"]{
    width: 110px !important;
    height: auto !important;
    flex-shrink: 0;
    aspect-ratio: auto;
    background: linear-gradient(135deg, var(--s3, var(--s2)), var(--s2)) !important;
  }
  body.shell-v2-on #biens-grid-view > div > [id^="bvcard-photo-"] img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* Corps : flex:1 avec padding plus serré mobile */
  body.shell-v2-on #biens-grid-view > div > div:nth-child(2){
    padding: 10px 12px;
    flex: 1;
    min-width: 0;
    gap: 3px;
  }
  /* Prix sans séparateur border-top en mobile (intégré dans la card) */
  body.shell-v2-on #biens-grid-view > div > div:nth-child(2) > div:last-child{
    border-top: none !important;
    padding: 4px 0 0;
    margin-top: auto;
  }
  body.shell-v2-on #biens-grid-view > div > div:nth-child(2) > div:last-child > div:first-child{
    font-size: 14px;
  }
  
  /* Vue Carte mobile : m-topbar (header) + switch view + map FIXED en haut, COLLÉS.
     Le bg --bg du topbar et du ctrl-row cache les vignettes qui scrollent derrière. */
  body.shell-v2-on #page-biens.biens-map-mode > [data-m-topbar]{
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 7 !important;
    background: var(--bg) !important;
    padding: 14px 14px 4px;
  }
  body.shell-v2-on #page-biens.biens-map-mode #biens-content{
    display: block !important;
    /* padding-top = topbar (62) + ctrl-row (44) + map (45vh) + gap (12) */
    padding-top: calc(62px + 44px + 45vh + 12px);
  }
  body.shell-v2-on #page-biens.biens-map-mode .ctrl-row{
    position: fixed !important;
    top: 62px; /* colle directement sous le m-topbar (sans gap) */
    left: 0;
    right: 0;
    z-index: 6 !important;
    background: var(--bg) !important;
    padding: 6px 14px;
    margin: 0;
  }
  body.shell-v2-on #page-biens.biens-map-mode #biens-map-view{
    position: fixed !important;
    top: 106px; /* colle sous topbar (62) + ctrl-row (44) */
    left: 14px;
    right: 14px;
    z-index: 5 !important;
    height: 45vh !important;
    max-height: 45vh;
    border-radius: 12px;
    overflow: hidden;
  }
  /* Ctrl-row par défaut (vue Tableau/Vignettes) : à droite, pas fixed */
  body.shell-v2-on #page-biens .ctrl-row{
    display: flex !important;
    justify-content: flex-end;
    margin: 0 0 8px 0;
    padding: 0;
    flex-wrap: nowrap;
  }
  body.shell-v2-on #page-biens .ctrl-row #biens-count{ display: none !important; }
  body.shell-v2-on #page-biens .ctrl-row > div:last-child{
    margin: 0;
    margin-left: auto;
  }
  body.shell-v2-on #page-biens #biens-grid-view{
    margin-top: 0;
  }
  /* Sur mobile en vue map, le panel liste INTERNE à la map est caché */
  body.shell-v2-on #page-biens #map-split-list{ display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MODALES MARGOT (Session 1/3 — tokens visuels)
   Applique le look Margot aux modales .form-modal existantes
   + fournit des helpers réutilisables pour les refontes à venir
   ════════════════════════════════════════════════════════════════════════ */

/* — Backdrop & shell — plus léger, avec blur doux — */
body.shell-v2-on .overlay{
  background: rgba(20, 22, 31, .38);
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  padding: 24px;
}
body.shell-v2-on[data-theme="noir"] .overlay{
  background: rgba(0, 0, 0, .65) !important;
}
body.shell-v2-on .overlay .form-modal,
body.shell-v2-on .overlay .modal,
body.shell-v2-on .overlay .rappr-modal{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* — Header — titre + sous-titre, bouton fermer icône — */
body.shell-v2-on .form-modal .fm-head,
body.shell-v2-on .modal .fm-head{
  padding: 18px 22px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
  flex-shrink: 0;
}
body.shell-v2-on .form-modal .fm-title,
body.shell-v2-on .modal .fm-title{
  font-family: 'Plus Jakarta Sans', var(--font-display), sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text) !important;
  background: none;
  -webkit-text-fill-color: initial !important;
}
body.shell-v2-on .form-modal .fm-sub{
  font-size: 12px;
  color: var(--muted) !important;
  line-height: 1.4;
  margin-top: 2px;
}
body.shell-v2-on .form-modal .close-btn,
body.shell-v2-on .modal .close-btn{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 8px);
  background: var(--surface) !important;
  color: var(--text-dim) !important;
  font-size: 13px;
  transition: all .12s;
  cursor: pointer;
  flex-shrink: 0;
}
body.shell-v2-on .form-modal .close-btn:hover{
  background: var(--s2) !important;
  color: var(--text) !important;
  border-color: var(--border-hi, var(--muted)) !important;
}

/* — Body (zone scrollable) — */
body.shell-v2-on .form-modal .fm-body,
body.shell-v2-on .modal .fm-body{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.shell-v2-on .form-modal .fm-body::-webkit-scrollbar{ width: 10px; }
body.shell-v2-on .form-modal .fm-body::-webkit-scrollbar-track{ background: transparent; }
body.shell-v2-on .form-modal .fm-body::-webkit-scrollbar-thumb{
  background: var(--s3, var(--s2));
  border-radius: 5px;
  border: 2px solid var(--surface);
}

/* — Sections — label caps avec trait horizontal — */
body.shell-v2-on .form-modal .fm-section{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted) !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px !important;
}
body.shell-v2-on .form-modal .fm-section::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* — Fields — labels uppercase fin, inputs border neutre, focus noir (var text) — */
body.shell-v2-on .form-modal .fm-group label,
body.shell-v2-on .form-modal .fm-lbl{
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: .3px !important;
  text-transform: uppercase;
  color: var(--text-dim) !important;
}
body.shell-v2-on .form-modal .fm-input,
body.shell-v2-on .form-modal .fm-select,
body.shell-v2-on .form-modal .fm-textarea{
  padding: 7px 10px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 8px);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
  transition: border-color .12s, background .12s;
}
body.shell-v2-on .form-modal .fm-input:hover,
body.shell-v2-on .form-modal .fm-select:hover,
body.shell-v2-on .form-modal .fm-textarea:hover{
  border-color: var(--border-hi, var(--muted)) !important;
}
body.shell-v2-on .form-modal .fm-input:focus,
body.shell-v2-on .form-modal .fm-select:focus,
body.shell-v2-on .form-modal .fm-textarea:focus{
  outline: none;
  border-color: var(--text) !important;
  background: var(--surface) !important;
}

/* — Footer sticky — kbd + boutons actions — */
body.shell-v2-on .form-modal .fm-foot,
body.shell-v2-on .modal .modal-foot{
  padding: 12px 22px;
  border-top: 1px solid var(--border) !important;
  background: var(--s2) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
/* v2.1.x — Quand le footer doit wrap (modal vendeur 680px avec 6 boutons), le meta */
/* (raccourcis clavier) n'a plus la place de rester inline. Le cacher complètement */
/* dans ce cas plutôt que de le laisser wrapper en colonne illisible. */
body.shell-v2-on .form-modal #m-vend-inner .fm-foot .fm-foot-meta,
body.shell-v2-on #m-vend .fm-foot .fm-foot-meta{
  display: none;
}
/* Les boutons du footer : jamais sur 2 lignes */
body.shell-v2-on .form-modal .fm-foot .mbtn,
body.shell-v2-on .form-modal .fm-foot button,
body.shell-v2-on .modal .modal-foot .mbtn,
body.shell-v2-on .modal .modal-foot button{
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 1.2;
  min-width: 0;
  padding: 8px 16px;
}
/* Zone infos raccourcis : peut shrink/tronquer mais sans wrapper en colonne */
body.shell-v2-on .form-modal .fm-foot-meta,
body.shell-v2-on .modal .modal-foot-meta{
  font-size: 11px;
  color: var(--muted) !important;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  flex-shrink: 1;
}
body.shell-v2-on .form-modal .fm-foot-meta kbd,
body.shell-v2-on .modal kbd{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--text-dim) !important;
  flex-shrink: 0;
}

/* — Boutons Margot — primary = noir plein, secondary = surface + border — */
body.shell-v2-on .form-modal .fm-btn-primary,
body.shell-v2-on .modal .btn-primary,
body.shell-v2-on .form-modal button[type="submit"],
body.shell-v2-on .form-modal .mbtn.primary{
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 1px solid var(--text) !important;
  padding: 8px 14px;
  border-radius: var(--radius, 8px);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
body.shell-v2-on .form-modal .fm-btn-primary:hover,
body.shell-v2-on .modal .btn-primary:hover,
body.shell-v2-on .form-modal button[type="submit"]:hover,
body.shell-v2-on .form-modal .mbtn.primary:hover{
  background: var(--text-dim) !important;
  border-color: var(--text-dim) !important;
  transform: none !important;
}
body.shell-v2-on .form-modal .fm-btn-ghost,
body.shell-v2-on .modal .btn-ghost,
body.shell-v2-on .form-modal .mbtn:not(.primary){
  background: var(--surface) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border) !important;
  padding: 8px 14px;
  border-radius: var(--radius, 8px);
  font-size: 12.5px;
  font-weight: 500 !important;
}
body.shell-v2-on .form-modal .fm-btn-ghost:hover,
body.shell-v2-on .modal .btn-ghost:hover,
body.shell-v2-on .form-modal .mbtn:not(.primary):hover{
  background: var(--s2) !important;
  color: var(--text) !important;
  border-color: var(--border-hi, var(--muted)) !important;
}

/* ═════════════════════════════════════════════════════
   HELPERS RÉUTILISABLES Margot (pour Session 2 et 3)
   Ces classes peuvent être utilisées dans n'importe quelle
   modale pour reprendre les patterns Margot.
   ═════════════════════════════════════════════════════ */

/* .type-toggle — segmented 3-way (Acquéreur / Vendeur / Les deux) */
.mg-type-toggle{
  display: inline-flex;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  padding: 2px;
  gap: 2px;
}
.mg-type-toggle button{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 3px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all .12s;
}
.mg-type-toggle button:hover{ color: var(--text); }
.mg-type-toggle button[data-active="true"]{
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.mg-type-toggle button[data-active="true"] svg{ color: var(--accent); }

/* .ai-import — bloc "Remplir depuis SMS / email" */
/* ─── [v1102] Assistant donna : refonte sobre ────────────────────────
   Avant : cadre violet pâle imposant avec titre + sous-titre + icon dot.
   Après : bandeau discret en mode collapsed (juste icon + label + bouton),
   panneau plus structuré en expanded. Icon donna distinctif : étoile 4 pointes
   avec satellite (signature visuelle réutilisable ailleurs). */

.mg-ai-import{
  display: flex;
  flex-direction: column;
  /* Pas de background quand collapsed (transparent) — on remet seulement quand expanded */
  background: transparent;
  border: none;
  padding: 0;
}

/* Collapsed : bandeau ultra discret 1 ligne */
.av-ai-row{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  font-size: 12px;
  transition: border-color .12s, background .12s;
}
.av-ai-row:hover{
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.av-ai-icon{
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}
.av-ai-label{
  flex: 1;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: -.1px;
}
.av-ai-toggle-btn{
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
  font-family: inherit;
}
.av-ai-toggle-btn:hover{
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Expanded : panneau structuré */
.av-ai-expanded{
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
}
.av-ai-expanded-head{
  display: flex;
  align-items: center;
  gap: 8px;
}
.av-ai-expanded-head .av-ai-label{
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.4px;
  text-transform: lowercase;
}
.av-ai-close-btn{
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  margin-left: auto;
  font-family: inherit;
  transition: color .12s;
}
.av-ai-close-btn:hover{ color: var(--text); }

.mg-ai-import textarea{
  width: 100%;
  min-height: 72px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
  resize: vertical;
  line-height: 1.5;
  transition: border-color .12s;
}
.mg-ai-import textarea:focus{ outline: none; border-color: var(--accent); }

.av-ai-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.av-ai-count{
  font-size: 11px;
  color: var(--muted);
}
.av-ai-parse-btn{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--text);
  color: var(--bg, #fff);
  border: none;
  border-radius: var(--radius, 8px);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .12s, transform .08s;
  font-family: inherit;
}
.av-ai-parse-btn:hover{ opacity: .88; }
.av-ai-parse-btn:active{ transform: translateY(1px); }
.av-ai-parse-btn:disabled{
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}

/* État expanded : montre la zone .av-ai-expanded, cache .av-ai-row */
.mg-ai-import.av-ai-open .av-ai-row{ display: none; }
.mg-ai-import.av-ai-open .av-ai-expanded{ display: flex; }

/* .chip-field — container for chips + add input (consultants, tags) */

body.shell-v2-on[data-theme="noir"] .mg-chip button:hover{ background: rgba(255,255,255,.1); }

/* .dpe-picker — A→G grade picker, coloré si .dpe-color */

/* .tab-rail — rail latéral pour les modales multi-onglets */
.mg-tab-rail{
  flex: 0 0 200px;
  background: var(--s2);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.mg-tab-rail .mg-rail-label{
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 10px 8px;
}
.mg-tab-rail button{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  border-radius: var(--radius, 8px);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: all .12s;
  position: relative;
}
.mg-tab-rail button .mg-tab-ic{
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  color: var(--muted);
  flex-shrink: 0;
}
.mg-tab-rail button:hover{ background: var(--surface); color: var(--text); }
.mg-tab-rail button:hover .mg-tab-ic{ color: var(--text-dim); }
.mg-tab-rail button[data-active="true"]{
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.mg-tab-rail button[data-active="true"] .mg-tab-ic{ color: var(--accent); }
.mg-tab-rail button .mg-tab-status{
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
}
.mg-tab-rail button .mg-tab-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.mg-tab-rail button[data-filled="full"] .mg-tab-dot{ background: var(--green); }
.mg-tab-rail button[data-filled="partial"] .mg-tab-dot{ background: var(--tiede); }

@media (max-width: 760px){
  .mg-tab-rail{
    flex: 0 0 auto;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    padding: 8px;
    gap: 4px;
  }
  .mg-tab-rail .mg-rail-label{ display: none; }
  .mg-tab-rail button{ flex-shrink: 0; padding: 6px 10px; }
  .mg-tab-rail button .mg-tab-status{ display: none; }
}

/* — Modal client v310 patches — */
/* Quartiers recherchés : input interne sans padding ni border (hérite du wrap) */
body.shell-v2-on .form-modal .qtag-wrap{
  padding: 5px 6px;
  background: var(--surface) !important;
  min-height: 34px;
}
body.shell-v2-on .form-modal .qtag-wrap input.fm-input{
  padding: 4px 6px;
  background: transparent !important;
  border: none !important;
  min-height: auto;
  box-shadow: none;
}
body.shell-v2-on .form-modal .qtag-wrap input.fm-input:focus{
  outline: none;
  border: none !important;
  box-shadow: none;
}

/* Gap généreux entre rows/groups dans modales Margot */
body.shell-v2-on .form-modal .fm-body{
  gap: 14px;
  padding: 22px 22px 22px !important;
}
/* v383 — Wrappers internes (fm-acq-fields, fm-vend-fields) : flex column avec gap interne */
/* v390 — Exclut les éléments cachés inline par JS (style="display:none") pour que avSetKind puisse les masquer */
body.shell-v2-on .form-modal .fm-body .fm-acq-fields:not([style*="display:none"]):not([style*="display: none"]),
body.shell-v2-on .form-modal .fm-body .fm-vend-fields:not([style*="display:none"]):not([style*="display: none"]){
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Les mêmes règles pour l'intérieur seulement (gap/flex direction) sans forcer display */
body.shell-v2-on .form-modal .fm-body .fm-acq-fields,
body.shell-v2-on .form-modal .fm-body .fm-vend-fields{
  flex-direction: column;
  gap: 14px;
}
/* Sections : encore plus d'air pour bien marquer le changement de bloc */
body.shell-v2-on .form-modal .fm-body .fm-section{
  margin-top: 8px !important;
  margin-bottom: 2px;
}
body.shell-v2-on .form-modal .fm-body > .fm-section:first-child{
  margin-top: 0;
}
/* Groupes : label collé à son input (4px au lieu de 7) */
body.shell-v2-on .form-modal .fm-body .fm-group{
  gap: 4px;
}
/* Rows : gap horizontal entre colonnes */
body.shell-v2-on .form-modal .fm-body .fm-row{
  gap: 12px;
}
/* Rows internes : label→input serré */
body.shell-v2-on .form-modal .fm-body .fm-row .fm-group{
  gap: 4px;
}

/* — Modal Bien Margot Session 3 — onglets latéraux + pane — */
/* Format carré équilibré façon Margot UI Kit : pas trop large, hauteur généreuse */
/* v371 : scope desktop-only, en mobile les règles mobile doivent passer */
@media (min-width: 601px){
  body.shell-v2-on #m-bien #m-bien-inner.m-bien-inner-el{
    max-width: 880px;
    width: 90vw !important;
    height: auto;
    max-height: min(720px, 90vh);
    min-height: 600px;
  }
}
body.shell-v2-on .mg-bien-tabs-wrap{
  background: var(--surface);
  border-top: 1px solid var(--border);
}
body.shell-v2-on .mg-bien-rail{
  flex: 0 0 200px;
  background: var(--s2);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  min-height: 0;
}
body.shell-v2-on .mg-bien-rail::-webkit-scrollbar{ width: 6px; }
body.shell-v2-on .mg-bien-rail::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 3px; }

body.shell-v2-on .mg-bien-pane::-webkit-scrollbar{ width: 10px; }
body.shell-v2-on .mg-bien-pane::-webkit-scrollbar-thumb{
  background: var(--s3, var(--border));
  border-radius: 5px;
  border: 2px solid var(--surface);
}

/* Pane heading */
body.shell-v2-on .mg-pane-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
body.shell-v2-on .mg-pane-head h3{
  font-family: 'Plus Jakarta Sans', var(--font-display), sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--text);
  margin: 0;
}
body.shell-v2-on .mg-pane-head p{
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

/* Rail buttons */
body.shell-v2-on .mg-bien-rail button{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: var(--radius, 8px);
  text-align: left;
  cursor: pointer;
  transition: all .12s;
  position: relative;
  width: 100%;
  font-family: inherit;
}
body.shell-v2-on .mg-bien-rail button .mg-tab-ic{
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  color: var(--muted);
  flex-shrink: 0;
}
body.shell-v2-on .mg-bien-rail button:hover{
  background: var(--surface);
  color: var(--text);
}
body.shell-v2-on .mg-bien-rail button:hover .mg-tab-ic{ color: var(--text-dim); }
body.shell-v2-on .mg-bien-rail button[data-active="true"]{
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
body.shell-v2-on .mg-bien-rail button[data-active="true"] .mg-tab-ic{ color: var(--accent); }
body.shell-v2-on .mg-bien-rail button .mg-tab-status{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
body.shell-v2-on .mg-bien-rail button .mg-tab-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: background .15s;
}
body.shell-v2-on .mg-bien-rail button[data-filled="full"] .mg-tab-dot{ background: var(--green); }
body.shell-v2-on .mg-bien-rail button[data-filled="partial"] .mg-tab-dot{ background: var(--tiede); }

/* Footer prev/next */
body.shell-v2-on .mg-bien-footer button:hover:not([disabled]){
  background: var(--s2) !important;
  border-color: var(--border-hi, var(--muted)) !important;
  color: var(--text) !important;
}

/* Responsive : rail devient horizontal en haut */
@media (max-width: 760px){
  body.shell-v2-on .mg-bien-tabs-wrap{ flex-direction: column; }
  body.shell-v2-on .mg-bien-rail{
    flex: 0 0 auto;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    gap: 4px;
    width: 100%;
  }
  body.shell-v2-on .mg-bien-rail .mg-rail-label{ display: none; }
  body.shell-v2-on .mg-bien-rail button{
    flex-shrink: 0;
    padding: 6px 10px;
    width: auto;
  }
  body.shell-v2-on .mg-bien-rail button .mg-tab-status{ display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   MODAL VENDEUR Margot Session 4 — pipeline-stage + link cards
   ════════════════════════════════════════════════════════════════════════ */

/* — Modal vendeur : largeur cohérente avec autres modales Margot — */
body.shell-v2-on #m-vend #m-vend-inner[data-mg-vend="1"]{
  max-width: 680px;
  width: 100%;
}

/* — Pipeline stage selector (chevrons R1 › R2 › … › Acte › Perdu) — */
/* [v899] Sticky en haut du sp-body de la modale (Anthony : "mets le sticky
   dans le modal quand on scroll"). Le scroll container est .sp-body
   (overflow-y:auto), donc top:0 colle au haut visible.
   z-index élevé pour passer au-dessus des inputs ; background opaque pour
   masquer le contenu qui défile derrière. Margin négatif pour annuler le
   padding-top:16px de .sp-body et coller pile en haut. */
body.shell-v2-on .mg-pipeline-stage{
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--s2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 8px);
  overflow-x: auto;
  scrollbar-width: none !important;
  position: sticky;
  top: -16px;
  z-index: 10;
  /* [v900] Anthony : padding bottom symétrique avec le top + margin-bottom pour
     laisser respirer la première section qui suit (Bien lié). */
  margin: -16px -22px 8px;
  padding: 16px 22px 16px;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
body.shell-v2-on .mg-pipeline-stage::-webkit-scrollbar{ display: none; }
body.shell-v2-on .mg-stage-btn{
  flex-shrink: 0;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
  letter-spacing: .1px;
}
body.shell-v2-on .mg-stage-btn:hover{
  color: var(--text) !important;
  background: var(--surface) !important;
}
/* [v899] Anthony : "mets en noir/blanc selon thème". On utilise var(--text)
   qui vaut #14161f en light et #f2f3f7 en dark, avec contraste inverse pour
   le texte (var(--surface)). Le pill perdu reste rouge (--chaud). */
body.shell-v2-on .mg-stage-btn[data-active="true"]{
  background: var(--text) !important;
  color: var(--surface) !important;
  font-weight: 600;
}
body.shell-v2-on .mg-stage-btn[data-active="true"][data-lost="true"]{
  background: var(--chaud);
}
body.shell-v2-on .mg-stage-sep{
  flex-shrink: 0;
  color: var(--muted);
  font-size: 11px;
  padding: 0 1px;
  user-select: none;
  opacity: .6;
}

/* — Bien lié card Margot (replace inline style) — */
body.shell-v2-on .mg-bien-link-card{
  padding: 11px 14px;
  background: var(--s2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 8px);
}
body.shell-v2-on .mg-bien-link-label{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
}
body.shell-v2-on .mg-link-btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
body.shell-v2-on .mg-link-btn:hover{
  background: var(--s3, var(--s2)) !important;
  color: var(--text) !important;
  border-color: var(--border-hi, var(--muted)) !important;
}
body.shell-v2-on .mg-link-btn-create{
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border)) !important;
}
body.shell-v2-on .mg-link-btn-create:hover{
  background: color-mix(in srgb, var(--accent) 15%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
}

/* — Modal CA "Nouveau dossier de suivi" Margot — */
/* Largeur cohérente */
body.shell-v2-on #ca-add-overlay .form-modal{
  max-width: 720px;
  width: 100%;
}
/* Vente input readonly (auto-généré) — style Margot mono + s2 */
body.shell-v2-on #ca-new-vente[readonly]{
  background: var(--s2) !important;
  color: var(--text-dim) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  cursor: default;
  opacity: 1;
}
body.shell-v2-on #ca-new-vente[readonly]:focus{
  border-color: var(--border) !important;
  box-shadow: none;
}
/* Champs auto-calculés (com_ht, ca prod ht, etc.) — petit badge "calculé" inline label */
body.shell-v2-on #ca-add-overlay .fm-input[readonly]{
  background: color-mix(in srgb, var(--s2) 60%, transparent) !important;
  cursor: default;
  opacity: .85;
}

/* — Badges "CALCULÉ" sur les champs auto-remplis du modal CA — */
/* Cible les .fm-group qui contiennent un input financier auto-calculé */
body.shell-v2-on #ca-add-overlay .fm-group:has(#ca-new-com_ht) .fm-lbl::after,
body.shell-v2-on #ca-add-overlay .fm-group:has(#ca-new-com_reelle) .fm-lbl::after,
body.shell-v2-on #ca-add-overlay .fm-group:has(#ca-new-com_brut) .fm-lbl::after,
body.shell-v2-on #ca-add-overlay .fm-group:has(#ca-new-tva) .fm-lbl::after,
body.shell-v2-on #ca-add-overlay .fm-group:has(#ca-new-ursaf) .fm-lbl::after,
body.shell-v2-on #ca-add-overlay .fm-group:has(#ca-new-com_net) .fm-lbl::after{
  content: 'CALCULÉ';
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  background: var(--s3, var(--border));
  color: var(--muted);
  border-radius: 2px;
  vertical-align: 1px;
  line-height: 1.2;
}

/* ═════════════════════════════════════════════════════════════════
   v367 — MOBILE modal fixes (<=600px) : pleine largeur + header/footer propres
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 600px){
  /* — Modal unifié (add-acqvend, agenda event, etc) : pleine largeur réelle — */
  body.shell-v2-on .overlay,
  body.shell-v2-on #add-acqvend-overlay,
  body.shell-v2-on #m-event-overlay,
  body.shell-v2-on #m-bien{
    padding: 0;
    align-items: flex-end;
  }
  body.shell-v2-on .form-modal,
  body.shell-v2-on #add-acqvend-overlay .form-modal,
  body.shell-v2-on #m-event-overlay .form-modal,
  body.shell-v2-on #m-bien-inner,
  body.shell-v2-on #m-bien #m-bien-inner.m-bien-inner-el{
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    border-radius: 20px 20px 0 0;
    max-height: 94vh;
    min-height: 0;
    height: auto !important;
  }

  /* v375 — fm-head reste en row (titre gauche / close droite) — sauf modal acq/vend qui a un toggle 3-way */
  body.shell-v2-on .form-modal .fm-head,
  body.shell-v2-on #m-bien-inner .fm-head{
    padding: 14px 14px 0;
    gap: 10px;
    align-items: flex-start;
  }
  /* Titre + sub wrappés proprement */
  body.shell-v2-on .form-modal .fm-head > div:first-child,
  body.shell-v2-on #m-bien-inner .fm-head > div:first-child{
    flex: 1 1 auto;
    min-width: 0;
  }
  body.shell-v2-on .form-modal .fm-title,
  body.shell-v2-on #m-bien-inner .fm-title{
    font-size: 16px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: break-word !important;
  }
  body.shell-v2-on .form-modal .fm-sub{
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word !important;
    color: var(--muted) !important;
  }
  /* Close btn TOUJOURS en haut à droite absolute (tous les modals création/édition) */
  body.shell-v2-on .form-modal .fm-head,
  body.shell-v2-on #m-bien-inner .fm-head,
  body.shell-v2-on #add-acqvend-overlay .fm-head,
  body.shell-v2-on #m-event-overlay .fm-head,
  body.shell-v2-on #m-vend .fm-head,
  body.shell-v2-on #nouv-mandat-overlay .fm-head,
  body.shell-v2-on .overlay .form-modal .fm-head{
    position: relative !important;
    padding-right: 56px;
  }
  body.shell-v2-on .form-modal .fm-head .close-btn,
  body.shell-v2-on #m-bien-inner .fm-head .close-btn,
  body.shell-v2-on #add-acqvend-overlay .fm-head .close-btn,
  body.shell-v2-on #m-event-overlay .fm-head .close-btn,
  body.shell-v2-on #m-vend .fm-head .close-btn,
  body.shell-v2-on #nouv-mandat-overlay .fm-head .close-btn,
  body.shell-v2-on .overlay .form-modal .fm-head .close-btn{
    position: absolute !important;
    top: 14px;
    right: 14px;
    margin: 0;
    z-index: 2 !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
  }
  /* Modal add-acqvend SEUL : column pour mettre le toggle 3-way en dessous */
  body.shell-v2-on #add-acqvend-overlay .fm-head{
    flex-direction: column;
    align-items: stretch;
  }
  /* Le conteneur toggle 3-way (spécifique add-acqvend) : passe sous le titre, pleine largeur */
  body.shell-v2-on #add-acqvend-overlay .fm-head > div:nth-child(2){
    width: 100% !important;
    justify-content: space-between;
    gap: 8px;
  }
  body.shell-v2-on #add-acqvend-overlay #av-kind-toggle,
  body.shell-v2-on #add-acqvend-overlay .mg-type-toggle{
    flex: 1 1 auto;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
  }
  body.shell-v2-on #add-acqvend-overlay #av-kind-toggle button,
  body.shell-v2-on #add-acqvend-overlay .mg-type-toggle button{
    width: 100% !important;
    padding: 6px 4px;
    font-size: 11px;
    gap: 4px;
    min-width: 0;
    justify-content: center;
  }
  body.shell-v2-on .form-modal #av-kind-toggle button svg{
    flex-shrink: 0;
  }

  /* — Footer sticky : cache le meta (kbd hints) sur mobile, garde juste les boutons — */
  body.shell-v2-on .form-modal .fm-foot{
    padding: 10px 14px;
    flex-wrap: nowrap;
    gap: 8px;
  }
  body.shell-v2-on .form-modal .fm-foot-meta,
  body.shell-v2-on .form-modal .fm-foot .fm-foot-meta{
    display: none !important;
  }
  /* Boutons du footer : full width split 50/50 */
  body.shell-v2-on .form-modal .fm-foot > div:last-child,
  body.shell-v2-on .form-modal .fm-foot > div[style*="display:flex"]{
    flex: 1 1 auto;
    display: flex !important;
    gap: 8px;
    width: 100% !important;
  }
  body.shell-v2-on .form-modal .fm-foot .mbtn,
  body.shell-v2-on .form-modal .fm-foot button{
    flex: 1 1 0;
    padding: 10px 14px;
    font-size: 13px;
    min-width: 0;
    justify-content: center;
  }

  /* — Body : plus de padding bottom pour pas que le footer mange le contenu — */
  body.shell-v2-on .form-modal .fm-body,
  body.shell-v2-on #m-bien-inner .fm-body{
    padding: 14px 14px 90px;
    overflow-x: hidden;
    max-width: 100%;
  }
  /* Force tous les inputs/selects/textareas à 100% de la largeur du body */
  body.shell-v2-on .form-modal .fm-body input,
  body.shell-v2-on .form-modal .fm-body select,
  body.shell-v2-on .form-modal .fm-body textarea,
  body.shell-v2-on #m-bien-inner .fm-body input,
  body.shell-v2-on #m-bien-inner .fm-body select,
  body.shell-v2-on #m-bien-inner .fm-body textarea{
    max-width: 100%;
    box-sizing: border-box !important;
  }
  /* Rows de 2 colonnes qui passent en 1 col sur petits écrans */
  body.shell-v2-on .form-modal .fm-row,
  body.shell-v2-on .form-modal .fm-row.three{
    grid-template-columns: 1fr;
  }
  /* Tabs internes (ex: modal bien wizard) scrollables */
  body.shell-v2-on .form-modal .fm-body .fm-tabs,
  body.shell-v2-on #m-bien-inner .fm-body .fm-tabs,
  body.shell-v2-on #m-bien-inner .fm-body .bf-nav{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap;
    scrollbar-width: none !important;
  }
  body.shell-v2-on .form-modal .fm-body .fm-tabs::-webkit-scrollbar,
  body.shell-v2-on #m-bien-inner .fm-body .fm-tabs::-webkit-scrollbar{ display: none !important; }

  /* — sheet-handle en haut — */
  body.shell-v2-on .form-modal .sheet-handle{
    display: block !important;
    margin: 8px auto 0;
  }
}

/* v369 — MOBILE kanban cards : prix + hono proprement séparés, pas collés */
@media (max-width: 600px){
  body.shell-v2-on .vk-card > div[style*="justify-content:space-between"]{
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  body.shell-v2-on .vk-card-price{
    font-size: 15px;
  }
  body.shell-v2-on .vk-card-hono{
    font-size: 12px;
  }
  body.shell-v2-on .vk-card-name{
    font-size: 12.5px;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-weight: 700;
    line-height: 1.2;
  }
  body.shell-v2-on .vk-card-addr{
    font-size: 10.5px;
    color: var(--text-dim) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
  }
  /* v390 — Kanban mobile : cards aérées + prix sur 2 lignes clairs */
  body.shell-v2-on .vk-card{
    padding: 12px 12px 11px;
    gap: 6px;
    border-radius: 6px;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
  }
  body.shell-v2-on .vk-badges{
    margin-top: 4px;
    gap: 4px;
  }
}

/* v369 → v370 : supprimé (remplacé par sheet dynamique style Clients) */
@media (max-width: 600px){
  /* Cache la row filtres classique sur mobile (accessible via le bouton filtre header top-right) */

}

/* v371 — Mobile : KPIs Compta compacts pour tout voir sur un écran */
@media (max-width: 600px){

  /* KPI CA Agence (le seul, tout seul) : prend 2 colonnes pour rester centré */

  /* Padding-content réduit pour gagner de la place */

}

/* v375 — Footer wizard modal bien mobile : Préc (petit) + Suiv (grand) + Étape tous sur row 1 ; Annuler + Enregistrer row 2 */
@media (max-width: 600px){
  /* Le modal : overflow pour que le footer puisse être sticky en interne */
  body.shell-v2-on #m-bien-inner{
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
  }
  body.shell-v2-on #m-bien-inner .fm-body{
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 20px;
  }
  /* Footer : collé en bas du modal, always visible */
  body.shell-v2-on .mg-bien-footer{
    flex-shrink: 0;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0)) !important;
    background: var(--s2) !important;
    border-top: 1px solid var(--border) !important;
    position: sticky !important;
    bottom: 0;
    z-index: 10 !important;
  }
  /* Row 1 : [Préc] [Suiv] [Étape 1/5] sur la même ligne, poids différents */
  body.shell-v2-on .mg-bien-footer > div:first-child{
    display: grid !important;
    grid-template-columns: 0.7fr 1.3fr auto;
    gap: 8px;
    align-items: center;
    width: 100% !important;
  }
  body.shell-v2-on .mg-bien-footer .mg-bien-nav-prev{
    padding: 9px 8px;
    font-size: 12px;
    justify-content: center;
    min-width: 0;
    white-space: nowrap;
  }
  body.shell-v2-on .mg-bien-footer .mg-bien-nav-next{
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    justify-content: center;
    min-width: 0;
    white-space: nowrap;
    background: var(--surface) !important;
    border-color: var(--border-hi, var(--border)) !important;
  }
  body.shell-v2-on .mg-bien-footer .mg-bien-step-info{
    font-size: 11px;
    white-space: nowrap;
    margin-left: 0;
    padding: 0 4px;
    color: var(--muted) !important;
  }
  /* Row 2 : Annuler + Enregistrer 50/50 */
  body.shell-v2-on .mg-bien-footer > div:last-child:not(:first-child){
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100% !important;
  }
  body.shell-v2-on .mg-bien-footer > div:last-child:not(:first-child) button{
    flex: unset;
    width: 100% !important;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    justify-content: center;
    white-space: nowrap;
    margin: 0;
  }
}

/* v372 — Mobile : défiger la colonne Vente du tableau compta (UI illisible sinon) */
/* v392 — Kanban mobile : hauteur ajustée (pas de header desktop) */
@media (max-width: 900px){
  body.shell-v2-on .vend-board-wrap{
    max-height: calc(100vh - 180px);
    height: calc(100vh - 180px) !important;
  }
}

/* ════════════════════════════════════════════════
   v515 — Popover Margot UI 2.0 : toggle visibilité
   colonnes kanban vendeur
   ════════════════════════════════════════════════ */
body.shell-v2-on #vend-stages-popover,
#vend-stages-popover {
  position: fixed;
  z-index: 9999;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e4e7ee);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  min-width: 240px;
  max-width: 280px;
  padding: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text, #14161f);
  animation: vsp-pop .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes vsp-pop {
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#vend-stages-popover .vsp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--border, #e4e7ee);
}
#vend-stages-popover .vsp-ttl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  color: var(--text, #14161f);
}
#vend-stages-popover .vsp-close {
  background: none; border: none;
  font-size: 18px; line-height: 1;
  color: var(--muted, #8a93ab);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
#vend-stages-popover .vsp-close:hover {
  background: var(--s2, #f1f3f7);
  color: var(--text, #14161f);
}
#vend-stages-popover .vsp-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 0;
}
#vend-stages-popover .vsp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text, #14161f);
  text-align: left;
  transition: background .12s;
}
#vend-stages-popover .vsp-item:hover {
  background: var(--s2, #f1f3f7);
}
#vend-stages-popover .vsp-item.off {
  opacity: .5;
}
#vend-stages-popover .vsp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
#vend-stages-popover .vsp-lbl {
  flex: 1;
  font-weight: 500;
}
#vend-stages-popover .vsp-toggle {
  width: 28px;
  height: 16px;
  border-radius: 99px;
  background: var(--border, #e4e7ee);
  position: relative;
  flex-shrink: 0;
  transition: background .18s;
}
#vend-stages-popover .vsp-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: left .18s;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
#vend-stages-popover .vsp-item.on .vsp-toggle {
  background: var(--accent, #6b5cf5);
}
#vend-stages-popover .vsp-item.on .vsp-toggle::after {
  left: 14px;
}
#vend-stages-popover .vsp-reset {
  display: block;
  width: calc(100% - 12px);
  margin: 6px 6px 4px;
  padding: 8px;
  background: var(--s2, #f1f3f7);
  border: 1px solid var(--border, #e4e7ee);
  border-radius: 7px;
  color: var(--muted, #8a93ab);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
#vend-stages-popover .vsp-reset:hover {
  background: var(--surface, #fff);
  color: var(--text, #14161f);
  border-color: var(--muted, #8a93ab);
}

html[data-theme="noir"] #vend-stages-popover {
  background: #18181c;
  border-color: #28282e;
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
}
html[data-theme="noir"] #vend-stages-popover .vsp-item:hover {
  background: #22222a;
}
html[data-theme="noir"] #vend-stages-popover .vsp-toggle {
  background: #2c2c34;
}
html[data-theme="noir"] #vend-stages-popover .vsp-reset {
  background: #1f1f25;
  border-color: #28282e;
}

/* ═══════════════════════════════════════════════════════════════════
   [v678] Anti-aliasing du texte : "j'ai test et les 2 ont font weight à 500
   mais quand j'enleve la font weight la ou je trouve que c'est gros bah ça
   ressemble beaucoup plus à l'autre où s'est activé". 
   Cause : donna stay applique -webkit-font-smoothing:antialiased sur le body
   (Inter rendu plus fin, plus net), donna ne le faisait pas → Inter 500 paraît
   plus épais sur donna que sur donna stay. Fix : ajout du smoothing global.
   ═══════════════════════════════════════════════════════════════════ */
body, body.shell-v2-on {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════════
   [v1124 cleanup Anthony "header biens et clients ok mais il manque la
   ligne en dessous"] Anthony veut la ligne séparatrice classique sous le
   header Biens/Clients (comme sur les autres pages). L'override v1122
   ULTRA-fort qui virait la border-bottom de .ph pour ces pages a été
   SUPPRIMÉ. La ligne séparatrice de page-header.css L38 (border-bottom:
   1px solid var(--border)) s'applique maintenant naturellement sur toutes
   les pages, y compris Biens/Clients. */