/* ═══════════════════════════════════════════════════════════════════
   donna — bien-page-v2-c9fcc6af.css  (cleané)
   ─ z-index migrés vers tokens (--z-* dans _z-index-scale.css) : 2 occurrence(s)
   ─ Aucune autre modification. Voir CHANGELOG.md.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   bien-page-v2.css  ·  v326
   Fiche bien pleine page (design Margot)
   Tout est scoped sous #page-bien pour ne pas polluer le reste.
   Tokens : utilise les --bg/--surface/--text/etc globaux Margot
            (themes.css warm/noir).
   ═══════════════════════════════════════════════════════════════════ */

/* ───── Container racine ───── */
#page-bien{
  --fbf-mauve: var(--mauve, #8257e5);
}
#page-bien .fbf-wrap{
  max-width: 1400px;
  margin: 0 auto;
  /* [v1094 fix #97 vrai] padding-bottom 80px (le vrai fix était le sticky rail .fbf-rail, voir plus bas).
     Garde 80px pour confort scroll global. */
  padding: 16px 28px 80px;
  font-family: 'Inter', sans-serif;
}

/* ───── Topbar (breadcrumb + actions globales) ─────
   [v1010] Anthony : même style que fiche client (.cpv2-topbar).
   - Sticky au scroll (top:0 z-index:60)
   - Edge-to-edge : compensation 24px pour padding .shellv2-main (#page-bien
     n'a pas de padding latéral inline contrairement à #page-clients)
   - Bouton back en position:absolute → "Biens" reste à la même position X
     que la page liste Biens.
   - Le .fbf-topbar est maintenant SORTI du .fbf-wrap (cf bien-page-v2.js
     renderBienPageV2). */
#page-bien .fbf-topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  margin: 0 calc(-1 * var(--shellv2-main-px, 24px)) 16px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--border);
  display: block;
}

/* Le .ph Margot DANS le sticky container : neutralise son sticky natif et
   ses margins négatifs natifs. Padding aligné avec page liste Biens
   (= 14 + 24 = 38px). */
#page-bien .fbf-topbar .ph.fbf-ph{
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  padding: 0 calc(14px + var(--shellv2-main-px, 24px)) !important;
  border-bottom: none !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

/* Bouton back en position absolute → hors flow → "Biens" reste à la
   position de la page liste. */
#page-bien .fbf-topbar .ph.fbf-ph .ph-back{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Reset des anciens styles .fbf-crumbs (legacy) au cas où */

#page-bien .fbf-topbar-actions{ display: flex; align-items: center; gap: 8px }

/* ───── Title row ───── */
#page-bien .fbf-title-row{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
#page-bien .fbf-title-row h1{
  font-family: 'Inter', sans-serif;
  font-size: 26px; font-weight: 700;
  letter-spacing: -.5px;
  color: var(--text);
  margin: 0 0 6px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#page-bien .fbf-title-row .subtitle{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-dim, var(--muted));
  flex-wrap: wrap;
}
#page-bien .fbf-title-row .subtitle .sep{ color: var(--muted); opacity: .5 }
#page-bien .fbf-title-row .subtitle a{
  color: var(--text-dim, var(--muted));
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--border-hi, var(--border));
}
#page-bien .fbf-title-row .subtitle a:hover{ color: var(--text); text-decoration-color: var(--text-dim) }
#page-bien .fbf-title-actions{ display: flex; align-items: center; gap: 6px; flex-shrink: 0 }

/* ───── Boutons + view toggle ───── */
#page-bien .fbf-icon-btn{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--surface); color: var(--text-dim, var(--muted));
  border: 1px solid var(--border); border-radius: var(--radius, 4px);
  cursor: pointer; font-family: inherit; transition: all .12s;
}
#page-bien .fbf-icon-btn:hover{ background: var(--s2); color: var(--text); border-color: var(--border-hi, var(--border)) }
#page-bien .fbf-btn{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 500;
  background: var(--s2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius, 4px);
  cursor: pointer; font-family: inherit; transition: all .12s; height: 34px;
}
#page-bien .fbf-btn:hover{ background: var(--s3, var(--s2)); border-color: var(--border-hi, var(--border)) }
#page-bien .fbf-btn.primary{ background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600 }
#page-bien .fbf-btn.primary:hover{ background: var(--text-dim, var(--muted)); border-color: var(--text-dim, var(--muted)) }
#page-bien .fbf-view-toggle{
  display: inline-flex; gap: 0; padding: 2px;
  background: var(--s2); border: 1px solid var(--border); border-radius: var(--radius, 4px);
}
#page-bien .fbf-view-toggle button{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  color: var(--text-dim, var(--muted));
  border-radius: 3px; transition: all .12s;
  background: transparent; border: none; cursor: pointer; font-family: inherit;
}
#page-bien .fbf-view-toggle button:hover{ color: var(--text) }
#page-bien .fbf-view-toggle button[data-active="true"]{
  background: var(--surface); color: var(--text); font-weight: 600;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}

/* ───── Hero galerie photos (Airbnb) — v360 : grid 2-col 50/50, explicite ───── */
#page-bien .fbf-hero{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 6px;
  height: 440px;
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  position: relative;
  margin-bottom: 24px;
  background: var(--s3, var(--s2));
}

#page-bien .fbf-hero-cell.main{
  grid-column: 1; grid-row: 1;
  height: 100%;
}
#page-bien .fbf-hero-cell.placeholder{
  display: grid; place-items: center;
  color: var(--muted); font-size: 11px;
}
/* Right side : grid 2x2 pour photos 2-5 */

/* Layouts réduits selon le nombre de photos à droite */

/* n=1 photo (main seule) : prend 100% */
#page-bien .fbf-hero.fbf-hero-n1{
  grid-template-columns: 1fr;
}
#page-bien .fbf-hero.fbf-hero-n1 .fbf-hero-cell.main{
  grid-column: 1;
}
#page-bien .fbf-hero-all-btn{
  position: absolute; bottom: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 600;
  border-radius: var(--radius, 4px);
  border: 1px solid var(--border-hi, var(--border));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
  cursor: pointer; font-family: inherit; z-index: 2; transition: all .12s;
}
#page-bien .fbf-hero-all-btn:hover{ background: var(--s2) }
#page-bien .fbf-hero-count{
  position: absolute; bottom: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: rgba(20,22,31,.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 11px; font-weight: 500;
  border-radius: var(--radius, 4px); z-index: 2;
  font-variant-numeric: tabular-nums;
}

/* ───── Body 2 colonnes ───── */
#page-bien .fbf-body{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: start;
}
/* [v1096 fix #97 — pattern v898 fiche client] Anthony : "même bug que sur la fiche client
   avec le cadre donna instinct". Cause root du sticky qui ne marche pas : le scroll container
   réel est .shellv2-main (height:100vh; overflow-y:auto), pas le viewport. Donc position:sticky
   du rail s'accroche par rapport à .shellv2-main. Le grid .fbf-body prend la hauteur de
   max(fbf-main, fbf-rail). Si fbf-main est COURT (peu de tabs ouvert), grid = fbf-rail =
   le rail prend toute la hauteur → 0 room pour sticky → rail "scrolle" au lieu de stick.
   FIX (cf v898 client) : forcer min-height sur fbf-main pour garantir que le grid >= viewport
   hauteur, ce qui donne de la room au rail sticky. PAS de scroll interne (qui était mon v1094
   raté → pénible UX, double scroll). */
