/* ═══════════════════════════════════════════════════════════════════
   arpe-biens.css — Arpentiq · page Biens : vignettes + carte
   Classe racine .arpe-biens · tout est scopé dessous.
   Aucun sélecteur global, aucun hex en dur, z-index en variables.
   ═══════════════════════════════════════════════════════════════════ */

/* ── tokens de repli : le CRM fournit les vrais, ceux-ci ne servent
   qu'à la démo isolée. Ils n'écrasent rien (fallback via var()). ── */
.arpe-biens{
  --ab-radius:10px;--ab-radius-sm:6px;
  --ab-gap:12px;
  --ab-shadow:0 1px 2px rgba(20,22,31,.04);
  --ab-shadow-hi:0 2px 6px rgba(20,22,31,.07),0 12px 28px -12px rgba(20,22,31,.16);
  --ab-mono:'JetBrains Mono',ui-monospace,monospace;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text)}
.arpe-biens *{box-sizing:border-box}
.arpe-biens button{font-family:inherit;cursor:pointer}

/* ════ 1 · GRILLE DE VIGNETTES ═══════════════════════════════════
   Parti pris : la photo est l'objet, pas une carte qui la contient.
   Pas de cadre, pas de fond, pas d'ombre — la photo pose sur la page
   et le texte se lit EN DESSOUS, sur le fond, jamais par-dessus
   l'image. C'est la grammaire des sites d'annonces (et la seule qui
   reste lisible quelle que soit la photo). */
.arpe-biens--grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  gap:26px 20px;align-items:start}

.arpe-biens--card{
  display:flex;flex-direction:column;gap:9px;
  background:none;border:0;padding:0;cursor:pointer}
.arpe-biens--card:focus-visible{outline:none}
.arpe-biens--card:focus-visible .biens-vign-photo{
  box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.arpe-biens--card.ab-is-suspendu{opacity:.55}
.arpe-biens--card.ab-is-suspendu:hover{opacity:1}

/* ── la photo ──────────────────────────────────────────────────
   Hooks du swap photo conservés : #bvcard-photo-<id>,
   .biens-vign-skeleton, .biens-vign-glyph, .biens-vign-img. */
.arpe-biens .biens-vign-photo{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--ab-radius-lg,14px);
  background:color-mix(in srgb,var(--s3) 70%,var(--surface));
  box-shadow:inset 0 0 0 1px var(--border);
  display:grid;place-items:center;
  transition:box-shadow .18s}
.arpe-biens--card:hover .biens-vign-photo{box-shadow:inset 0 0 0 1px var(--border),var(--ab-shadow-hi)}
.arpe-biens .biens-vign-img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.arpe-biens--card:hover .biens-vign-img{transform:scale(1.035)}
.arpe-biens .biens-vign-glyph{width:46px;height:46px;opacity:.42;
  color:color-mix(in srgb,var(--muted) 60%,transparent)}
.arpe-biens .biens-vign-skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 45%,transparent),transparent);
  animation:ab-shine 1.4s ease-in-out infinite}
@keyframes ab-shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* pastilles : sur la photo, mais jamais sur du texte */
.arpe-biens .biens-vign-status{
  position:absolute;top:10px;left:10px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px 4px 8px;font-size:11px;font-weight:600;line-height:1.4;
  border-radius:99px;color:var(--text);
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  box-shadow:0 1px 4px rgba(20,22,31,.14)}
body[data-theme="noir"] .arpe-biens .biens-vign-status{
  background:rgba(22,24,29,.86);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.arpe-biens .biens-vign-status .dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0}
.arpe-biens .biens-vign-status.en-cours .dot{background:var(--accent)}
.arpe-biens .biens-vign-status.vendu .dot{background:var(--green)}
.arpe-biens .biens-vign-status.suspendu .dot{background:var(--muted)}
/* signal Arpe : le seul élément qui mérite d'attirer l'œil */
.arpe-biens .biens-vign-signal{
  position:absolute;top:10px;right:10px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 20px);
  padding:4px 10px;border-radius:99px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:#fff;background:var(--chaud);
  box-shadow:0 1px 5px rgba(20,22,31,.22);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arpe-biens .biens-vign-signal .dot{display:none}
