/* ==========================================================================
   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;
	background: #e8e8e8;
}

#flatfox-map {
	width: 100% !important;
	height: 100% !important;
	min-height: 300px;
}

/* --------------------------------------------------------------------------
   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
   -------------------------------------------------------------------------- */

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

#flatfox-wrap .flatfox-filters-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0 0 10px;
}
/* Ligne basse : curseur + sélecteur de pièces côte à côte */
#flatfox-wrap .flatfox-filters-row--bottom { align-items: center; gap: 12px; }

/* Curseur de loyer — prend l'espace restant */
#flatfox-wrap .flatfox-price-wrap {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; gap: 4px;
}
#flatfox-wrap .flatfox-price-header {
	display: flex; justify-content: space-between; align-items: baseline;
}
#flatfox-wrap .flatfox-price-name {
	font-size: 11px; color: #999; text-transform: uppercase;
	letter-spacing: 0.4px;
}
#flatfox-wrap .flatfox-price-value {
	font-size: 12px; font-weight: 600; color: var(--rdc-red-600, #9c3d42);
}

/* Sélecteur de pièces — largeur fixe étroite */
#flatfox-wrap .flatfox-select--narrow {
	flex: 0 0 130px !important; width: 130px;
}
#flatfox-wrap .flatfox-range {
	flex: 1 1 auto;
	-webkit-appearance: none; appearance: none;
	height: 4px; border-radius: 2px; outline: none; cursor: pointer;
	background: linear-gradient(to right, #9c3d42 0%, #9c3d42 100%, #ddd 100%, #ddd 100%);
	border: none !important; box-shadow: none !important; padding: 0 !important;
}
#flatfox-wrap .flatfox-range::-webkit-slider-thumb {
	-webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
	background: var(--rdc-red-600, #9c3d42); cursor: pointer; border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
#flatfox-wrap .flatfox-range::-moz-range-thumb {
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--rdc-red-600, #9c3d42); cursor: pointer; border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

#flatfox-wrap .flatfox-input,
#flatfox-wrap .flatfox-select {
	flex: 1 1 0; min-width: 0; height: 36px;
	padding: 0 10px; border: 1px solid #ddd !important;
	border-radius: 6px; background: #fff !important;
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif) !important;
	font-size: 13px !important;
	color: #333 !important; outline: none; box-shadow: none !important;
	appearance: none; -webkit-appearance: none; margin: 0 !important;
	transition: border-color 0.2s;
}
#flatfox-wrap .flatfox-select {
	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='%23666' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	padding-right: 28px !important;
}
#flatfox-wrap .flatfox-input:focus,
#flatfox-wrap .flatfox-select:focus { border-color: var(--rdc-red-600, #9c3d42) !important; }

#flatfox-wrap .flatfox-filters-actions { display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */

#flatfox-wrap .flatfox-btn {
	height: 36px; padding: 0 18px; border-radius: 6px;
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif) !important;
	font-size: 13px !important; font-weight: 500;
	cursor: pointer; white-space: nowrap; line-height: 1;
	display: inline-flex; align-items: center;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#flatfox-wrap .flatfox-btn-primary {
	background: var(--rdc-red-600, #9c3d42) !important; color: #fff !important;
	border: 2px solid var(--rdc-red-600, #9c3d42) !important;
}
#flatfox-wrap .flatfox-btn-primary:hover,
#flatfox-wrap .flatfox-btn-primary:focus {
	background: var(--rdc-red-800, #7e1d1b) !important;
	border-color: var(--rdc-red-800, #7e1d1b) !important;
}
#flatfox-wrap .flatfox-btn-ghost {
	background: transparent !important; color: var(--rdc-red-600, #9c3d42) !important;
	border: 2px solid var(--rdc-red-600, #9c3d42) !important;
}
#flatfox-wrap .flatfox-btn-ghost:hover,
#flatfox-wrap .flatfox-btn-ghost:focus { background: var(--rdc-red-50, #fbf2f1) !important; }

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

#flatfox-counter {
	margin-left: auto;
	font-size: 12px !important;
	color: #888 !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%);
}

/* --------------------------------------------------------------------------
   10. Bouton favori
   -------------------------------------------------------------------------- */

#flatfox-wrap .flatfox-fav-btn {
	position: absolute !important; top: 8px !important; right: 8px !important;
	width: 32px !important; height: 32px !important; border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.9) !important; border: none !important;
	cursor: pointer; display: flex !important;
	align-items: center !important; justify-content: center !important;
	padding: 0 !important; z-index: 2;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
#flatfox-wrap .flatfox-fav-btn svg { width: 15px; height: 15px; color: #bbb; }
#flatfox-wrap .flatfox-fav-btn .flatfox-heart-filled { display: none; }
#flatfox-wrap .flatfox-fav-btn.is-fav .flatfox-heart-outline { display: none; }
#flatfox-wrap .flatfox-fav-btn.is-fav .flatfox-heart-filled {
	display: block;
	color: var(--rdc-red-600, #9c3d42);
}

/* --------------------------------------------------------------------------
   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: block !important; 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-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
   -------------------------------------------------------------------------- */

.flatfox-marker {
	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.is-active { transform: scale(1.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 { 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. Responsive — 768 px : retour au flux normal (carte au-dessus, liste dessous)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	body.flatfox-page { overflow: auto; }

	#flatfox-wrap {
		position: relative !important;
		top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
		width: 100%; height: auto !important;
		flex-direction: column;
		margin-top: var(--rdc-nav-h, 64px);
	}

	#flatfox-map-panel { flex: none; width: 100%; height: 40vh; min-height: 240px; }
	#flatfox-map { height: 40vh !important; min-height: 240px; }
	#flatfox-listings-panel { flex: none; height: auto; overflow: visible; width: 100%; }
	#flatfox-grid { grid-template-columns: 1fr; overflow-y: visible; flex: none; height: auto; }
	#flatfox-wrap .flatfox-filters-row { flex-wrap: wrap; }
	#flatfox-wrap .flatfox-input,
	#flatfox-wrap .flatfox-select { flex: 1 1 140px; }
}