/**
 * FTImmoMap — habillage de la carte et des contrôles (admin + front).
 */

/* Conteneur carte : remplit la colonne, coins arrondis, fond neutre pendant le chargement. */
.ftimmo-map {
	width: 100%;
	height: 100%;
	min-height: 360px;
	border-radius: 8px;
	overflow: hidden;
	background: #eef2f6;
}
.ftimmo-map .leaflet-container {
	font-family: inherit;
	border-radius: 8px;
}

/* Bloc de 3 onglets (haut-droite) : Recentrer / Satellite / Carte. Aspect « pastille » comme le
 * sélecteur Liste/Carte : conteneur pilule blanc de 40 px, chaque onglet en rond ; onglet actif/pressé
 * en primaire (var --fti-primary sur le front ; repli #3889ff au backend, où la variable n'existe pas). */
.ftimmo-map-tabs {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 40px;
	padding: 4px;
	background: #fff;
	background-clip: padding-box;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
}
.ftimmo-map-tabs .ftimmo-map-tab {
	position: relative; /* ancre des tooltips */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #333;
	cursor: pointer;
	line-height: 0;
	transition: background 0.15s, color 0.15s;
}
/* Icône satellite : recentrage optique de 1 px vers la gauche. */
.ftimmo-map-tabs .ftimmo-map-tab[data-act="sat"] svg { transform: translateX( -1px ); }
/* Roll : teinte claire à ~30 % du primaire (repli plein #c3dcff au backend, avant color-mix), glyphe sombre. */
.ftimmo-map-tabs .ftimmo-map-tab:hover {
	background: #c3dcff;
	background: color-mix( in srgb, var( --fti-primary, #3889ff ) 30%, #fff );
	color: #333;
}
/* Onglet actif / pressé (dont « Recentrer », sans état persistant) : pastille primaire pleine, icône blanche. */
.ftimmo-map-tabs .ftimmo-map-tab.is-active,
.ftimmo-map-tabs .ftimmo-map-tab:active { background: var( --fti-primary, #3889ff ); color: #fff; }
.ftimmo-map-tabs .ftimmo-map-tab.is-active svg,
.ftimmo-map-tabs .ftimmo-map-tab:active svg {
	stroke: #fff;
	color: #fff;
}
.ftimmo-map-tabs .ftimmo-map-tab svg {
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 auto;
}

/* Zoom +/- Leaflet (haut-gauche) : même aspect « pastille » que la barre d'outils. Conteneur pilule
 * vertical blanc, boutons ronds ; roll = teinte claire à ~30 % du primaire, comme les onglets.
 * Sélecteur bare (comme .ftimmo-map-tabs) : le conteneur front est .fti-archive__mapcanvas, pas .ftimmo-map. */
.leaflet-control-zoom {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 4px;
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.15 ) !important;
	border-radius: 999px !important;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
}
.leaflet-control-zoom a.leaflet-control-zoom-in,
.leaflet-control-zoom a.leaflet-control-zoom-out {
	width: 32px;
	height: 32px;
	line-height: 32px;
	/* !important : Leaflet fixe des arrondis par coin sur :first-child/:last-child (spécificité supérieure)
	 * → coins carrés au survol. On impose un rond plein et on retire son filet séparateur interne. */
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent;
	color: #333;
	font-size: 18px;
	/* Le thème souligne les liens au survol : sous le « − » du zoom arrière, ce trait apparaît comme un
	 * second « − » légèrement décalé. On neutralise le soulignement sur ces deux boutons. */
	text-decoration: none !important;
	transition: background 0.15s, color 0.15s;
}
.leaflet-control-zoom a.leaflet-control-zoom-in:hover,
.leaflet-control-zoom a.leaflet-control-zoom-out:hover {
	background: #c3dcff;
	background: color-mix( in srgb, var( --fti-primary, #3889ff ) 30%, #fff );
	color: #333;
	text-decoration: none !important;
}
.leaflet-control-zoom a.leaflet-control-zoom-in:active,
.leaflet-control-zoom a.leaflet-control-zoom-out:active { background: var( --fti-primary, #3889ff ); color: #fff; }
.leaflet-control-zoom a.leaflet-disabled {
	background: transparent;
	color: #c8c8c8;
}

/* Bouton plein écran (bas-gauche) : même pastille que la barre d'outils, bouton rond, roll clair 30 %. */
.ftimmo-map-fs { background: none; border: 0; box-shadow: none; }
.ftimmo-map-fsbtn {
	position: relative; /* ancre du tooltip */
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 1px solid rgba( 0, 0, 0, 0.15 ) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: #333 !important;
	cursor: pointer;
	line-height: 0;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 ) !important;
	transition: background 0.15s, color 0.15s;
}
/* Survol / focus clavier : fond bleu clair (au clic souris, le bouton reste blanc — cf. focus-visible). */
.ftimmo-map-fsbtn:hover,
.ftimmo-map-fsbtn:focus-visible {
	background: #c3dcff !important;
	background: color-mix( in srgb, var( --fti-primary, #3889ff ) 30%, #fff ) !important;
	color: #333 !important;
}
.ftimmo-map-fsbtn svg { display: block; width: 18px; height: 18px; }

/* ===== Plein écran (classe .fti-map-isfs posée sur .fti-archive__mapcanvas par archive-property.js) =====
 * On agrandit les zones cliquables de TOUS les contrôles et on cale la hauteur des pilules sur celle de la
 * navigation et de la barre de critères (60 px). Le bouton de SORTIE passe en primaire plein (icône
 * blanche, roll bleu foncé) pour attirer l'œil vers la porte de sortie. */
.fti-map-isfs .ftimmo-map-tabs { height: 60px; padding: 6px; gap: 4px; }
.fti-map-isfs .ftimmo-map-tabs .ftimmo-map-tab { width: 48px; height: 48px; }
.fti-map-isfs .ftimmo-map-tabs .ftimmo-map-tab svg { width: 20px; height: 20px; }
.fti-map-isfs .leaflet-control-zoom { padding: 6px; gap: 4px; }
.fti-map-isfs .leaflet-control-zoom a.leaflet-control-zoom-in,
.fti-map-isfs .leaflet-control-zoom a.leaflet-control-zoom-out {
	/* Centrage géométrique (flex) plutôt que par line-height : le glyphe +/− agrandi n'est pas centré par
	 * sa métrique → décalage visible au survol. Padding-bas (box-sizing border-box, hauteur constante) →
	 * le glyphe remonte de 2,5px (padding-bas 5) pour un aplomb optique équilibré. */
	display: flex; align-items: center; justify-content: center;
	box-sizing: border-box; padding: 0 0 5px;
	width: 48px; height: 48px; line-height: 1; font-size: 24px;
}
.fti-map-isfs .ftimmo-map-fsbtn {
	width: 60px !important; height: 60px !important;
	background: var( --fti-primary, #3889ff ) !important;
	border-color: var( --fti-primary, #3889ff ) !important;
	color: #fff !important;
}
.fti-map-isfs .ftimmo-map-fsbtn svg { width: 24px; height: 24px; stroke: #fff; color: #fff; }
.fti-map-isfs .ftimmo-map-fsbtn:hover,
.fti-map-isfs .ftimmo-map-fsbtn:focus-visible {
	background: var( --fti-navy, #123347 ) !important;
	border-color: var( --fti-navy, #123347 ) !important;
	color: #fff !important;
}
/* Tooltip du bouton plein écran : au-dessus (le bouton est en bas), aligné à gauche. */
.ftimmo-map-fsbtn[data-tip]::after {
	content: attr( data-tip );
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 0;
	white-space: nowrap;
	background: #1d2327;
	color: #fff;
	font: 400 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	padding: 4px 8px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.3 );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.12s ease, visibility 0.12s ease;
}
.ftimmo-map-fsbtn[data-tip]:hover::after,
.ftimmo-map-fsbtn[data-tip]:focus-visible::after { opacity: 1; visibility: visible; transition-delay: 0.5s; }

/* Plein écran de la carte SEULE (éditeur back-office, fiche détail) : elle remplit l'écran (l'aspect-ratio
 * du front / la hauteur métabox sont neutralisés). La vue Carte de l'archive passe, elle, tout son wrapper
 * liste + carte en plein écran (cf. archive-property.css). :fullscreen et :-webkit-full-screen restent dans
 * des règles SÉPARÉES (une seule inconnue ferait tomber toute la règle). */
.ftimmo-map:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.ftimmo-map:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }

/* Tooltips explicatifs au survol, avec délai de déclenchement (~0,5 s) et disparition immédiate. */
.ftimmo-map-tabs .ftimmo-map-tab[data-tip]::after {
	content: attr( data-tip );
	position: absolute;
	top: calc( 100% + 8px );
	right: 0; /* bord droit du tooltip aligné sur le bord droit du bouton → s'étend vers la gauche */
	left: auto;
	white-space: nowrap;
	background: #1d2327;
	color: #fff;
	font: 400 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	padding: 4px 8px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.3 );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 1000;
	transition: opacity 0.12s ease, visibility 0.12s ease;
	transition-delay: 0s;
}
.ftimmo-map-tabs .ftimmo-map-tab[data-tip]::before {
	content: "";
	position: absolute;
	top: calc( 100% + 3px );
	right: 10px; /* flèche sous le centre du bouton (30 px de large) */
	left: auto;
	border: 5px solid transparent;
	border-bottom-color: #1d2327;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 1000;
	transition: opacity 0.12s ease, visibility 0.12s ease;
	transition-delay: 0s;
}
.ftimmo-map-tabs .ftimmo-map-tab[data-tip]:hover::after,
.ftimmo-map-tabs .ftimmo-map-tab[data-tip]:hover::before,
.ftimmo-map-tabs .ftimmo-map-tab[data-tip]:focus-visible::after,
.ftimmo-map-tabs .ftimmo-map-tab[data-tip]:focus-visible::before {
	opacity: 1;
	visibility: visible;
	transition-delay: 0.5s; /* délai avant apparition */
}

/* Focus clavier visible sur tous les boutons de carte (WCAG 2.4.7) : halo doux, unifié avec le reste du
   plugin. !important pour battre l'ombre portée (elle-même en !important) de ces contrôles flottants. */
.ftimmo-map-tabs .ftimmo-map-tab:focus-visible,
.ftimmo-map-fsbtn:focus-visible,
.leaflet-control-zoom a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var( --fti-focus, rgba( 56, 137, 255, 0.18 ) ) !important;
}

/* Clusters (markercluster) : police Aptos et jeu de couleurs décliné de nos deux bleus
 * (primaire #3889ff → foncé #123347), avec un palier intermédiaire interpolé. Halo = même
 * teinte translucide, pastille pleine, chiffre blanc. On bat le Default.css du plugin (chargé
 * après) via des sélecteurs plus spécifiques. */
.leaflet-container .marker-cluster {
	background-clip: padding-box;
	border-radius: 22px;
}
.leaflet-container .marker-cluster div {
	width: 34px;
	height: 34px;
	margin-left: 3px;
	margin-top: 3px;
	border-radius: 50%;
	color: #fff;
	font-family: "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 600;
}
.leaflet-container .marker-cluster span { line-height: 34px; }

/* Palier 1 (petits amas) : bleu primaire. */
.leaflet-container .marker-cluster-small { background-color: rgba( 56, 137, 255, 0.35 ); }
.leaflet-container .marker-cluster-small div { background-color: #3889ff; }
/* Palier 2 (amas moyens) : bleu intermédiaire (mi-chemin primaire/foncé). */
.leaflet-container .marker-cluster-medium { background-color: rgba( 37, 95, 179, 0.4 ); }
.leaflet-container .marker-cluster-medium div { background-color: #255fb3; }
/* Palier 3 (grands amas) : bleu foncé de la palette. */
.leaflet-container .marker-cluster-large { background-color: rgba( 18, 51, 71, 0.45 ); }
.leaflet-container .marker-cluster-large div { background-color: #123347; }

/* Marqueur du bien : pin rouge plein en SVG (aucun PNG), pointe basse, léger halo pour le détacher. */
.ftimmo-map-pin {
	background: none;
	border: 0;
}
.ftimmo-map-pin svg {
	display: block;
	width: 32px;
	height: 32px;
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.4 ) );
}

/* Nom de la zone au centre du périmètre (fiche détail) : noir, capitales, Aptos 20 px, halo blanc pour
 * la lisibilité sur le fond de carte. Non-interactif ; centré sur le point via translate(-50%,-50%),
 * décalé verticalement par le JS en cas de collision avec le marqueur du bien. */
.ftimmo-zone-label {
	background: none;
	border: 0;
	/* Fondu des légendes pendant un mouvement de zoom : le JS (fadeZoneLabels) pose l'opacité inline sur cette
	   racine au zoomstart/zoomend ; cette transition anime le fondu. L'anti-collision gère la visibility à part. */
	transition: opacity .18s ease;
}
.ftimmo-zone-label .ftimmo-zone-label__txt {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate( -50%, -50% );
	margin: 0;
	white-space: nowrap;
	color: #000;
	text-transform: uppercase;
	font-family: var( --fti-font, Aptos, Arial, Helvetica, sans-serif );
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	pointer-events: none;
	text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 2px #fff;
}
/* Carte de recherche : toutes les zones affichées → légendes plus petites (moins d'encombrement ;
   l'anti-collision côté JS masque celles qui chevauchent un marqueur ou une autre légende). */
.ftimmo-zone-label--multi .ftimmo-zone-label__txt {
	font-size: 13px;
	letter-spacing: 0.01em;
}

/* Découpe en deux du bloc « Localisation et surface » de l'éditeur : champs à gauche, carte à droite.
 * `.ftimmo-loc-split` est posée sur le `.inside` du metabox ; la colonne gauche garde la classe
 * `.acf-fields` (styles ACF des champs intacts). */
.ftimmo-loc-split {
	display: flex !important;
	align-items: stretch;
}
.ftimmo-loc-split > .ftimmo-loc-fields {
	flex: 1 1 0;
	min-width: 0;
	/* Filet vertical clair : ferme proprement les filets horizontaux d'ACF (border-top des champs). */
	border-right: 1px solid #dcdcde;
}
.ftimmo-loc-split > .ftimmo-loc-map {
	flex: 0 0 42%;
	display: flex;
	min-height: 360px;
	box-sizing: border-box;
	/* 20 px après le filet ; 20 px à droite = miroir de l'inset gauche des champs ACF. */
	padding: 16px 20px 16px 20px;
}
@media ( max-width: 1100px ) {
	.ftimmo-loc-split { flex-direction: column; }
	.ftimmo-loc-split > .ftimmo-loc-fields { border-right: 0; border-bottom: 1px solid #dcdcde; }
	.ftimmo-loc-split > .ftimmo-loc-map { flex-basis: auto; height: 340px; min-height: 0; padding: 16px 20px; }
	/* En colonne, la colonne carte est figée à 340 px ; sans cette règle la carte garde son min-height:360
	   (cf. .ftimmo-map) et déborde par le bas de ~52 px. On le neutralise pour qu'elle épouse la box. */
	.ftimmo-loc-split > .ftimmo-loc-map .ftimmo-map { min-height: 0; }
}
/* Étiquette de zone dans la carte de l'éditeur : carte plus petite que la fiche détail → corps réduit
   d'environ 30 % (20 px → 14 px, corps plein standard le plus proche). La fiche détail garde 20 px. */
.ftimmo-loc-map .ftimmo-zone-label__txt { font-size: 14px; }