/* Le Marché : filtres, cartes de biens, carte, coup d'œil, catalogue, veille.
   Extrait tel quel de index.html (découpage du front). */

/* Bouton « centrer la carte » à côté de l'adresse de chaque bien. */
.map-focus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  transition: background .15s, color .15s, transform .1s;
  flex-shrink: 0;
}

.map-focus-btn:hover {
  background: #059669;
  color: #fff;
}

.map-focus-btn:active {
  transform: scale(.92);
}

/* Anneau qui pulse sur le marqueur ciblé pendant/après le vol de la carte. */
.map-focus-pulse span {
  display: block;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: rgba(16, 185, 129, .35);
  animation: markerFocusPulse 1.4s ease-out infinite;
}

@keyframes markerFocusPulse {
  0% { transform: scale(.5); box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
  70% { transform: scale(1.6); box-shadow: 0 0 0 16px rgba(16, 185, 129, 0); }
  100% { transform: scale(.5); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* L'APERÇU D'UNE ÉPINGLE (marche/carte.js). Un popup Leaflet, mais rhabillé :
   la bibliothèque impose ses marges et sa bulle blanche, on les reprend pour en
   faire une vraie fiche. On lit ici les chiffres d'un bien SANS quitter la carte. */
.map-preview-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  padding: 0;
}
.map-preview-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.map-preview-popup .leaflet-popup-tip { background: var(--surface); border: 1px solid var(--hairline); }
.map-preview-popup .leaflet-popup-close-button { color: var(--ink-3); padding: 6px 8px 0 0; }
.map-preview { display: grid; gap: 4px; padding: 12px 14px; min-width: 190px; }
.map-preview-title { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.map-preview-title:hover { text-decoration: underline; }
.map-preview-where { font-size: 12px; color: var(--ink-3); }
.map-preview-price { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); margin-top: 2px; }
.map-preview-metrics { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 2px; }
.map-preview-metric { font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.map-preview-open { margin-top: 8px; min-height: 36px; justify-content: center; font-size: 13px; }
html[data-theme="dark"] .map-preview-popup .leaflet-popup-content-wrapper,
html[data-theme="dark"] .map-preview-popup .leaflet-popup-tip { background: var(--surface-2, #1e293b); }

/* LE TOOLTIP AU SURVOL D'UNE ÉPINGLE. La bulle grise de Leaflet (texte blanc sur
   un fond #333, sans retrait) donnait ce rectangle brut qu'on ne lisait pas. Ici :
   fond de la surface, encre du thème, une ligne nette. Il ne porte QUE le nom et
   la ville — les chiffres sont dans l'aperçu du clic. */
.leaflet-tooltip.map-tip {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .16);
}
.leaflet-tooltip.map-tip::before { display: none; }

.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .75rem;
  align-items: center;
  cursor: pointer
}

.muted {
  color: #64748b
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: .75rem;
  transition: background .15s
}

.btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

#map {
  height: min(70vh, 820px);
  min-height: 420px;
  border-radius: 1rem
}

@media (max-width: 1023px) {
  #map {
    height: 420px;
    min-height: 420px;
  }
}

/* LES JOINTURES DES TUILES. Leaflet fusionne ses tuiles en mode additif
   (plus-lighter), contre un défaut de Chromium. Quand la carte tombe à une
   fraction de pixel dans la page — c'est le cas au téléphone —, les deux tuiles
   voisines dessinent chacune la ligne de jonction et l'addition la blanchit : des
   lignes claires barraient la carte. En fusion normale, plus aucune ligne, dans
   Chromium comme dans WebKit. Mesuré le 2026-10-30 sur la luminosité des lignes
   de pixels aux jonctions : +36 au-dessus des voisines avant, +7 après (le simple
   relief du fond de carte) ; rien ne change sur ordinateur ni dans Safari. */
#map.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }

.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 600
}

.status-button {
  border: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.status-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.status-button:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}

.status-button:disabled {
  cursor: not-allowed;
  opacity: .7;
  box-shadow: none;
  transform: none;
}

.action-badge {
  padding: .55rem .9rem;
  border-radius: 9999px;
  font-weight: 700;
  gap: .65rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.action-badge .action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .55);
  font-size: .8rem;
  line-height: 1;
  font-weight: 900;
}

.status .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 9999px
}

.online {
  background: #dcfce7;
  color: #166534
}

.offline {
  background: #fee2e2;
  color: #991b1b
}

.checking {
  background: #f1f5f9;
  color: #334155
}

.results-count-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}


.skeleton-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .85);
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
  padding: 1rem;
  border: 1px solid #f1f5f9;
}

/* Skeleton « pro » : rectangle gris transparent + flash blanc balayant de
   gauche à droite (sweep). Appliqué à tout placeholder de donnée. */
.skeleton-line, .skeleton-block {
  position: relative;
  overflow: hidden;
  height: 12px;
  border-radius: 6px;
  background: rgba(148, 163, 184, .20);
}
.skeleton-line::after, .skeleton-block::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  animation: skeleton-sweep 1.5s ease-in-out infinite;
}
/* Variante sur fond sombre (en-tête du dossier). */
.skeleton-block.on-dark { background: rgba(255, 255, 255, .12); }
.skeleton-block.on-dark::after { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%); }

@keyframes skeleton-sweep {
  100% { transform: translateX(100%); }
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: .5rem 1rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-weight: 600;
  color: #64748b
}

.tab:hover {
  color: #111827
}

.tab.active {
  color: #1e293b;
  border-bottom-color: #1e293b
}

.tooltip-field {
  cursor: help;
  border-bottom: 1px dotted #94a3b8;
}

.sort-btn {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  padding: .25rem .6rem;
  border-radius: .5rem;
  font-size: .875rem;
  color: #334155
}

.sort-btn:hover {
  border-color: #e2e8f0
}

.sort-btn.active {
  background: #1e293b;
  color: white;
  border-color: #1e293b
}

.favorite-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.25rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  transition: transform .1s;
}

.favorite-btn:hover {
  transform: scale(1.15);
}

/* En FLUX (plus en position absolue) : les contrôles partagent une ligne
   justify-between avec le triplet, et NE se compriment PAS. Le titre passe en
   dessous, pleine largeur → il ne peut plus toucher le badge NEW ni le cadre. */
.card-top-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Bloc COMMUNAUTÉ : un bandeau compact sous la barre d'outils, sur ordinateur et
   tablette. Il ne s'ouvre pas d'un clic (donc ne déplace pas la ligne). Au
   téléphone, il n'existe pas (décision du 2026-10-30) : la place va aux annonces.
   Tant que les chiffres ne sont pas chargés, aucun cadre creux : la classe
   `.is-loaded` (posée par loadCommunityStats) est la seule à l'afficher. */
