/* ═══════════════════════════════════════════════════════════════════
   COMBIEN VOTRE VOISIN A VENDU
   Une page, une question, un champ. Tout ce qui n'aide pas à saisir
   une adresse ou à lire un résultat a été retiré : pas de filtres, pas
   de carte panoramique — cette page-là existe déjà ailleurs.
   ═══════════════════════════════════════════════════════════════ */
.r5-voisin {
	--vo-navy:  #14213F; --vo-green: #1E4D3E; --vo-gold: #8B6F47;
	--vo-cream: #F6F4EF; --vo-line: rgba(20,38,70,.10); --vo-ink: #5A5A56;
}
.r5-voisin .vo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.r5-voisin .center { text-align: center; }
.vo-d, .vo-kicker { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--vo-gold); }

/* ── 1. Hero : le champ est le sujet ────────────────────────────── */
.vo-hero { background: linear-gradient(180deg, #0E1830 0%, #14213F 100%); color: #fff;
	padding: calc(var(--r5-header-h) + 64px) 0 76px !important; }
.vo-hero-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; text-align: center; }
.vo-bc { font-size: 12px; color: rgba(255,255,255,.42); margin-bottom: 30px; }
.vo-bc a { color: rgba(255,255,255,.42); text-decoration: none; }
.vo-bc a:hover { color: #C7B08A; }
.vo-bc span[aria-hidden] { margin: 0 7px; }
.vo-hero .vo-kicker { color: #C7B08A; }
.vo-hero h1 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; letter-spacing: -.015em;
	font-size: clamp(32px, 5.4vw, 60px); line-height: 1.06; color: #fff; margin: 18px 0 0; }
.vo-hero h1 em { font-style: normal; color: rgba(255,255,255,.45); display: block; }
.vo-lede { max-width: 620px; margin: 22px auto 34px; color: rgba(255,255,255,.74); line-height: 1.72; font-size: 16px; }

.vo-form { position: relative; max-width: 620px; margin: 0 auto; }
.vo-champ { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.96);
	border-radius: 50px; padding: 7px 7px 7px 22px; box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.vo-champ-ic { width: 20px; height: 20px; color: var(--vo-gold); flex: none; }
.vo-champ input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
	font-family: inherit; font-size: 15px; color: var(--vo-navy); padding: 14px 0; }
.vo-champ input::placeholder { color: #9A9A95; }
.vo-envoi { flex: none; border: 0; background: var(--vo-navy); color: #fff; border-radius: 50px;
	padding: 15px 26px; font-family: inherit; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
	font-weight: 600; cursor: pointer; transition: background .25s ease; }
.vo-envoi:hover { background: var(--vo-green); }
.vo-envoi:disabled { opacity: .6; cursor: default; }
.vo-hint { margin: 14px 0 0; font-size: 12px; color: rgba(255,255,255,.42); }

.vo-suggestions { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0;
	background: #fff; border-radius: 14px; list-style: none; margin: 0; padding: 6px;
	box-shadow: 0 22px 54px rgba(0,0,0,.26); text-align: left; max-height: 300px; overflow-y: auto; }
.vo-suggestions li { padding: 11px 14px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--vo-navy); }
.vo-suggestions li:hover, .vo-suggestions li[aria-selected="true"] { background: rgba(139,111,71,.10); }

/* ── 2. Résultats ───────────────────────────────────────────────── */
.vo-res { padding: 76px 0; background: #fff; }
.vo-res-inner { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.vo-res-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
	flex-wrap: wrap; padding-bottom: 20px; border-bottom: 2px solid var(--vo-navy); }
.vo-res h2 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; color: var(--vo-navy);
	font-size: clamp(24px, 3.1vw, 34px); margin: 12px 0 0; line-height: 1.18; }
.vo-res-meta { font-size: 13px; color: var(--text-quiet); margin: 0 0 4px; }

.vo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border-bottom: 1px solid var(--vo-line); }
.vo-stat { padding: 22px 20px; border-right: 1px solid var(--vo-line); }
.vo-stat:last-child { border-right: 0; }
.vo-stat strong { display: block; font-family: var(--r5-serif, Georgia, serif); font-size: 26px;
	color: var(--vo-navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.vo-stat span { display: block; margin-top: 5px; font-size: 11px; letter-spacing: .05em; color: var(--text-quiet); }

.vo-liste { list-style: none; margin: 0; padding: 0; }
.vo-vente { display: grid; grid-template-columns: 76px minmax(0,1fr) auto auto; gap: 18px; align-items: center;
	padding: 18px 4px; border-bottom: 1px solid var(--vo-line); }
.vo-vente-dist { font-family: var(--r5-serif, Georgia, serif); font-size: 17px; color: var(--vo-gold);
	font-variant-numeric: tabular-nums; }
.vo-vente-corps { min-width: 0; }
.vo-vente-corps strong { display: block; font-weight: 500; color: var(--vo-navy); font-size: 15px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo-vente-lieu { display: block; font-size: 12.5px; color: var(--text-quiet); margin-top: 2px; }
.vo-vente-lieu a { color: var(--text-quiet); text-decoration: none; border-bottom: 1px solid transparent; }
.vo-vente-lieu a:hover { color: var(--vo-gold); border-bottom-color: var(--vo-gold); }
.vo-vente-detail { font-size: 12.5px; color: var(--text-quiet); text-align: right; white-space: nowrap; }
.vo-vente-prix { font-family: var(--r5-serif, Georgia, serif); font-size: 19px; color: var(--vo-navy);
	text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vo-liste-plate .vo-vente { grid-template-columns: minmax(0,1fr) auto auto; }
.vo-liste-plate .vo-vente-dist { display: none; }

.vo-vide { padding: 40px 0; color: var(--vo-ink); line-height: 1.7; }
.vo-commune { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--vo-line); }
.vo-commune h3 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; font-size: 20px;
	color: var(--vo-navy); margin: 0 0 8px; }
.vo-commune-note { font-size: 13px; color: var(--text-quiet); margin: 0 0 18px; line-height: 1.6; }
.vo-source { margin: 26px 0 0; font-size: 12.5px; color: var(--text-quiet); line-height: 1.65; }

/* ── 3. Et le vôtre ? ───────────────────────────────────────────── */
.vo-cta { padding: 0 0 80px; background: #fff; }
.vo-cta-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px;
	display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center;
	background: var(--vo-cream); border-radius: 20px; padding: 48px; }
.vo-cta h2 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; color: var(--vo-navy);
	font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; margin: 14px 0 18px; }
.vo-cta h2 em { font-style: normal; color: rgba(20,38,70,.42); }
.vo-cta p { color: var(--vo-ink); line-height: 1.78; margin: 0 0 26px; max-width: 52ch; }
.vo-btn { display: inline-block; background: var(--vo-gold); color: #fff; text-decoration: none;
	border-radius: 50px; padding: 15px 30px; font-size: 12px; letter-spacing: .11em; text-transform: uppercase;
	font-weight: 600; transition: background .25s ease; }
.vo-btn:hover { background: #A88B63; }
.vo-cta-note { margin: 14px 0 0 !important; font-size: 12px; color: var(--text-quiet); }
.vo-cta-faits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vo-line); }
.vo-cta-faits li { padding: 14px 0; border-bottom: 1px solid var(--vo-line); }
.vo-cta-faits span { display: block; font-size: 11px; letter-spacing: .06em; color: var(--text-quiet); margin-bottom: 3px; }
.vo-cta-faits strong { font-weight: 500; color: var(--vo-navy); font-size: 14px; }
.vo-cta-faits a { color: var(--vo-gold); text-decoration: none; }
.vo-cta-faits a:hover { text-decoration: underline; }

