/* ==========================================================================
   Régie du Croset SA — flatfox.css
   Listing des biens (page Louer + shortcode [flatfox_listings]).
   Repris du plugin « Flatfox Listings », adapté au thème : le bloc occupe
   tout l'écran SOUS la barre de navigation (top posé par flatfox-map.js),
   typographie Archivo, accent bordeaux (tokens du thème).
   #flatfox-wrap en sélecteur d'ID pour la spécificité face au thème.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Body — classe flatfox-page ajoutée par PHP
   -------------------------------------------------------------------------- */

body.flatfox-page { overflow: hidden; }

/* Pas de titre de page : l'UI du listing remplit l'écran */
body.flatfox-page .entry-title,
body.flatfox-page .page-title,
body.flatfox-page .wp-block-post-title,
body.flatfox-page .page-header,
body.flatfox-page .entry-header { display: none; }

/* --------------------------------------------------------------------------
   1. Conteneur principal — plein écran sous la nav (top ajusté en JS)
   -------------------------------------------------------------------------- */

#flatfox-wrap {
	position: fixed;
	top: var(--rdc-nav-h, 76px);
	left: 0; right: 0; bottom: 0;
	width: 100%;
	height: calc(100% - var(--rdc-nav-h, 76px));
	z-index: 90; /* sous la nav (z-index 100) */
	margin: 0; padding: 0;
	display: flex;
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
	font-size: 14px;
	color: var(--text-body, #333);
	box-sizing: border-box;
	background: var(--surface-page, #f5f5f5);
}

#flatfox-wrap *,
#flatfox-wrap *::before,
#flatfox-wrap *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   2. Panneau carte — gauche 42 %
   -------------------------------------------------------------------------- */

#flatfox-map-panel {
	flex: 0 0 42%;
	height: 100%;
	position: relative;
	/* Borne les z-index internes de Leaflet (contrôles et attribution = 1000)
	   au panneau : la barre flottante (z-index 400) et les bottom sheets
	   passent ainsi au-dessus de l'attribution, et redeviennent cliquables. */
	isolation: isolate;
	background: #e8e8e8;
}

#flatfox-map {
	width: 100% !important;
	height: 100% !important;
	min-height: 300px;
	/* Le pinch (deux doigts) zoome la carte, pas la page : on confie tous les
	   gestes tactiles à Leaflet plutôt qu'au zoom natif du navigateur. */
	touch-action: none;
}

/* --------------------------------------------------------------------------
   3. Panneau annonces — droite 58 %
   -------------------------------------------------------------------------- */

#flatfox-listings-panel {
	flex: 0 0 58%;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--surface-page, #f5f5f5);
}

/* --------------------------------------------------------------------------
   4. Barre de filtres : barre de recherche segmentée + barre d'outils
   -------------------------------------------------------------------------- */

#flatfox-filters {
	background: #fff;
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--border-subtle, #e8e4dd);
	flex-shrink: 0;
	z-index: 10;
}

/* 4.1 Barre de recherche segmentée — un seul conteneur blanc arrondi.
   Les champs sont séparés par de fins séparateurs (bordure gauche). */
#flatfox-wrap .flatfox-searchbar {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	background: #fff;
	border: 1px solid var(--border-subtle, #e8e4dd);
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(30, 25, 22, 0.06);
}

/* Un segment = icône + contrôle. Séparateur fin entre segments. */
#flatfox-wrap .flatfox-seg {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
	padding-left: 13px;
}
#flatfox-wrap .flatfox-seg--grow { flex: 1.6 1 0; }
#flatfox-wrap .flatfox-seg + .flatfox-seg::before {
	content: "";
	position: absolute;
	left: 0; top: 9px; bottom: 9px;
	width: 1px;
	background: var(--border-subtle, #e8e4dd);
}

#flatfox-wrap .flatfox-seg-ico {
	display: inline-flex;
	flex-shrink: 0;
	pointer-events: none;
	color: var(--rdc-red-600, #9c3d42);
}
#flatfox-wrap .flatfox-seg-ico .rdc-icon { display: block; }

/* Contrôles internes : sans bordure ni fond, le conteneur porte le style. */
#flatfox-wrap .flatfox-seg-input,
#flatfox-wrap .flatfox-seg-select {
	flex: 1 1 0; min-width: 0; height: 50px;
	padding: 0 8px 0 9px;
	border: none !important; background: transparent !important;
	border-radius: 0 !important;
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif) !important;
	font-size: 13.5px !important;
	color: var(--text-body, #333) !important;
	outline: none; box-shadow: none !important;
	appearance: none; -webkit-appearance: none; margin: 0 !important;
	cursor: pointer;
}
#flatfox-wrap .flatfox-seg-input { cursor: text; }
#flatfox-wrap .flatfox-seg-input::placeholder { color: #9a948c; opacity: 1; }