#page-bien .fbf-main{
  min-width: 0;
  min-height: calc(100vh - 80px);
}
#page-bien .fbf-rail{
  /* [v1110 bug #98 Anthony] Avant : top: 16px. La .fbf-topbar au-dessus est sticky
     top: 0 avec hauteur ~40px + border-bottom = 41px. Donc le rail (top:16px) passait
     SOUS la topbar au scroll → "1 695 000 €" tronqué (cf screen Anthony 13mai). 
     Fix : top: 60px (40 topbar + 1 border + 19 respiration). */
  position: sticky; top: 60px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ───── Tabs ───── */
#page-bien .fbf-tabs{
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto; scrollbar-width: none;
}
#page-bien .fbf-tabs::-webkit-scrollbar{ display: none }
#page-bien .fbf-tab{
  padding: 10px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--text-dim, var(--muted));
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .12s;
  background: transparent; border-top: none; border-left: none; border-right: none;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
#page-bien .fbf-tab:hover{ color: var(--text) }
#page-bien .fbf-tab[data-active="true"]{
  color: var(--text); font-weight: 600;
  border-bottom-color: var(--text);
}
#page-bien .fbf-tab .count{
  font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  background: var(--s2); color: var(--text-dim, var(--muted));
  font-variant-numeric: tabular-nums;
}
#page-bien .fbf-tab[data-active="true"] .count{
  background: var(--accent-dim, color-mix(in srgb, var(--accent) 9%, transparent));
  color: var(--accent);
}

/* ───── Panel ───── */
#page-bien .fbf-panel{ display: flex; flex-direction: column; gap: 28px }
#page-bien .fbf-section{ display: flex; flex-direction: column; gap: 12px }
#page-bien .fbf-section-head{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#page-bien .fbf-section-head h2{
  font-family: 'Inter', sans-serif;
  font-size: 17px; font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text);
  margin: 0;
}
#page-bien .fbf-section-head .link{
  font-size: 12px; font-weight: 500;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}
#page-bien .fbf-section-head .link:hover{ text-decoration: underline }

/* ───── KPI big grid (Aperçu) ───── */
#page-bien .fbf-kpi-row{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
#page-bien .fbf-kpi-big{
  padding: 14px 16px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 4px);
  position: relative; transition: all .12s;
}
#page-bien .fbf-kpi-big .kpi-label{
  font-size: 10px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
#page-bien .fbf-kpi-big .kpi-value{
  font-size: 17px; font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
#page-bien .fbf-kpi-big .kpi-sub{
  font-size: 11px; color: var(--text-dim, var(--muted));
  margin-top: 2px;
}

/* ───── Description block ───── */
#page-bien .fbf-desc{
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  font-size: 14px; line-height: 1.65;
  color: var(--text-dim, var(--muted));
  white-space: pre-wrap;
}

/* ───── KV grid (Détail du bien) ───── */
#page-bien .fbf-kv-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  background: var(--surface);
}
#page-bien .fbf-kv{
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
#page-bien .fbf-kv:hover{ background: var(--s2) }
#page-bien .fbf-kv:nth-child(3n){ border-right: none }
#page-bien .fbf-kv:nth-last-child(-n+3){ border-bottom: none }
#page-bien .fbf-kv-lbl{
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px;
}
#page-bien .fbf-kv-val{
  font-size: 13.5px; font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ───── Tags + pills (shared) ───── */
#page-bien .fb-pill{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  border-radius: 999px;
  letter-spacing: .1px;
  border: 1px solid transparent;
}
#page-bien .fb-pill.mandat{
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
#page-bien .fb-pill.exclu{
  background: var(--surface); color: var(--text);
  border-color: var(--border-hi, var(--border));
}
#page-bien .fb-tags{ display: flex; flex-wrap: wrap; gap: 5px }
#page-bien .fb-tag{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-size: 11.5px; font-weight: 500;
  color: var(--text);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
#page-bien .fb-tag .tag-emoji{ font-size: 11px }

/* ───── Diags (DPE/GES bars) ───── */
#page-bien .fbf-diag-big{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
#page-bien .fb-diag{
  padding: 16px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 4px);
}
#page-bien .fb-diag-label{
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
#page-bien .fb-diag-bars{ display: flex; flex-direction: column; gap: 2px }
#page-bien .fb-diag-row{
  display: grid; grid-template-columns: 14px 1fr;
  align-items: center; gap: 6px;
  height: 16px;
}
#page-bien .fb-diag-row .grade{
  font-size: 11px; font-weight: 700;
  color: var(--text-dim, var(--muted));
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
#page-bien .fb-diag-row .bar{
  height: 12px; border-radius: 2px;
  background: var(--s3, var(--s2));
  position: relative; overflow: hidden;
}
#page-bien .fb-diag-row .bar-fill{ height: 100%; border-radius: 2px; transition: width .3s ease }
/* Inactives : encore plus dim pour mieux faire ressortir la classe active */
#page-bien .fb-diag-row:not([data-active="true"]) .bar-fill{ opacity: .22 }
#page-bien .fb-diag-row:not([data-active="true"]) .grade{ opacity: .55 }
/* Active : pastille carrée colorée (style étiquette DPE officielle) */
#page-bien .fb-diag-row[data-active="true"]{
  grid-template-columns: 22px 1fr;
  height: 22px;
  margin: 2px 0;
}
#page-bien .fb-diag-row[data-active="true"] .grade{
  width: 18px; height: 18px; line-height: 18px;
  margin: 0 auto;
  font-size: 12px; font-weight: 800;
  color: #fff;
  border-radius: 3px;
  background: var(--text);
}
#page-bien .fb-diag-row[data-active="true"] .bar{ height: 18px }
#page-bien .fb-diag-row[data-active="true"] .bar-fill{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) }
/* Couleur pastille DPE active = couleur de la classe */
#page-bien .fb-diag[data-kind="dpe"] .fb-diag-row[data-active="true"][data-grade="A"] .grade{ background: #00a67e }
#page-bien .fb-diag[data-kind="dpe"] .fb-diag-row[data-active="true"][data-grade="B"] .grade{ background: #52b155 }
#page-bien .fb-diag[data-kind="dpe"] .fb-diag-row[data-active="true"][data-grade="C"] .grade{ background: #c5cf39; color: #14161f }
#page-bien .fb-diag[data-kind="dpe"] .fb-diag-row[data-active="true"][data-grade="D"] .grade{ background: #fae100; color: #14161f }
#page-bien .fb-diag[data-kind="dpe"] .fb-diag-row[data-active="true"][data-grade="E"] .grade{ background: #f9b234; color: #14161f }
#page-bien .fb-diag[data-kind="dpe"] .fb-diag-row[data-active="true"][data-grade="F"] .grade{ background: #e9592b }
#page-bien .fb-diag[data-kind="dpe"] .fb-diag-row[data-active="true"][data-grade="G"] .grade{ background: #c81e1e }
/* Couleur pastille GES active = mauve gradué */
#page-bien .fb-diag[data-kind="ges"] .fb-diag-row[data-active="true"][data-grade="A"] .grade{ background: color-mix(in srgb, var(--fbf-mauve) 55%, #ffffff); color: #14161f }
#page-bien .fb-diag[data-kind="ges"] .fb-diag-row[data-active="true"][data-grade="B"] .grade{ background: color-mix(in srgb, var(--fbf-mauve) 70%, #ffffff); color: #14161f }
#page-bien .fb-diag[data-kind="ges"] .fb-diag-row[data-active="true"][data-grade="C"] .grade{ background: color-mix(in srgb, var(--fbf-mauve) 85%, #ffffff) }
#page-bien .fb-diag[data-kind="ges"] .fb-diag-row[data-active="true"][data-grade="D"] .grade{ background: var(--fbf-mauve) }
#page-bien .fb-diag[data-kind="ges"] .fb-diag-row[data-active="true"][data-grade="E"] .grade{ background: color-mix(in srgb, var(--fbf-mauve) 90%, #000000) }
#page-bien .fb-diag[data-kind="ges"] .fb-diag-row[data-active="true"][data-grade="F"] .grade{ background: color-mix(in srgb, var(--fbf-mauve) 75%, #000000) }
#page-bien .fb-diag[data-kind="ges"] .fb-diag-row[data-active="true"][data-grade="G"] .grade{ background: color-mix(in srgb, var(--fbf-mauve) 55%, #000000) }
#page-bien .fb-diag[data-kind="dpe"] .bar-fill[data-g="A"]{ background: #00a67e }
#page-bien .fb-diag[data-kind="dpe"] .bar-fill[data-g="B"]{ background: #52b155 }
#page-bien .fb-diag[data-kind="dpe"] .bar-fill[data-g="C"]{ background: #c5cf39 }
#page-bien .fb-diag[data-kind="dpe"] .bar-fill[data-g="D"]{ background: #fae100 }
#page-bien .fb-diag[data-kind="dpe"] .bar-fill[data-g="E"]{ background: #f9b234 }
#page-bien .fb-diag[data-kind="dpe"] .bar-fill[data-g="F"]{ background: #e9592b }
#page-bien .fb-diag[data-kind="dpe"] .bar-fill[data-g="G"]{ background: #c81e1e }
#page-bien .fb-diag[data-kind="ges"] .bar-fill{ background: var(--fbf-mauve) }
#page-bien .fb-diag[data-kind="ges"] .bar-fill[data-g="A"]{ background: color-mix(in srgb, var(--fbf-mauve) 40%, #ffffff) }
#page-bien .fb-diag[data-kind="ges"] .bar-fill[data-g="B"]{ background: color-mix(in srgb, var(--fbf-mauve) 55%, #ffffff) }
#page-bien .fb-diag[data-kind="ges"] .bar-fill[data-g="C"]{ background: color-mix(in srgb, var(--fbf-mauve) 70%, #ffffff) }
#page-bien .fb-diag[data-kind="ges"] .bar-fill[data-g="D"]{ background: color-mix(in srgb, var(--fbf-mauve) 80%, #ffffff) }
#page-bien .fb-diag[data-kind="ges"] .bar-fill[data-g="E"]{ background: var(--fbf-mauve) }
#page-bien .fb-diag[data-kind="ges"] .bar-fill[data-g="F"]{ background: color-mix(in srgb, var(--fbf-mauve) 85%, #000000) }
#page-bien .fb-diag[data-kind="ges"] .bar-fill[data-g="G"]{ background: color-mix(in srgb, var(--fbf-mauve) 65%, #000000) }
#page-bien .fbf-diag-bottom{
  display: flex; justify-content: space-between;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim, var(--muted));
}
#page-bien .fbf-diag-bottom strong{
  color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ───── Map + transports block ───── */
