@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
	font-size: 15px;
	--clr: hsl(213, 82%, 63%);
	--clr-text: hsl(from var(--clr) h s calc(l - 30));
	--clr2: hsl(0, 0%, 40%);
}

html {
	margin: 0;
	color: var(--clr2);
	min-height: 100%;
	background: url(fonds/ccinfos.png) hsl(from var(--clr) h s calc(l + 35) / .93);
	background-blend-mode: overlay;
	background-size: 377px;
	background-position: -40px 0;
}

/* workaround fix for blending on iOS */
@supports (-webkit-touch-callout: none) {
	html {
		background-repeat: no-repeat;
	}
}

body.wait::before {
	content: 'Chargement en cours...';
	text-align: center;
	display: block;
	inset: 0;
	position: absolute;
	z-index: 1100;
	padding-block: 48vh;
	font-weight: bold;
	font-size: 1.5em;
	backdrop-filter: blur(13px);
}

.material-icons {
	display: none;
}

@-moz-document url-prefix() {	/* firefox workaround */
	input[type=checkbox],
	input[type=radio] {
		transform: scale(.8);
		margin: 0;
	}
}

html, input, select, button {
	font-family: Inter;
}

#info-poi {
	top: 26rem;
	left: 50vw;
}
#info-search::before {
	display: none;
}
#info-search {
	left: 12rem;
}
#info-aire {
	left: 50vw;
}
#info-gps {
	left: 50vw;
}
#info-closed {
	left: 50vw;
	top: 50vh;
}
#info-position::before {
	display: none;
}
#info-position {
	bottom: 4.5rem;
	right: -6rem;
}
#info-airetype {
	left: 50vw;
}
#info-filter {
	left: 20.5rem;
	width: 14em;
}
#info-menu::before {
	display: none;
}
#info-menu {
	left: 16rem;
}
#info-subscribe {
	right: -9rem;
}

#buy-app {
	font-weight: bold;
	width: 80%;
	margin: 0 auto;
	padding: 10em 0;
}

#subscribe, #timeLeft {
	display: none;
	position: absolute;
	right: 0;
}

#subscribe::before {
	content: '\eb88';
}

.dark, .dark::before {
    background: black !important;
    color: white !important;
}

#menu {
	position: sticky;
	z-index: 1050;
}

aside {
	display: inline-flex;
	flex-direction: column;
	vertical-align: top;
}

h1 {
	display: inline-block;
	text-transform: uppercase;
	text-align: center;
	margin: .5em 6%;
	padding-bottom: .5em;
	font-weight: normal;
	font-size: 1.6em;
}

#error {
	display: none;

    color: red;
    font-weight: bold;
    font-size: 1.5rem;
    border: 1px solid currentColor;
    width: fit-content;
    margin-inline: auto;
    padding: .5em;
}

form {
	margin: 0 3em;
	display: inline-block;
}
#id {
	width: 3.5em;
	height: 2.1em;
	color: var(--clr2);
	font-size: 1.2em;
	border: 1px solid var(--border-clr);
	vertical-align: bottom;
}
#id:hover {
	border-color: var(--clr);
}
.btn, .btn2 {
	background: none;
	display: inline-block;
	cursor: pointer;
	font-size: 1rem;
	font-weight: bold;
	color: var(--clr);
	border: 1px solid var(--clr);
	padding: .7em 1.5em;
	border-radius: 2px;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.btn:hover, .btn2:hover {
	background-color: var(--clr);
	color: white;
}

.btn2 {
	border: none;
	font-weight: normal;
}

.btn2::before {
	vertical-align: text-top;
	padding-right: .5em;
	font-size: 1.2em;
}

#hamburger {
	display: none;
}
#hamburger-menu {
	display: none;
}

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

#help::before {
	content: '\e887';
}

#connect::before {
	content: '\e0da';
}

#add_aire::before {
	content: '\e145';
}

#uninstall::before {
	content: '\e872';
}

#install::before {
	content: '\f090';
}

#flush_cache::before {
	content: '\e863';
}

#install_photos::before {
	content: '\e413';
}

#install_tiles::before {
	content: '\e55b';
}

.fetching {
	pointer-events: none;
	color: red;
	border: 1px solid currentColor;
	width: 19em;
}

#gps * {
	color: var(--clr);
}

main {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	width: min(72rem, 60%);
	margin: 0 auto;
}

