@charset "UTF-8";

/*************************/
/*************************/
/********** WIP **********/
/*************************/
/*************************/


.map-container,
.google-map-container {
	background: var(--blue-color);
}
.map-container > *,
.google-map-container > * {
	mix-blend-mode: screen;
	mix-blend-mode: luminosity;
}

/*************************/
/*************************/
/********** MAP **********/
/*************************/
/*************************/

/*******************************/
/********** CONTAINER **********/
/*******************************/

.map-container {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 2/1;
}
.map-container .map {
	position: absolute;
	z-index: 10;
	inset: 0;
	background: var(--light-color);
}

/*****************************/
/********** MARKERS **********/
/*****************************/
/*
.custom-marker {
	height: 3em;
	width: 3em;
	margin-left: -1.5em;
  margin-top: --1.5em;
	cursor: pointer;
}
	https://slpj.fr/salon/professionnel%c2%b7le%c2%b7s/
	*/
.map-marker {
	/*height: 3em;
	width: 3em;
	margin-left: -1em;
  margin-top: --1.5em;*/
	transition: all 0.3s ease;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
	cursor: pointer;
}
.map-marker:hover,
.map-marker.active {
	transform: scale(1.2);
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.map-marker path {
	transition: fill 0.3s ease;
}
.map-marker.active path {
	fill: var(--yellow-color);
}
/*
.custom-marker {
	background: none;
	border: none;
}
.custom-marker .map-marker {
	transition: all 0.3s ease;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
	cursor: pointer;
}
.custom-marker .map-marker:hover,
.custom-marker .map-marker.active {
	transform: scale(1.2);
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.custom-marker .map-marker path {
	transition: fill 0.3s ease;
}
.custom-marker .map-marker.active path {
	fill: #0066cc;
}
*/

/*****************************/
/********** TOOLTIP **********/
/*****************************/

.map-tooltip {
	position: fixed;
	z-index: 10000;
	color: var(--bright-color);
	background: var(--dark-color);
	font-size:.875em;
	padding: 1em;
	/*max-width: 10em;*/
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}
.map-tooltip.active {
	opacity: 1;
}

/******************************/
/********** CONTROLS **********/
/******************************/

.map-controls {
	position: absolute;
	z-index: 1000;
	top: 1em;
	right: 1em;
	display: flex;
	flex-direction: column;
	gap: 1em;
}
.map-controls a {
	position: relative;
	display: inline-flex;
	align-items: center;
	pointer-events: auto;
	padding: 1em;
	background: var(--bright-color);
	border-radius: 50%;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
}
.map-controls a:hover {
	background: var(--yellow-color);
}

/*****************************/
/*****************************/
/********** LEAFLET **********/
/*****************************/
/*****************************/
/*
.leaflet-tile-container img {
    width: 256px !important;
    height: 256px !important;
}
*/
.leaflet-tile-error {
    opacity: 0 !important;
    display: none !important;
}
.leaflet-tile {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
	margin: 0;
}
.leaflet-tile-container {
    animation: none !important;
}

/********************************/
/********************************/
/********** GOOGLE MAP **********/
/********************************/
/********************************/

.google-map-container iframe {
	position:absolute;
	z-index:10;
	top:0;
	left:0;
	height:100%;
	width:100%;
	border:0;
	-webkit-filter:grayscale(1);
			filter:grayscale(1);
}