#page-bien .fbf-map-block{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 12px;
  align-items: stretch;
}
#page-bien .fbf-map-big{
  position: relative;
  height: 300px;
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  background: var(--s2);
  border: 1px solid var(--border);
}
#page-bien .fbf-map-big iframe{ width: 100%; height: 100%; border: none; display: block }
#page-bien .fbf-transports-big{
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  display: flex; flex-direction: column; gap: 6px;
  height: 300px;
  overflow-y: auto;
}
#page-bien .fb-transports-label{
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

/* ───── Annonce preview + portails ───── */
#page-bien .fbf-annonce-preview{
  border: 1px dashed var(--border-hi, var(--border));
  border-radius: var(--radius-lg, 8px);
  padding: 18px 20px;
  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
  display: flex; flex-direction: column; gap: 14px;
}
#page-bien .fbf-annonce-hero{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
}
#page-bien .fbf-annonce-hero img{
  width: 120px; height: 96px;
  border-radius: var(--radius, 4px);
  object-fit: cover;
}
#page-bien .fbf-annonce-hero h4{
  font-family: 'Inter', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--text); margin: 0 0 4px;
}
#page-bien .fbf-annonce-hero .price{
  font-size: 15px; font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
#page-bien .fbf-annonce-hero .meta{ font-size: 12px; color: var(--text-dim, var(--muted)) }
#page-bien .fbf-annonce-text{
  font-size: 13px;
  color: var(--text-dim, var(--muted));
  line-height: 1.55;
  white-space: pre-wrap;
}
#page-bien .fbf-portal-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
#page-bien .fbf-portal{
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 4px);
  text-align: center;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
#page-bien .fbf-portal .name{ font-size: 12px; font-weight: 600; color: var(--text) }
#page-bien .fbf-portal .status{
  font-size: 10.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}
#page-bien .fbf-portal .status.on{ color: var(--green) }
#page-bien .fbf-portal .status.off{ color: var(--muted) }
#page-bien .fbf-portal .status .dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor }

/* ───── Rail droite (sticky) ───── */
#page-bien .fbf-rail-card{
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  display: flex; flex-direction: column; gap: 14px;
}
#page-bien .fbf-rail-price{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
#page-bien .fbf-rail-price .val{
  font-family: 'Inter', sans-serif;
  font-size: 24px; font-weight: 700;
  letter-spacing: -.4px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
#page-bien .fbf-rail-price .m2{
  font-size: 12px; color: var(--text-dim, var(--muted));
  font-variant-numeric: tabular-nums;
}
#page-bien .fbf-rail-net{
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: var(--s2);
  border-radius: var(--radius, 4px);
  font-size: 12px;
}
#page-bien .fbf-rail-net .row{
  display: flex; justify-content: space-between;
  color: var(--text-dim, var(--muted));
}
#page-bien .fbf-rail-net .row strong{ color: var(--text); font-weight: 600 }
#page-bien .fbf-rail-section{
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
#page-bien .fbf-rail-section-title{
  font-size: 10px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted);
}
#page-bien .fbf-rail-person{
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: var(--radius, 4px);
  transition: background .12s;
}
#page-bien .fbf-rail-person:hover{ background: var(--s2) }
#page-bien .fbf-rail-person .av{
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--fbf-mauve));
  color: #fff; display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
}
#page-bien .fbf-rail-person .info{ flex: 1; min-width: 0 }
#page-bien .fbf-rail-person .name{ font-size: 13px; font-weight: 600; color: var(--text) }
#page-bien .fbf-rail-person .role{ font-size: 11px; color: var(--muted) }
#page-bien .fbf-rail-contact{ display: flex; gap: 4px }
#page-bien .fbf-rail-contact a,
#page-bien .fbf-rail-contact button{
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px;
  font-size: 11.5px; font-weight: 500;
  color: var(--text);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 4px);
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: all .12s;
}
#page-bien .fbf-rail-contact a:hover,
#page-bien .fbf-rail-contact button:hover{ background: var(--s3, var(--s2)); border-color: var(--border-hi, var(--border)) }
#page-bien .fbf-rail-actions{ display: flex; flex-direction: column; gap: 6px }
#page-bien .fbf-rail-actions button{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px;
  font-size: 12.5px; font-weight: 500;
  border-radius: var(--radius, 4px);
  cursor: pointer; font-family: inherit;
  transition: all .12s; border: 1px solid transparent;
}
#page-bien .fbf-rail-actions .primary{
  background: var(--text); color: var(--bg);
  border-color: var(--text); font-weight: 600;
}
#page-bien .fbf-rail-actions .primary:hover{ background: var(--text-dim, var(--muted)); border-color: var(--text-dim, var(--muted)) }
#page-bien .fbf-rail-actions .secondary{
  background: var(--s2); color: var(--text);
  border-color: var(--border);
}
#page-bien .fbf-rail-actions .secondary:hover{ background: var(--s3, var(--s2)); border-color: var(--border-hi, var(--border)) }