/* ── 4. FAQ ─────────────────────────────────────────────────────── */
.vo-faq { padding: 80px 0; background: var(--vo-cream); }
.vo-faq-inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.vo-faq h2 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; color: var(--vo-navy);
	font-size: clamp(25px, 3.2vw, 36px); margin: 14px 0 34px; }
.vo-faq details { border-bottom: 1px solid var(--vo-line); }
.vo-faq summary { cursor: pointer; list-style: none; padding: 21px 40px 21px 0; position: relative;
	font-family: var(--r5-serif, Georgia, serif); font-size: 17.5px; color: var(--vo-navy); }
.vo-faq summary::-webkit-details-marker { display: none; }
.vo-faq summary span { position: absolute; right: 4px; top: 50%; width: 10px; height: 10px;
	border-right: 1px solid var(--vo-gold); border-bottom: 1px solid var(--vo-gold);
	transform: translateY(-70%) rotate(45deg); transition: transform .3s ease; }
.vo-faq details[open] summary span { transform: translateY(-30%) rotate(-135deg); }
.vo-faq details p { color: var(--vo-ink); line-height: 1.8; margin: 0 0 22px; padding-right: 40px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.vo-cta-inner { grid-template-columns: 1fr; gap: 34px; padding: 36px 28px; }
}
@media (max-width: 640px) {
	.vo-hero { padding: calc(var(--r5-header-h) + 36px) 0 52px !important; }
	.vo-res, .vo-faq { padding: 56px 0; }
	.vo-champ { flex-wrap: wrap; border-radius: 20px; padding: 14px 16px; gap: 10px; }
	.vo-champ input { flex: 1 1 100%; order: 2; padding: 10px 0; }
	.vo-champ-ic { order: 1; }
	.vo-envoi { order: 3; width: 100%; }
	.vo-vente { grid-template-columns: 76px minmax(0,1fr); gap: 10px 14px; }
	.vo-vente-detail, .vo-vente-prix { grid-column: 2; text-align: left; }
	.vo-vente-prix { font-size: 20px; }
	.vo-liste-plate .vo-vente { grid-template-columns: minmax(0,1fr); }
	.vo-liste-plate .vo-vente-detail, .vo-liste-plate .vo-vente-prix { grid-column: 1; }
	/* Quatre chiffres empilés font un écran de défilement pour rien :
	   en 2×2 la lecture reste celle d'un tableau de bord. */
	.vo-stats { grid-template-columns: 1fr 1fr; }
	.vo-stat { padding: 18px 14px; border-right: 1px solid var(--vo-line); border-bottom: 1px solid var(--vo-line); }
	.vo-stat:nth-child(2n) { border-right: 0; }
	.vo-stat:nth-last-child(-n+2) { border-bottom: 0; }
	.vo-stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
	.vo-cta-inner { padding: 30px 22px; }
}
@media (prefers-reduced-motion: reduce) { .vo-faq summary span, .vo-envoi, .vo-btn { transition: none !important; } }