/* Chevron sur les selects segmentés. */
#flatfox-wrap .flatfox-seg-select {
	padding-right: 26px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
}

/* Premier et dernier segment : arrondis cohérents avec le conteneur. */
#flatfox-wrap .flatfox-seg:first-child { border-radius: 16px 0 0 16px; padding-left: 16px; }
#flatfox-wrap .flatfox-seg:last-child  { border-radius: 0 16px 16px 0; padding-right: 6px; }

/* Focus accessible : le segment actif s'éclaire en rouge léger. */
#flatfox-wrap .flatfox-seg:focus-within { background: var(--rdc-red-50, #fbf2f1); }
#flatfox-wrap .flatfox-seg:first-child:focus-within { border-radius: 16px 0 0 16px; }
#flatfox-wrap .flatfox-seg:last-child:focus-within  { border-radius: 0 16px 16px 0; }
#flatfox-wrap .flatfox-seg:focus-within .flatfox-seg-ico { color: var(--rdc-red-800, #7e1d1b); }

/* --------------------------------------------------------------------------
   5. Barre d'outils fine : compteur (gauche) + tri & réinitialiser (droite)
   -------------------------------------------------------------------------- */

#flatfox-wrap .flatfox-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 11px;
}
#flatfox-wrap .flatfox-toolbar-end {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Tri compact (libellé + chevron, sans cadre lourd). */
#flatfox-wrap .flatfox-sort {
	position: relative;
	display: flex;
	align-items: center;
}
#flatfox-wrap .flatfox-sort-ico {
	position: absolute;
	left: 10px; top: 50%; transform: translateY(-50%);
	display: inline-flex; pointer-events: none;
	color: var(--rdc-red-600, #9c3d42);
}
#flatfox-wrap .flatfox-sort-select {
	height: 34px;
	padding: 0 28px 0 31px;
	border: 1px solid var(--border-subtle, #e8e4dd) !important;
	border-radius: 8px; background: #fff !important;
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif) !important;
	font-size: 12.5px !important;
	color: var(--text-body, #333) !important;
	outline: none; box-shadow: none !important; margin: 0 !important;
	appearance: none; -webkit-appearance: none; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 11px center !important;
	transition: border-color 0.2s;
}
#flatfox-wrap .flatfox-sort-select:focus { border-color: var(--rdc-red-600, #9c3d42) !important; }

/* Lien « Réinitialiser » discret. */
#flatfox-wrap .flatfox-reset {
	border: none; background: transparent; padding: 4px 6px;
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif) !important;
	font-size: 12.5px !important; font-weight: 500;
	color: var(--rdc-red-600, #9c3d42) !important;
	cursor: pointer; white-space: nowrap;
	text-decoration: underline; text-underline-offset: 3px;
	text-decoration-color: rgba(156, 61, 66, 0.35);
	border-radius: 6px;
	transition: color 0.2s, text-decoration-color 0.2s;
}
#flatfox-wrap .flatfox-reset:hover { color: var(--rdc-red-800, #7e1d1b) !important; text-decoration-color: currentColor; }
#flatfox-wrap .flatfox-reset:focus-visible { outline: 2px solid var(--rdc-red-600, #9c3d42); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   6. Compteur
   -------------------------------------------------------------------------- */

#flatfox-counter {
	font-size: 13px !important;
	font-weight: 600;
	color: var(--text-body, #333) !important;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. Grille des cartes
   -------------------------------------------------------------------------- */

#flatfox-grid {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px;
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-content: start;
	align-items: start;
}

#flatfox-grid::-webkit-scrollbar { width: 5px; }
#flatfox-grid::-webkit-scrollbar-track { background: #f0f0f0; }
#flatfox-grid::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
#flatfox-grid::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* --------------------------------------------------------------------------
   8. Carte d'annonce — pas d'overflow:hidden ici (réservé à l'image)
   -------------------------------------------------------------------------- */

#flatfox-wrap .flatfox-card {
	background: #fff !important;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
	overflow: visible;
	cursor: pointer;
	transition: box-shadow 0.2s, border-left 0.15s;
	border-left: 3px solid transparent !important;
	display: flex !important;
	flex-direction: column !important;
	text-decoration: none !important;
	color: inherit !important;
}
#flatfox-wrap .flatfox-card:hover,
#flatfox-wrap .flatfox-card:focus {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
	border-left-color: var(--rdc-red-600, #9c3d42) !important;
	outline: none;
}

/* Classe posée par le filtre JS — doit battre le display:flex!important de la carte */
#flatfox-wrap .flatfox-card.flatfox-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   9. Image de la carte — overflow:hidden seulement ici (zoom)
   -------------------------------------------------------------------------- */

