/* Boutemont — carte Leaflet.
 *
 * Trois variantes :
 *   .bmt-carte            contenu de page, carte encadrée ;
 *   .bmt-carte--footer    bandeau pleine largeur du pied de page ;
 *   .bmt-carte--compact   aperçu du panneau Horaires & accès.
 *
 * L'ordre des blocs compte : footer puis compact, une carte pouvant porter
 * les deux classes (widget en mode footer posé dans .bmt-hb__map). */

/* =========================================================
   Base
   ========================================================= */

.bmt-carte {
	--bmt-carte-domain: #93A78A;
	--bmt-carte-town: #3F5236;
	--bmt-carte-label-bg: rgba(255, 255, 255, 0.94);
	--bmt-carte-label: #1B1D1C;
	/* Toute la carte en Open Sans, quel que soit le conteneur (le panneau
	 * Horaires & accès imposait sinon EB Garamond). Police déjà chargée par
	 * le kit Elementor du site. */
	--bmt-carte-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--bmt-carte-sat: 1;
	--bmt-carte-con: 1;
	--bmt-carte-bri: 1;
	--bmt-carte-autoroute: #4F7539;
	--bmt-carte-autoroute-width: 4;
	--bmt-carte-chemin: #4F7539;
	--bmt-carte-chemin-width: 5;

	position: relative;
	display: block;
	isolation: isolate;
	contain: layout paint;
	width: 100%;
	height: var(--bmt-carte-height, 380px);
	min-height: 120px;
	border: 1px solid rgba(27, 29, 28, 0.14);
	border-radius: 12px;
	overflow: hidden;
	background: #F2F5EF;
	font-family: var(--bmt-carte-font) !important;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Palette officielle 2026. Le !important migre aussi les widgets Elementor
 * anciens qui avaient encore mémorisé les couleurs dorées précédentes. */
.bmt-carte--palette-boutemont-2026 {
	--bmt-carte-domain: #93A78A !important;
	--bmt-carte-town: #3F5236 !important;
	--bmt-carte-label-bg: rgba(255, 255, 255, 0.96) !important;
	--bmt-carte-label: #1B1D1C !important;
}

.bmt-carte *,
.bmt-carte *::before,
.bmt-carte *::after {
	box-sizing: border-box;
	letter-spacing: normal;
	text-transform: none;
}

/* Les thèmes WordPress imposent parfois max-width:100% aux images. Sur
 * Safari cela peut redimensionner les tuiles et donner une carte en deux. */
.bmt-carte .leaflet-pane,
.bmt-carte .leaflet-tile,
.bmt-carte img,
.bmt-carte .leaflet-pane svg,
.bmt-carte .bmt-carte__shield span,
.bmt-carte .bmt-carte__far-label {
	max-width: none !important;
	max-height: none !important;
}

/* Les volets ajoutés par l'extension (tracés A13 et chemin) ne profitent
   pas de la protection que leaflet.css réserve à .leaflet-overlay-pane : un
   « * { max-width: 100% } » de thème ou de panneau (Horaires & accès) les
   écrasait à 0 px de large. */

.bmt-carte .leaflet-map-pane,
.bmt-carte .leaflet-tile-pane,
.bmt-carte .leaflet-marker-pane,
.bmt-carte .leaflet-tooltip-pane {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* =========================================================
   Fond de carte
   ========================================================= */

/* Le filtre est piloté par le réglage « Intensité des couleurs du fond ». */
.bmt-carte .leaflet-tile-pane {
	filter:
		saturate(var(--bmt-carte-sat, 1))
		contrast(var(--bmt-carte-con, 1))
		brightness(var(--bmt-carte-bri, 1));
}

/* Le fond très clair n'existe que délavé : c'est sa raison d'être. */
.bmt-carte--fond-clair {
	--bmt-carte-sat: 0.52;
	--bmt-carte-con: 0.94;
	--bmt-carte-bri: 1.035;
}

/* =========================================================
   Repères et étiquettes
   ========================================================= */

/* Sur un plan détaillé, un repère plat se confond avec un rond-point. */
.bmt-carte__marker {
	filter: drop-shadow(0 1px 3px rgba(27, 29, 28, 0.35));
}

.bmt-carte .leaflet-tooltip.bmt-carte__tooltip {
	width: max-content;
	max-width: none !important;
	padding: 4px 8px;
	border: 1px solid rgba(27, 29, 28, 0.09);
	border-radius: 999px;
	background: var(--bmt-carte-label-bg);
	box-shadow: 0 3px 12px rgba(27, 29, 28, 0.11);
	color: var(--bmt-carte-label);
	font-family: var(--bmt-carte-font) !important;
	font-size: 10.5px;
	font-weight: 650;
	line-height: 1.2;
	white-space: nowrap;
}

.bmt-carte .leaflet-tooltip.bmt-carte__tooltip::before {
	display: none;
}

.bmt-carte__label-content {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	white-space: nowrap;
}

.bmt-carte__label-content em {
	font-size: 0.88em;
	font-style: normal;
	font-weight: 700;
	color: var(--bmt-carte-town);
}

.bmt-carte .leaflet-tooltip.bmt-carte__tooltip--domain {
	border-color: #1B1D1C;
	background: #1B1D1C;
	color: #FFFFFF;
	font-weight: 700;
}

/* Distance après le temps de trajet, séparée par un point médian. */
.bmt-carte__label-content em.bmt-carte__label-km {
	font-weight: 600;
	color: #6D786A;
}

.bmt-carte__label-content em + em.bmt-carte__label-km::before {
	content: '·';
	margin-right: 5px;
	color: #9AA596;
}

/* =========================================================
   Autoroute A13
   ========================================================= */

.bmt-carte .bmt-carte__shield {
	width: 0 !important;
	height: 0 !important;
	border: 0;
	background: none;
}

/* Cartouche façon panneau autoroutier : fond de la couleur du tracé. */
.bmt-carte .bmt-carte__shield span {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	padding: 2px 6px;
	border: 1.5px solid #FFFFFF;
	border-radius: 4px;
	background: var(--bmt-carte-autoroute, #4F7539);
	box-shadow: 0 2px 6px rgba(27, 29, 28, 0.25);
	color: #FFFFFF;
	font-family: var(--bmt-carte-font) !important;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

/* Ville lointaine (Paris) : panneau épinglé au bord, flèche vers elle. */
.bmt-carte .bmt-carte__far {
	width: 0 !important;
	height: 0 !important;
	border: 0;
	background: none;
}

.bmt-carte .bmt-carte__far-label {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border: 1px solid rgba(27, 29, 28, 0.09);
	border-radius: 999px;
	background: var(--bmt-carte-label-bg);
	box-shadow: 0 3px 12px rgba(27, 29, 28, 0.11);
	color: var(--bmt-carte-label);
	font-family: var(--bmt-carte-font) !important;
	font-size: 10.5px;
	font-weight: 650;
	line-height: 1.2;
	white-space: nowrap;
}

.bmt-carte .bmt-carte__far-label.is-west {
	flex-direction: row-reverse;
}

.bmt-carte .bmt-carte__far-label i {
	display: inline-block;
	font-style: normal;
	font-weight: 800;
	color: var(--bmt-carte-town);
}

.bmt-carte .bmt-carte__far-name:empty {
	display: none;
}

/* =========================================================
   Sélecteur de vue
   ========================================================= */

/* Deux boutons toujours visibles : ils annoncent qu'on peut zoomer, et
   celui qui est allumé dit où l'on se trouve. */
.bmt-carte__views {
	display: inline-flex;
	gap: 2px;
	margin: 10px 10px 0 0;
	padding: 3px;
	border: 1px solid rgba(27, 29, 28, 0.10);
	border-radius: 999px;
	background: var(--bmt-carte-views-bg, rgba(255, 255, 255, 0.95));
	box-shadow: 0 2px 10px rgba(27, 29, 28, 0.16);
	backdrop-filter: blur(2px);
}

.bmt-carte__view {
	padding: 6px 13px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--bmt-carte-view, #1B1D1C);
	font-family: var(--bmt-carte-font) !important;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.22s ease, color 0.22s ease;
}

.bmt-carte__view:hover:not(.is-active) {
	background: rgba(27, 29, 28, 0.06);
}

.bmt-carte__view.is-active {
	background: var(--bmt-carte-view-active-bg, var(--bmt-carte-domain, #93A78A));
	color: var(--bmt-carte-view-active, #12200F);
	cursor: default;
}

.bmt-carte__view:focus-visible {
	outline: 2px solid #12200F;
	outline-offset: 2px;
}

.bmt-carte--compact .bmt-carte__views {
	display: none;
}

/* =========================================================
   Attribution
   ========================================================= */

.bmt-carte .leaflet-control-attribution {
	padding: 1px 6px;
	background: rgba(255, 255, 255, 0.82);
	color: #6D786A;
	font-family: var(--bmt-carte-font) !important;
	font-size: 8px;
	line-height: 1.5;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.bmt-carte .leaflet-control-attribution a {
	border: 0 !important;
	color: #6D786A;
	font-size: 8px;
	letter-spacing: normal !important;
	text-decoration: none;
	text-transform: none !important;
}

.bmt-carte .leaflet-control-attribution svg {
	display: none;
}

/* Placé avant le footer : sur une carte footer + compact, le fond de
   l'attribution du footer l'emporte. */
.bmt-carte--compact .leaflet-control-attribution {
	padding: 1px 5px;
	background: rgba(255, 255, 255, 0.76);
	line-height: 1.35;
	opacity: 0.72;
}

.bmt-carte--compact .leaflet-control-attribution,
.bmt-carte--compact .leaflet-control-attribution a {
	font-size: 7px;
}

/* =========================================================
   Safari et écrans étroits
   ========================================================= */

@supports (-webkit-touch-callout: none) {
	.bmt-carte {
		-webkit-mask-image: -webkit-radial-gradient(white, black);
	}
}

/* Sur une carte étroite, boutons et étiquettes se resserrent : c'est ce
   qui décide si sept noms tiennent ou si deux se font rogner. */
@media (max-width: 600px) {
	.bmt-carte__views {
		margin: 8px 8px 0 0;
	}

	.bmt-carte__view {
		padding: 5px 9px;
		font-size: 9px;
	}

	.bmt-carte .leaflet-tooltip.bmt-carte__tooltip {
		padding: 3px 6px;
		font-size: 9.5px;
	}

	.bmt-carte__label-content {
		gap: 4px;
	}

	.bmt-carte .bmt-carte__far-label {
		padding: 3px 6px;
		font-size: 9.5px;
	}

	.bmt-carte .bmt-carte__shield span {
		padding: 1px 5px;
		font-size: 9px;
	}
}

/* =========================================================
   Variante footer
   ========================================================= */

/* Un bandeau cartographique, pas une carte posée dans une carte : ni double
   contour ni ombre artificielle avec le conteneur Elementor. */
.bmt-carte--footer {
	min-height: 240px;
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), inset 0 -1px rgba(27, 29, 28, 0.12);
	background: #E8ECE5;
}

.bmt-carte--footer .leaflet-control-attribution {
	right: 8px;
	bottom: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.88);
}

.bmt-carte--footer .bmt-carte__views {
	margin: 14px 14px 0 0;
	box-shadow: 0 5px 18px rgba(27, 29, 28, 0.13);
}

.bmt-carte--footer .leaflet-tooltip.bmt-carte__tooltip--domain {
	padding: 6px 10px;
	box-shadow: 0 5px 18px rgba(27, 29, 28, 0.18);
}

/* =========================================================
   Variante compacte — panneau Horaires & accès
   ========================================================= */

/* Réduction de la carte du footer : même fond, mêmes couleurs. Sous 520 px
   (« mini »), trois repères seulement ; au-delà, mêmes villes que le footer. */
.bmt-carte--compact {
	min-height: 88px;
	border: 1px solid rgba(27, 29, 28, 0.10);
	border-radius: 12px;
	box-shadow: none;
	cursor: default;
}

.bmt-carte--compact .leaflet-tooltip.bmt-carte__tooltip--domain {
	padding: 3px 7px;
	border: 0;
	font-size: 8.5px;
	box-shadow: 0 2px 7px rgba(27, 29, 28, 0.15);
}

.bmt-carte--compact .leaflet-tooltip.bmt-carte__tooltip:not(.bmt-carte__tooltip--domain) {
	padding: 2px 5px;
	border: 0;
	font-size: 7.5px;
	font-weight: 650;
	box-shadow: 0 1px 4px rgba(27, 29, 28, 0.11);
}

/* =========================================================
   Footer sur mobile
   ========================================================= */

@media (max-width: 767px) {
	.bmt-carte--footer {
		min-height: 220px;
	}

	/* Sept bulles dans la largeur d'un téléphone n'apportent rien : les
	   points restent, seul le nom de Boutemont est affiché. */
	.bmt-carte--footer .leaflet-tooltip.bmt-carte__tooltip:not(.bmt-carte__tooltip--domain) {
		display: none;
	}

	.bmt-carte--footer .bmt-carte__views {
		margin: 9px 9px 0 0;
	}
}

/* Cartouche A13 de l'aperçu : réduit, à l'échelle des étiquettes. */
.bmt-carte--compact .bmt-carte__shield span {
	padding: 1px 4px;
	border-width: 1px;
	border-radius: 3px;
	font-size: 7.5px;
}

.bmt-carte--compact-large .bmt-carte__shield span {
	padding: 2px 6px;
	border-width: 1.5px;
	font-size: 9.5px;
}

/* Paris dans l'aperçu : même gabarit que les autres étiquettes. */
.bmt-carte--compact .bmt-carte__far-label {
	gap: 4px;
	padding: 2px 5px;
	border: 0;
	font-size: 7.5px;
	box-shadow: 0 1px 4px rgba(27, 29, 28, 0.11);
}

/* Aperçu large : étiquettes à la taille du footer. */
.bmt-carte--compact.bmt-carte--compact-large .leaflet-tooltip.bmt-carte__tooltip:not(.bmt-carte__tooltip--domain) {
	padding: 3px 7px;
	font-size: 9.5px;
	box-shadow: 0 2px 8px rgba(27, 29, 28, 0.12);
}

.bmt-carte--compact.bmt-carte--compact-large .leaflet-tooltip.bmt-carte__tooltip--domain {
	padding: 4px 9px;
	font-size: 10px;
}

.bmt-carte--compact-large .bmt-carte__far-label {
	padding: 3px 7px;
	font-size: 9.5px;
}

/* Rien dans la carte n'hérite de la police du conteneur. */
.bmt-carte,
.bmt-carte .leaflet-tooltip,
.bmt-carte .leaflet-tooltip *,
.bmt-carte .leaflet-control,
.bmt-carte .leaflet-control *,
.bmt-carte .bmt-carte__shield span,
.bmt-carte .bmt-carte__far-label,
.bmt-carte .bmt-carte__far-label * {
	font-family: var(--bmt-carte-font) !important;
}

/* =========================================================
   Boutons Google Maps et Waze sous la carte
   ========================================================= */

/* Même famille que les boutons du panneau Horaires & accès : pilule
   blanche, capitales espacées, icône au trait. Couleurs réglables en
   variables (et dans l'onglet Style du widget). */
.bmt-carte-bloc {
	display: block;
	width: 100%;
}

.bmt-carte-nav,
.bmt-carte-nav *,
.bmt-carte-nav *::before,
.bmt-carte-nav *::after {
	box-sizing: border-box;
}

.bmt-carte-nav {
	--bmt-nav-bg: #FFFFFF;
	--bmt-nav-color: #1B1D1C;
	--bmt-nav-border: rgba(27, 29, 28, 0.18);
	--bmt-nav-hover-bg: #4F7539;
	--bmt-nav-hover-color: #FFFFFF;
	--bmt-nav-hover-border: #4F7539;
	--bmt-nav-height: 52px;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 18px;
	font-family: var(--bmt-carte-font, 'Open Sans', sans-serif) !important;
}

.bmt-carte-nav__btn,
.bmt-carte-nav__btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 0;
	min-height: var(--bmt-nav-height);
	margin: 0;
	padding: 10px 18px;
	border: 1.5px solid var(--bmt-nav-border);
	border-radius: 999px;
	background: var(--bmt-nav-bg);
	box-shadow: 0 3px 10px rgba(10, 46, 28, 0.055);
	color: var(--bmt-nav-color) !important;
	font-family: inherit !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.16em !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase !important;
	white-space: nowrap;
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.bmt-carte-nav__btn:hover,
.bmt-carte-nav__btn:focus-visible {
	border-color: var(--bmt-nav-hover-border);
	background: var(--bmt-nav-hover-bg);
	color: var(--bmt-nav-hover-color) !important;
	transform: translateY(-1px);
}

.bmt-carte-nav__btn:focus-visible {
	outline: 2px solid var(--bmt-nav-hover-bg);
	outline-offset: 2px;
}

.bmt-carte-nav__ico {
	display: inline-flex;
	flex: none;
}

.bmt-carte-nav__ico svg {
	display: block;
	width: 18px;
	height: 18px;
}

.bmt-carte-nav__label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Footer pleine largeur : les boutons ne collent pas aux bords. */
.bmt-carte-bloc--footer .bmt-carte-nav {
	padding: 0 16px;
}

@media (max-width: 767px) {
	.bmt-carte-nav {
		--bmt-nav-height: 46px;
		gap: 10px;
		margin-top: 12px;
	}

	.bmt-carte-nav__btn {
		gap: 8px;
		padding: 8px 12px;
		font-size: 12px;
		letter-spacing: 0.1em !important;
	}

	.bmt-carte-nav__ico svg {
		width: 16px;
		height: 16px;
	}
}

/* Très petit écran : un bouton par ligne plutôt que des libellés tronqués. */
@media (max-width: 359px) {
	.bmt-carte-nav {
		grid-template-columns: 1fr;
	}
}