.arpe-biens .biens-vign-signal.ab-sig-tiede{background:var(--tiede);color:#14161f}
.arpe-biens .biens-vign-signal.ab-sig-froid{background:var(--froid);color:#fff}
.arpe-biens .biens-vign-signal.ab-sig-ok{background:var(--green);color:#fff}
/* n° de mandat : information interne, discrète, en bas de photo */
.arpe-biens .biens-vign-mand-tag{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font-family:var(--ab-mono);font-size:9.5px;font-weight:600;letter-spacing:.03em;
  padding:3px 8px;border-radius:var(--ab-radius-sm);color:#fff;
  background:rgba(20,22,31,.62);backdrop-filter:blur(6px)}

/* ── le texte : sous la photo, sur le fond de page ─────────────
   Ligne 1 : adresse + DPE. Ligne 2 : ville et gabarit.
   Ligne 3 : prix — le seul élément en gras fort, donc l'œil
   descend d'une vignette à l'autre en ne lisant que les prix. */
.arpe-biens .biens-vign-body{
  display:flex;flex-direction:column;gap:3px;padding:0 2px}
.arpe-biens .ab-line{display:flex;align-items:center;gap:8px}
.arpe-biens .biens-vign-addr{
  flex:1;min-width:0;display:block;
  font-size:13.5px;font-weight:600;letter-spacing:-.014em;line-height:1.35;
  color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arpe-biens .biens-vign-specs{
  display:flex;align-items:center;gap:5px;min-width:0;
  font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arpe-biens .biens-vign-specs .sep{opacity:.55}
.arpe-biens .biens-vign-cp{color:var(--muted)}
.arpe-biens .ab-price-line{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.arpe-biens .biens-vign-price{
  font-size:15.5px;font-weight:700;letter-spacing:-.024em;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1.2}
.arpe-biens .ab-pm{
  font-family:var(--ab-mono);font-size:10.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* DPE : lettre seule, la couleur porte l'information.
   Bandes claires (A→E) en encre foncée, comme l'étiquette officielle :
   en blanc, la lettre disparaît (1,6:1 sur le D). */
.arpe-biens .dpe-badge{
  flex-shrink:0;display:inline-grid;place-items:center;
  width:18px;height:17px;border-radius:4px;
  font-family:var(--ab-mono);font-size:10px;font-weight:700;color:#fff}
.arpe-biens .dpe-a{background:#00a06b}.arpe-biens .dpe-b{background:#4bb648}
.arpe-biens .dpe-c{background:#c3d600}.arpe-biens .dpe-d{background:#f0c948}
.arpe-biens .dpe-e{background:#f2a03d}.arpe-biens .dpe-f{background:#eb6b32}
.arpe-biens .dpe-g{background:#e2352b}
.arpe-biens .dpe-a,.arpe-biens .dpe-b,.arpe-biens .dpe-c,
.arpe-biens .dpe-d,.arpe-biens .dpe-e,.arpe-biens .dpe-f{color:#14161f}

/* état vide */
.arpe-biens .ab-empty{
  grid-column:1/-1;padding:44px 18px;text-align:center;
  border:1px dashed var(--border);border-radius:var(--ab-radius);
  background:var(--surface)}
.arpe-biens .ab-empty-ic{width:34px;height:34px;margin:0 auto 11px;color:var(--muted);opacity:.6}
.arpe-biens .ab-empty-t{font-size:14px;font-weight:600;letter-spacing:-.015em}
.arpe-biens .ab-empty-d{font-size:12.5px;color:var(--muted);margin-top:5px}

/* ════ 2 · VUE CARTE ═════════════════════════════════════════════
   Liste compacte à gauche : une LIGNE par bien, pas une vignette.
   6 à 8 biens visibles au lieu de 2. */
.arpe-biens--map{
  display:grid;grid-template-columns:296px 1fr;
  height:580px;
  border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--surface)}
.arpe-biens--map.ab-map-solo{grid-template-columns:1fr}

.arpe-biens .ab-maplist{
  min-width:0;overflow:hidden;display:flex;flex-direction:column;
  border-right:1px solid var(--border);background:var(--surface)}
.arpe-biens .ab-mlh{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding:9px 11px;border-bottom:1px solid var(--border);background:var(--s2)}
.arpe-biens .ab-mlc{font-family:var(--ab-mono);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.arpe-biens .ab-mlbtn{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--text-dim);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--ab-radius-sm);padding:4px 9px;transition:.15s}
.arpe-biens .ab-mlbtn:hover{color:var(--text);border-color:var(--border-hi)}
.arpe-biens .ab-mlbtn svg{width:12px;height:12px}
.arpe-biens .ab-mlbody{flex:1;min-height:0;overflow-y:auto}

.arpe-biens .ab-lrow{
  display:flex;align-items:center;gap:10px;padding:8px 11px;cursor:pointer;
  min-width:0;overflow:hidden;
  border-bottom:1px solid var(--border);transition:background .13s}
.arpe-biens .ab-lrow:hover{background:var(--s2)}
/* survol croisé liste ⇄ carte : la ligne survolée s'éclaire des deux côtés */
.arpe-biens .ab-lrow.ab-hi{background:color-mix(in srgb,var(--accent) 6%,transparent);
  box-shadow:inset 2px 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}
.arpe-biens .ab-lrow.ab-on{background:color-mix(in srgb,var(--accent) 8%,transparent);
  box-shadow:inset 2px 0 0 var(--accent)}
.arpe-biens .ab-lth{
  width:52px;height:40px;flex-shrink:0;border-radius:var(--ab-radius-sm);
  background:color-mix(in srgb,var(--s2) 60%,var(--surface));
  display:grid;place-items:center;overflow:hidden;position:relative}
.arpe-biens .ab-lth img{width:100%;height:100%;object-fit:cover}
.arpe-biens .ab-lth svg{width:18px;height:18px;color:var(--muted);opacity:.5}
.arpe-biens .ab-lb{flex:1;min-width:0;display:flex;flex-direction:column}
.arpe-biens .ab-la{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arpe-biens .ab-lm{display:block;font-size:11px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arpe-biens .ab-lp{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end}
.arpe-biens .ab-lpv{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.arpe-biens .ab-lst{display:inline-flex;align-items:center;gap:4px;
  font-size:9.5px;color:var(--muted);margin-top:3px;justify-content:flex-end}
.arpe-biens .ab-lst .dot{width:5px;height:5px;border-radius:50%;background:var(--muted)}
.arpe-biens .ab-lst.en-cours .dot{background:var(--accent)}
.arpe-biens .ab-lst.vendu .dot{background:var(--green)}

/* zone carte : le kit ne fournit que le chrome, leaflet vit dedans.
   On ne dimensionne QUE l'élément de carte — surtout pas les enfants
   positionnés en absolu (outils, légende), qui s'étireraient. */
.arpe-biens .ab-mapzone{position:relative;min-width:0;overflow:hidden;background:var(--s2)}
.arpe-biens .ab-mapel{position:absolute;inset:0;width:100%;height:100%}
/* barre d'outils flottante */
.arpe-biens .ab-mtools{
  position:absolute;top:10px;left:10px;z-index:var(--z-fixed,200);
  display:flex;align-items:center;gap:6px}
.arpe-biens .ab-mtool{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--text-dim);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--ab-radius-sm);padding:6px 10px;
  box-shadow:var(--ab-shadow);transition:.15s}
.arpe-biens .ab-mtool:hover{color:var(--text);border-color:var(--border-hi)}
.arpe-biens .ab-mtool svg{width:13px;height:13px}
/* légende — en bas, hors de la zone dense du centre */
.arpe-biens .ab-legend{
  position:absolute;left:10px;bottom:10px;z-index:var(--z-fixed,200);
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--ab-radius-sm);padding:6px 11px;box-shadow:var(--ab-shadow)}
.arpe-biens .ab-lg{display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.arpe-biens .ab-lg i{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.arpe-biens .ab-lg.en-cours i{background:var(--accent)}
.arpe-biens .ab-lg.vendu i{background:var(--green)}

/* ── épingles ───────────────────────────────────────────────────
   La pastille de prix se lit mal en masse : trop large, trop de
   chiffres, elles se chevauchent. Ici une goutte compacte — assez
   petite pour ne pas noyer la carte, assez lisible pour situer. */
.arpe-biens .ab-pin{
  position:absolute;transform:translate(-50%,-100%);
  display:flex;align-items:center;justify-content:center;
  height:26px;padding:0 9px;
  font-family:var(--ab-mono);font-size:11px;font-weight:700;
  color:#fff;background:var(--accent);
  border:2px solid var(--surface);
  border-radius:99px 99px 99px 4px;
  box-shadow:0 2px 6px rgba(20,22,31,.26);
  cursor:pointer;white-space:nowrap;
  transition:transform .14s cubic-bezier(.2,.8,.3,1.2),box-shadow .14s}
.arpe-biens .ab-pin:hover{
  transform:translate(-50%,-100%) scale(1.1);
  box-shadow:0 4px 12px rgba(20,22,31,.32);z-index:4}
.arpe-biens .ab-pin.ab-vendu{background:var(--green)}
.arpe-biens .ab-pin.ab-suspendu{background:var(--muted)}
/* sélectionnée : anneau accent, elle domine la carte */
.arpe-biens .ab-pin.ab-on{
  transform:translate(-50%,-100%) scale(1.14);z-index:5;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 34%,transparent),0 5px 14px rgba(20,22,31,.34)}
.arpe-biens .ab-pin.ab-hi{
  transform:translate(-50%,-100%) scale(1.12);z-index:4;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent),0 4px 12px rgba(20,22,31,.3)}
.arpe-biens .ab-mapel.ab-dim .ab-pin:not(.ab-hi):not(.ab-on),
.arpe-biens .ab-mapel.ab-dim .ab-cluster{opacity:.3}
/* amas : disque plein, la taille dit la densité */

/* ── peek-box : la fiche courte, ancrée à l'épingle ─────────────
   Clic sur une ligne OU sur une épingle : même boîte. Elle montre
   ce qu'on veut savoir avant d'ouvrir la fiche complète. */
.arpe-biens .ab-peek{
  position:absolute;z-index:var(--z-fixed,200);width:252px;
  background:var(--surface);border:1px solid var(--border-hi);
  border-radius:14px;overflow:hidden;
  box-shadow:0 2px 6px rgba(20,22,31,.06),0 18px 40px -12px rgba(20,22,31,.3);
  opacity:0;transform:translate(-50%,-100%) translateY(-4px) scale(.97);
  transform-origin:50% 100%;pointer-events:none;
  transition:opacity .16s,transform .2s cubic-bezier(.2,.8,.25,1)}
.arpe-biens .ab-peek.ab-on{opacity:1;pointer-events:auto;
  transform:translate(-50%,-100%) translateY(-12px) scale(1)}
body[data-theme="noir"] .arpe-biens .ab-peek{
  box-shadow:0 2px 6px rgba(0,0,0,.5),0 20px 44px -12px rgba(0,0,0,.75)}
/* la flèche pointe l'épingle */
.arpe-biens .ab-peek::after{
  content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;
  width:11px;height:11px;background:var(--surface);
  border-right:1px solid var(--border-hi);border-bottom:1px solid var(--border-hi);
  transform:rotate(45deg)}
.arpe-biens .ab-pkph{
  position:relative;height:124px;overflow:hidden;
  background:color-mix(in srgb,var(--s3) 70%,var(--surface));
  display:grid;place-items:center;border-bottom:1px solid var(--border)}
.arpe-biens .ab-pkph img{width:100%;height:100%;object-fit:cover;display:block}
.arpe-biens .ab-pkph svg{width:38px;height:38px;color:var(--muted);opacity:.45}
.arpe-biens .ab-pkst{
  position:absolute;top:8px;left:8px;
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px 3px 7px;font-size:10.5px;font-weight:600;
  border-radius:99px;color:var(--text);
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  box-shadow:0 1px 4px rgba(20,22,31,.14)}
body[data-theme="noir"] .arpe-biens .ab-pkst{background:rgba(22,24,29,.88)}
.arpe-biens .ab-pkst .dot{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.arpe-biens .ab-pkst.en-cours .dot{background:var(--accent)}
.arpe-biens .ab-pkst.vendu .dot{background:var(--green)}
.arpe-biens .ab-pkx{
  position:absolute;top:8px;right:8px;width:24px;height:24px;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);
  color:var(--text-dim);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 1px 4px rgba(20,22,31,.14);transition:.14s}
.arpe-biens .ab-pkx:hover{background:#fff;color:var(--text)}
body[data-theme="noir"] .arpe-biens .ab-pkx{background:rgba(22,24,29,.88)}
.arpe-biens .ab-pkx svg{width:13px;height:13px}
.arpe-biens .ab-pkb{padding:11px 13px 12px;display:flex;flex-direction:column;gap:3px}
.arpe-biens .ab-pkline{display:flex;align-items:center;gap:8px}
.arpe-biens .ab-pka{
  flex:1;min-width:0;display:block;font-size:13.5px;font-weight:600;
  letter-spacing:-.014em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arpe-biens .ab-pkm{display:block;font-size:11.5px;color:var(--muted)}
.arpe-biens .ab-pkp{
  display:flex;align-items:baseline;gap:8px;margin-top:4px}
.arpe-biens .ab-pkv{
  font-size:15.5px;font-weight:700;letter-spacing:-.024em;
  font-variant-numeric:tabular-nums}
.arpe-biens .ab-pkpm{font-family:var(--ab-mono);font-size:10.5px;color:var(--muted)}
.arpe-biens .ab-pkf{
  display:flex;align-items:center;gap:7px;
  padding:9px 13px;border-top:1px solid var(--border);background:var(--s2)}
.arpe-biens .ab-pkbtn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;font-weight:600;letter-spacing:-.01em;
  color:var(--surface);background:var(--text);border:0;
  border-radius:var(--ab-radius-sm);padding:7px 10px;transition:.15s}
.arpe-biens .ab-pkbtn:hover{background:var(--text-dim)}
.arpe-biens .ab-pkbtn svg{width:13px;height:13px}
.arpe-biens .ab-pkghost{
  flex-shrink:0;display:inline-grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--border);border-radius:var(--ab-radius-sm);
  background:var(--surface);color:var(--text-dim);transition:.15s}
.arpe-biens .ab-pkghost:hover{background:var(--s3);color:var(--text)}
.arpe-biens .ab-pkghost svg{width:14px;height:14px}

/* ════ 3 · RESPONSIVE ════════════════════════════════════════════ */
@media(max-width:900px){
  .arpe-biens--grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px 16px}
  /* carte : la map passe AU-DESSUS, la liste dessous (pattern Arpentiq) */
  .arpe-biens--map{grid-template-columns:1fr;grid-template-rows:minmax(280px,46vh) 1fr;height:auto;max-height:82vh}
  .arpe-biens .ab-maplist{border-right:0;border-top:1px solid var(--border);order:2}
  .arpe-biens .ab-mapzone{order:1;min-height:280px}
}
@media(max-width:600px){
  .arpe-biens--grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 12px}
  .arpe-biens .biens-vign-addr{font-size:13px}
  .arpe-biens .biens-vign-price{font-size:14.5px}
  .arpe-biens .biens-vign-glyph{width:38px;height:38px}
  .arpe-biens--map{border-radius:16px 16px 0 0}
  .arpe-biens .ab-legend{display:none}
  .arpe-biens .ab-peek{width:216px}
}
@media(prefers-reduced-motion:reduce){
  .arpe-biens *{transition:none!important;animation:none!important}
}