main section {
	transition: box-shadow .2s;
	padding-bottom: 1em;
	width: min(35rem, 50% - 1rem);
	min-height: 13rem;
}
.sub-section {
	padding-left: 3rem;
	border-left: 1px solid var(--border-clr);
}

h3, #annee {
	display: inline-block;
	margin-left: .5em;
	transition: transform .2s cubic-bezier(0.48, 2.07, 0.44, 0.93);
}
h2, h3 {
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: normal;
}
h3::before {
	font-family: 'Material Icons';
	content: '\e5c8';
	vertical-align: text-top;
}
section:hover {
	box-shadow: 0 0 1em var(--border-clr);
}
section:hover > div {
	border-color: white;
}
section:hover h3,
section:hover #annee {
	transform: translateX(1em);
}

main label {
	display: inline-block;
	width: 17ch;
}

input[type=date] {
	width: 9.1em;
}

#coords {
	display: inline-flex;
	flex-direction: column;
}

.email,
.site-web {
	word-break: break-all;
}

main a,
main span,
main input {
	border: none;
	background: transparent;
	color: var(--clr-text);
	font-size: inherit;
}

#contact .font-icon::before,
#services .img-icon::before,
#services .font-icon::before {
	margin-right: .2em;
}

#autres-infos p,
.sub-section > * {
	margin: .5em 0 0;
	display: flex;
	gap: .3em;

	label {
		flex-shrink: 0;
	}
}
#autres-infos p {
	margin-left: 1em;
}

.wrap-full {
	display: block;
}

/* NOUVEAU LOGO */
.new {
	display: inline-block;
	color: red;
	width: 5em;
	font-weight: bold;
	transform: rotate(20deg) skewX(20deg) translateX(1em);
}

#valTypeAire {
	background-size: 1.2em;
	text-transform: uppercase;
}

.elec {
	margin-right: .5em;
}

.disabled::after {
	content: ' (non disponible)';
}

#tarifs .sub-section p {
	display: none;
}
#tarifs label {
	width: calc(100% - 17ch);
	text-wrap: pretty;
}

#autres-infos span {
	display: none;
}

h2 {
	width: 80%;
	color: var(--clr2);
	margin: 1em auto;
}

#lightgallery {
	background: hsl(0, 0%, 0%, .87);
	margin-top: 3em;
	padding: 3rem 0 6rem;
}
#lightgallery > div {
	text-align: center;
	width: 50em;
	margin: 0 auto;
}
#lightgallery img {
	width: 14em;
	height: 100%;
	padding: .3rem;
	transition: filter .3s;
}
#lightgallery div a {
	display: inline-block;
	position: relative;
}
#lightgallery div a::before {
	content: '';
	color: white;
	opacity: 0;
	transition: opacity .3s;
}
#lightgallery div a:hover img {
	filter: brightness(.6) blur(1px);
	/* object-fit: none; */
}
#lightgallery div a:hover::before {
	position: absolute;
	z-index: 1;
	left: calc(50% - .5em);
	top: calc(50% - .5em);
	content: '\e8b6';
	opacity: .8;
	font-size: 2em;
}
div.lg-sub-html {
	color: var(--clr2);
}

#no_photo {
	display: none;
	text-align: center;
}

#comments > a,
#lightgallery > a {
	text-decoration: none;
}

#comments .btn,
#lightgallery .btn {
	display: block;
	width: 8em;
	margin: 2em auto 0;
	text-align: center;
}

#comments {
	padding: 3rem 0;
}

.comment {
	width: 50rem;
	margin: 2em auto;
	border-radius: 10px;
	transition: box-shadow .2s;
}

.comment:hover {
	box-shadow: 0 0 1em var(--border-clr);
}

#comments p {
	padding: 1em;
	margin: 0;
	background-color: white;
	border-bottom: 1px dashed var(--clr);
	border-radius: 10px;
}

.comment div {
	padding: .5em 1em;
	font-size: .8em;
	color: var(--clr2);
	text-align: right;
}

footer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 1em 0 0;
	gap: 0;
}

#contactus {
	text-align: center;
}

footer a {
	text-decoration: none;
	color: var(--clr);
}

#login {
	order: -1;
}

#version {
	font-weight: bold;
	font-size: .7em;
	line-height: 2;
}