/* ═══ LA CARTE DES VENTES ALENTOUR ═══════════════════════════════════
 *
 * Même langage visuel que la carte de la page Transactions : mêmes
 * couleurs de points, même sobriété. Deux cartes du même site ne
 * parlent pas deux langues.
 *
 * Le bloc est masqué au chargement et n'apparaît qu'après une
 * recherche — d'où l'absence de toute hauteur réservée : rien ne
 * bouge tant qu'il n'y a rien à montrer, et quand il apparaît, il
 * apparaît sous le regard du visiteur qu'on vient d'y amener.
 */
.vo-carte-bloc { margin: 0 0 30px; }

.vo-carte {
	position: relative;
	width: 100%;
	/* Un rapport, pas une hauteur fixe : la carte reste lisible du
	   téléphone au grand écran sans jamais dépasser la moitié de la
	   fenêtre — au-delà, elle chasse le tableau hors de l'écran. */
	aspect-ratio: 16 / 10;
	max-height: 52vh;
	min-height: 260px;
	border-radius: 4px;
	overflow: hidden;
	background: #EDE9E1;
}

@media (min-width: 900px) {
	.vo-carte { aspect-ratio: 21 / 9; }
}

/* Le pin de l'adresse saisie : doré, plus grand que les points de
   vente, et immobile. C'est le repère, pas une donnée. */
.vo-pin {
	width: 18px; height: 18px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--gold);
	border: 2px solid #FFFFFF;
	box-shadow: 0 2px 6px rgba(8, 25, 56, .35);
}

.vo-carte-legende {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
	margin-top: 12px;
	font-family: var(--font-sans);
	font-size: 12.5px;
	color: var(--text-muted);
}
.vo-lg { display: inline-flex; align-items: center; gap: 7px; }
.vo-pastille { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.vo-pastille-vous   { background: var(--gold); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.vo-pastille-maison { background: #1E4D3E; }
.vo-pastille-appart { background: #2563EB; }
.vo-carte-note { margin-left: auto; color: var(--text-light); }

@media (max-width: 560px) {
	.vo-carte-note { margin-left: 0; width: 100%; }
}

/* La bulle de survol — les mêmes mots que la ligne du tableau. */
.vo-popup .maplibregl-popup-content {
	padding: 12px 14px;
	border-radius: 3px;
	box-shadow: 0 6px 24px rgba(8, 25, 56, .18);
	font-family: var(--font-sans);
}
.vo-pop { display: grid; gap: 3px; line-height: 1.4; }
.vo-pop strong { font-size: 13.5px; color: var(--text); font-weight: 600; }
.vo-pop-sous, .vo-pop-bas { font-size: 12px; color: var(--text-muted); }
.vo-pop-prix { font-family: var(--font); font-size: 16px; color: var(--green); margin-top: 3px; }

@media (prefers-reduced-motion: reduce) {
	.vo-carte * { transition: none !important; animation: none !important; }
}