/* ───── Client mode callout ───── */
#page-bien .fbf-client-callout{
  padding: 14px 18px;
  background: color-mix(in srgb, var(--accent) 5%, var(--s2));
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-lg, 8px);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
#page-bien .fbf-client-callout .ic{
  width: 40px; height: 40px;
  border-radius: var(--radius, 4px);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
#page-bien .fbf-client-callout .text{
  flex: 1; font-size: 13px;
  color: var(--text-dim, var(--muted)); line-height: 1.5;
}
#page-bien .fbf-client-callout .text strong{ color: var(--text) }

/* ───── Placeholder pour onglets Phase 2 ───── */
#page-bien .fbf-placeholder{
  text-align: center;
  padding: 60px 20px;
  background: var(--s2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg, 8px);
  color: var(--muted);
  font-size: 13px;
}
#page-bien .fbf-placeholder strong{ color: var(--text); display: block; margin-bottom: 6px; font-size: 14px }

/* ───── Onglet Documents ───── */
#page-bien .fbf-doc-list{
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  padding: 6px;
}
#page-bien .fbf-doc-row{
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius, 4px);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
#page-bien .fbf-doc-row + .fbf-doc-row{ border-top: 1px solid var(--border) }
#page-bien .fbf-doc-row:hover{ background: var(--s2) }
#page-bien .fbf-doc-row .doc-ic{
  width: 32px; height: 32px;
  border-radius: var(--radius-sm, 3px);
  background: var(--s3, var(--s2));
  color: var(--text-dim, var(--muted));
  display: grid; place-items: center;
}
#page-bien .fbf-doc-row .doc-name{
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#page-bien .fbf-doc-row .doc-cat{
  padding: 2px 8px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .3px; text-transform: uppercase;
  color: var(--text-dim, var(--muted));
  background: var(--s2);
  border-radius: 3px;
}
#page-bien .fbf-doc-row .doc-meta{
  font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ───── Onglet Financier ───── */
#page-bien .fbf-fin-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
#page-bien .fbf-fin-card{
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
}
#page-bien .fbf-fin-card .fin-lbl{
  font-size: 11px; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
#page-bien .fbf-fin-card .fin-val{
  font-family: 'Inter', sans-serif;
  font-size: 26px; font-weight: 700;
  letter-spacing: -.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
#page-bien .fbf-fin-card .fin-breakdown{
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
}
#page-bien .fbf-fin-card .fin-breakdown .row{
  display: flex; justify-content: space-between;
  color: var(--text-dim, var(--muted));
}
#page-bien .fbf-fin-card .fin-breakdown .row strong{ color: var(--text); font-weight: 600 }

/* ───── Onglet Activité (timeline) ───── */
#page-bien .fbf-timeline{
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  padding: 6px;
}
#page-bien .fbf-tl-item{
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius, 4px);
}
#page-bien .fbf-tl-item:hover{ background: var(--s2) }
#page-bien .fbf-tl-item + .fbf-tl-item{ border-top: 1px solid var(--border) }
#page-bien .fbf-tl-item .act-ic{
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
}
#page-bien .fbf-tl-item .act-ic[data-t="photo"]{
  background: color-mix(in srgb, var(--froid) 15%, transparent);
  color: var(--froid);
}
#page-bien .fbf-tl-item .act-ic[data-t="visite"]{
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
}
#page-bien .fbf-tl-item .act-ic[data-t="mandat"]{
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
#page-bien .fbf-tl-item .act-ic[data-t="note"]{
  background: color-mix(in srgb, var(--tiede) 15%, transparent);
  color: var(--tiede);
}
#page-bien .fbf-tl-item .act-ic[data-t="contact"]{
  background: color-mix(in srgb, var(--fbf-mauve) 15%, transparent);
  color: var(--fbf-mauve);
}
#page-bien .fbf-tl-item .tl-content{
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
#page-bien .fbf-tl-item .tl-text{
  font-size: 13px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#page-bien .fbf-tl-item .tl-meta{ font-size: 11.5px; color: var(--muted) }
#page-bien .fbf-tl-item .tl-when{
  font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ───── Onglet Rapprochements (utilise les classes .match-* existantes) ───── */

#page-bien .bpv2-rapp-wrap .rappr-summary{
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
#page-bien .bpv2-rapp-wrap .rappr-count{
  font-family: 'Inter', sans-serif;
  font-size: 22px; font-weight: 800;
}
#page-bien .bpv2-rapp-wrap .rappr-count-lbl{ font-size: 12px; color: var(--muted) }
#page-bien .bpv2-rapp-wrap .match-score-legend{
  margin-left: auto; display: flex; gap: 8px;
  font-size: 10px; color: var(--muted); align-items: center; flex-wrap: wrap;
}
#page-bien .bpv2-rapp-wrap .legend-dot{ width: 8px; height: 8px; border-radius: 50%; display: inline-block }

/* ───── Mobile sticky bottom action bar ───── */
#page-bien .fbf-mobile-actions{ display: none }

/* ───── Responsive ───── */
@media (max-width: 1180px){
  #page-bien .fbf-body{ grid-template-columns: 1fr }
  #page-bien .fbf-rail{ position: static }
  #page-bien .fbf-kpi-row{ grid-template-columns: repeat(3, 1fr) }
  #page-bien .fbf-map-block{ grid-template-columns: 1fr }
  #page-bien .fbf-portal-grid{ grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 720px){
  #page-bien .fbf-wrap{ padding: 10px 12px 90px } /* [v1094] revert v1091 — le vrai fix #97 est sticky max-height sur .fbf-rail */
  #page-bien .fbf-topbar{ padding: 4px 0 10px; gap: 8px; flex-wrap: wrap }
  
  #page-bien .fbf-title-row{ flex-direction: column; align-items: stretch; gap: 8px }
  #page-bien .fbf-title-row h1{ font-size: 20px }
  #page-bien .fbf-title-row .subtitle{ font-size: 12px }
  #page-bien .fbf-title-actions{ display: none }
  #page-bien .fbf-hero{ grid-template-columns: 1fr; grid-template-rows: 240px; height: auto; gap: 0 }
  #page-bien .fbf-hero-cell:not(.main){ display: none }
  #page-bien .fbf-hero-cell.main{ grid-row: 1; grid-column: 1 }
  #page-bien .fbf-tabs{ margin: 0 -12px 14px; padding: 0 12px }
  #page-bien .fbf-tab{ padding: 9px 10px; font-size: 12px }
  #page-bien .fbf-kpi-row{ grid-template-columns: 1fr 1fr }
  #page-bien .fbf-kv-grid{ grid-template-columns: 1fr 1fr }
  #page-bien .fbf-kv-grid .fbf-kv:nth-child(3n){ border-right: 1px solid var(--border) }
  #page-bien .fbf-kv-grid .fbf-kv:nth-child(2n){ border-right: none }
  #page-bien .fbf-diag-big{ grid-template-columns: 1fr }
  #page-bien .fbf-portal-grid{ grid-template-columns: 1fr 1fr }
  #page-bien .fbf-annonce-hero{ grid-template-columns: 1fr }
  #page-bien .fbf-annonce-hero img{ width: 100%; height: 180px }
  #page-bien .fbf-rail-contact{ flex-wrap: wrap }
  #page-bien .fbf-rail-contact a,
  #page-bien .fbf-rail-contact button{ flex: 1 1 calc(33% - 4px); min-width: 0; padding: 7px 6px; font-size: 11px }

  /* Sticky mobile bottom bar */
  #page-bien .fbf-mobile-actions{
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: calc(var(--z-sticky) - 50) /* was 50 */;
    padding: 10px 14px 14px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    gap: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  #page-bien .fbf-mobile-actions .price-col{
    flex: 1; display: flex; flex-direction: column; gap: 0;
    line-height: 1.1;
  }
  #page-bien .fbf-mobile-actions .price-col .p{
    font-family: 'Inter', sans-serif;
    font-size: 17px; font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  #page-bien .fbf-mobile-actions .price-col .m{
    font-size: 11px; color: var(--text-dim, var(--muted));
  }
  #page-bien .fbf-mobile-actions button{
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 14px;
    font-size: 12.5px; font-weight: 600;
    background: var(--text); color: var(--bg);
    border-radius: var(--radius, 4px);
    cursor: pointer; font-family: inherit;
    border: none;
  }
}