#flatfox-wrap .flatfox-card-image {
	position: relative; width: 100%;
	padding-top: 60%; /* ratio 5:3 pour anciens navigateurs */
	overflow: hidden;
	background: #e0e0e0;
	flex-shrink: 0;
	border-radius: 8px 8px 0 0;
}
@supports (aspect-ratio: 5/3) {
	#flatfox-wrap .flatfox-card-image { padding-top: 0; aspect-ratio: 5 / 3; }
}
#flatfox-wrap .flatfox-card-image img {
	position: absolute !important; inset: 0 !important;
	width: 100% !important; height: 100% !important;
	object-fit: cover !important; display: block !important;
	transition: transform 0.3s ease;
}
#flatfox-wrap .flatfox-card:hover .flatfox-card-image img { transform: scale(1.03); }
#flatfox-wrap .flatfox-card-image-placeholder {
	position: absolute; inset: 0; width: 100%; height: 100%;
	background: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
}

/* --------------------------------------------------------------------------
   11. Corps de la carte — !important pour battre les styles p/h du thème
   -------------------------------------------------------------------------- */

#flatfox-wrap .flatfox-card-body {
	padding: 11px 13px 13px !important;
	display: flex !important; flex-direction: column !important; gap: 4px;
	background: #fff !important;
	flex-shrink: 0;
	overflow: visible;
	border-radius: 0 0 8px 8px;
}
#flatfox-wrap .flatfox-card-location {
	display: flex !important; align-items: center; gap: 4px; margin: 0 !important;
	font-size: 11px !important; color: #999 !important;
	text-transform: uppercase !important; letter-spacing: 0.5px !important;
	font-weight: 500 !important; line-height: 1.3 !important;
	font-family: var(--font-body, sans-serif) !important;
}
#flatfox-wrap .flatfox-card-location .rdc-icon { color: var(--rdc-red-600, #9c3d42); flex-shrink: 0; }
#flatfox-wrap .flatfox-card-title {
	display: block !important; margin: 0 !important;
	font-size: 13px !important; font-weight: 500 !important;
	color: #222 !important; line-height: 1.35 !important;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#flatfox-wrap .flatfox-card-price {
	display: block !important; margin: 0 !important;
	font-size: 15px !important; font-weight: 700 !important;
	color: var(--rdc-red-600, #9c3d42) !important; line-height: 1.3 !important;
}
#flatfox-wrap .flatfox-card-meta {
	display: flex !important; margin: 0 !important;
	font-size: 12px !important; color: #777 !important;
	flex-wrap: wrap; align-items: center; line-height: 1.4 !important;
}
#flatfox-wrap .flatfox-meta-sep { color: #ccc; padding: 0 2px; }

/* --------------------------------------------------------------------------
   12. Aucun résultat
   -------------------------------------------------------------------------- */

#flatfox-wrap .flatfox-no-results {
	grid-column: 1 / -1;
	text-align: center;
	color: #888 !important;
	padding: 40px 20px;
	font-size: 15px !important;
}

/* --------------------------------------------------------------------------
   13. Marqueurs Leaflet + grappes
   -------------------------------------------------------------------------- */

/* Point simple (repli pour les loyers sur demande) */
.flatfox-marker--dot {
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--rdc-red-600, #9c3d42);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	transition: transform 0.15s;
	cursor: pointer;
}
.flatfox-marker--dot.is-active { transform: scale(1.5); }