#login::before {
	content: '\e0da';
}

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

	#userLogin {
		backdrop-filter: blur(20px);
		background: #fff3;
		color: white;
	}
	#userLogin::backdrop {
		backdrop-filter: brightness(.5);
	}
	#userLogin label {
		display: inline-block;
		width: 7em;
	}
	#userLogin button {
		width: 50%;
		background: white;
		border-width: 0;
		padding: .2em;
	}
	#userLogin .ok {
		background: var(--clr);
		color: white;
	}

	.pw-eye {
		visibility: hidden;
	}
	.pw-eye:checked {
		text-decoration: line-through;
	}
	.pw-eye::before {
		content: '\e8f4';
		visibility: visible;
		color: white;
		font-size: 1.3em;
		vertical-align: middle;
	}

	#hamburger {
		display: inline-block;
		position: relative;
		top: .7em;
		left: 1em;
	}

	#hamburger::after {
		content: 'menu';
		position: absolute;
		top: 0;
		left: 3em;
	}

	#hamburger > input {
		display: block;
		width: 10em;
		height: 2em;
		position: absolute;
		top: -7px;
		left: -5px;
		cursor: pointer;
		z-index: 2; /* and place it over the hamburger */
	}
	/* Transform all the slices of hamburger into a crossmark */
	#hamburger > input:checked ~ span {
		opacity: 1;
		transform: rotate(45deg) translate(-2px, -1px);
	}
	/* hide the middle one */
	#hamburger > input:checked ~ span:nth-child(3) {
		opacity: 0;
		transform: rotate(0deg) scale(0.2, 0.2);
	}
	/* the last one should go the other direction */
	#hamburger > input:checked ~ span:nth-child(4) {
		transform: rotate(-45deg) translate(0, -1px);
	}
	#hamburger span {
		display: block;
		width: 33px;
		height: 4px;
		margin-bottom: 5px;
		position: relative;
		background: var(--clr2);
		border-radius: 3px;
		z-index: 1;
		transform-origin: 3px 2px;
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
		background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
		opacity 0.55s ease;
	}
	#hamburger span:first-child {
		transform-origin: 0% 0%;
	}
	#hamburger span:nth-child(3) {
		transform-origin: 0% 100%;
	}

	#hamburger-menu {
		display: flex;
		background: white;
		position: absolute;
		top: 6em;
		z-index: 1010;
		overflow: hidden;
		box-shadow: 0px 0px 10px var(--border-clr);
		flex-direction: column;
		width: 0;
		transition-duration: .1s;
		transition-timing-function: ease-out;
		transition-property: width, opacity;
	}

	#hamburger-menu * {
		display: inline-block;
	}

	#hamburger:has(> input:checked) ~ #hamburger-menu {
		width: var(--ftr-mobile-width);
		opacity: 1;
	}

	.add-aire {
		display: none;
	}

	#subscribe, #timeLeft {
		display: inline-block;
	}

	#timeLeft {
		width: 45%;
		margin: 0;
		text-align: center;
	}

	aside {
		flex-direction: row;
		flex-wrap: wrap;
	}

	h1 {
		display: block;
		margin: 1em auto 0;
		font-size: 1.5em;
		width: fit-content;
	}

	#id {
		height: 1.4em;
		vertical-align: bottom;
	}

	.btn {
		padding-block: .3em;
	}

	.btn2 {
		padding: .7em 1em;
	}

	#show_all {
		display: block;
		width: 14em;
		margin-inline: auto;
		margin-block: 1em;
	}

	#reset::before {
		font-family: unset;
	}

	form {
		display: inline-block;
		margin: 0 1em;
	}

	main {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
		height: auto;
	}

	main h2 {
		margin-bottom: 0;
	}

	main section {
		width: 100%;
		min-height: 0;
	}

	* + section {
		border-top: 1px solid var(--border-clr);
	}

	.sub-section {
		margin-left: 1em;
		padding-left: 0;
		border: none;
	}

	#tarifs .sub-section p {
		margin: 1.5em 0 0;
	}

	h2 {
		text-align: center;
		width: 11em;
	}

	#lightgallery {
		padding: 2em;
	}
	#lightgallery > div {
		width: auto;
	}
	#lightgallery img {
		width: 100%;
		padding: .3rem 0;
	}

	#comments {
		padding: 2em 0;
	}
	.comment {
		width: 100%;
	}

	footer {
		gap: 1em;
		font-size: min(1em, 3.8vw);
	}

	#contactus {
		flex: 1 0 100%;
	}

	#login {
		order: 0;
	}
}