:root {
	--msg-clr: hsl(26.59deg 100% 54%);
}

body {
	margin: 0;
}

#msg {
	position: fixed;
    z-index: 1200;
    top: 1rem;
    left: 50%;
    translate: -50%;
    width: 30rem;
    color: var(--msg-clr);
    background: hsl(from var(--msg-clr) h s calc(l + 40));
    border: 2px solid var(--msg-clr);
    padding: 1em;
    font-weight: bold;
    border-radius: 10px;
    text-align: center;
	box-shadow: 0 0 20px;
}

#main fieldset {
	border: none;
	padding-inline: 0;
}

legend::first-letter {
	text-transform: capitalize;
}
fieldset legend {
	font-weight: bold;
}

.info-bubble {
	position: absolute;
	z-index: 1000;
	transform: translateX(-50%);
	text-align: center;
	font-weight: bold;
	width: 18em;
	padding: 1em 0;
	margin: 0 auto;
	border-radius: 10px;
	color: white;
	background: linear-gradient(180deg, hsl(from var(--msg-clr) h s calc(l + .20)), var(--msg-clr));
	opacity: 0;
	transition: opacity 1s ease-in-out;
	cursor: pointer;
	pointer-events: none;
	text-wrap: balance;
}
/* target Chrome versions >= 125, only supporting relative hsl using percentage instead of decimal values */
@supports (top: anchor(bottom)) {
	.info-bubble {
		background: linear-gradient(180deg, hsl(from var(--msg-clr) h s calc(l + 20)), var(--msg-clr));
	}
}
.info-bubble::before {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 1em dashed transparent;
	border-top-color: var(--msg-clr);
	bottom: -2em;
	left: calc(50% - .5em);
}
.info-bubble::after {
	content: '\274c';	/* 'x' */
	font-size: .8em;
	position: absolute;
	top: .3em;
	right: .2em;
}
.info-bubble.show {
	opacity: 1;
	pointer-events: unset;
}
.info-bubble.temp {
	position: fixed;
	bottom: 1em;
	left: 25em;
}
.info-bubble.new-aire {
	position: fixed;
	bottom: 1em;
	left: 50%;
}
.info-bubble.search {
	left: 8rem;
}
.info-bubble.search::before {
	left: 1em;
}
.info-bubble a {
	display: block;
}
.info-bubble a:visited,
.info-bubble a:link {
	color: white;
	text-decoration: none;
}

#reset,
.pic::before,
.font-icon::before {
	font-family: 'Material Icons';
}

main .img-icon::before,
main .font-icon::before {
	display: inline-block;
	width: 1em;
	margin-right: 1em;
	font-size: 1.6em;
	vertical-align: middle;
}

/* .check::before { content: '\e834'; } */

.check {
	pointer-events: none;
	accent-color: var(--clr-text);
}

.tel-fixe::before { content: '\e0b0'; }
.tel-mobile::before { content: '\e324'; }
.email::before { content: '\e0e6'; }
.site-web::before { content: '\e894'; }
.autre::before { content: '\f05a'; }

.AccessibleHandicapes::before { content: '\e914'; }
.BoulangerieOuDepot::before { content: '\ea53'; }
.Restaurant::before { content: '\e56c'; }
.PiscineOuBaignade::before { content: '\eb48'; }
.Alimentation::before { content: '\ea12'; }
.LaveLinge::before { content: '\e54a'; }
.SecheLinge::before { content: '\ea58'; }
.RandonneePromenadeVisite::before { content: '\e50a'; }
.ParcEnfants::before { content: '\e407'; }
.VeloVTT::before { content: '\e52f'; }
.Peche::before { content: '\ead7'; }
.SupermarcheOuSuperette::before { content: '\ea12'; }
.Commerces::before { content: '\e8d1'; }
.Gaz::before { content: '\ec19'; }
.Campingcar8M::before { content: '\eb3c'; }
.InformationsTouristiques::before { content: '\e88e'; }
.TransportEnCommun::before { content: '\e570'; }

.electricite::before { content: '\ea0b'; }
.wifi::before { content: '\e63e'; }
.eau::before { content: '\e798'; }
.poubelles::before { content: '\e872'; }
.wc::before { content: '\e63d'; }

.vidange-eg::before { background-image: url('logos/icones/vidange_eg.png'); }
.vidange-en::before { background-image: url('logos/icones/vidange_en.png'); }

.img-icon::before {
	content: '';
	height: 1em;
	background-size: 1em;
	filter: drop-shadow(1000px 0 0 currentColor);
	transform: translateX(-1000px);
}
.disabled {
	color: hsl(0, 0%, 66%);
}

@media screen and (max-width: calc(1280px - 1px - 8px)) {	/* 8px for Edge margins */

	#msg {
		width: 80%;
	}

	.info-bubble.temp {
		left: 10em;
	}

	#reset {
		font-family: unset;
	}
}