/* ───── Print / Export PDF ───── */
@media print{
  body{ background: #fff; color: #000 }
  header, nav, .sidebar, .sidebar-overlay, #toast,
  #page-bien .fbf-topbar, #page-bien .fbf-title-actions,
  #page-bien .fbf-tabs, #page-bien .fbf-rail-actions,
  #page-bien .fbf-hero-all-btn, #page-bien .fbf-hero-count,
  #page-bien .fbf-mobile-actions{ display: none !important }
  #page-bien{ margin-left: 0 !important }
  #page-bien .fbf-body{ grid-template-columns: 1fr; gap: 20px }
  #page-bien .fbf-rail{ position: static; page-break-before: auto }
  #page-bien .fbf-hero{ height: 340px; page-break-inside: avoid }
  #page-bien .fbf-section{ page-break-inside: avoid }
}

/* ═══════════════════════════════════════════════════
   Phase 4 — Favoris, édition inline, supprimer, simulateur
   ═══════════════════════════════════════════════════ */

/* Bouton étoile favori actif */
#page-bien .fbf-icon-btn[data-fav="true"]{
  background: color-mix(in srgb, #f5b800 12%, transparent);
  border-color: color-mix(in srgb, #f5b800 35%, var(--border));
}
#page-bien .fbf-icon-btn[data-fav="true"]:hover{
  background: color-mix(in srgb, #f5b800 20%, transparent);
}

/* Bouton ghost-danger (Supprimer)
   [v783] Style mis à jour : avant ghost discret (border transparent, hover bg
   chaud 8%), maintenant outline rouge solide (border:1px solid var(--chaud)).
   Anthony : "bouton supprimer doit être contouré en rouge". */
#page-bien .fbf-rail-actions .ghost-danger{
  background: transparent;
  color: var(--chaud, #d64560);
  border: 1px solid var(--chaud, #d64560);
  font-weight: 500;
}
#page-bien .fbf-rail-actions .ghost-danger:hover{
  background: color-mix(in srgb, var(--chaud, #d64560) 10%, transparent);
  border-color: var(--chaud, #d64560);
}

/* Champs cliquables / éditables (prix, statut) */
#page-bien .fbf-rail-price .val[onclick],
#page-bien .fb-pill.mandat[onclick]{
  border-radius: 4px;
  transition: background .12s, opacity .12s;
}
#page-bien .fbf-rail-price .val[onclick]:hover{
  background: var(--s2);
  outline: 1px dashed var(--border-hi, var(--border));
  outline-offset: 2px;
}
#page-bien .fb-pill.mandat[onclick]:hover{
  filter: brightness(1.1);
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

/* Description éditable (contenteditable) */
#page-bien .fbf-desc[contenteditable="true"]{
  cursor: text;
  outline: none;
  transition: background .12s, border-color .12s;
}
#page-bien .fbf-desc[contenteditable="true"]:hover{
  background: var(--s2);
}
#page-bien .fbf-desc[contenteditable="true"]:focus{
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ═══════════════════════════════════════════════════
   Simulateur acquéreur (onglet Financier) — Margot style v329b
   ═══════════════════════════════════════════════════ */
#page-bien .bpv2-sim{
  display: flex; flex-direction: column;
  gap: 16px;
}
#page-bien .bpv2-sim-inputs{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
}
#page-bien .bpv2-sim-field{
  display: flex; flex-direction: column;
  gap: 5px;
}
#page-bien .bpv2-sim-lbl{
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
  color: var(--muted);
}
#page-bien .bpv2-sim-input-wrap{
  position: relative;
  display: flex; align-items: stretch;
}
#page-bien .bpv2-sim-input{
  flex: 1; width: 100%;
  padding: 8px 42px 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 500;
  color: var(--text);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 4px);
  outline: none;
  transition: all .12s;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  -moz-appearance: textfield;
  appearance: textfield;
}
#page-bien .bpv2-sim-input::-webkit-outer-spin-button,
#page-bien .bpv2-sim-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
#page-bien .bpv2-sim-input:hover{
  border-color: var(--border-hi, var(--muted));
  background: var(--surface);
}
#page-bien .bpv2-sim-input:focus{
  border-color: var(--text);
  background: var(--surface);
}
#page-bien .bpv2-sim-suffix{
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--muted);
  pointer-events: none;
  user-select: none;
}

/* Highlight mensualité (card accent) */
#page-bien .bpv2-sim-highlight{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--radius-lg, 8px);
}
#page-bien .bpv2-sim-highlight .sim-hl-lbl{
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--accent);
}
#page-bien .bpv2-sim-highlight .sim-hl-val{
  font-family: 'Inter', sans-serif;
  font-size: 26px; font-weight: 700;
  letter-spacing: -.5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
#page-bien .bpv2-sim-highlight .sim-hl-val .per-mo{
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--text-dim, var(--muted));
  letter-spacing: 0;
  margin-left: 2px;
}

/* Breakdown (lignes résultats) */
#page-bien .bpv2-sim-breakdown{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
}
#page-bien .bpv2-sim-row{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 16px;
  align-items: baseline;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-family: 'Inter', sans-serif;
}
#page-bien .bpv2-sim-row:last-child{ border-bottom: none }
#page-bien .bpv2-sim-row .lbl{
  font-size: 13px; font-weight: 500;
  color: var(--text);
}
#page-bien .bpv2-sim-row .sub{
  grid-column: 1 / 2;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
#page-bien .bpv2-sim-row .val{
  font-size: 14px; font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  grid-row: span 2;
}
#page-bien .bpv2-sim-row.total{
  background: var(--s2);
  padding: 16px 18px;
}
#page-bien .bpv2-sim-row.total .lbl{
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: -.1px;
}
#page-bien .bpv2-sim-row.total .val{
  font-family: 'Inter', sans-serif;
  font-size: 17px; font-weight: 700;
  letter-spacing: -.3px;
}

#page-bien .bpv2-sim-disclaimer{
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  padding: 0 4px;
}

@media (max-width: 720px){
  #page-bien .bpv2-sim-inputs{ grid-template-columns: 1fr; padding: 14px }
  #page-bien .bpv2-sim-highlight{ padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 4px }
  #page-bien .bpv2-sim-highlight .sim-hl-val{ font-size: 22px }
}

/* ═══════════════════════════════════════════════════
   Sidebar Biens — item "Mes favoris" distinctif (jaune)
   ═══════════════════════════════════════════════════ */