/* Pastille de prix (pilule blanche « CHF 1'850 ») */
.flatfox-marker--price {
	display: inline-flex; align-items: center; justify-content: center;
	height: 26px; padding: 0 10px;
	white-space: nowrap;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--border-subtle, #e8e4dd);
	box-shadow: 0 2px 8px rgba(30, 25, 22, 0.22);
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
	font-size: 12px; font-weight: 700; line-height: 1;
	color: var(--rdc-red-600, #9c3d42);
	cursor: pointer;
	transition: transform 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.flatfox-marker--price.is-active {
	transform: scale(1.06);
	background: var(--rdc-red-600, #9c3d42);
	color: #fff;
	border-color: var(--rdc-red-600, #9c3d42);
	box-shadow: 0 4px 12px rgba(156, 61, 66, 0.5);
	z-index: 5;
}

.flatfox-cluster-icon { background: transparent !important; border: none !important; }
.flatfox-cluster-inner {
	width: 100%; height: 100%; border-radius: 50%;
	background: var(--rdc-red-600, #9c3d42);
	border: 3px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 2px 8px rgba(156, 61, 66, 0.45);
	display: flex; align-items: center; justify-content: center;
}
.flatfox-cluster-inner span {
	color: #fff;
	font-family: var(--font-body, sans-serif);
	font-size: 12px; font-weight: 700; line-height: 1;
}

/* --------------------------------------------------------------------------
   14. Pop-up Leaflet
   -------------------------------------------------------------------------- */

#flatfox-wrap .leaflet-popup-content-wrapper {
	border-radius: 8px; padding: 0; overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
#flatfox-wrap .leaflet-popup-content { margin: 0; width: 210px !important; }

.flatfox-popup-link { display: block; text-decoration: none; color: inherit; }
.flatfox-popup { font-family: var(--font-body, sans-serif); }
.flatfox-popup-img { width: 100%; height: 110px; object-fit: cover; display: block; }
.flatfox-popup-body { padding: 10px 12px; }
.flatfox-popup-city  { font-size: 11px; color: #999; margin: 0 0 2px; text-transform: uppercase; }
.flatfox-popup-title { font-size: 12px; color: #444; margin: 0 0 4px; font-weight: 500; line-height: 1.3; }
.flatfox-popup-price { font-size: 14px; font-weight: 700; color: var(--rdc-red-600, #9c3d42); margin: 0; }

/* --------------------------------------------------------------------------
   15. Tablette (769-1024 px) : la carte rétrécit pour laisser place aux annonces
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) and (min-width: 769px) {
	#flatfox-map-panel { flex: 0 0 38%; }
	#flatfox-listings-panel { flex: 0 0 62%; }
	#flatfox-grid { padding: 16px; gap: 18px; }
}

/* --------------------------------------------------------------------------
   16. Chrome mobile (barre flottante + voile + bottom sheets)
       Masqué par défaut ; n'apparaît qu'en dessous de 768 px (section 17).
   -------------------------------------------------------------------------- */

.flatfox-mobile-bar { display: none; }
#flatfox-wrap .flatfox-sheet,
#flatfox-wrap .flatfox-sheet-scrim { display: none; }

/* CRITIQUE : le JS ouvre/ferme via l'attribut [hidden]. Ces sélecteurs doivent
   l'emporter (spécificité id+classe+attribut) sur le display:block/flex que la
   section 17 applique en mobile. Sinon le voile reste posé plein écran à
   opacity:0 et capte tous les gestes : boutons « Filtrer »/« Liste » inertes et
   pinch détourné vers le zoom de la page au lieu de la carte. */
#flatfox-wrap .flatfox-sheet[hidden],
#flatfox-wrap .flatfox-sheet-scrim[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   17. Mobile (≤768 px) : carte plein écran + bottom sheets façon app immo
       Le panneau de droite est vidé de ses contenus (déplacés dans les
       sheets par le JS) ; la carte occupe tout l'espace sous la nav.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* Plein écran sous la nav, body verrouillé : vraie expérience immersive. */
	body.flatfox-page { overflow: hidden; }

	#flatfox-wrap {
		position: fixed !important;
		top: var(--rdc-nav-h, 64px) !important;
		left: 0 !important; right: 0 !important; bottom: 0 !important;
		width: 100% !important;
		height: calc(100% - var(--rdc-nav-h, 64px)) !important;
		height: calc(100dvh - var(--rdc-nav-h, 64px)) !important;
		flex-direction: column;
		margin: 0 !important;
		overflow: hidden;
		z-index: 90;
	}

	/* La carte remplit tout le wrap. */
	#flatfox-map-panel {
		flex: 1 1 auto;
		width: 100%;
		height: 100%;
		min-height: 0;
	}
	#flatfox-map { width: 100% !important; height: 100% !important; min-height: 0; }

	/* Le panneau de droite ne sert plus de mise en page : ses enfants
	   (#flatfox-filters et #flatfox-grid) sont déplacés dans les sheets. */
	#flatfox-listings-panel { display: none !important; }

	/* 17.1 Barre d'action flottante (au-dessus de la carte) ----------------- */
	.flatfox-mobile-bar {
		position: absolute;
		left: 0; right: 0;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		z-index: 400;
		display: flex;
		justify-content: center;
		gap: 10px;
		padding: 0 16px;
		pointer-events: none; /* seuls les boutons captent le clic */
	}
	.flatfox-mobile-btn {
		pointer-events: auto;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 46px;
		padding: 0 20px;
		border: none;
		border-radius: 999px;
		background: var(--rdc-red-600, #9c3d42);
		color: #fff;
		font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		box-shadow: 0 6px 20px rgba(30, 25, 22, 0.28);
		transition: transform 0.15s var(--ease-out, ease), box-shadow 0.2s, background 0.2s;
	}
	.flatfox-mobile-btn:active { transform: scale(0.97); }
	.flatfox-mobile-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
	.flatfox-mobile-btn--list {
		background: #fff;
		color: var(--rdc-red-700, #8a2f33);
		border: 1px solid var(--border-subtle, #e8e4dd);
	}
	.flatfox-mobile-btn-ico { display: inline-flex; }
	.flatfox-mobile-btn .rdc-icon,
	.flatfox-mobile-btn svg { display: block; }
	/* Pastille du nombre de biens sur le bouton liste. */
	.flatfox-mobile-count {
		display: inline-flex; align-items: center; justify-content: center;
		min-width: 20px; height: 20px; padding: 0 6px;
		border-radius: 999px;
		background: var(--rdc-red-600, #9c3d42); color: #fff;
		font-size: 11px; font-weight: 700; line-height: 1;
	}
	.flatfox-mobile-count[hidden] { display: none; }
	/* Bouton « Filtrer » (fond rouge) : pastille du nombre de filtres en blanc. */
	.flatfox-mobile-btn--filter .flatfox-mobile-count {
		background: #fff; color: var(--rdc-red-700, #9a2421);
	}

	/* 17.2 Voile commun ----------------------------------------------------- */
	#flatfox-wrap .flatfox-sheet-scrim {
		display: block;
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(20, 16, 15, 0.45);
		opacity: 0;
		z-index: 500;
		transition: opacity 0.3s var(--ease-out, ease);
		-webkit-backdrop-filter: blur(1px);
		backdrop-filter: blur(1px);
	}
	body.flatfox-sheet-open #flatfox-wrap .flatfox-sheet-scrim { opacity: 1; }

	/* 17.3 Bottom sheets ---------------------------------------------------- */
	#flatfox-wrap .flatfox-sheet {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		/* Plafonnée sous la nav (la feuille vit dans le contexte d'empilement de
		   #flatfox-wrap, dont le z-index est inférieur à celui de .rdc-nav : sans
		   cette limite, une feuille bien remplie passe sous la barre de nav au
		   lieu de s'arrêter dessous). */
		max-height: calc(100vh - var(--rdc-nav-h, 76px) - 16px);
		max-height: calc(100dvh - var(--rdc-nav-h, 76px) - 16px);
		background: var(--surface-card, #fff);
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -10px 40px rgba(20, 16, 15, 0.28);
		z-index: 510;
		transform: translateY(100%);
		transition: transform 0.34s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
		will-change: transform;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	#flatfox-wrap .flatfox-sheet.is-open { transform: translateY(0); }
	/* Suit le doigt pendant le glissement (posé en inline par le JS). */
	#flatfox-wrap .flatfox-sheet.is-dragging { transition: none; }

	#flatfox-wrap .flatfox-sheet-handle {
		flex-shrink: 0;
		display: flex; align-items: center; justify-content: center;
		padding: 10px 0 4px;
		cursor: grab;
		touch-action: none;
	}
	#flatfox-wrap .flatfox-sheet-handle span {
		display: block; width: 40px; height: 5px; border-radius: 3px;
		background: #d6cfc7;
	}

	#flatfox-wrap .flatfox-sheet-head {
		flex-shrink: 0;
		display: flex; align-items: center; justify-content: space-between;
		gap: 12px;
		padding: 4px 16px 12px;
		border-bottom: 1px solid var(--border-subtle, #e8e4dd);
	}
	#flatfox-wrap .flatfox-sheet-title {
		margin: 0;
		font-family: var(--font-display, var(--font-body, sans-serif));
		font-size: 17px; font-weight: 600;
		color: var(--text-heading, #1e1916);
		line-height: 1.2;
	}
	#flatfox-wrap .flatfox-sheet-close {
		flex-shrink: 0;
		display: inline-flex; align-items: center; justify-content: center;
		width: 36px; height: 36px; padding: 0;
		border: none; border-radius: 50%;
		background: var(--surface-page, #f3efe9);
		color: var(--text-body, #444);
		cursor: pointer;
		transition: background 0.2s, color 0.2s;
	}
	#flatfox-wrap .flatfox-sheet-close:hover { background: #e9e3da; color: #222; }
	#flatfox-wrap .flatfox-sheet-close:focus-visible { outline: 2px solid var(--rdc-red-600, #9c3d42); outline-offset: 2px; }

	#flatfox-wrap .flatfox-sheet-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 14px 16px;
	}
	#flatfox-wrap .flatfox-sheet-body::-webkit-scrollbar { width: 5px; }
	#flatfox-wrap .flatfox-sheet-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

	/* Pied collant du sheet filtres : bouton « Voir les X biens ». */
	#flatfox-wrap .flatfox-sheet-foot {
		flex-shrink: 0;
		padding: 12px 16px;
		border-top: 1px solid var(--border-subtle, #e8e4dd);
		background: var(--surface-card, #fff);
	}
	#flatfox-wrap .flatfox-sheet-apply {
		width: 100%;
		height: 50px;
		border: none; border-radius: 12px;
		background: var(--rdc-red-600, #9c3d42);
		color: #fff;
		font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
		font-size: 15px; font-weight: 600;
		cursor: pointer;
		transition: background 0.2s, transform 0.15s;
	}
	#flatfox-wrap .flatfox-sheet-apply:hover { background: var(--rdc-red-700, #8a2f33); }
	#flatfox-wrap .flatfox-sheet-apply:active { transform: scale(0.99); }
	#flatfox-wrap .flatfox-sheet-apply:focus-visible { outline: 2px solid var(--rdc-red-800, #7e1d1b); outline-offset: 2px; }

	/* 17.4 Filtres réorganisés dans le sheet (segments empilés, sans cadre) -- */
	#flatfox-wrap #flatfox-sheet-filters-body #flatfox-filters {
		background: transparent;
		padding: 0;
		border: none;
	}
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-searchbar {
		flex-direction: column;
		align-items: stretch;
		box-shadow: none;
		border-radius: 14px;
	}
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-seg {
		flex: 1 1 auto;
		padding-left: 14px;
	}
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-seg--grow { flex: 1 1 auto; }
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-seg:first-child { border-radius: 14px 14px 0 0; padding-left: 14px; }
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-seg:last-child  { border-radius: 0 0 14px 14px; padding-left: 14px; padding-right: 14px; }
	/* Séparateur horizontal entre segments empilés. */
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-seg + .flatfox-seg::before {
		left: 14px; right: 14px; top: 0; bottom: auto;
		width: auto; height: 1px;
	}
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-seg-input,
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-seg-select { height: 52px; font-size: 15px !important; }

	/* Barre d'outils : compteur en haut, tri + alerte dessous. Réinitialiser
	   passe sur sa propre ligne tout en bas (order la place après le tri et
	   l'alerte, flex-basis 100 % la force à sauter de ligne) : plus aucun
	   défilement horizontal dans la feuille de filtres. */
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-toolbar {
		flex-wrap: wrap; gap: 10px 12px; margin-top: 16px;
	}
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-toolbar-end {
		flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; row-gap: 10px;
	}
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-sort-select { height: 38px; font-size: 13.5px !important; }
	#flatfox-wrap #flatfox-sheet-filters-body .flatfox-reset {
		order: 3;
		flex: 1 1 100%;
		text-align: center;
		padding: 10px 0;
		border-top: 1px solid var(--border-subtle, #e8e4dd);
	}

	/* 17.5 Grille de cartes dans le sheet liste ----------------------------- */
	#flatfox-wrap #flatfox-sheet-list-body #flatfox-grid {
		display: grid !important;
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 0;
		overflow: visible;
		height: auto;
	}
}

/* Grands téléphones / petites tablettes en portrait : deux colonnes de cartes. */
@media (min-width: 521px) and (max-width: 768px) {
	#flatfox-wrap #flatfox-sheet-list-body #flatfox-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   18. Filtres actifs (puces retirables) + toast « aucun résultat »
   -------------------------------------------------------------------------- */

/* Conteneur des puces : sous la barre d'outils en desktop, en tête du sheet
   filtres en mobile (déplacé avec #flatfox-filters par le JS). */
.flatfox-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}
.flatfox-active[hidden] { display: none; }
.flatfox-active-lbl {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted, #6b665f);
	margin-right: 2px;
}

#flatfox-wrap .flatfox-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 7px 0 12px;
	border: 1px solid var(--rdc-red-200, #e9c9c7);
	border-radius: 999px;
	background: var(--rdc-red-50, #fbf2f1);
	color: var(--rdc-red-700, #9a2421);
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
#flatfox-wrap .flatfox-chip:hover { background: var(--rdc-red-100, #f5e2e0); }
#flatfox-wrap .flatfox-chip:focus-visible { outline: 2px solid var(--rdc-red-600, #9c3d42); outline-offset: 2px; }
#flatfox-wrap .flatfox-chip svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.75; }
#flatfox-wrap .flatfox-chip--all {
	padding: 0 10px;
	border-color: transparent;
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(154, 36, 33, 0.35);
}
#flatfox-wrap .flatfox-chip--all:hover { background: transparent; color: var(--rdc-red-800, #7e1d1b); }

/* Toast (posé sous <body>) : haut de l'écran, au-dessus de la carte et de la
   nav, mais sous le menu mobile ouvert (z-index 1200). */
.flatfox-toast {
	position: fixed;
	top: calc(var(--rdc-nav-h, 76px) + 14px);
	left: 50%;
	z-index: 1150;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: min(92vw, 480px);
	padding: 11px 12px 11px 16px;
	border-radius: 14px;
	background: var(--surface-dark, #211e1c);
	color: #fff;
	box-shadow: 0 14px 38px rgba(20, 16, 15, 0.34);
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
	opacity: 0;
	transform: translate(-50%, -12px);
	pointer-events: none;
	transition: opacity 0.25s var(--ease-out, ease), transform 0.25s var(--ease-out, ease);
}
.flatfox-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
.admin-bar .flatfox-toast { top: calc(var(--rdc-nav-h, 76px) + 46px); }
@media screen and (max-width: 782px) {
	/* Barre d'admin masquée sur mobile (voir main.css) : plus rien à compenser. */
	.admin-bar .flatfox-toast { top: calc(var(--rdc-nav-h, 76px) + 14px); }
}
.flatfox-toast-txt { font-size: 14px; line-height: 1.35; }
.flatfox-toast-btn {
	flex-shrink: 0;
	border: none;
	border-radius: 9px;
	padding: 8px 13px;
	background: var(--rdc-red-600, #9c3d42);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}
.flatfox-toast-btn:hover { background: var(--rdc-red-700, #8a2f33); }
.flatfox-toast-close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s;
}
.flatfox-toast-close:hover { background: rgba(255, 255, 255, 0.2); }
.flatfox-toast-close svg { width: 15px; height: 15px; }

/* Mobile : toast en bandeau, sans recentrage horizontal. */
@media (max-width: 600px) {
	.flatfox-toast {
		left: 12px;
		right: 12px;
		max-width: none;
		transform: translateY(-12px);
	}
	.flatfox-toast.is-visible { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   19. Mouvement réduit : pas de glissement, simple apparition
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	#flatfox-wrap .flatfox-sheet,
	#flatfox-wrap .flatfox-sheet-scrim,
	.flatfox-mobile-btn,
	.flatfox-toast,
	#flatfox-wrap .flatfox-sheet-apply { transition: none !important; }
}

/* --------------------------------------------------------------------------
   20. Alertes e-mail « nouveau bien correspondant à mes critères »
   -------------------------------------------------------------------------- */

/* Bouton « Créer une alerte » : même gabarit que le lien Réinitialiser voisin. */
#flatfox-wrap .flatfox-alert-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--rdc-red-200, #e9c9c7);
	border-radius: var(--radius-pill, 999px);
	background: var(--rdc-red-50, #fbf2f1);
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif) !important;
	font-size: 12.5px !important;
	font-weight: 600;
	color: var(--rdc-red-700, #9a2421) !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}
#flatfox-wrap .flatfox-alert-btn-ico { display: inline-flex; flex-shrink: 0; }
#flatfox-wrap .flatfox-alert-btn:hover { background: var(--rdc-red-100, #f5e2e0); }
#flatfox-wrap .flatfox-alert-btn:focus-visible { outline: 2px solid var(--rdc-red-600, #9c3d42); outline-offset: 2px; }

/* Bandeau discret : résultat de soumission / confirmation / désinscription. */
.flatfox-alert-notice {
	margin: 10px 0 0;
	padding: 10px 14px;
	border-radius: var(--radius-md, 8px);
	background: var(--surface-sunken, #f4f1ea);
	color: var(--text-body, #333);
	font-size: 13px;
	line-height: 1.4;
}

/* Fenêtre modale ------------------------------------------------------------ */
.rdc-alert-dialog {
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(560px, calc(100% - 32px));
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: clamp(22px, 3vw, 32px);
	border: none;
	border-radius: var(--radius-xl, 16px);
	background: var(--surface-card, #fff);
	box-shadow: var(--shadow-pop, 0 18px 48px rgba(33, 26, 24, 0.22));
	color: var(--text-body, #333);
}
.rdc-alert-dialog::backdrop {
	background: rgba(20, 16, 15, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
	.rdc-alert-dialog[open] { animation: rdc-alert-fade 0.2s var(--ease-out, ease); }
}
@keyframes rdc-alert-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.rdc-alert-close {
	position: absolute;
	top: 16px; right: 16px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border: none; border-radius: 50%;
	background: var(--surface-sunken, #f4f1ea);
	color: var(--text-muted, #6b665f);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.rdc-alert-close:hover { background: var(--rdc-red-100, #f5e2e0); color: var(--rdc-red-700, #9a2421); }
.rdc-alert-close svg { width: 18px; height: 18px; }

.rdc-alert-title {
	margin: 0 32px 6px 0;
	font-family: var(--font-display, 'Inter', sans-serif);
	font-weight: 700;
	font-size: clamp(20px, 1.4rem + 0.4vw, 24px);
	color: var(--text-heading, #1c1a19);
}
.rdc-alert-intro { margin: 0 0 20px; font-size: 14.5px; line-height: 1.5; color: var(--text-muted, #6b665f); }

.rdc-alert-form { display: flex; flex-direction: column; }
.rdc-alert-field { margin: 0 0 16px; display: flex; flex-direction: column; gap: 7px; }
.rdc-alert-grid .rdc-alert-field { margin: 0; }
.rdc-alert-field label { font-size: 13.5px; font-weight: 600; color: var(--text-heading, #1c1a19); }
.rdc-alert-req { color: var(--color-accent, #9a2421); }

.rdc-alert-field input,
.rdc-alert-field select {
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: 14px;
	color: var(--text-body, #333);
	background: var(--surface-page, #f8f6f2);
	border: 1px solid var(--border-subtle, #e8e4dd);
	border-radius: var(--radius-md, 8px);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.rdc-alert-field input:focus,
.rdc-alert-field select:focus {
	outline: none;
	border-color: var(--color-accent, #9a2421);
	box-shadow: 0 0 0 3px var(--color-accent-tint, #fbf2f1);
}

.rdc-alert-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 18px;
	margin-bottom: 4px;
}

.rdc-alert-consent { display: flex; gap: 10px; margin: 6px 0 18px; font-size: 13px; line-height: 1.5; color: var(--text-muted, #6b665f); }
.rdc-alert-consent input { margin-top: 3px; flex-shrink: 0; }
.rdc-alert-consent a { color: var(--color-accent, #9a2421); }

/* Honeypot : même recette que le formulaire de contact (.rdc-cf-hp). */
.rdc-alert-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rdc-alert-msg { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-md, 8px); font-size: 13.5px; line-height: 1.5; background: var(--surface-sunken, #f4f1ea); color: var(--text-body, #333); }
.rdc-alert-msg.is-error { background: var(--color-accent-tint, #fbf2f1); color: var(--rdc-red-800, #7e1d1b); }
.rdc-alert-msg[hidden] { display: none; }

.rdc-alert-form .rdc-btn { align-self: flex-start; }

@media (max-width: 600px) {
	.rdc-alert-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.rdc-alert-dialog[open] { animation: none; }
}

/* Louer sur mobile : la carte est fixée plein écran, le haut du pied de page
   (logo, navigation, contact) restait dessous, inaccessible. On ne garde que la
   barre légale, comme une application. */
@media (max-width: 768px) {
	body.flatfox-page .rdc-footer-top { display: none; }
}

/* --------------------------------------------------------------------------
   21. Formulaires de location (PDF) : menu natif <details> dans la barre d'outils
   -------------------------------------------------------------------------- */

#flatfox-wrap .flatfox-toolbar-end { flex-wrap: wrap; justify-content: flex-end; }

#flatfox-wrap .rdc-ff-forms { position: relative; }
#flatfox-wrap .rdc-ff-forms-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--border-subtle, #e8e4dd);
	border-radius: var(--radius-pill, 999px);
	background: #fff;
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-body, #333);
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	transition: background 0.2s, border-color 0.2s;
}
#flatfox-wrap .rdc-ff-forms-btn::-webkit-details-marker { display: none; }
#flatfox-wrap .rdc-ff-forms-btn svg { flex-shrink: 0; color: var(--rdc-red-600, #9c3d42); }
#flatfox-wrap .rdc-ff-forms-btn:hover,
#flatfox-wrap .rdc-ff-forms[open] > .rdc-ff-forms-btn { background: var(--rdc-red-50, #fbf2f1); border-color: var(--rdc-red-200, #e9c9c7); }
#flatfox-wrap .rdc-ff-forms-btn:focus-visible { outline: 2px solid var(--rdc-red-600, #9c3d42); outline-offset: 2px; }

#flatfox-wrap .rdc-ff-forms-list {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	min-width: 270px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--border-subtle, #e8e4dd);
	border-radius: 12px;
	box-shadow: var(--shadow-hover, 0 10px 28px rgba(33, 26, 24, 0.14));
}
#flatfox-wrap .rdc-ff-forms-list li { margin: 0; padding: 0; }
#flatfox-wrap .rdc-ff-forms-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 8px;
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
	font-size: 13px;
	color: var(--text-body, #333);
	text-decoration: none;
}
#flatfox-wrap .rdc-ff-forms-list a:hover,
#flatfox-wrap .rdc-ff-forms-list a:focus-visible { background: var(--rdc-red-50, #fbf2f1); color: var(--rdc-red-800, #7e1d1b); }
#flatfox-wrap .rdc-ff-forms-tag {
	flex-shrink: 0;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--rdc-red-100, #f5e2e0);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--rdc-red-700, #9a2421);
}

/* Mobile : le menu s'ouvre dans le flux, pleine largeur (la feuille de filtres défile). */
@media (max-width: 768px) {
	#flatfox-wrap .rdc-ff-forms { flex: 1 1 100%; order: 2; }
	#flatfox-wrap .rdc-ff-forms-btn { height: 38px; width: 100%; justify-content: center; font-size: 13.5px; }
	#flatfox-wrap .rdc-ff-forms-list { position: static; min-width: 0; margin-top: 6px; box-shadow: none; }
}