@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Pacifico&display=swap');

*{padding: 0; margin: 0;}

html{height: 100%; overflow: hidden; scroll-behavior: smooth; font-size: 140%; color: #202020;}
body{margin:0; padding:0; perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y: scroll; overflow-x: hidden; font-family: Montserrat;}
h1{font-size: 170%; color: #0b40a8;}
h2{font-size: 120%; color: #808080;}
ul{margin: 5px 0 15px 30px;}
a{color: #24622d; text-decoration: none; font-weight: bold; -webkit-transition: color 250ms ease-out; -moz-transition: color 250ms ease-out; -o-transition: color 250ms ease-out; transition: color 250ms ease-out;}
a:hover{color: #0b40a8;}

[type="text"], textarea{padding-left: 5px; padding-top: 5px; height: 30px; width: 50%; border-radius: 5px; border: 1px solid #c0c0c0; font-family: Montserrat; font-size: 20px; color: #202020;}
[type="text"]:focus, textarea:focus{outline: 0; border-color: #0b40a8;}
[type="submit"]{cursor: pointer; border-width: 0; border-radius: 5px; padding: 5px; background: #0b40a8; font-family: Montserrat; font-size: 20px; font-weight: bold; color: #fff; outline: 0;}
[type="submit"]:hover{background: #24622d;}
.checkbox-container .chkbx {cursor: pointer; appearance: none; background-color: #dfe1e4; border-radius: 72px; border-style: none; flex-shrink: 0; height: 20px; margin: 0; position: relative; width: 30px;}
.checkbox-container .chkbx::before {bottom: -6px; content: ""; left: -6px; position: absolute; right: -6px; top: -6px;}
.checkbox-container .chkbx, .checkbox-container .chkbx::after {transition: all 100ms ease-out;}
.checkbox-container .chkbx::after {background-color: #fff; border-radius: 50%; content: ""; height: 14px; left: 3px; position: absolute; top: 3px; width: 14px;}
.checkbox-container input[type=checkbox] {cursor: pointer;}
.checkbox-container .chkbx:hover {background-color: #c9cbcd; transition-duration: 0s;}
.checkbox-container .chkbx:checked {background-color: #24622d;}
.checkbox-container .chkbx:checked::after {background-color: #fff; left: 13px;}
.checkbox-container :focus:not(.focus-visible) {outline: 0;}
.checkbox-container .chkbx:checked:hover {background-color: #24622d;}

header{width: 100%; float: left; position: sticky; height: 130px; background: rgba(255, 255, 255, 0.8); top:0; z-index: 99;}
#logo{float: left; margin: 7px 15px 0 7px; z-index: 100; height: 115px;}
nav{}
nav ul{list-style-type: none; margin: 0;}
nav ul li{float: left;}
nav ul li a{font-size: 80%; border-width: 3px 0 0 0; border-style: solid; border-color: transparent; color: #0a3b9c; text-decoration : none; display: block; width: 150px; text-align: center; padding-top: 80px; height: 47px; background-size: 80px; background-repeat: no-repeat; background-position: top center; transition: background-color 0.3s;}
nav ul li a:hover{background-color: #ccd0d9; border-color: #0a3b9c;}
nav #zContact{float: right;}
nav #zContact a{border-width: 3px 0 0 0; border-style: solid; border-color: transparent; color: #0a3b9c; text-decoration : none; display: block; width: 150px; text-align: center; padding-top: 80px; height: 47px; background-size: 80px; background-repeat: no-repeat; background-position: top center; transition: background-color 0.3s;}
nav #zContact a:hover{background-color: #ccd0d9; border-color: #0a3b9c;}

.mob_only{display: none;}
.dsk_only{display: block;}

.etiquette_r{position: absolute; top: 50%; left: 70%; width: 320px; height: 320px; transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg); padding: 10px; border-radius: 5px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.etiquette_r:last-of-type{transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);}
.etiquette_l{position: absolute; top: 50%; left: 35%; width: 320px; height: 320px; transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg); padding: 10px; border-radius: 5px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.etiquette_l:last-of-type{transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);}

.title{width: 50%; padding: 5%; border-radius: 5px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 8px rgba(0, 0, 0, .8);}

.slide{position: relative; padding: 25vh 10%; min-height: 100vh; width: 100vw; box-sizing: border-box; transform-style: inherit;}
.slide:before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.slide:nth-child(2n) .title{margin-left: 0; margin-right: auto;}
.slide:nth-child(2n+1) .title{margin-left: auto; margin-right: 0;}
.slide, .slide:before {background: 50% 50% / cover;}

#intro{background-image: url('../img/bg-intro.jpg'); z-index:2; margin-left: 0; margin-right: auto;}
#intro p {transform: translateZ(.25px) scale(.75); transform-origin: 50% 100%; background: rgba(255, 255, 255, .8); padding: 5%; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, .7); width: 40%;}
#amelioration-adaptation:before{background-image: url('../img/bg-amelioration-adaptation.jpg'); transform: translateZ(-1px) scale(2);}
#evaluation-valorisation{background-image: url('../img/bg-evaluation-valorisation.jpg');}
#permis-construire{background-image: url('../img/bg-permis-construire.jpg'); z-index:2;}
#habitat-durable:before{background-image: url('../img/bg-habitat-durable.jpg'); transform: translateZ(-1px) scale(2);}
#achat-renovation{background-image: url('../img/bg-achat-renovation.jpg');}

#contact{background-image: url(../img/bg-contact); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 150px 30px 30px 30px;}
.block{padding: 15px; border-radius: 5px; background: rgba(255, 255, 255, .8); margin-bottom: 15px;}
#mentions-legales{background-image: url(../img/bg-contact); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 150px 30px 30px 30px;}

#re2020{width: 180px; float: left; margin-right: 30px;}

/* Responsive */
@media screen and (max-width: 1024px)
{
	[type="text"], textarea{width: 90%;}
	
	.mob_only{display: block;}
	.dsk_only{display: none;}
	
	header{width: 100%; position: sticky; height: 45px; background: rgba(255, 255, 255, 0.8); top:0; z-index: 99;}
	#nav_mobile{list-style-type: none; display: flex; margin: 5px;}
	#nav_mobile li{flex: 1; text-align: center;}
	#nav_mobile a{font-weight: bold; color: #0a3b9c; text-decoration : none;}
	#nav_mobile img{width: 50px; vertical-align: middle;}
	
	.slide{padding: 15vh 10%;}
	#intro{z-index:2; margin-left: 0; margin-right: auto; padding-top: 60px;}
	#intro p{transform: translateZ(.25px) scale(.75); transform-origin: 50% 100%; background: rgba(255, 255, 255, .8); padding: 5%; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, .7); width: 90%;}
	
	.title{width: 90%; padding: 5%; border-radius: 5px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 8px rgba(0, 0, 0, .8);}
	
	.etiquette_l{display: none;}
	.etiquette_r{display: none;}
	
	#contact{padding: 60px 15px 15px 15px;}
	#mentions-legales{padding: 60px 15px 15px 15px;}
	
	#re2020{width: 70px; float: left; margin-right: 15px;}
}