:root {
	--help-clr: hsla(240,100%,65%,.5);
	--border-clr: hsl(0, 0%, 73%);
	--popup-clr: hsl(from var(--clr) h calc(s + 1) calc(l - .20));
	--ftr-mobile-width: 21em;
}
/* target Chrome versions >= 125, only supporting relative hsl using percentage instead of decimal values */
@supports (top: anchor(bottom)) {
	:root {
		--popup-clr: hsl(from var(--clr) h calc(s + 1) calc(l - 20));
	}
}

body {
	display: flex;
	flex-direction: column;
	height: 100dvh;
}

#mapContainer {
	flex: 1;
	display: flex;
	flex-direction: column;
}

#mapDiv {
	flex: 1;
}

#filter {
	display: none;
}

#filter > input {
	opacity: 0; /* hide this */
}

#reset {
	padding-top: .6em;
	height: 100%;
	text-align: center;
	opacity: .9;
	transition: opacity .2s;
}
#reset:hover {
	opacity: 1;
}
#reset::before {
	content: '\e419';
	font-size: 4rem;
	font-weight: bold;
	color: var(--clr);
	line-height: 1;
}

#reset,
#filters fieldset {
	margin: 0 .1em;
}

#filters *,
#filterTypeAire * {
	cursor: pointer;
}

#filters {
	display: flex;
	font-size: min(1em, 1.1vw);
	height: 4rem;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;	/* for on top */
	z-index: 1010;
}
#filters * {
	box-sizing: border-box;
}
#filterRegionsCB {
	margin-left: 1em;
	vertical-align: bottom;
}
[name=filterLocation]:not(:checked) ~ * {
	filter: opacity(.3);
}
#filterDistanceValue {
	vertical-align: middle;
	width: 5em;
}
#filterDistanceValueShown {
	border: none;
	width: 2.5em;
}
#filters fieldset {
	border-radius: 5px;
}
#filters select {
	background-color: white;
	border-width: 1px;	/* for firefox when hovering */
}
#filters select,
#filters input,
#filters fieldset {
	color: var(--clr2);
}

#filters label {
	vertical-align: text-top;
	font-size: .9em;
}

#filters fieldset {
	display: inline-block;
	border: 1px solid var(--border-clr);
	padding: 0 .5em .5em;
	height: 4.5em;
	transition: all .2s;
}

#filterGroup {
	display: flex;
}
#filterGroup > fieldset {
	display: inline-block;
	flex-grow: 1;
	padding: 0 .5ch;
}

.cb-list {
	height: 2.5em;
	overflow: hidden;
}
#filters fieldset:hover select,
#filters fieldset:hover input,
#filters fieldset:hover {
	color: var(--clr);
	border-color: var(--clr);
}
#filters .cb-list:hover {
	backdrop-filter: blur(5px);
	background-color: hsla(0, 0%, 100%, .6);
	height: auto;
}
.cb-list label:hover {
	filter: brightness(.7);
	color: var(--clr);
}

#filterTypeAire {
	position: relative;
	top: 2.5em;
	left: -.5em;
	z-index: 1000;
}

#filterTypeAire {
	display: flex;
	justify-content: space-around;
	width: min(32em, 100%);
	margin: 0 auto;
}
#filterTypeAire div {
	position: relative;
}
#filterTypeAire .type-aire::before {
	position: absolute;
	/* icon size */
	height: 21px;
}
#filterTypeAire .type-aire:has(input:checked)::before {
	outline: 5px solid var(--clr);
}
#filterTypeAire div:hover {
	filter: brightness(1.2);
	outline: 1px solid var(--clr);
}
#filterTypeAire input {
	visibility: hidden;
}
#filterElec:not(:checked) ~ .duree {
	display: none;
}

#filterHidden {
	outline: 5px solid grey;
	height: fit-content;
	margin-top: 2.5em;
}

#mapDiv {
	min-height: 450px;
	box-shadow: 1px 1px 12px var(--clr2, grey);
	cursor: crosshair;
}

.div-icon {
	width: 22px !important;
	height: 22px !important;
	background: no-repeat center;
}
.non-valide {
	border: 5px solid orange !important;
}
.non-visible {
	border: 5px solid grey;
}
.new-aire {
	outline: 5px solid hsl(216 100% 70%);
}
.closed, .off {
	filter: grayscale(1);
}

