/* ============================================================================
   donna · Kit Barre de filtres (Margot, donna__3) — brique PARTAGEE
   Convention B2B : filtres en barre horizontale en haut, contenu pleine largeur.
   Toutes classes prefixees dfb- (les noms courts du kit collisionnaient).
   Tokens donna (4 themes). Chargee globalement -> toutes les pages en profitent.
   ============================================================================ */

/* Conteneur : une rangee scrollable horizontalement (pas de wrap). Chaque page
   pose ses propres marges laterales pour aligner sur son contenu. */
/* overflow VISIBLE impératif : overflow-x:auto force overflow-y:auto et CLIPPE
   les popovers des dropdowns (= bug dropdowns morts). Wrap si trop large. */
.dfb-bar{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow-x:auto; overflow-y:visible; scrollbar-width:none;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:9px 11px; box-shadow:var(--shadow); }
.dfb-bar::before{ content:"Filtres"; align-self:center; font-family:var(--mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding-right:9px; margin-right:2px; border-right:1px solid var(--border); flex-shrink:0; white-space:nowrap; }
.dfb-bar::-webkit-scrollbar{ display:none; }

/* 1 · Segment / pills inline (choix unique, <= 5 options) */
.dfb-seg{ display:inline-flex; background:var(--s2); border:1px solid var(--border);
  border-radius:99px; padding:3px; flex-shrink:0; }
.dfb-seg button{ font:inherit; font-size:12px; font-weight:600; padding:5px 11px; border:0;
  background:transparent; color:var(--text-dim); border-radius:99px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.dfb-seg button:hover{ color:var(--text); }
.dfb-seg button.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.dfb-seg .dfb-c{ font-family:var(--mono); font-size:11px; opacity:.7; }
.dfb-seg .dfb-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* 2/3 · Pill dropdown (choix unique ou multi-select) */
.dfb-pill{ position:relative; display:inline-flex; align-items:center; gap:6px; font:inherit;
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:99px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); cursor:pointer; white-space:nowrap; flex-shrink:0; }
.dfb-pill:hover{ border-color:var(--border-hi); background:var(--s2); }
.dfb-pill .dfb-cv{ width:13px; height:13px; color:var(--muted); }
.dfb-pill .dfb-cv svg{ width:13px; height:13px; display:block; }
.dfb-pill.act{ background:var(--accent-dim); border-color:color-mix(in srgb,var(--accent) 30%,transparent); color:var(--accent); }
.dfb-pill.act .dfb-cv{ color:var(--accent); }
.dfb-pill .dfb-v{ font-weight:700; }
.dfb-pill .dfb-badge{ font-family:var(--mono); font-size:11px; font-weight:700; background:var(--accent);
  color:#fff; border-radius:99px; padding:0 6px; min-width:16px; text-align:center; }
[data-theme="noir"] .dfb-pill .dfb-badge{ color:#08080a; }

/* Popover */
.dfb-pop{ position:absolute; top:calc(100% + 7px); left:0; z-index:9600; width:230px;
  background:var(--surface); border:1px solid var(--border-hi); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:7px; display:none; }
.dfb-pill.open .dfb-pop, .dfb-slider.open .dfb-pop{ display:block; }
.dfb-pop.dfb-pop-r{ left:auto; right:0; }
.dfb-pit{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--radius);
  font-size:13.5px; font-weight:500; color:var(--text); cursor:pointer; }
.dfb-pit:hover{ background:var(--s2); }
.dfb-pit .dfb-pdot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dfb-pit .dfb-cav{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  font-size:9px; font-weight:700; color:#fff; flex-shrink:0; }
.dfb-pit .dfb-pc{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--muted); }
.dfb-pit .dfb-ck{ margin-left:auto; color:var(--accent); opacity:0; }
.dfb-pit.on .dfb-ck{ opacity:1; }
.dfb-pit .dfb-ck svg{ width:14px; height:14px; display:block; }
.dfb-pit .dfb-box{ width:16px; height:16px; border-radius:5px; border:2px solid var(--border-hi);
  flex-shrink:0; display:grid; place-items:center; color:#fff; }
.dfb-pit.on .dfb-box{ background:var(--accent); border-color:var(--accent); }
.dfb-pit .dfb-box svg{ width:10px; height:10px; opacity:0; }
.dfb-pit.on .dfb-box svg{ opacity:1; }
.dfb-popft{ display:flex; gap:6px; padding:7px 4px 2px; border-top:1px solid var(--border); margin-top:5px; }
.dfb-popft button{ flex:1; font:inherit; font-size:12px; font-weight:600; padding:7px;
  border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
.dfb-popft .dfb-ap{ background:var(--text); color:var(--bg); border-color:transparent; }

/* 4 · Toggle binaire */
.dfb-tgl{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  padding:7px 12px; border-radius:99px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-dim); cursor:pointer; white-space:nowrap; flex-shrink:0; }
.dfb-tgl .dfb-sw{ width:30px; height:18px; border-radius:99px; background:var(--s3); position:relative; transition:.15s; }
.dfb-tgl .dfb-sw::after{ content:''; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:var(--surface); box-shadow:var(--shadow); transition:.15s; }
.dfb-tgl.on{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%,transparent); background:var(--accent-dim); }
.dfb-tgl.on .dfb-sw{ background:var(--accent); }
.dfb-tgl.on .dfb-sw::after{ left:14px; }

/* 5 · Slider (plage numerique) */
.dfb-slider{ position:relative; flex-shrink:0; }
.dfb-slider .dfb-pop{ width:250px; }

/* 6 · Recherche */

/* 7 · View-switch */
.dfb-vswitch{ display:inline-flex; align-self:center; background:transparent; border:1px solid transparent;
  border-radius:var(--radius); padding:3px; flex-shrink:0; }
.dfb-vswitch button{ display:grid; place-items:center; min-width:28px; height:20px; border:0;
  background:transparent; color:var(--text-dim); border-radius:6px; cursor:pointer; padding:0 7px; font:inherit; font-size:12px; font-weight:600; }
.dfb-vswitch button svg{ width:14px; height:14px; }
.dfb-vswitch button.on{ background:var(--s3); color:var(--text); box-shadow:none; }

/* 8 · Ligne « filtres actifs » */
.dfb-actives{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dfb-achip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  background:var(--surface); border:1px solid var(--border-hi); border-radius:99px; padding:5px 6px 5px 11px; color:var(--text); }
.dfb-achip .dfb-k2{ color:var(--muted); font-weight:500; }
.dfb-achip .dfb-x{ width:17px; height:17px; border-radius:50%; background:var(--s2); display:grid;
  place-items:center; cursor:pointer; color:var(--muted); }
.dfb-achip .dfb-x:hover{ background:var(--chaud); color:#fff; }
.dfb-achip .dfb-x svg{ width:10px; height:10px; display:block; }
.dfb-clr{ font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.dfb-clr:hover{ color:var(--accent); }

/* ---- Intégration par page (masquage sidebar, pleine largeur) ---- */
/* BIENS : barre horizontale -> sidebar masquée, contenu pleine largeur */
body.biens-dfb-on .biens-layout-shellv2{ display:block !important; }
body.biens-dfb-on .biens-sidefilters{ display:none !important; }
body.biens-dfb-on #page-biens .page-view-switcher{ display:none !important; }
body.biens-dfb-on #biens-view-btns{ display:none !important; }
#biens-filterbar{ margin:2px 0 12px; }

/* CLIENTS : barre horizontale -> aside masqué, contenu pleine largeur */
body.clients-dfb-on #page-clients .clients-layout{ display:block !important; }
body.clients-dfb-on #page-clients .clients-sidefilters{ display:none !important; }
#page-clients .dfb-bar{ margin:2px 0 12px; }
/* Popover « Filtres » : accueille la sidebar existante (consultant/pièces/sliders) */

/* [v2021] CLIENTS : le conteneur .clients-filters est display:none à toutes largeurs
   (ancien design). On le force visible quand la barre horizontale est active. */
body.clients-dfb-on #page-clients .clients-main .clients-filters{ display:block !important; }

/* Toggle scope (Mon agence / Tout X) dans le dropdown Consultant */
/* Groupes FpMargot (Prix/Surface) dans le dropdown Budget & surface */
.dfb-pop .fp-group{ margin:0 0 8px; }
.dfb-pop .fp-group:last-child{ margin-bottom:2px; }

/* ============================================================================
   Filtres rétractables (Margot donna__4) : groupe choix-unique qui déroule
   ses options AU SURVOL (gain de place). Préfixe fgrp (self-contained).
   ============================================================================ */
.fgrp{ display:inline-flex; align-items:center; background:var(--s2); border:1px solid var(--border);
  border-radius:99px; padding:2px; overflow:hidden; transition:background .18s; flex-shrink:0; }
.fgrp .opt{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  color:var(--text-dim); padding:3px 10px; border-radius:99px; cursor:pointer; white-space:nowrap; }
.fgrp .opt:hover{ color:var(--text); }
.fgrp .opt .c{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.fgrp .opt .dfb-pdot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.fgrp .opt.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.fgrp .opt.on .c{ color:var(--text-dim); }
.fgrp.col .lead{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); padding-left:8px; padding-right:7px; white-space:nowrap; }
.fgrp.col .rest{ display:inline-flex; align-items:center; max-width:0; opacity:0; overflow:hidden;
  transition:max-width .32s cubic-bezier(.3,.7,.3,1), opacity .22s ease; }
.fgrp.col:hover .rest, .fgrp.col:focus-within .rest{ max-width:1100px; opacity:1; }
.fgrp.col .chev{ display:inline-flex; align-items:center; justify-content:center; width:20px;
  color:var(--muted); transition:transform .25s; }
.fgrp.col .chev svg{ width:13px; height:13px; transform:rotate(-90deg); }
.fgrp.col:hover .chev, .fgrp.col:focus-within .chev{ transform:rotate(180deg); }
/* Dropdown Clients qui ouvre AUSSI au survol (secours si le clic est capté ailleurs) */

/* [v2031] Badges DPE couleur (A vert -> G rouge) */
.dfb-dpe{ display:inline-grid; place-items:center; min-width:19px; height:17px; padding:0 3px;
  border-radius:4px; color:#fff; font-weight:800; font-size:10.5px; text-shadow:0 1px 1px rgba(0,0,0,.28); }
/* [v2031] Toggle Favoris à la même hauteur que les groupes fgrp */
.dfb-tgl{ padding:5px 12px !important; font-size:11.5px !important; gap:7px !important; }
.dfb-tgl .dfb-sw{ width:26px !important; height:15px !important; }
.dfb-tgl .dfb-sw::after{ width:11px !important; height:11px !important; }
.dfb-tgl.on .dfb-sw::after{ left:13px !important; }
/* [v2031] Biens : réduire le gap barre <-> contenu (ctrl-row redondante masquée) */
body.biens-dfb-on #biens-ctrl-row{ display:none !important; }
body.biens-dfb-on #biens-arr-chips:empty{ display:none !important; margin:0 !important; }

/* [v2032] Biens : le .page-toolbar-row (conteneur du view-switcher séparé, déjà
   dans la barre) crée un gros gap sous le rail -> masqué. Padding contenu réduit. */
body.biens-dfb-on #page-biens .page-toolbar-row{ display:none !important; }
body.biens-dfb-on .biens-rail-donna{ margin:0 0 6px !important; }

/* [v2034] Biens : élimination AGRESSIVE du gap au-dessus de la barre (toutes sources). */
body.biens-dfb-on #biens-content{ padding-top:0 !important; gap:8px !important; }
body.biens-dfb-on #biens-content > #biens-arr-chips{ display:none !important; }
body.biens-dfb-on #biens-content > #biens-ctrl-row{ display:none !important; }
body.biens-dfb-on #page-biens .page-toolbar-row{ display:none !important; height:0 !important; margin:0 !important; padding:0 !important; }
body.biens-dfb-on #page-biens .page-view-switcher{ display:none !important; }
body.biens-dfb-on #biens-filterbar{ margin:0 !important; }

/* ============================================================================
   [v2035] Kit filtres complet (Margot donna__5) : contrôles adaptés au type de
   donnée. Popovers en POSITION:FIXED (positionnés par JS) -> échappent à tout
   clipping overflow (le blocage historique). Préfixe df- (évite collisions
   avec .chip/.badge/.dot/.btn du codebase).
   ============================================================================ */
.df-dd{ position:relative; flex-shrink:0; }
.df-pill{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12px; font-weight:600;
  color:var(--text-dim); background:transparent; border:1px solid transparent; border-radius:var(--radius-sm);
  padding:7px 11px; cursor:pointer; white-space:nowrap; transition:background .15s,border-color .15s,color .15s; }
.df-pill:hover{ background:var(--s2); border-color:transparent; }
.df-pill .lb{ color:var(--muted); font-weight:700; }
.df-pill .vl{ color:var(--text); }
.df-pill .chev{ display:inline-flex; color:var(--muted); transition:transform .2s; }
.df-pill .chev svg{ width:13px; height:13px; display:block; }
.df-dd.open .df-pill{ background:var(--surface); border-color:var(--border-hi); color:var(--text); box-shadow:var(--shadow); }
.df-dd.open .df-pill .chev{ transform:rotate(180deg); }
.df-pill.applied{ background:var(--accent-dim); border-color:color-mix(in srgb,var(--accent) 24%,transparent); color:var(--text); }
.df-pill.applied .lb{ color:var(--accent); }
.df-pill .badge{ min-width:16px; height:16px; padding:0 5px; border-radius:99px; background:var(--accent);
  color:#fff; font-family:var(--mono); font-size:10px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
[data-theme="noir"] .df-pill .badge{ color:#08080a; }
.df-pill .xr{ display:inline-flex; margin-left:1px; margin-right:-3px; color:var(--muted); border-radius:50%; padding:1px; }
.df-pill .xr:hover{ background:var(--s3); color:var(--text); }
.df-pill .xr svg{ width:12px; height:12px; }
/* Popover en position:fixed (JS pose top/left). Caché par défaut. */
.df-pop{ position:fixed; z-index:9800; min-width:236px; max-width:320px; max-height:72vh; overflow-y:auto; background:var(--surface);
  border:1px solid var(--border-hi); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:7px;
  opacity:0; transform:translateY(-5px) scale(.98); transform-origin:top left; pointer-events:none;
  transition:opacity .14s, transform .14s; display:none; }
.df-pop.show{ display:block; opacity:1; transform:none; pointer-events:auto; }
.df-opt2{ display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:500; color:var(--text); cursor:pointer; }
.df-opt2:hover{ background:var(--s2); }
.df-opt2 .cnt{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--muted); }
.df-opt2 .df-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.df-av{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:9.5px; font-weight:700; color:#fff; flex-shrink:0; }
/* radio (select) */
.df-opt2 .rk{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border-hi); flex-shrink:0; display:grid; place-items:center; }
.df-opt2.sel .rk{ border-color:var(--accent); }
.df-opt2.sel .rk::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
/* checkbox (multi) */
.df-opt2 .ckb{ width:16px; height:16px; border-radius:5px; border:1.5px solid var(--border-hi); flex-shrink:0; display:grid; place-items:center; color:#fff; }
.df-opt2 .ckb svg{ width:11px; height:11px; opacity:0; }
.df-opt2.sel .ckb{ background:var(--accent); border-color:var(--accent); }
.df-opt2.sel .ckb svg{ opacity:1; }
/* footer (multi / range) */
.df-popft{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 6px 3px; margin-top:4px; border-top:1px solid var(--border); }
.df-lnk{ font:inherit; font-size:12px; font-weight:600; color:var(--text-dim); background:transparent; border:0; cursor:pointer; padding:5px 6px; border-radius:var(--radius-sm); }
.df-lnk:hover{ color:var(--text); }
.df-btn{ font:inherit; font-size:12.5px; font-weight:700; color:var(--bg); background:var(--text); border:0; border-radius:var(--radius-sm); padding:7px 14px; cursor:pointer; }
/* search dans popover */
.df-popsearch{ display:flex; align-items:center; gap:8px; padding:6px 9px; margin-bottom:4px; border-bottom:1px solid var(--border); }
.df-popsearch svg{ width:14px; height:14px; color:var(--muted); flex-shrink:0; }
.df-popsearch input{ font:inherit; font-size:13px; border:0; background:transparent; color:var(--text); width:100%; outline:none; }
/* [v2111] Hint sous le champ Zone : les 3 zones les plus fournies + leur
   compteur. On garde l'info que donnait la liste a cocher, sans la liste. */
.df-pophint{ padding:2px 10px 8px; font-size:11px; line-height:1.45; color:var(--muted); }

/* range */
.df-rng{ padding:6px 5px 2px; }
.df-rngrow{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.df-rngin{ flex:1; display:flex; align-items:center; gap:5px; background:var(--s2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 9px; }
.df-rngin input{ font:inherit; font-size:13px; font-weight:600; border:0; background:transparent; color:var(--text); width:100%; outline:none; }
.df-rngin .u{ font-size:11px; color:var(--muted); }
.df-rngsep{ color:var(--muted); }
.df-presets{ display:flex; flex-wrap:wrap; gap:6px; }
.df-preset{ font:inherit; font-size:12px; font-weight:600; color:var(--text-dim); background:var(--s2); border:1px solid var(--border); border-radius:99px; padding:5px 11px; cursor:pointer; }
.df-preset:hover{ border-color:var(--border-hi); }
.df-preset.on{ background:var(--accent-dim); border-color:color-mix(in srgb,var(--accent) 30%,transparent); color:var(--accent); }
/* toggle (df-tog) */
.df-tog{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--text-dim); background:transparent !important; border-color:transparent !important; border-radius:var(--radius-sm);
  background:var(--s2); border:1px solid var(--border); border-radius:99px; padding:4px 12px 4px 13px; cursor:pointer;
  white-space:nowrap; user-select:none; flex-shrink:0; }
.df-tog:hover{ background:var(--s2) !important; }
.df-tog .sw{ width:28px; height:16px; border-radius:99px; background:var(--border-hi); position:relative; transition:background .18s; flex-shrink:0; }
.df-tog .sw::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,.25); }
.df-tog.on{ background:var(--accent-dim) !important; border-color:color-mix(in srgb,var(--accent) 24%,transparent) !important; color:var(--text); }
.df-tog.on .sw{ background:var(--accent); }
.df-tog.on .sw::after{ left:14px; }

/* [v2038] Ligne "Filtres actifs" supprimée (redondante) : l'état vit dans les pills
   (violet + valeur + badge), la croix par pill efface un filtre, "Tout effacer" en bout de barre. */
body.clients-dfb-on .active-chips,
body.biens-dfb-on .active-chips{ display:none !important; }
/* [b2231] Ceinture : la barre HOTE des chips n'existe que pour eux. Contenu
   masque + .page-chips-bar{margin:12px 0} = bloc vide de hauteur 0 dont les
   marges fusionnent -> 12px de vide fantome sous la bande de filtres. */
body.clients-dfb-on .page-chips-bar,
body.biens-dfb-on .page-chips-bar{ display:none !important; margin:0 !important; }
.df-allclear{ background:none; border:0; color:var(--accent); font-weight:600; font-size:12.5px; cursor:pointer; padding:6px 10px; white-space:nowrap; align-self:center; border-radius:8px; flex:0 0 auto; }
.df-allclear:hover{ background:var(--accent-dim); }

/* [v2041] Prospects : barre kit alignée sur l'ancienne prp-toolbar (marge basse) */
#page-prospects .dfb-bar{ margin:0 0 12px; }

/* [v2046] Prospection a un reset `.pp-scope *{margin:0;padding:0}` qui écrase le padding
   des éléments du kit (règles à une seule classe). On restaure explicitement avec une
   spécificité supérieure (.pp-scope .df-* = 0,2,0 > .pp-scope * = 0,1,0). */
.pp-scope .df-pop{ padding:7px; }
.pp-scope .df-opt2{ padding:8px 9px; }
.pp-scope .dfb-bar{ padding:9px 11px; }
.pp-scope .df-pill{ padding:7px 11px; }
.pp-scope .df-popft{ padding:7px 6px 3px; margin-top:4px; }
.pp-scope .df-popsearch{ padding:6px 9px; margin-bottom:4px; }
.pp-scope .df-lnk{ padding:5px 6px; }
.pp-scope .df-btn{ padding:7px 14px; }
.pp-scope .df-rng{ padding:6px 5px 2px; }
.pp-scope .df-rngin{ padding:6px 9px; }
.pp-scope .df-preset{ padding:5px 11px; }
.pp-scope .df-allclear{ padding:6px 10px; }
.pp-scope .dfb-vswitch{ padding:3px; }
.pp-scope .dfb-vswitch button{ padding:0 7px; }
.pp-scope .df-rngrow{ margin-bottom:10px; }