/* ==========================================================================
   Cartes Leaflet (listes et fiches) : fond, popup, marqueurs, grappes,
   « Rechercher quand je déplace la carte »
   ========================================================================== */

.bridge-liste .leaflet-container { font-family: var(--br-body); background: var(--br-dark); }
.bridge-liste .leaflet-bar a {
	color: var(--br-dark);
	border-bottom-color: #e5e5e5;
}
.bridge-liste .leaflet-bar { border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
/* Popup de la carte (fiche_template=popup) : mini-carte façon Travelik */
.leaflet-popup-content-wrapper {
	padding: 0;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(18, 35, 39, 0.3);
}
.leaflet-popup-content { width: 260px !important; margin: 0; font-family: "Inter", sans-serif; }
.leaflet-popup-content .fichepopup { padding: 0 0 18px; text-align: left !important; }
.leaflet-popup-content .fichepopup > img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}
.leaflet-popup-content .fichepopup h2 {
	margin: 14px 18px 6px !important;
	font-family: "Bebas Neue", sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.1;
	color: #1C2D31;
}
.leaflet-popup-content .fichepopup .comment {
	margin: 0 18px 12px;
	font-size: 13px;
	line-height: 20px;
	color: #5F6E72;
}
.leaflet-popup-content .fichepopup .uk-button {
	margin: 0 18px;
	padding: 4px 18px;
	font-family: "Bebas Neue", sans-serif;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: none;
	color: #fff;
	background: #0CB2DB;
	border: 0;
	border-radius: 30px;
	transition: background-color 0.3s;
}
.leaflet-popup-content .fichepopup .uk-button:hover { background: #1C2D31; }
.leaflet-container a.leaflet-popup-close-button {
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	font: 20px/28px "Inter", sans-serif;
	color: #fff;
	background: rgba(18, 35, 39, 0.6);
	border-radius: 50%;
}

/* ---------- Marqueurs (markers/marker.svg et marker-actif.svg, déclarés dans Bridge › Réglages › Cartographie)
   Bridge réduit toujours l'icône à 50 px de haut et l'ancre en son CENTRE (iconAnchor = h/2) :
   la pointe de la goutte serait 25 px trop haut. On remonte l'icône de toute sa hauteur
   pour que la pointe tombe exactement sur la coordonnée. Valable pour toutes les cartes Bridge. */
.leaflet-marker-pane > img.leaflet-marker-icon {
	margin-top: -50px !important;
	filter: drop-shadow(0 6px 6px rgba(18, 35, 39, 0.35));
	transition: filter 0.2s;
}
.leaflet-marker-pane > img.leaflet-marker-icon:hover { filter: drop-shadow(0 8px 10px rgba(12, 178, 219, 0.55)); }
/* Marqueur actif (survol d'une fiche, cf. bridge-liste.js) : halo turquoise pulsé */
.leaflet-marker-pane > img.leaflet-marker-icon[src*="marker-actif"] {
	animation: br-marker-pulse 1.4s ease-in-out infinite;
}
@keyframes br-marker-pulse {
	0%, 100% { filter: drop-shadow(0 0 2px rgba(12, 178, 219, 0.9)) drop-shadow(0 6px 6px rgba(18, 35, 39, 0.4)); }
	50%      { filter: drop-shadow(0 0 10px rgba(12, 178, 219, 1)) drop-shadow(0 6px 6px rgba(18, 35, 39, 0.4)); }
}
/* Fiche regroupée dans une grappe : la grappe est mise en avant */
.leaflet-container .marker-cluster.br-cluster-actif div {
	background-color: #122327;
	box-shadow: 0 0 0 3px #0CB2DB, 0 0 14px rgba(12, 178, 219, 0.9);
}
/* Survol d'un marqueur : la fiche correspondante ressort dans la liste */
.bridge-liste .liste_sit_item.br-fiche-active .ficheproduit > .uk-card {
	transform: translateY(-6px);
	border-color: #0CB2DB;
	box-shadow: 0 0 0 1px #0CB2DB, 0 20px 40px rgba(12, 178, 219, 0.18);
}
@media (prefers-reduced-motion: reduce) {
	.leaflet-marker-pane > img.leaflet-marker-icon[src*="marker-actif"] {
		animation: none;
		filter: drop-shadow(0 0 8px rgba(12, 178, 219, 1));
	}
}
/* Le popup s'ouvre au-dessus de la goutte au lieu de la recouvrir */
.leaflet-popup-pane .leaflet-popup { margin-bottom: 52px; }

/* Grappes de points (MarkerCluster) aux couleurs du site */
.leaflet-container .marker-cluster-small,
.leaflet-container .marker-cluster-medium,
.leaflet-container .marker-cluster-large { background-color: rgba(12, 178, 219, 0.3); }
.leaflet-container .marker-cluster-small div,
.leaflet-container .marker-cluster-medium div,
.leaflet-container .marker-cluster-large div {
	background-color: #0CB2DB;
	box-shadow: 0 0 0 2px #fff;
}
.leaflet-container .marker-cluster span {
	font-family: "Bebas Neue", sans-serif;
	font-size: 17px;
	line-height: 30px;
	letter-spacing: 0.03em;
	color: #fff;
}
.leaflet-container .marker-cluster-medium div { background-color: #0A93B5; }
.leaflet-container .marker-cluster-large div { background-color: #122327; box-shadow: 0 0 0 2px #0CB2DB; }

/* ---------- « Rechercher quand je déplace la carte » (bridge-map-area-search.js)
   Préfixe .leaflet-container : la feuille Bridge est chargée après celle-ci. */
/* Calé en haut à droite (les boutons de zoom sont à gauche) : ne déborde plus sur une carte étroite */
.leaflet-container .bridge-area-search {
	top: 12px;
	right: 12px;
	left: auto;
	transform: none;
	align-items: flex-end;
	gap: 8px;
	max-width: calc(100% - 70px);
}
.leaflet-container .bridge-area-search-toggle .bridge-area-search-text { text-align: left; line-height: 1.1; }
.leaflet-container .bridge-area-search button {
	font-family: "Bebas Neue", sans-serif;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: #fff;
	background-color: rgba(18, 35, 39, 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 40px;
	box-shadow: 0 10px 30px rgba(18, 35, 39, 0.35);
	transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.leaflet-container .bridge-area-search button:hover { background-color: #122327; border-color: #0CB2DB; }
.leaflet-container .bridge-area-search button:focus-visible { outline: 2px solid #0CB2DB; outline-offset: 3px; }

.leaflet-container .bridge-area-search-toggle { gap: 10px; padding: 9px 18px 9px 10px; }
.leaflet-container .bridge-area-search-switch {
	width: 36px;
	height: 20px;
	border-radius: 20px;
	background-color: #5E7378; /* contraste >= 3:1 sur le fond sombre */
	transition: background-color 0.25s;
}
.leaflet-container .bridge-area-search-switch::after {
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transition: transform 0.25s;
}
.leaflet-container .bridge-area-search.is-auto .bridge-area-search-switch { background-color: #0CB2DB; }
.leaflet-container .bridge-area-search.is-auto .bridge-area-search-switch::after { transform: translateX(16px); }
.leaflet-container .bridge-area-search.is-auto .bridge-area-search-toggle { border-color: rgba(12, 178, 219, 0.6); }

.leaflet-container .bridge-area-search-clear {
	width: 38px;
	margin-left: 6px;
	font-family: "Inter", sans-serif;
	font-size: 20px;
}
.leaflet-container .bridge-area-search-clear:hover { color: #0CB2DB; }

/* Bouton « Rechercher dans cette zone » : bouton principal turquoise */
.leaflet-container .bridge-area-search button.bridge-area-search-run {
	gap: 8px;
	padding: 10px 20px;
	font-weight: 400;
	background-color: #0CB2DB;
	border-color: #0CB2DB;
}
.leaflet-container .bridge-area-search button.bridge-area-search-run:hover { color: #122327; background-color: #fff; border-color: #fff; }

@media (max-width: 640px) {
	.leaflet-container .bridge-area-search button { font-size: 14px; }
	.leaflet-container .bridge-area-search-toggle { padding: 7px 14px 7px 8px; }
}