.community-stats {
  display: none;
  margin: 12px 0 4px;
  background: linear-gradient(135deg, #eef2ff 0%, #eef6ff 42%, #ecfdf5 100%);
  border: 1px solid #dbe4f2;
  border-radius: 14px;
  padding: 10px 14px;
}
.community-stats.is-loaded { display: block; }
.cstat-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 800; color: #1e293b;
  letter-spacing: .02em; text-transform: uppercase; margin-bottom: 8px;
}
/* Une rangée de chiffres, lisible d'un coup d'œil — pas une grille haute. */
.cstat-grid {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
}
.cstat {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; box-shadow: none;
}
.cstat-icon {
  width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.cstat-body { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cstat-value {
  font-size: 1.15rem; font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; color: #0f172a; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cstat-label { font-size: .72rem; color: #64748b; }

/* Fil d'activité « en direct ». */
.cstat-live {
  display: flex; align-items: center; gap: 9px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid #e2ebf5;
  font-size: .78rem; color: #475569; min-height: 18px;
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
#community-ticker { transition: opacity .35s ease; }
/* AU TÉLÉPHONE, pas de catalogue en chiffres : la première annonce vient tout de suite. */
@media (max-width: 640px) {
  .community-stats.is-loaded { display: none; }
}
#community-ticker b { color: #0f172a; font-weight: 700; }
#community-ticker .tk-city { color: #1d4ed8; font-weight: 700; }
#community-ticker .tk-time { color: #94a3b8; }

/* Bandeaux « communauté » (benchmarks de zone). */
.community-banner {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(90deg, #eff6ff, #f0fdf4);
  border: 1px solid #e2e8f0; font-size: .82rem; color: #334155;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
}
.community-banner b { color: #0f172a; font-weight: 700; }
.community-banner .cb-sep { color: #cbd5e1; }

/* Menu « ⋯ » discret de la carte (actions secondaires, hors cadre dossier). */
.card-menu { position: relative; display: inline-flex; }
.card-menu-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #ffffff; color: #475569;
  font-weight: 700; line-height: 1; letter-spacing: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.card-menu-btn:hover { background: #f1f5f9; }
.card-menu-btn.flagged { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.card-menu-pop {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  width: max-content; background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
  padding: 4px; display: none;
}
.card-menu.open .card-menu-pop { display: block; }
.card-menu-item {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .5rem .6rem; border: none; background: none; text-align: left;
  white-space: nowrap;
  font-size: .8rem; font-weight: 600; border-radius: 7px; cursor: pointer; color: #334155;
}
.card-menu-item:hover { background: #f1f5f9; }
.card-menu-item.danger { color: #b91c1c; }
.card-menu-item.pending { color: #b45309; }

.card-top-right .favorite-btn {
  position: static;
  top: auto;
  right: auto;
}

/* NEW en VERT, bien visible, placé AU-DESSUS du titre (sur sa propre ligne). */
.new-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #4ade80;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

.new-badge::before {
  content: '';
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 9999px;
  background: currentColor;
  opacity: .9;
}

/* Contour net des badges pilule : sans bordure, leur seul contour est le fond
   coloré et deux badges voisins se fondent au premier coup d'œil. Une fine
   bordure sombre semi-transparente cerne chaque badge sur tous les fonds
   pastel, plus un liseré clair interne pour le détacher nettement. */
.badge-pill {
  border: 1px solid rgba(15, 23, 42, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
/* La pastille de provenance qui mène à l'annonce (marche/resultats.js) : la
   forme et les couleurs des autres pastilles (le thème sombre les reprend par
   leur style en ligne) ; la flèche dit qu'elle ouvre le site, le nom se souligne
   au survol. */
.source-lien { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.source-lien:hover .source-lien-nom, .source-lien:focus-visible .source-lien-nom { text-decoration: underline; }
.source-lien-fleche { font-size: 10px; opacity: .65; }

.level-detail-card {
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 0.9rem;
  background: #ffffff;
}

.field-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.field-chip-present {
  background: #dcfce7;
  color: #166534;
}

/* Cashflow et rendement sont calcules SOUS la base d'estimation. La hierarchie
   se lit au RETRAIT de leurs libelles et a la couleur du parent — pas a un trait
   vertical, qui ajoutait un ornement de plus dans un panneau deja charge. */
.filter-subgroup [data-cf-nature-cluster] .filter-cluster-title {
  color: #4f46e5;
}

/* Seuls les enfants sont decales ; la base reste alignee sur Prix et Surface,
   ce qui la designe comme leur tete de groupe. */
.filter-subgroup .value-cluster .filter-cluster-head {
  padding-left: .85rem;
}

/* Ligne « donnees connues » : MEME grille que les autres filtres (libelle a
   gauche, pastilles a droite). Sa nature differente — ce qu'on SAIT du bien,
   pas une de ses valeurs — se lit au fond teinte et a la jauge, la meme que
   celle du badge des cartes. */
.conf-cluster {
  background: #f8fafc;
  border-radius: .6rem;
  border-top: 0;
  padding-left: .5rem;
  padding-right: .5rem;
}

/* Les titres sont en `white-space: nowrap` dans une colonne de 9,5rem :
   « Donnees connues » precede de la jauge y debordait et chevauchait les
   pastilles. Ici seulement, on autorise le retour a la ligne. */
.conf-cluster .filter-cluster-title {
  white-space: normal;
  line-height: 1.3;
}

/* Meme jauge que le badge des cartes : c'est ce qui fait le lien visuel. */
.conf-gauge {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -2px;
}

.conf-gauge i {
  width: 3px;
  border-radius: 1px;
  background: #94a3b8;
  display: inline-block;
}

.conf-gauge i:nth-child(1) { height: 5px; }
.conf-gauge i:nth-child(2) { height: 6.5px; }
.conf-gauge i:nth-child(3) { height: 8px; }
.conf-gauge i:nth-child(4) { height: 9.5px; }
.conf-gauge i:nth-child(5) { height: 11px; }


/* DEUX surlignages CONCENTRIQUES, qui se superposent sans se gener. Tous deux
   sont des `box-shadow` : ils epousent donc exactement le rayon de la carte,
   contrairement a un trait lateral en pseudo-element, qui depassait des angles.
     - NOUVEAUTE : halo vert diffus (le vert du badge « NEW »), pose a l'exterieur.
     - SELECTION : anneau sombre fin, colle a la bordure, donc DEVANT le halo.
   L'anneau est declare en premier : il se dessine par-dessus le halo, et les
   deux restent lisibles ensemble. Chacun n'existe que dans son etat, via une
   variable — une seule declaration `box-shadow`, donc aucun conflit. */
.card {
  position: relative;
  --ring-select: 0 0 0 0 rgba(15, 23, 42, 0);
  --ring-new: 0 0 0 0 rgba(21, 128, 61, 0);
  --card-lift: 0 6px 18px rgba(15, 23, 42, .06);
  box-shadow: var(--ring-select), var(--ring-new), var(--card-lift);
  transition: background .25s ease, border-color .25s ease, box-shadow .2s ease;
}

.card.is-new {
  border-color: #86efac;
  background: #f4fdf7;
  --ring-new: 0 0 0 4px rgba(74, 222, 128, .28);
}

/* UNIQUEMENT les cartes de biens (id="row-..."). La classe `.card` habille aussi
   le panneau de filtres, la carte geographique et les encarts de gestion : un
   anneau de selection n'y a aucun sens, rien ne s'y selectionne. */
.card[id^="row-"]:hover {
  --ring-select: 0 0 0 2px rgba(15, 23, 42, .38);
  --card-lift: 0 10px 26px rgba(15, 23, 42, .10);
}

.filter-panel {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.filter-panel[open] {
  border-color: #cbd5e1;
}

/* LA BARRE DE FILTRES (index.html, marche/filtres.js). Une ligne de boutons ;
   chacun ouvre son panneau juste sous lui, par-dessus les résultats. La carte
   des filtres passe devant la liste : un z-index ne vaut que dans sa carte. */
.card:has(.barre-filtres) { position: relative; z-index: 40; }
/* L'EN-TÊTE DU CADRE (décision du 2026-10-30, « beaucoup d'espace vide ») : le
   titre, puis les recherches enregistrées sur la même ligne ; sur ordinateur, la
   pastille Liste / Carte s'y pose à droite (.market-view-bar plus bas). Avant,
   le titre, les recherches et la pastille occupaient chacun une bande presque
   vide. */
.filtres-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-bottom: 12px; }
.filtres-entete #recherches-barre { flex: 1 1 18rem; min-width: 0; }
.filtres-entete #recherches-barre .veille-barre { padding: 0; margin: 0; }
.barre-filtres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* UNE LIGNE DE FILTRES sur ordinateur : la ville prend la place qui reste, les
   familles se serrent. Mesuré à 1 440 px : il manquait 120 px, et la dernière
   famille tombait seule sur une deuxième ligne. */
.filtres-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.filtres-groupe[data-nature="texte"] { flex: 1 1 12rem; min-width: 12rem; }
.filtres-groupe[data-nature="texte"] .filtre-ville { flex: 1 1 auto; }
/* LES FAMILLES DE FILTRES (texte, choix, valeurs, le reste) : rassemblées sans
   être nommées. Un fond à peine teinté réunit les boutons d'une même famille ;
   un filtre seul (la ville) n'en a pas besoin. */
.filtres-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-radius: 999px; }
.filtres-groupe:has(> :nth-child(2)) { padding: 3px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.filtre-ville { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border: 1px solid #cbd5e1; border-radius: 999px;
  background: var(--surface); flex: 0 1 15rem; min-width: 11rem; }
.filtre-ville:focus-within { border-color: var(--ink); }
.filtre-ville-icone { color: #64748b; font-size: 15px; }
.filtre-ville-champ { flex: 1; min-width: 0; border: 0 !important; outline: none; box-shadow: none !important; padding: 4px 0 !important; font-size: 14px; background: transparent; color: var(--ink); }
.filtre-ville-bouton { font: inherit; font-size: 13px; font-weight: 700; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.filtre-pop { position: relative; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
.filtre-bouton { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; user-select: none; }
.filtre-bouton::-webkit-details-marker { display: none; }
.filtre-bouton:hover { border-color: #94a3b8; }
/* Un filtre actif garde le contour de la sélection, même ouvert. */
.filtre-pop[open]:not(.filtre-actif-pop) > .filtre-bouton { border-color: var(--ink); }
/* Un filtre qui filtre se voit sans ouvrir son panneau : il prend l'état de la
   sélection (boutons.css). */
.filtre-caret { font-size: 11px; opacity: .6; transition: transform .15s ease; }
.filtre-pop[open] .filtre-caret { transform: rotate(180deg); }
.filtre-pop-corps { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; width: max-content; min-width: 18rem; max-width: min(44rem, 92vw);
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .14); max-height: min(70vh, 36rem); overflow-y: auto; }
/* Dans un panneau à un seul filtre, le titre répète le bouton : on ne garde que « effacer ». */
.filtre-pop .filter-cluster { border: 0; padding: 0; min-height: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.filtre-pop .filter-cluster-head { width: auto; justify-content: flex-end; order: 2; }
.filtre-pop .filter-cluster-title { display: none; }
/* Rien à effacer : la ligne de « effacer » ne prend pas de place. */
.filtre-pop .filter-cluster:not(.has-active) .filter-cluster-head { display: none; }
html[data-theme="dark"] .filter-chip-tag { border-color: var(--hairline); }
/* MIN ET MAX, EN TÊTE DE CHAQUE FILTRE DE VALEUR : deux champs côte à côte sur
   toute la largeur, les raccourcis en dessous. Même présentation dans les
   panneaux de la barre et dans le tiroir. */
.filtre-pop-corps .value-custom-row,
.filtres-tiroir .value-custom-row { order: -1; flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 4px; padding: 0; border: 0; }
.filtre-pop-corps .value-custom-row input,
.filtres-tiroir .value-custom-row input { width: 100%; padding: .6rem .75rem; font-size: .9rem; font-weight: 500; border: 1px solid #cbd5e1; border-radius: .6rem; }
.filtre-pop-corps .filter-chip-grid,
.filtres-tiroir .filter-chip-grid { gap: 8px; }
.filtre-bouton-icone { width: 15px; height: 15px; flex: none; }
/* Un panneau de valeur garde la largeur de ses deux champs, sans s'étirer. */
.filtre-pop-corps:has(.value-cluster) { width: 22rem; max-width: 92vw; box-sizing: border-box; }
/* LE TIROIR « PLUS DE FILTRES » : à droite, sur toute la hauteur ; titres en
   clair, une section par filtre, un pied fixe pour effacer ou voir les biens. */
.filtres-tiroir { position: fixed; inset: 0 0 0 auto; margin: 0 0 0 auto; width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: none;
  padding: 0; border: 0; border-left: 1px solid var(--hairline); background: var(--surface); color: var(--ink); box-shadow: -18px 0 40px rgba(15, 23, 42, .18); }
.filtres-tiroir[open] { display: flex; flex-direction: column; }
.filtres-tiroir::backdrop { background: rgba(15, 23, 42, .38); }
.filtres-tiroir-entete { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--hairline); }
.filtres-tiroir-entete h2 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.filtres-tiroir-fermer { width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 22px; line-height: 1; cursor: pointer; }
.filtres-tiroir-fermer:hover { background: var(--surface-2, #f1f5f9); }
.filtres-tiroir-corps { flex: 1; overflow-y: auto; padding: 0 20px; }
.filtres-tiroir .filter-cluster,
.filtres-tiroir .conf-cluster { display: block; min-height: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: none; }
.filtres-tiroir .filter-cluster:first-child { border-top: 0; }
/* Dans le tiroir, les valeurs chiffrées puis les choix : une bande sépare les deux familles. */
.filtres-tiroir .tiroir-groupe + .tiroir-groupe { border-top: 6px solid color-mix(in srgb, var(--ink) 6%, transparent); margin: 0 -20px; padding: 0 20px; }
.filtres-tiroir .filter-cluster-head { width: auto; padding: 0; margin-bottom: 12px; }
.filtres-tiroir .filter-cluster-title { font-size: .95rem; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; white-space: normal; line-height: 1.3; }
.filtres-tiroir .filter-cluster-reset { font-size: .82rem; color: var(--ink-2); }
.filtres-tiroir-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--hairline); }
.filtres-tiroir-effacer { font: inherit; font-weight: 600; padding: 8px 4px; border: 0; background: none; color: var(--ink); text-decoration: underline; cursor: pointer; }
.filtres-tiroir-voir { font: inherit; font-weight: 700; padding: 11px 20px; border: 0; border-radius: 10px; cursor: pointer; }
html[data-theme="dark"] .filtres-tiroir .filter-cluster { background: none !important; }
/* « Favoris uniquement » : un bouton de la barre, sélectionné quand il filtre
   (boutons.css). */
.filtre-favoris input { position: absolute; opacity: 0; pointer-events: none; }
.filtre-favoris > span[aria-hidden] { color: #e11d48; }
.filtre-favoris:has(input:focus-visible) { outline: 2px solid #2563eb; outline-offset: 2px; }
/* Le libellé porté par chaque chiffre ne sert qu'au téléphone (voir plus bas). */
.valeur-libelle { display: none; }
/* Sur un grand écran, le conteneur de la rangée défilante s'efface. */
.filtres-defilant { display: contents; }
/* TÉLÉPHONE : la ville sur sa ligne, puis TOUS les autres filtres sur une seule
   rangée qui défile du doigt (430 px de boutons empilés auparavant). Un panneau
   ouvert ne peut pas vivre dans une rangée qui défile, il y serait coupé : il
   s'ouvre en feuille au bas de l'écran. Le cadre des filtres perd son flou
   (backdrop-filter), qui faisait cadre aux éléments fixés à l'écran. */
@media (max-width: 640px) {
  .card:has(.barre-filtres) { backdrop-filter: none; }
  .filtres-ligne { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
  .filtre-ville { flex: 1 1 100%; min-width: 0; }
  /* position: relative : la case cachée de « Favoris » (position absolue) se
     plaçait sinon par rapport au cadre, hors de la rangée, et élargissait la page. */
  .filtres-defilant { position: relative; display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 2px 16px; }
  .filtres-defilant::-webkit-scrollbar { display: none; }
  .filtres-defilant .filtres-groupe { flex: none; flex-wrap: nowrap; }
  .filtre-pop-corps, .filtre-pop-corps:has(.value-cluster) {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; box-sizing: border-box;
    width: auto; min-width: 0; max-width: none; max-height: 70vh; overflow-y: auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 32px rgba(15, 23, 42, .22); }
  .filtre-pop-corps .filter-chip-grid { min-width: 0; }
  .filtre-pop-corps .filter-cluster { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .4rem; }
  .filtre-pop-corps .filter-cluster-head { width: auto; }
  /* La feuille est loin du bouton : elle porte le nom du filtre. */
  .filtre-pop .filter-cluster .filter-cluster-head,
  .filtre-pop .filter-cluster:not(.has-active) .filter-cluster-head { display: flex; order: -2; justify-content: space-between; margin-bottom: 4px; }
  .filtre-pop .filter-cluster-title { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }
}
/* LES FILTRES ACTIFS : chacun se retire d'un clic. */
.filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filtres-actifs[hidden] { display: none; }
.filtre-actif { font: inherit; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 4px 6px 4px 10px; border-radius: 999px;
  border: 1px solid #cbd5e1; background: #f1f5f9; color: var(--ink); cursor: pointer; }
.filtre-actif:hover { border-color: var(--ink); }
.filtre-actif-libelle { color: #64748b; }
.filtre-actif > span[aria-hidden] { font-size: 15px; line-height: 1; padding: 0 3px; color: #64748b; }
.filtre-tout-effacer { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: none; color: #475569; text-decoration: underline; cursor: pointer; padding: 4px; }
html[data-theme="dark"] .filtre-actif { background: var(--surface-2, #1e293b); border-color: var(--hairline); }
html[data-theme="dark"] .filtre-bouton, html[data-theme="dark"] .filtre-ville { border-color: var(--hairline); }
html[data-theme="dark"] .filtre-tout-effacer, html[data-theme="dark"] .filtre-actif-libelle { color: #94a3b8; }
#recherches-barre:empty { display: none; }

.filter-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  cursor: pointer;
  list-style: none;
  border-left: 4px solid transparent;
  transition: background .14s ease, border-color .14s ease;
  font-size: .8rem;
  color: #334155;
}

.filter-summary::-webkit-details-marker {
  display: none;
}

#filterPanel .filter-summary {
  background: #eff6ff;
  border-left-color: #3b82f6;
}
#filterPanel .filter-summary:hover {
  background: #dbeafe;
}
#filterPanel .filter-summary-label { color: #1d4ed8; }
#filterPanel .filter-summary-caret { color: #3b82f6; }

#valueFilterPanel .filter-summary {
  background: #eef2ff;
  border-left-color: #6366f1;
}
#valueFilterPanel .filter-summary:hover {
  background: #e0e7ff;
}
#valueFilterPanel .filter-summary-label { color: #4338ca; }
#valueFilterPanel .filter-summary-caret { color: #6366f1; }

.filter-summary-label {
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.filter-summary-badges {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: center;
  color: #94a3b8;
  font-size: .78rem;
}

.filter-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .45rem;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 600;
  color: #fff;
}

.filter-summary-badge.asset { background: #10b981; }
.filter-summary-badge.sale { background: #3b82f6; }
.filter-summary-badge.source { background: #475569; }
.filter-summary-badge.value { background: #6366f1; }

.filter-summary-hint {
  color: #94a3b8;
  font-size: .7rem;
}

.filter-summary-hint kbd {
  display: inline-block;
  padding: 0 .25rem;
  border: 1px solid #e2e8f0;
  border-radius: .2rem;
  background: #f8fafc;
  font-size: .65rem;
  color: #64748b;
  font-family: inherit;
}

.filter-summary-caret {
  transition: transform .2s ease;
  font-size: 1rem;
  font-weight: 700;
}

.filter-panel[open] .filter-summary-caret {
  transform: rotate(180deg);
}

.filter-panel[open] .filter-summary {
  border-bottom: 1px solid #e2e8f0;
}

.filter-clusters {
  display: flex;
  flex-direction: column;
  padding: .25rem .9rem .6rem;
  background: #ffffff;
}

.filter-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .45rem 0;
  border-top: 1px dashed #e2e8f0;
  min-height: 40px;
}

.filter-cluster:first-child {
  border-top: 0;
}

.filter-cluster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 9.5rem;
  flex-shrink: 0;
}

.filter-cluster-title {
  font-size: .7rem;
  font-weight: 700;
  color: #475569;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.filter-cluster-reset {
  visibility: hidden;
  border: 0;
  background: transparent;
  color: #94a3b8;
  padding: 0;
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.filter-cluster-reset:hover {
  color: #334155;
}

.filter-cluster.has-active .filter-cluster-reset {
  visibility: visible;
}

.filter-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  flex: 1;
}

.filter-chip {
  display: inline-flex;
}

.filter-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filter-chip-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  background: var(--surface);
  color: var(--ink-2);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .14s ease;
  white-space: nowrap;
  line-height: 1.1;
  user-select: none;
}

.filter-chip-tag:hover {
  border-color: #94a3b8;
  color: #334155;
  background: #f8fafc;
}

/* Une pastille choisie prend l'état de la sélection, dans tous les filtres
   (boutons.css). */

.filter-chip input:focus-visible + .filter-chip-tag {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.filters-heading {
  order: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: .1rem;
}
#filterPanel { order: 1; }
#valueFilterPanel { order: 2; }

.perf-subfilters {
  margin-top: .6rem;
  padding-left: .75rem;
  border-left: 2px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.filter-cluster-subtitle {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
}

/* Min/Max = contrôle PRINCIPAL de chaque filtre de valeur : placé EN PREMIER,
   champs rectangulaires nets. Les presets (chips) deviennent des raccourcis. */
.value-custom-row {
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 .55rem 0 0;
  padding: 0 .7rem 0 0;
  border-right: 1px solid #e2e8f0;
}
.value-custom-row::before { content: none; }
.value-custom-row input {
  width: 92px;
  padding: .42rem .7rem;
  line-height: 1.1;
  font-size: .82rem;
  font-weight: 700;
  border: 1.5px solid #cbd5e1;
  border-radius: .6rem;
  background: #ffffff;
  color: #1e293b;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.value-custom-row input::-webkit-outer-spin-button,
.value-custom-row input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.value-custom-row input::placeholder {
  color: #94a3b8;
  font-weight: 600;
}
.value-custom-row input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}

/* Presets = raccourcis MINEURS : plus petits et discrets tant qu'inactifs. */
/* Chips de catégorie : l'icône tracée s'aligne sur la ligne de base du texte
   et hérite de sa couleur (y compris à l'état sélectionné). */
/* Tendance de prix : la sparkline et sa variation sur une ligne, sous le prix.
   Discrète — c'est un complément du chiffre, pas un graphique à part entière. */
.price-trend { display: flex; align-items: center; gap: .45rem; margin-top: .25rem; }
.price-trend-delta { font-size: .72rem; font-weight: 700; white-space: nowrap; }

.filter-chip-tag > i[data-icon] {
  display: inline-flex;
  align-items: center;
  margin-right: .35rem;
  vertical-align: -2px;
  opacity: .85;
}
.filter-chip input:checked + .filter-chip-tag > i[data-icon] { opacity: 1; }

/* Les fourchettes toutes faites : des raccourcis lisibles, pas des pastilles
   éteintes — grisées, on les prenait pour désactivées. */
.value-cluster .value-chip .filter-chip-tag {
  font-size: .78rem;
  padding: .3rem .6rem;
}
.value-cluster .value-chip input:not(:checked) + .filter-chip-tag:hover {
  border-color: #cbd5e1;
  color: #475569;
  background: #f8fafc;
}

/* Sélecteur « par page » : select épuré avec chevron custom (pas de flèche native). */
.perpage-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #f8fafc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  border: 1px solid #e2e8f0;
  border-radius: .55rem;
  padding: .3rem 1.55rem .3rem .6rem;
  font-size: .8rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.perpage-field select:hover { border-color: #cbd5e1; background-color: #f1f5f9; }
.perpage-field select:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }

.value-misc-row {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  padding: .75rem .9rem .9rem;
  border-top: 1px dashed #e2e8f0;
  background: #fafbfc;
}
.value-misc-field { display: flex; flex-direction: column; gap: .2rem; }
.value-misc-field > span { font-size: .72rem; color: #64748b; font-weight: 600; }
/* Bien saisi et partagé par un autre utilisateur. */
.carte-partage { background: color-mix(in srgb, var(--veille-baisse) 14%, transparent); color: var(--veille-baisse); }

/* LES FORMULES : ce que la formule laisse de côté, au-dessus des résultats. */
.formule-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 12px; padding: 10px 14px;
  border: 1px dashed color-mix(in srgb, var(--insigne-or) 70%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--insigne-or) 8%, var(--surface)); }
.formule-bandeau[hidden] { display: none; }
.formule-bandeau-texte { display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); flex: 1 1 18rem; }
.formule-bandeau-texte strong { color: var(--ink); }
.formule-bandeau-geste { font: inherit; font-size: 13px; font-weight: 700; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
/* La catégorie d'une carte : du rouge au vert, l'or pour la meilleure. */
.categorie--pas_rentable { background: color-mix(in srgb, var(--veille-hausse) 12%, transparent); color: var(--veille-hausse); }
.categorie--peu_rentable { background: #fef3c7; color: #92400e; }
.categorie--assez_rentable { background: #ecfccb; color: #3f6212; }
.categorie--tres_rentable { background: color-mix(in srgb, var(--veille-baisse) 14%, transparent); color: var(--veille-baisse); }
.categorie--best { background: color-mix(in srgb, var(--insigne-or) 22%, transparent); color: #7c5a00; }
html[data-theme="dark"] .categorie--peu_rentable { background: rgba(251, 191, 36, .14); color: #fcd34d; }
html[data-theme="dark"] .categorie--assez_rentable { background: rgba(163, 230, 53, .14); color: #bef264; }
html[data-theme="dark"] .categorie--best { color: var(--insigne-or); }
/* La fenêtre des formules. */
.formules-dialogue { border: 1px solid var(--hairline); border-radius: 20px; padding: 24px; width: min(1000px, 95vw); max-height: 90vh;
  background: var(--surface); color: var(--ink); }
.formules-dialogue::backdrop { background: rgba(15, 23, 42, .55); }
.formules-entete { display: flex; justify-content: space-between; gap: 16px; }
.formules-entete h2 { font-size: 20px; font-weight: 800; margin: 0; }
.formules-entete p { font-size: 13px; color: var(--ink-3); margin: 4px 0 0; max-width: 46rem; }
.formules-fermer { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--ink-3); cursor: pointer; align-self: flex-start; }
.formules-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 18px; }
.formule { border: 1px solid var(--hairline); border-radius: 16px; padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.formule--actuelle { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.formule h3 { font-size: 16px; font-weight: 800; margin: 0; }
.formule-prix { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.formule ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.formule li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; }
.formule li.oui::before { content: '✓'; color: var(--veille-baisse); font-weight: 700; margin-right: 6px; }
.formule li.non { color: var(--ink-3); text-decoration: line-through; opacity: .7; }
.formule li.non::before { content: '·'; margin-right: 6px; }
.formule li > span:first-child { flex: 1; }
.formule-seuil { font-size: 11px; color: var(--ink-3); }
.formule-offerte { font-size: 12px; color: var(--ink-2); }
.formule-actuelle-note { font-size: 12px; font-weight: 700; color: var(--veille-baisse); }
.formule-geste { font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 12px;
  background: var(--surface-2); color: var(--ink-3); max-width: 100%; }
.formule-geste[disabled] { cursor: not-allowed; }
.formules-note { font-size: 12px; color: var(--ink-3); margin: 16px 0 0; }

/* « À vérifier » : un rendement élevé sur des données insuffisantes. Une piste,
   pas une affaire : le ton de l'avertissement, pas celui du podium. */
.categorie--a_verifier { background: transparent; color: #92400e; border: 1px dashed #d97706; }
html[data-theme="dark"] .categorie--a_verifier { color: #fcd34d; border-color: #fbbf24; }
/* Le bien de la semaine, offert à tous. */
.bien-semaine { background: color-mix(in srgb, var(--insigne-or) 22%, transparent); color: #7c5a00; }
html[data-theme="dark"] .bien-semaine { color: var(--insigne-or); }

/* MODE SIMPLE (cadre/affichage.js). Un filtre avancé ACTIF reste affiché :
   aucun filtre invisible ne trie la liste. */
body.mode-simple .filter-cluster[data-avance]:not(.has-active) { display: none; }
/* Ses filtres masqués, « Plus de filtres » ouvrirait un panneau vide : il ne
   s'affiche que si l'un d'eux filtre. */
body.mode-simple .filtre-plus:not(:has(.filter-cluster.has-active)) { display: none; }
/* Longue durée seule (mode simple, ou courte durée masquée) : pas de choix de base. */
body.base-ld-seule [data-cf-nature-cluster] { display: none; }
/* Les outils de la formule, sous ses catégories. */
.formule .formule-outils { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hairline); }
.formule .formule-outils li { justify-content: flex-start; flex-wrap: nowrap; }
.formule-pour-qui { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin: 0; }

/* LA COURTE DURÉE SANS LA FORMULE PRO (cadre/affichage.js) : visible, grisée,
   avec la formule qui l'ouvre ; son choix dans « Base d'estimation » est inerte. */
.cd-fermee-ligne { color: var(--ink-3); }
.cd-fermee-echeancier { display: flex; align-items: center; justify-content: center; height: 22px; border-radius: 6px;
  background: repeating-linear-gradient(135deg, #f1f5f9 0 8px, #e8edf3 8px 16px); color: var(--ink-3); font-size: 11px; font-weight: 600; }
html[data-theme="dark"] .cd-fermee-echeancier { background: repeating-linear-gradient(135deg, rgba(148, 163, 184, .10) 0 8px, rgba(148, 163, 184, .16) 8px 16px); }
/* Courte durée exclue par la réglementation (noyau/reglementation.js) : même
   échéancier vide, la raison en rouge. */
.cd-fermee-echeancier.cd-interdite { color: #b91c1c; }
html[data-theme="dark"] .cd-fermee-echeancier.cd-interdite { color: #fca5a5; }
.filtre-pro { display: none; margin-left: 6px; font-size: 11px; font-weight: 700; }
body.courte-duree-fermee .filtre-pro { display: inline; }
body.courte-duree-fermee .cf-nature-chip:has(input:disabled) { cursor: help; }
body.courte-duree-fermee .cf-nature-chip input:disabled + .filter-chip-tag { opacity: .5; cursor: help; pointer-events: none; }

/* LA CARTE AU TÉLÉPHONE. L'identité du bien, puis le cadre Dossier pleine
   largeur : côte à côte, le cadre écrasait le titre en une colonne d'un mot.
   Le tableau des chiffres : le libellé (Estimé, Longue durée…) sur sa ligne, les
   valeurs en colonnes égales ; à cinq colonnes sur 330 px, les en-têtes se
   chevauchaient. */
@media (max-width: 640px) {
  /* Doublée : la classe items-start de Tailwind, chargée après, l'emportait. */
  .carte-entete.carte-entete { flex-direction: column; align-items: stretch; }
  .carte-entete .card-top-right { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .carte-entete .dossier-actions { flex: 1; min-width: 0; }
  .carte-entete .dossier-meta { justify-content: flex-start; flex-wrap: wrap; }
  .carte-metriques { column-gap: 6px; }
  .carte-metriques.px-3 { padding-left: 8px; padding-right: 8px; }
  /* Quatre chiffres : deux colonnes sur deux lignes (Revenu, Cashflow / Rend.
     net, Rend. FP). Sur une seule ligne, un cashflow à cinq chiffres débordait
     sur sa voisine dès 390 px. Chaque case est lue de gauche à droite : son
     libellé, puis son chiffre. En mode simple, les trois chiffres tiennent sur
     une ligne. */
  .carte-metriques.carte-metriques--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; column-gap: 16px; }
  .carte-metriques.carte-metriques--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carte-metriques.carte-metriques--4 > :not(:first-child) { text-align: left; }
  .carte-metriques--4 .valeur-libelle { justify-content: flex-start; }
  /* Les col-span de Tailwind (feuille chargée après celle-ci) imposaient leurs
     largeurs de bureau : la règle doit les battre. */
  .carte-metriques.carte-metriques > * { grid-column: auto; min-width: 0; }
  .carte-metriques.carte-metriques > :first-child { grid-column: 1 / -1; }
  .carte-metriques.text-\[11px\] { font-size: 9.5px; letter-spacing: 0; line-height: 1.25; }
  .carte-metriques.carte-metriques > :not(:first-child) { font-size: 13px; white-space: nowrap; }
  .carte-metriques.carte-metriques.text-\[11px\] > :not(:first-child) { font-size: 9.5px; white-space: normal; }
  /* Chaque valeur porte son libellé au-dessus d'elle ; la rangée de titres, trop
     loin des lignes pour s'y rattacher, ne garde que la base (Estimé, Actuel). */
  .carte-metriques--titres > :not(:first-child) { display: none; }
  .carte-metriques.carte-metriques:not(.carte-metriques--titres) { align-items: end; }
  /* Même hauteur pour tous, (i) ou non : les chiffres restent sur une ligne. */
  .valeur-libelle { display: flex; justify-content: flex-end; align-items: center; gap: 1px; height: 13px; margin-bottom: 3px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--ink-3, #64748b); }
  /* Le (i) standard (formulaires.css, chargée après) mesure 16 px : celui d'un
     libellé abrégé reste à 11 px, collé au libellé. */
  .valeur-libelle .aide-i.valeur-libelle-info { flex: none; width: 11px; height: 11px; margin-left: 0; font-size: 9px; position: relative; top: -3px; vertical-align: baseline; text-transform: none; }
}

/* AU TÉLÉPHONE, le tri, le nombre par page et le nombre de résultats tiennent sur
   une ligne ; la pagination ne reste qu'en bas de la liste. */
@media (max-width: 640px) {
  .barre-tri.barre-tri { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
  .barre-tri #sort-bar { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
  .barre-tri [data-i18n="sort.by"], .barre-tri .perpage-field > span { display: none; }
  .barre-tri #sort-select { min-width: 0; flex: 1 1 auto; max-width: 13rem; }
  .barre-tri #results-count { font-size: .8rem; }
  #pagination-controls-top { display: none; }
}
  .carte-metriques.carte-metriques > :not(:first-child) { font-size: 12px; }
/* Lecture courte du Marché ; les mêmes critères pilotent la liste et la carte. */
.market-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.mobile-filters-toggle { display:none; }
.hypotheses-button { display:grid; gap:3px; text-align:left; font-size:14px; font-weight:600; color:var(--ink-2); }
.hypotheses-button small { font-size:12px; font-weight:400; color:var(--ink-3); }
.hypotheses-button:hover > span { text-decoration:underline; }
/* LA BARRE DU CHOIX LISTE / CARTE : collée sous la navigation, juste au-dessus
   de la zone qu'elle change. Le sélecteur est une pastille compacte poussée à
   droite — c'est un réglage de vue, pas une commande qu'on lit de gauche à
   droite —, sur toutes les largeurs (décision du 2026-10-30 : en pleine largeur
   au téléphone, elle barrait l'écran). La barre elle-même est transparente et
   laisse passer le toucher : seule la pastille, avec son fond, couvre la liste
   qui défile dessous. */
/* z-index 55 : AU-DESSUS des cartes de contenu (40) et des panneaux de filtres
   déroulants (50). Sans cela, ouvrir un filtre recouvrait la barre et le choix
   Liste / Carte disparaissait sous le panneau. Les fenêtres modales (préférences,
   tiroir de filtres) restent au-dessus : elles vivent dans le top layer natif des
   <dialog>, que le z-index ne concerne pas. */
.market-view-bar { position:sticky; top:var(--nav-h); z-index:55; display:flex; justify-content:flex-end;
  margin:0 0 2px; padding:6px 0; pointer-events:none; }
.market-view-switch { display:inline-flex; border:1px solid var(--hairline); border-radius:10px; padding:3px; background:var(--surface);
  box-shadow:0 2px 8px rgba(15, 23, 42, .08); pointer-events:auto; }
.market-view-switch button { min-height:40px; min-width:64px; padding:8px 14px; border-radius:7px; font-size:14px; font-weight:600; color:var(--ink-2); }
/* Sur ordinateur, la pastille se pose dans l'en-tête du cadre des filtres, à
   droite, au lieu d'occuper sa propre bande : la barre garde sa place dans le
   flux (elle reste collée sous la navigation au défilement), mais une marge
   négative égale à sa hauteur fait remonter le cadre sous elle. L'en-tête lui
   réserve la place à droite. Pastille de 48 px, centrée sur le titre du cadre.
   Le Marché espace ses blocs par « space-y-6 » (1,5rem entre la barre et la
   grille), qui l'emporte sur une simple classe : d'où l'identifiant, et la
   marge qui compte cet écart.
   AU DÉFILEMENT, la pastille garde sa distance à la navigation, sans sauter
   (décision du 2026-10-30) : la barre et la mini-carte s'accrochent à la MÊME
   hauteur (--accroche-carte), si bien que la carte remonte jusqu'à elle et
   l'entoure exactement comme l'en-tête des filtres — 13 px du haut, 17 px du
   bord droit, centrée sur le titre. Accrochée 3 px plus haut que la carte, elle
   débordait de son bord supérieur. */
#searchWorkspace { --accroche-carte: calc(var(--nav-h) + 16px); }
@media (min-width:1024px) {
  #searchWorkspace > .market-view-bar { top:var(--accroche-carte); padding:13px 17px 0 0; margin-bottom:calc(-61px - 1.5rem); }
  /* L'en-tête de la mini-carte réserve la place de la pastille qui s'y pose : à
     1 024 px, elle touchait « Vue globale des biens » ; le titre passe à la ligne. */
  #marketMapPanel > :first-child { padding-right:150px; }
  .filtres-entete { padding-right:160px; min-height:40px; }
}

.market-layout[data-view] { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:20px; }
.market-layout .market-results-column { display:contents; }
.market-layout .market-filters { grid-column:1 / -1; }
.market-layout .market-result-panel { grid-column:1; margin:0; }
.market-layout .market-result-panel.card { padding:0; }
.market-layout .market-map-column { grid-column:2; grid-row:2; top:var(--accroche-carte); }
.market-layout[data-view="map"] { grid-template-columns:minmax(0,1fr); }
.market-layout[data-view="map"] .market-result-panel { display:none; }
.market-layout[data-view="map"] .market-map-column { grid-column:1; position:static; }
.market-layout[data-view="map"] #map { height:min(65dvh,720px); min-height:340px; }
.card-property-title { display:block; font-size:16px; line-height:1.4; color:var(--ink); }
.card-property-title:hover { text-decoration:underline; }
.card .card-open-case { min-height:40px; font-size:13px; padding:8px 14px; }
.card .favorite-btn,.card .card-menu-btn,.card .map-focus-btn { min-width:40px; min-height:40px; }
.geo-precision { font-size:11px; color:var(--ink-3); border:1px solid var(--hairline); border-radius:5px; padding:1px 5px; }
.financial-headline { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:12px; align-items:start; }
.financial-headline > div { display:grid; gap:4px; }
.financial-headline span,.financial-headline small { font-size:12px; line-height:1.4; color:var(--ink-3); }
.financial-headline strong { font-size:19px; font-weight:650; font-variant-numeric:tabular-nums; line-height:1.3; color:var(--ink); }
.financial-headline-main strong { font-size:25px; }
.card .card-financial-block { margin-top:0; padding-top:8px; }
.card-financial-details { margin-top:14px; border-top:1px solid var(--hairline); }
.card-financial-details > summary { cursor:pointer; color:var(--ink-2); font-size:13px; font-weight:500; padding:12px 0 2px; }
.card-financial-details[open] > div { margin-top:12px; }
.card-description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.recherche-ouvrir { display:inline-flex; align-items:center; gap:6px; background:transparent; border:0; color:inherit; font:inherit; padding:3px 0; }
.recherche-puce .recherche-retirer { min-height:28px; min-width:28px; background:transparent; border:0; color:inherit; }
.metric-unavailable,.calculation-error { padding:12px; color:var(--cashflow-negative); font-size:14px; }
.card-footer { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:14px; padding-top:10px; border-top:1px solid var(--hairline); }
.card-footer > span:first-child { font-size:12px; color:var(--ink-3); }
.card-community { display:inline-flex; gap:6px; margin-left:auto; }
.card .dossier-actions > legend { color:var(--ink-3); }
.card-footer .dossier-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; width:100%; gap:10px; border:0; padding:0; }
.card-footer .dossier-actions > legend { display:none; }
.card-footer .dossier-meta { display:flex; flex-wrap:wrap; gap:5px; }
.card-footer .dossier-buttons { margin-left:auto; }
.card-footer .favorite-btn { position:static; }
.card-footer .card-description { flex:1 1 100%; margin-top:0; }
.card .carte-entete > .min-w-0 { flex:1; }
@media(max-width:1023px) {
  .market-layout[data-view] { grid-template-columns:minmax(0,1fr); }
  .market-layout[data-view="list"] .market-map-column { display:none; }
  .market-layout[data-view="map"] .market-map-column { display:block; }
  .market-layout .market-map-column { grid-column:1; }
  /* La mini-carte n'existe pas en vue liste sur mobile : le bouton « centrer »
     n'a rien à centrer. Le masquer vaut mieux qu'un geste qui déplacerait la vue
     vers une carte que l'onglet Carte sert déjà. */
  .map-focus-btn { display:none; }
}
@media(max-width:640px) {
  .market-filters .barre-filtres { gap:6px; }
  .market-filters #recherches-barre .veille-barre { padding:0; margin-top:0; }
  .market-result-panel #sort-dir { min-width:32px; min-height:40px; }
  .card .card-financial-block { margin-top:0; padding-top:8px; }
  /* Au téléphone, pas de titre ; les recherches enregistrées passent sous les filtres. */
  .market-filters { display:flex; flex-direction:column; }
  .market-filters .filtres-titre { display:none; }
  .market-filters .filtres-entete { order:2; margin:6px 0 0; }
  .mobile-filters-toggle { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:8px 14px; border:1px solid var(--hairline); border-radius:10px; background:var(--surface); color:var(--ink-2); font-size:14px; font-weight:600; }
  .mobile-filters-toggle > span:first-child { margin-right:auto; }
  .market-filters #marketFilterControls[data-expanded="false"] { display:none; }
  .market-filters #marketFilterControls[data-expanded="true"] { display:flex; }
  .market-filters .filtres-defilant > .filtres-groupe { flex:0 1 auto; min-width:0; max-width:100%; flex-wrap:wrap; }
  .market-filters .filtres-defilant { flex:0 0 auto; flex-wrap:wrap; overflow:visible; margin:0; padding:0; width:100%; }
  #appShell { padding:16px; }
  .market-layout[data-view] { gap:16px; }
  .market-toolbar { gap:10px; }
  .hypotheses-button { flex:1 1 100%; }
  .market-filters .filtres-ligne { flex-direction:column; flex-wrap:nowrap; align-items:stretch; overflow:visible; gap:8px; }
  .market-filters .filtres-groupe { flex-wrap:wrap; }
  .market-filters .filtres-groupe[data-nature="texte"] { flex:none; width:100%; }
  .market-filters .filtre-ville { width:100%; }
  .card .carte-entete { display:flex; flex-direction:row; align-items:start; gap:8px; }
  .card .card-top-right { width:auto; justify-content:space-between; }
  .card .dossier-actions { flex:1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; padding:0; border:0; }
  .card .dossier-actions > legend { display:none; }
  .card .dossier-meta { display:flex; flex-wrap:wrap; gap:5px; }
  .card .dossier-buttons { margin-left:auto; }
  .financial-headline { grid-template-columns:1fr 1fr; gap:12px; }
  .financial-headline-main { grid-column:1 / -1; }
  .card-community { margin-left:0; }
}

/* Lecture au pouce : chiffres d'abord, détails à la demande. */
@media (max-width:640px) {
  .market-result-panel #results > .card { padding:14px; border-radius:16px; background:var(--surface) !important; }
  .market-result-panel .card > .row { gap:12px 10px; }
  .market-result-panel .card-property-title { font-size:15px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .market-result-panel .card-property-metric { grid-column:span 6 / span 6; min-width:0; }
  .market-result-panel .card-property-metric > .muted { font-size:11px; line-height:1.3; margin-bottom:3px; }
  .market-result-panel .card-property-metric > .font-medium { font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; }
  .market-result-panel .financial-headline { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:10px 16px; padding:12px; border-radius:12px; background:var(--surface-2); }
  .market-result-panel .financial-headline-main { grid-column:1; grid-row:1 / 3; align-content:start; }
  .market-result-panel .financial-headline strong { font-size:17px; }
  .market-result-panel .financial-headline-main strong { font-size:24px; letter-spacing:-.04em; }
  .market-result-panel .financial-headline span,.market-result-panel .financial-headline small { font-size:11px; }
  .market-result-panel .financial-headline-main small { margin-top:4px; }
  .market-result-panel .card-financial-details { margin-top:8px; border:0; }
  .market-result-panel .card-financial-details > summary { padding:10px 0; min-height:44px; font-size:12px; }
  .market-result-panel .card-footer { margin-top:0; padding-top:10px; gap:8px; }
  .market-result-panel .card-footer .dossier-actions { display:grid; grid-template-columns:minmax(0,1fr); flex-basis:100%; gap:10px; min-width:0; }
  .market-result-panel .card-footer .dossier-meta { justify-content:flex-start; align-items:center; width:100%; gap:5px; }
  .market-result-panel .card-footer .dossier-meta > span { font-size:10px; max-width:100%; }
  .market-result-panel .card-footer .dossier-meta .card-confidence { gap:4px !important; padding:4px 6px !important; }
  .market-result-panel .card-footer .dossier-meta .card-confidence > span:last-child { max-width:75px; font-size:9px !important; line-height:1.2; }
  .market-result-panel .card-footer .dossier-buttons { display:flex; align-items:center; justify-content:stretch; width:100%; margin:0; gap:8px; }
  .market-result-panel .dossier-buttons .card-open-case { flex:1; order:-1; }
  .market-result-panel .dossier-buttons .veille-puce { flex:1; min-height:44px; font-size:12px; text-align:center; }
  .market-result-panel .dossier-buttons .favorite-btn { width:44px; height:44px; flex:none; }
  .market-result-panel .geo-precision { font-size:10px; line-height:1.3; border:0; padding:0; }
  .market-result-panel .card-description { font-size:12px; line-height:1.4; -webkit-line-clamp:1; }
  .market-result-panel .card-community { margin-left:auto; }
  .market-result-panel .card-footer > span { font-size:11px; }
  .market-view-bar { padding:3px 0; }
}

.card-mobile-summary { display:none; }
@media (max-width:640px) {
  .market-result-panel #results > .card { padding:0; border-radius:12px; overflow:hidden; }
  .card-mobile-summary { display:grid; grid-template-columns:minmax(0,1fr) auto auto 14px; align-items:center; gap:8px; width:100%; min-height:64px; padding:10px 12px; text-align:left; color:var(--ink); background:transparent; cursor:pointer; }
  .card-mobile-summary:focus-visible { outline:2px solid var(--ink-2); outline-offset:-3px; }
  .card-mobile-identity { display:grid; gap:3px; min-width:0; }
  .card-mobile-identity strong,.card-mobile-identity small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .card-mobile-identity strong { font-size:13px; font-weight:650; line-height:1.4; }
  .card-mobile-identity small,.card-mobile-cash small { font-size:10px; color:var(--ink-3); font-weight:400; }
  .card-mobile-price,.card-mobile-cash { font-size:12px; font-weight:650; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .card-mobile-cash { display:grid; text-align:right; gap:2px; }
  .card-mobile-chevron { color:var(--ink-3); transition:transform .15s; }
  .card-mobile-summary[aria-expanded="true"] .card-mobile-chevron { transform:rotate(180deg); }
  .market-result-panel .card:not(.mobile-expanded) > .card-expand-body { display:none; }
  .market-result-panel .card.mobile-expanded > .card-expand-body { margin:0; padding:14px; border-top:1px solid var(--hairline); }
}