/* bottom right artifact */
#mapDiv .leaflet-gac-container {
	border: none;
}
/* 'leaflet' link widget */
#mapDiv .leaflet-control-attribution {
	visibility: hidden;
}

/* google search box */
#mapDiv .leaflet-gac-control {
	display: inline-block;
	opacity: .8;
	top: 5px;
	border: 1px solid var(--clr);
	width: 20em;
}
#mapDiv .leaflet-gac-control::placeholder {
	color: var(--clr);
}

/* general tooltip */
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltiptext {
  visibility: hidden;
  width: 20em;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  text-shadow: none;
  text-transform: uppercase;
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* POPUP */
.leaflet-popup .leaflet-popup-content-wrapper {
	border: 2px solid var(--popup-clr);
	background-color: transparent;
	font-weight: bold;
}
.leaflet-popup {
	backdrop-filter: blur(5px);
}
.leaflet-popup .leaflet-popup-tip-container {	/* lower popup tip */
	opacity: .6;
}

.type-aire.is-fav {
	outline: 5px solid hsl(54.18deg 100% 48.03%) !important;
}
#mapDiv .fav {
	display: inline-block;
	color: var(--clr2);
	line-height: .5;
	font-size: 2em;
	position: relative;
	z-index: 1;
	left: -.7em;
	cursor: pointer;
}
#mapDiv .fav.is-fav {
	color: hsl(54.18deg 100% 48.03%);
	text-shadow: 0px 0px 2px black;
}
.fav::before {
	content: '\e838';
}

#mapDiv .leaflet-popup-close-button {
	color: var(--clr2);
}
#mapDiv .id {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
}
#mapDiv .leaflet-popup-content p {
	margin: 0;
}
#mapDiv .leaflet-popup-content a {
	font-size: 1.1em;
	line-height: 1;
	color: var(--popup-clr);
	text-decoration: none;
}
#mapDiv p {
	color: #333;
}
#mapDiv .leaflet-popup-content .popup-title:link,
#mapDiv .leaflet-popup-content .popup-title:visited {
	background: radial-gradient(circle, hsl(from var(--popup-clr) h s calc(l + .15)) 32%, var(--popup-clr));
	border-color: white;
	box-shadow: 0 0 10px 2px var(--popup-clr);
	color: white;
}
/* target Chrome versions >= 125, only supporting relative hsl using percentage instead of decimal values */
@supports (top: anchor(bottom)) {
	#mapDiv .leaflet-popup-content .popup-title:visited {
		background: radial-gradient(circle, hsl(from var(--popup-clr) h s calc(l + 15)) 32%, var(--popup-clr));
	}
}
#mapDiv .leaflet-popup-content .popup-title,
#mapDiv .leaflet-popup-content .popup-title:hover {
	display: block;
	width: 100%;
	margin: .5em 0;
	padding: 1em 0;
	color: var(--popup-clr);
	text-shadow: none;
	text-align: center;
	border: 1px solid var(--popup-clr);
	border-radius: 5px;
	background: transparent;
}
.leaflet-popup-content .commune {
	text-align: right;
}
.service-icon {
	margin: .5em 0;
	filter: grayscale(1) contrast(2);
	opacity: .5;
	width: 3em;
	height: 100%;
}

#mapDiv .blink {
  animation: blinker 1s linear infinite;
  text-transform: uppercase;
}
@keyframes blinker {
  50% {
    color: hsl(from var(--popup-clr) 0 s l);
  }
}

/* PIN */
#mapDiv .popup * {
	text-align: center;
}

#routes {
	backdrop-filter: blur(2px);
	position: absolute;
	z-index: 1000;
	top: 1em;
	right: 6em;
	width: 20em;
	font-weight: bold;
}
#routes a:link {
	text-decoration: none;
}

