@charset "UTF-8";


/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


:root {
    --leaflet-popup-border: 0;	

	--marker-filter: drop-shadow(0 0 .25em rgba(var(--dark-rgb), .5));
	--marker-bg-color: currentColor;
	--marker-size: 2rem;

	--map-height: 66svh;
	--map-bg-color: var(--light-color);
}

body {
	--marker-bg-color: var(--theme-color);
} 



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */

.map-container,
.map {
	transition:
	opacity var(--duration-fast) var(--ease);
}
.map-marker,
.map-marker-wrap {
	transition:
	/*transform var(--duration-fast) var(--elastic),*/
	opacity var(--duration-fast) var(--ease),
	filter var(--duration-fast) var(--easeInQuint);
}
.map-marker-wrap::after {
	transition:
	opacity var(--duration-fast) var(--ease),
	transform var(--duration-fast) var(--elastic),
	filter var(--duration-fast) var(--easeInQuint);
}
.map-controls {
	transition:
	opacity var(--duration-fast) var(--ease),
	transform var(--duration-fast) var(--elastic),
}
/*
.map-controls button {
	transition:
	color var(--duration-fast) var(--ease),
	background var(--duration-fast) var(--ease);
}
*/

.map-tooltip {
	transition: none;
	/*opacity var(--duration-fast) var(--easeInQuint);*/
}



/* ==================================================================================================== */
/* ============================================= MAPLIBRE ============================================= */
/* ==================================================================================================== */


/* ============================== MAP CONTAINER ============================== */

.map-container {
	position: relative;
	display: block;
	width: 100%;
	background: var(--light-color);
}
body.is-loading .map-container,
.grid-container.is-loading .map-container {
	opacity: 0;
}


/* ============================== MAP WRAPPER ============================== */

.map-wrapper {
	position: relative;
}
.map-wrapper:not(.loaded)::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-flex;
	width: 2em;
	margin: -1em 0 0 -1em;
	aspect-ratio: 1/1;
	border-radius: 50%;
	border-style: solid;
	border-width: var(--logo-line-height);
	border-bottom:solid var(--logo-line-height) transparent;
	animation: spinner var(--duration-normal) infinite linear;
}


/* ============================== MAP ============================== */

.map {
	position: relative;
	z-index: 10;
	height: var(--map-height);
	opacity: 0;
}
.map-wrapper.loaded .map {
	opacity: 1;
}


/* ============================== MARKERS ============================== */

/* =============== SVG =============== */

.map-marker {
	filter: var(--marker-filter);
	cursor: pointer;
	pointer-events: none;
}
.map-marker.active path { fill: var(--marker-bg-color); }


/* =============== BUTTON =============== */

.map-marker-wrap {
	display: block;
	height: auto;
    width: var(--marker-size);
	aspect-ratio: 1/1;
    cursor: pointer;
	filter: var(--marker-filter);
}
.map-marker-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
    background: var(--marker-bg-color);
	pointer-events: none;
}
.map-marker-wrap:hover::after {
	transform: scale(1.5);
}

.map-marker-wrap.unavailable::after {
    filter: grayscale(.5);
}


/*
.leaflet-marker-icon { cursor: pointer; }
.leaflet-marker-icon:hover .map-marker { transform: scale(1.2); }
.map-marker path { transition: fill 0.3s ease; }
.map-marker.active { transform: scale(1.2); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }
.map-marker.active path { fill: var(--yellow-color); }
.map-marker-wrap.unavailable .map-marker path { fill: var(--mid-color); }
*/


/* ============================== CONTROLS ============================== */

.map-controls {
	position: absolute;
	z-index: 1000;
	top: 1em;
	right: 1em;
	display: flex;
	flex-direction: column;
	gap: 1em;
	transform: translate(0, 0);
	opacity: 1;
}
.map-controls button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	aspect-ratio: 1/1;
	width: 3em;
	background: var(--bright-color);
	border-radius: 50%;
	border: none;
	cursor: pointer;
}
.map-controls button:hover {
	color: var(--bright-color);
	background: var(--dark-color);
}


.map-wrapper:not(.active) .map-controls {
	transform: translate(200%, 0);
	opacity: 0;
}



/* ============================== TOOLTIP ============================== */

.map-tooltip {
	position: fixed;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: .25em;
	color: var(--bright-color);
	background: var(--dark-color);
	font-size: .875em;
	line-height: 1;
	padding: 1em;
	pointer-events: none;
	opacity: 0;
}
.map-tooltip.active { opacity: 1; }

.map-tooltip-place {
	margin-bottom: .5em;
}


/* =============== PANELS =============== */

/* Source de contenu pour le popup Leaflet — jamais affichés directement. */
.map-panel { display: none; }



/* ==================================================================================================== */
/* ============================================= MAPLIBRE ============================================= */
/* ==================================================================================================== */


/* ============================== POPUP ============================== */


.maplibregl-popup {
	max-width: 30rem !important;
}
.maplibregl-popup .maplibregl-popup-close-button {
	font-size: 1em;
	line-height: 1;
	padding: 1em;
}
.maplibregl-popup .maplibregl-popup-content {
	padding: 2em;
	display: flex;
	flex-direction: column;
	gap: 1em;
}
.maplibregl-popup .map-panel-header {
	font-size: 2em;
}
.maplibregl-popup .map-panel-events {
	display: flex;
	flex-direction: column;
	gap: 1em;
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */


/* ============================== EVENT ============================== */

.map-event-item {
    display: flex;
    gap: 1em;
	align-items: center;
}
.map-event-item * {
    margin: 0;
}
.map-event-thumbnail {
    height: 8em;
    aspect-ratio: 1/1;
	background: var(--light-color);
}
.map-event-infos > * {
	width: 100%;
	text-transform: uppercase;
}
.map-event-infos .map-event-title,
.map-event-infos .map-event-dates {
	font-weight: 600;
}

.map-popup-goto {
	position: relative;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	font-size: 1em;
	line-height: 1;
	font-weight: 600;
	text-transform: uppercase;
	border: 0;
	background: none;
	align-self: flex-start;
}
.map-popup-goto:hover {
	color: var(--theme-color);
	background: none;
}
.map-popup-goto::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	height: var(--logo-line-height);
	width: 100%;
	transform: translate3d(-50%,100%,0);
	box-shadow: inset 0 0 0 var(--logo-line-height);
}
.map-popup-goto:hover::after {
	width:var(--logo-line-width);
}
.map-popup-goto  > * {
	margin: 0;
}



/* =================================================================================================== */
/* ============================================= LEAFLET ============================================= */
/* =================================================================================================== */