.bpv2-fav-item{
  transition: background .12s, border-left-color .12s, padding-left .12s;
  position: relative;
  border-left: 2px solid transparent;
}
.bpv2-fav-item .statut-label{
  color: var(--text) !important;
  font-weight: 500;
}
.bpv2-fav-item .statut-count{
  color: #b88800 !important;
  font-weight: 700;
}
.bpv2-fav-item:hover{
  background: color-mix(in srgb, #f5b800 8%, transparent);
}
.bpv2-fav-item.active{
  background: color-mix(in srgb, #f5b800 14%, transparent) !important;
  border-left-color: #f5b800;
}
.bpv2-fav-item.active .statut-label{
  color: #b88800 !important;
  font-weight: 600;
}
:root[data-theme="noir"] .bpv2-fav-item .statut-count,
:root[data-theme="noir"] .bpv2-fav-item.active .statut-label{
  color: #ffd84d !important;
}

/* ═══════════════════════════════════════════════════
   Modal confirm Phase 4 (Archiver bien)
   Modal append à <body> donc pas scoped #page-bien
   ═══════════════════════════════════════════════════ */
.bpv2-confirm-ov{
  position: fixed; inset: 0;
  z-index: calc(var(--z-toast) - 1) /* was 99998 */;
  background: rgba(0, 0, 0, .55);
  display: grid; place-items: center;
  padding: 16px;
  animation: bpv2-lb-fade .12s ease-out;
}
.bpv2-confirm-modal{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 460px; max-width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
  font-family: 'Inter', sans-serif;
}
.bpv2-confirm-modal .fm-head{
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.bpv2-confirm-modal .fm-title{
  font-family: 'Inter', sans-serif;
  font-size: 16px; font-weight: 700;
  letter-spacing: -.2px;
  color: var(--text);
}
.bpv2-confirm-modal .fm-body{ padding: 16px 20px 18px }
.bpv2-confirm-modal .fm-foot{
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--s2);
  display: flex; align-items: center; justify-content: space-between;
}
.bpv2-confirm-modal kbd{
  display: inline-block;
  padding: 1px 5px;
  font-size: 10px; font-weight: 600;
  font-family: ui-monospace, monospace;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
}

/* ───── Lightbox galerie plein écran (v327 Phase 3) ───── */
.bpv2-lb{
  position: fixed; inset: 0;
  z-index: var(--z-toast) /* was 99999 */;
  background: rgba(0, 0, 0, .94);
  display: grid;
  grid-template-rows: 1fr 90px;
  grid-template-columns: 60px 1fr 60px;
  grid-template-areas:
    "prev stage next"
    "thumbs thumbs thumbs";
  align-items: center;
  animation: bpv2-lb-fade .15s ease-out;
}
@keyframes bpv2-lb-fade{ from{ opacity: 0 } to{ opacity: 1 } }

.bpv2-lb-stage{
  grid-area: stage;
  display: grid; place-items: center;
  height: 100%; max-height: calc(100vh - 90px);
  padding: 20px 8px;
  overflow: hidden;
  cursor: zoom-out;
}
.bpv2-lb-stage img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  cursor: default;
  user-select: none;
}

.bpv2-lb-close{
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all .15s;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bpv2-lb-close:hover{ background: rgba(255,255,255,.2); transform: scale(1.06) }

.bpv2-lb-counter{
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 12px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  border-radius: 20px;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bpv2-lb-counter span{ font-weight: 700 }

.bpv2-lb-nav{
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all .15s;
  margin: 0 auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bpv2-lb-nav.prev{ grid-area: prev }
.bpv2-lb-nav.next{ grid-area: next }
.bpv2-lb-nav:hover{ background: rgba(255,255,255,.22); transform: scale(1.06) }

.bpv2-lb-thumbs{
  grid-area: thumbs;
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
  background: rgba(0,0,0,.4);
}
.bpv2-lb-thumbs::-webkit-scrollbar{ height: 6px }
.bpv2-lb-thumbs::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2); border-radius: 3px }
.bpv2-lb-thumb{
  width: 90px; height: 64px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: .55;
  border: 2px solid transparent;
  transition: all .12s;
}
.bpv2-lb-thumb:hover{ opacity: .85 }
.bpv2-lb-thumb[data-active="true"]{
  opacity: 1;
  border-color: #fff;
}
.bpv2-lb-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px){
  .bpv2-lb{
    grid-template-rows: 1fr 70px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "thumbs";
  }
  .bpv2-lb-nav{ display: none }
  .bpv2-lb-stage{ padding: 50px 8px 8px; max-height: calc(100vh - 70px) }
  .bpv2-lb-thumb{ width: 60px; height: 44px }
  .bpv2-lb-thumbs{ padding: 8px 12px }
}

/* ─────────────────────────────────────────────────────────────────
   [v785+v786] Onglet Rappro fiche bien : utilise les styles .rm-*
   de reverse-match.css mais avec ajustements pour mode embedded
   (pas de sidepanel, list dans un container limité, plus large
   donc grid à 6 colonnes pour éviter que 1fr étire l'avatar).
   ───────────────────────────────────────────────────────────────── */
#page-bien .bpv2-rapp-zone {
  margin-top: 12px;
}

/* [v786] Reset le comportement flex/scroll du sidepanel : en embedded
   on veut que la liste prenne sa hauteur naturelle, sans scroll interne. */
#page-bien .bpv2-rapp-zone .rm-list {
  flex: none;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  background: transparent;
}
#page-bien .bpv2-rapp-zone .rm-row {
  /* [v786] Grid à 6 colonnes : checkbox 22 / rank 22 / avatar 32 /
     main 1fr / match auto / actions auto. Le sidepanel a un grid à 5
     colonnes (sans avatar dédié) car l'avatar y prend juste sa place
     naturelle dans la 1fr. En fiche bien, la zone est beaucoup plus
     large (~1200px vs 680px), donc la 1fr stretch l'avatar à 500px+
     ce qui crée un énorme vide entre l'avatar et le nom. Avec une
     colonne 32px dédiée à l'avatar, le 1fr ne sert qu'au main. */
  grid-template-columns: 22px 22px 32px 1fr auto auto;
  padding: 10px 14px;
  align-items: center;
  background: var(--surface);
}
#page-bien .bpv2-rapp-zone .rm-row[data-tier]{
  padding-left: 12px;  /* compense le border-left:2px du tier */
}
#page-bien .bpv2-rapp-zone .rm-row:last-child {
  border-bottom: none;
}

/* [v786] Summary ressort plus compacte, en pill */
#page-bien .bpv2-rapp-zone .rm-summary {
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

/* [v786] Footer plus compact, inline plutôt que sticky bottom */
#page-bien .bpv2-rapp-zone .rm-foot {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-lg, 8px);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   [v1150] Section Plans — placée sous le hero photos sur la
   fiche bien (PDF ou plan 2D). Stockage sous-dossier plans/
   du bucket biens-photos.
   ═══════════════════════════════════════════════════════════ */
.fbf-plans{
  margin: 0 0 24px;
}
.fbf-plans-head{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-dim);
}
.fbf-plans-head svg{ color: var(--accent); }
.fbf-plans-count{
  margin-left: 4px;
  font-size: 10px; font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}