#zoom, #coord {
	position: absolute;
	display: inline-block;
	z-index: 1000;
	background-color: hsla(0, 0%, 100%, .66);
	font-weight: bold;
	font-size: 1.2em;
	bottom: 0;
	padding: 0 .2em;
}
#zoom {
	left: 10px;
}
#coord {
	left: 100px;
}
.caravan::before,
#gps::before,
#addRoute::before,
#saveRoute::before,
#clearWP::before,
#highway::before,
#routing::before {
	color: var(--clr);
	font-size: 1.8rem;
}
.caravan::before {
	content: '\eb3c';
}
#gps::before {
	content: '\e55c';
}
.trash::before {
	content: '\e872';
}
#addRoute::before {
	content: '\e838';
}
#saveRoute::before {
	content: '\e168';
}
#clearWP::before {
	content: '\e5c9';
}
#highway::before {
	content: '\ef3b';
}
#routing::before {
	content: '\eacd';
}
#gps, #addRoute, #saveRoute, #clearWP, #highway, #routing {
	position: absolute;
	display: inline-block;
	z-index: 1000;
	cursor: pointer;
	right: 1em;
}
#routingHelp {
	background: var(--help-clr);
	color: white;
	left: 4em;
	position: absolute;
	z-index: 1000;
	padding: .1em .5em;
	border-radius: 3px;
}
#gps {
	bottom: 0;
}
#addRoute {
	bottom: 12em;
}
#saveRoute {
	bottom: 15em;
}
#clearWP {
	bottom: 9em;
}
#highway {
	bottom: 6em;
}
#routing {
	bottom: 3em;
}
#gps .material-icons,
#routing .material-icons {
	font-size: 3em;
}

/* routing instructions */
#mapDiv .leaflet-routing-container {
	position: absolute;
	right: 5em;
	z-index: 10;
}
#mapDiv .leaflet-routing-collapse-btn {
	right: .5em;
	cursor: pointer;
}

.leaflet-marker-draggable {
	filter: hue-rotate(100deg);
}

@media screen and (max-width: calc(1280px - 1px - 8px)) {	/* 8px for Edge margins */
	:root {
		--ftr-margin: 1em;
	}

	#filter::before {
		content: '\ef4f';
		font-size: 3em;
		padding: 0;
		vertical-align: middle;
	}

	#filter {
		display: inline-block;
		position: relative;
		margin-left: .5em;
		padding: 0;
	}

	#filter > input {
		display: block;
		width: 4em;
		height: 3em;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 2; /* and place it over the hamburger */
	}

	header:has(#filter > input:checked) ~ #mapContainer #filters {
		width: var(--ftr-mobile-width);
		opacity: 1;
	}

	#filters label {
		display: inline-block;
	}

	#reset {
		margin: 0;
	}
	#reset::before {
		content: 'Remise à zéro';
		font-family: unset;
		font-size: 1.1em;
	}

	#filters {
		font-size: unset;
		position: absolute;
		top: 0;
		overflow: hidden;
		background: hsl(from var(--clr) h s calc(l + 35));
		box-shadow: 0px 0px 10px var(--border-clr);
		flex-direction: column;
		width: 0;
		height: auto;
		transition-duration: .2s;
		transition-timing-function: ease-out;
		transition-property: width, opacity;
	}

	#filters > * {
		border-radius: 0;
	}

	#filters fieldset {
		border: 0;
		margin: 0;
		padding: 0;
	}

	#filterGroup,
	#filters > fieldset {
		border-bottom: 1px solid var(--border-clr);
		/* pre-calc filters width panel to avoid glitches when opening */
		width: calc(var(--ftr-mobile-width) - 2 * var(--ftr-margin));
		height: auto;
		padding: 0 0 .5em;
		margin: .5em var(--ftr-margin) 0;
	}

	#filters select,
	#filters input,
	#filters fieldset {
		color: var(--clr-text);
	}

	#filterTypeAire {
		width: min(75%, 25em);
	}

	#filterHidden {
		margin-top: 0;
	}

	#mapDiv .leaflet-popup {
		font-size: .8em;
	}
	#mapDiv .leaflet-popup-content {
		margin: 1em 1.5em;
	}
	#mapDiv .leaflet-popup-content div a {
		line-height: 1.8em;
	}
	/* routing instructions */
	#mapDiv .leaflet-routing-container {
		position: relative;
		right: 0;
	}

	#mapDiv .gps {
		font-size: 1.2em;
	}

	#routes {
		top: 5em;
	}

}