.fbf-plans-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.fbf-plan-card{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: background 80ms, border-color 80ms, transform 80ms;
  min-width: 0;
}
.fbf-plan-card:hover{
  background: var(--s2);
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.fbf-plan-thumb{
  width: 52px; height: 52px;
  border-radius: 6px;
  flex-shrink: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--s2);
  background-size: cover;
  background-position: center;
  color: var(--muted);
}
.fbf-plan-card.fbf-plan-image .fbf-plan-thumb{
  background-color: var(--s3);
}
.fbf-plan-ext{
  position: absolute; bottom: 3px; right: 3px;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.5px;
  background: var(--accent);
  color: white;
  padding: 1px 4px;
  border-radius: 2px;
}
.fbf-plan-meta{
  min-width: 0; flex: 1;
}
.fbf-plan-name{
  font-size: 13px; font-weight: 500;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.fbf-plan-hint{
  font-size: 11px;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════
   [v1152] Lightbox PDF + images plans (séparée de .bpv2-lb
   photos pour pas mélanger les navigations). Anthony "j'aimerais
   que le pdf s'affiche plein ecran en light box, pas dans un
   nouvel onglet" + "il faut que les pdf qui sont dans documents
   s'ouvre aussi dans cette nouvelle light box".

   Structure :
   - .bpv2-pdflb (backdrop noir 90% + flex column)
     - .bpv2-pdflb-head (label + counter + bouton newtab + close)
     - .bpv2-pdflb-nav.prev / .next (boutons latéraux)
     - .bpv2-pdflb-stage (iframe ou img centrée, flex:1)
   ═══════════════════════════════════════════════════════════ */
.bpv2-pdflb{
  position: fixed; inset: 0;
  z-index: 99999;
  background: rgba(8,10,14,0.92);
  display: flex; flex-direction: column;
  padding: 14px 14px 14px;
  gap: 12px;
  animation: bpv2-pdflb-fade .15s ease-out;
}
@keyframes bpv2-pdflb-fade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.bpv2-pdflb-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  color: #e7e9ee;
  flex-shrink: 0;
  padding: 0 4px;
}
.bpv2-pdflb-head-l{
  display: flex; align-items: center; gap: 12px;
  min-width: 0; flex: 1;
}
.bpv2-pdflb-head-r{
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.bpv2-pdflb-counter{
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  letter-spacing: 0.5px;
  padding: 4px 10px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  flex-shrink: 0;
}
.bpv2-pdflb-label{
  font-size: 13px;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bpv2-pdflb-btn{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  color: #e7e9ee;
  cursor: pointer;
  transition: background 100ms, transform 100ms;
  text-decoration: none;
}
.bpv2-pdflb-btn:hover{
  background: rgba(255,255,255,.18);
  transform: scale(1.04);
}
.bpv2-pdflb-btn svg{ display: block; }

.bpv2-pdflb-stage{
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #1a1c22;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.bpv2-pdflb-frame{
  width: 100%; height: 100%;
  border: none;
  background: #ffffff;
  display: block;
}
.bpv2-pdflb-img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.bpv2-pdflb-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: background 100ms, transform 100ms;
}
.bpv2-pdflb-nav:hover{
  background: rgba(0,0,0,.75);
  transform: translateY(-50%) scale(1.08);
}
.bpv2-pdflb-nav.prev{ left: 24px; }
.bpv2-pdflb-nav.next{ right: 24px; }
.bpv2-pdflb-nav svg{ display: block; }

/* Mobile : padding réduit + nav cachée (swipe natif iframe), close + header
   restent visibles. */
@media (max-width: 720px){
  .bpv2-pdflb{ padding: 8px; gap: 8px; }
  .bpv2-pdflb-nav{ width: 40px; height: 40px; }
  .bpv2-pdflb-nav.prev{ left: 10px; }
  .bpv2-pdflb-nav.next{ right: 10px; }
  .bpv2-pdflb-label{ display: none; }
}

/* Cards plans : ajustements suite passage <a> → <button> en v1152.
   Reset des styles browser par défaut sur <button>. */
button.fbf-plan-card{
  font: inherit;
  text-align: left;
  width: 100%;
  background: var(--surface);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   [v1153] Onglet Documents fiche bien — refonte complète avec
   catégories, side panel résumé IA, modal sélection catégorie
   ═══════════════════════════════════════════════════════════ */

/* ─── Toolbar haut de l'onglet ─── */
.fbf-docs-toolbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fbf-docs-toolbar-l{ min-width: 0; flex: 1; }
.fbf-docs-sub{
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.fbf-docs-toolbar-r{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Boutons fbf-btn réutilisables (utilisés aussi dans le side panel) */
.fbf-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius, 4px);
  cursor: pointer;
  transition: background 80ms, border-color 80ms, transform 80ms;
  border: 1px solid var(--border);
  /* [v1165 Anthony "le bouton doit etre blanc avec bordure (comme l'autre
     sur la foche client)"] var(--surface) en thème light = gris clair, pas
     blanc. var(--bg) = vrai blanc pur. Maintenant cohérent avec le bouton
     fiche client (qui hérite du même style via .cpv2-shell .fbf-btn). */
  background: var(--bg);
  color: var(--text);
  white-space: nowrap;
}
.fbf-btn:hover{
  background: var(--s2);
  border-color: var(--border-hi);
}
.fbf-btn-primary{
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.fbf-btn-primary:hover{
  background: var(--text);
  opacity: 0.88;
  border-color: var(--text);
}
.fbf-btn-ghost{
  background: transparent;
}

/* ─── Empty state ─── */
.fbf-docs-empty{
  text-align: center;
  padding: 50px 20px;
  color: var(--muted);
}
.fbf-docs-empty-icon{
  opacity: 0.35;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
}
.fbf-docs-empty-title{
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.fbf-docs-empty-hint{
  font-size: 12px;
}

/* ─── Group par catégorie ─── */
.fbf-docs-cat{
  margin-bottom: 24px;
}
.fbf-docs-cat-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 4px;
}
.fbf-docs-cat-label{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-dim);
}
.fbf-docs-cat-count{
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: var(--s2);
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0;
}
.fbf-docs-cat-hint{
  font-size: 12px;
  color: var(--muted);
  margin: -4px 4px 8px;
  font-style: italic;
}
.fbf-docs-cat-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ─── Doc card individuelle ─── */
.fbf-doc-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  transition: background 80ms, border-color 80ms;
}
.fbf-doc-card:hover{
  background: var(--s2);
  border-color: var(--border-hi);
}
.fbf-doc-card-icon{
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s2);
  border-radius: 6px;
  color: var(--muted);
}
.fbf-doc-card:hover .fbf-doc-card-icon{
  background: var(--s3);
}
/* Pastille accent en haut à droite quand doc analysé */
.fbf-doc-card-badge{
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}
.fbf-doc-card:hover .fbf-doc-card-badge{
  border-color: var(--s2);
}
.fbf-doc-card-main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fbf-doc-card-name{
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.fbf-doc-card-name:hover{
  color: var(--accent);
}
.fbf-doc-card-meta{
  font-size: 11px;
  color: var(--muted);
}
.fbf-doc-card-actions{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Boutons d'action sur une card */
.fbf-doc-btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: var(--radius, 4px);
  cursor: pointer;
  transition: background 80ms, color 80ms, transform 80ms;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  white-space: nowrap;
}
.fbf-doc-btn:hover{
  background: var(--s2);
  color: var(--text);
}
.fbf-doc-btn-ia{
  color: var(--text-dim);
}
.fbf-doc-btn-ia.is-done{
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.fbf-doc-btn-ia.is-done:hover{
  background: var(--accent-dim);
  opacity: 0.88;
  color: var(--accent);
}
.fbf-doc-btn-del{
  padding: 5px 7px;
  color: var(--muted);
}
.fbf-doc-btn-del:hover{
  background: rgba(255, 102, 128, 0.10);
  border-color: var(--chaud);
  color: var(--chaud);
}
.fbf-doc-btn[disabled]{
  opacity: 0.5;
  cursor: wait;
}
.bpv2-spin{
  animation: bpv2-spin 800ms linear infinite;
}
@keyframes bpv2-spin{
  to{ transform: rotate(360deg); }
}

/* Legacy (anciens uploads) — visuel un peu en retrait */
.fbf-doc-card-legacy .fbf-doc-card-name{
  color: var(--text-dim);
}
.fbf-doc-card-legacy-tag{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 3px 8px;
  background: var(--s3);
  border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════
   [v1153] Modal sélection catégorie (au moment de l'upload)
   ═══════════════════════════════════════════════════════════ */
.bpv2-catpick-scrim{
  position: fixed; inset: 0;
  z-index: 99998;
  background: rgba(8,10,14,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: bpv2-pdflb-fade 0.15s ease-out;
}
.bpv2-catpick-modal{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.30);
}
.bpv2-catpick-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.bpv2-catpick-title{
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.bpv2-catpick-sub{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.bpv2-catpick-close{
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
  border-radius: 4px;
  flex-shrink: 0;
}
.bpv2-catpick-close:hover{
  background: var(--s2);
  color: var(--text);
}
.bpv2-catpick-body{
  padding: 8px;
  overflow-y: auto;
}
.bpv2-catpick-opt{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  padding: 12px 14px;
  border-radius: var(--radius, 4px);
  cursor: pointer;
  color: var(--text);
  transition: background 80ms, border-color 80ms;
}
.bpv2-catpick-opt:hover{
  background: var(--s2);
  border-color: var(--border);
}
.bpv2-catpick-opt-label{
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.bpv2-catpick-opt-hint{
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}
.bpv2-catpick-opt-arrow{
  color: var(--muted);
  flex-shrink: 0;
}
.bpv2-catpick-opt:hover .bpv2-catpick-opt-arrow{
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   [v1153] Side panel "Voir le résumé" — slide-in droite
   (Anthony "comme les modals de création"). Fixed right, 680px desktop.
   Animation slide via data-open attribute.
   ═══════════════════════════════════════════════════════════ */
.bpv2-summary-panel-scrim{
  position: fixed; inset: 0;
  z-index: 99997;
  background: rgba(8,10,14,0.45);
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.bpv2-summary-panel-scrim[data-open="true"]{
  opacity: 1;
}
.bpv2-summary-panel{
  background: var(--bg);
  width: 680px;
  max-width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.20s ease-out;
  box-shadow: -20px 0 60px rgba(0,0,0,0.20);
}
.bpv2-summary-panel-scrim[data-open="true"] .bpv2-summary-panel{
  transform: translateX(0);
}
.bpv2-summary-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bpv2-summary-head-l{ min-width: 0; flex: 1; }
.bpv2-summary-cat{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent);
  margin-bottom: 4px;
}
.bpv2-summary-name{
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bpv2-summary-close{
  background: none;
  border: 1px solid var(--border);
  padding: 6px;
  cursor: pointer;
  color: var(--muted);
  border-radius: var(--radius, 4px);
  flex-shrink: 0;
}
.bpv2-summary-close:hover{
  background: var(--s2);
  color: var(--text);
  border-color: var(--border-hi);
}
.bpv2-summary-body{
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.bpv2-summary-md p{
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 12px;
}
.bpv2-summary-md strong{
  font-weight: 600;
  color: var(--text);
}
.bpv2-summary-md ul{
  margin: 0 0 16px;
  padding-left: 22px;
}
.bpv2-summary-md li{
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 4px;
}
.bpv2-summary-empty{
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13px;
}
.bpv2-summary-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Mobile : panel pleine largeur */
@media (max-width: 720px){
  .bpv2-summary-panel{ width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   [v1159] Sous-onglets Bien/Vendeur dans l'onglet Documents
   fiche bien + section "Documents du bien actif" sur fiche
   client vendeur (read-only). Anthony "il faut 2 onglets
   documents". Style proche tabs habituels donna : pill+underline
   active state.
   ═══════════════════════════════════════════════════════════ */
.fbf-docs-subtabs{
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.fbf-docs-subtab{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--muted);
  transition: color 80ms, border-color 80ms;
  margin-bottom: -1px; /* aligne avec le border-bottom du parent */
}
.fbf-docs-subtab:hover{
  color: var(--text);
}
.fbf-docs-subtab.is-active{
  color: var(--text);
  border-bottom-color: var(--accent);
}
.fbf-docs-subtab svg{
  opacity: 0.8;
}
.fbf-docs-subtab.is-active svg{
  opacity: 1;
}

/* Réservation : sous-panels ne provoquent pas de double padding panel */
.fbf-docs-subpanel .fbf-section{
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   [v1160 fix S1a Anthony "fiche vendeur bouton ajouter un doc
   est tout blanc au hover"] Source root probable : le bouton
   <input type="file"> caché perd son display:none inline à cause
   d'un override CSS global, OU un browser focus state qui prend
   le pas (outline bleu épais visible dans la capture). On hard-
   stylise le primary button pour qu'il garde sa cohérence sur
   tous les scopes (fiche client, fiche bien, modals).
   ═══════════════════════════════════════════════════════════ */

/* Force le bouton primary à rester noir/blanc en hover (pas un fond
   blanc plein écran à cause du browser focus). Override les styles
   .cpv2-shell button qui pourraient s'appliquer. */
.fbf-btn-primary,
.cpv2-shell .fbf-btn-primary{
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 1px solid var(--text) !important;
}

/* [v1164 fix S1 Anthony "S1 doit etre comme S2"] Le bouton "Gérer sur la
   fiche bien" sur la fiche client (S1) n'avait pas de cadre car la règle
   .cpv2-shell button { border:none; background:none; color:inherit }
   (ligne 61) override ma classe .fbf-btn (specificité 0,1,1 vs 0,1,0).
   Fix : scope .cpv2-shell .fbf-btn (specificité 0,2,0) qui re-applique les
   styles border + bg comme sur la fiche bien (S2).
   [v1165] background: var(--bg) (vrai blanc) au lieu de var(--surface). */
.cpv2-shell .fbf-btn{
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.cpv2-shell .fbf-btn:hover{
  background: var(--s2);
  border-color: var(--border-hi);
  color: var(--text);
}
.fbf-btn-primary:hover,
.cpv2-shell .fbf-btn-primary:hover{
  background: var(--text-dim) !important;
  border-color: var(--text-dim) !important;
  color: var(--bg) !important;
  opacity: 1 !important;
}
.fbf-btn-primary:focus,
.fbf-btn-primary:focus-visible,
.cpv2-shell .fbf-btn-primary:focus,
.cpv2-shell .fbf-btn-primary:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--text) !important;
  color: var(--bg) !important;
}

/* [v1160] Force les input file cachés à rester invisibles. Certains
   scopes CSS (rare mais possible) peuvent override le display:none
   inline. Avec !important on est safe. */
input[type="file"][id^="bpv2-doc-file-input"],
input[type="file"][id^="cpv2-doc-file-input"]{
  display: none !important;
}

/* ─── [v1183] Badge "Lecture seule" — affiché à la place du bouton "Ajouter
   un document" pour les non-owners du mandat/client. Sobre, neutre :
   pas une erreur, juste une indication.
*/
.fbf-docs-readonly-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 4px;
  background: var(--s2);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  cursor: help;
  user-select: none;
}
.fbf-docs-readonly-badge svg{
  opacity: 0.7;
}