*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*font-family: 'Playfair Display', serif; 400-600
font-family: 'Roboto', sans-serif; 400-700
font-family: 'Material Icons';
*/

:root{
	--clr-200: #efefef;
	--clr-accent: #202346;
	--clr-accent2: #d0973d;
	--ff-body: 'Roboto', sans-serif;
	--ff-title: 'Playfair Display', serif;
	--ff-icons: 'Material Icons';
	--w: 122rem;
}

html{
	scroll-behavior: smooth;
	scroll-padding:9.5rem;
	font-size: 62.5%;
}

body{
	font-size: 1.4rem;
	font-family: var(--ff-body);
	color: var(--clr-accent);
}

.sitewrap{
	width: 100%;
	overflow: hidden;
}

.wrap{
	margin: 0 auto;
	width: var(--w);
	max-width: calc(100% - 3rem);
}

.ff-icons{font-family: var(--ff-icons);}
h1, h2{
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1.4rem;
	margin-top: 0;
	margin-bottom: 2.5rem;
	font-family: var(--ff-body);
}

h3, .h3{
	font-family: var(--ff-title);
	text-transform: uppercase;
	line-height: 1;
	padding-bottom: 3rem;
	margin-bottom: 2.5rem;
	font-size: 4rem;
	font-weight: 400;
	position: relative;
}

h3:after, .h3:after{
	content: '';
	width: 30rem;
	height: 1px;
	background-color: var(--clr-accent);
	display: block;
	position: absolute;
	bottom: 0;
	left: -8rem;
}

img{
	display: block;
	max-width: 100%;
}

header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding-bottom: .5rem;
	z-index: 9999;
	transition: all .4s;
}

header.scrolled{
	background-color: rgba(0,0,0,.8);
}

header .wrap{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.menu-ico{display: none;}

header a.logo{
	width: 32rem;
	padding-bottom: .5rem;
	margin-right: 3rem;
}

.navcont{
	border:1px solid #fff;
	border-top:0;
	flex-grow: 1;
	margin-left: auto;
	text-align: right;
	padding: 1.5rem 2.5rem 3rem;
}

.navcont .soc{
	margin-bottom: 1rem;
}

.navcont .soc a{color: #fff;transition: color .4s;}

a.langSwitch{
	text-transform: uppercase;
	font-weight: 300;
	font-size: 1.4rem;
	text-decoration: none;
	display: inline-block;
	margin-right: 1.5rem;
}

a.telh{
	text-decoration: none;
	font-weight: 400;
	font-size: 1.4rem;
	display: inline-block;
}

a.telh span{
	display: inline-block;
	vertical-align: middle;
	font-size: 2rem;
}

.navcont nav a{
	text-transform: uppercase;
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	display: inline-block;
	margin-left: 1.5rem;
	transition: color .4s;
}

.navcont nav a:hover, .navcont .soc a:hover{color: var(--clr-accent2);}

a.btn-vip{
	background-color: #fff;
	text-decoration: none;
	color: var(--clr-accent);
	font-family: var(--ff-title);
	text-transform: uppercase;
	align-self: stretch;
	padding-left: 4rem;
	padding-right: 4rem;
	font-size: 2.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	transition: all .4s;
}

a.btn-vip:hover{
	color: #fff;
	background-color: var(--clr-accent);
}

.banner{
	background-color: #000;
	position: relative;
}

.banner video{opacity: .5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;z-index: 1;
}

.banner:before{
	content: "";
	width: 100%;
	height: 15rem;
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.727328431372549) 100%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.banner:after{
	content: "";
	width: 100%;
	height: 40%;
	background: linear-gradient(0deg, rgba(0,0,0,0.727328431372549) 0%, rgba(0,0,0,0) 100%);
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
}

.banner .wrap{
	z-index: 3;
	position: relative;
	height: 75rem;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}

.banner .intro{
	padding-left: 8rem;
	padding-right: 6rem;
	width: calc(65% - 8rem);
	color: #fff;
	padding-bottom: 8rem;
}
.intro p, .promoteur p, .architecture p, .quartier p, .contact p{
	line-height: 1.6;
	font-weight: 700;

}

.banner h3:after, .promoteur .h3:after{
	background-color: #fff;
}

form#accesvip{
	background-color: var(--clr-accent);
	padding: 2.5rem 3rem;
	color: #fff;
	width: 35%;
	position: absolute;
	bottom: 0;
	right: 8rem;
	transform: translateY(30rem);
	box-shadow: 0px 0px 10px 0px #000000;
	text-align: center;
}

form#accesvip h2{
	font-family: var(--ff-title);
	text-align: center;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 2.2rem;
	margin-bottom: 1.5rem;
}

form#accesvip h2 img{
	display: inline-block;
	vertical-align: middle;
	margin-right: 2rem;
	width: 5rem;
}

::placeholder { 
	color: #fff;
	font-style: normal;
	font-size: 1.4rem;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #fff;
	font-style: normal;
	font-size: 1.4rem;
}
::-moz-placeholder { /* Firefox 19+ */
	color: #fff;
	font-style: normal;
	font-size: 1.4rem;
}
:-ms-input-placeholder { /* IE 10+ */
	color: #fff;
	font-style: normal;
	font-size: 1.4rem;
}

form#accesvip input:not([type=submit]):not([type=radio]), form#accesvip textarea{
	display: block;
	width: 100%;
	-webkit-appearance:none;
	appearance:none;
	font-family: var(--ff-body);
	font-size: 1.4rem;
	border:0;
	border-bottom: 1px solid #fff;
	background-color: var(--clr-accent);
	padding: 1.5rem;
	line-height: 1;
	text-align: left;
	margin-bottom: 1rem;
	color: #fff;
}

form#accesvip input:not([type=submit]):not([type=radio]):focus, form#accesvip textarea:focus, select:focus{
	outline: none;
	border-bottom: 1px solid var(--clr-accent2);
}

form#accesvip textarea{
	resize: vertical;
	height: 4.7rem;
}

select{
	-webkit-appearance:none;
	appearance:none;
	border:0;
	padding: 1.5rem;
	font-size: 1.4rem;
	color: #fff;
	border-bottom: 1px solid #fff;
	background-color: var(--clr-accent);
	display: block;
	width: 100%;
}

.select{
	margin-bottom: 1rem;
	position: relative;
	text-align: left;
}

.select:after{
	content: "";
	pointer-events: none;
	display: block;
	width: .9rem;
	height: .9rem;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	transform: rotate(45deg);
	position: absolute;
	right: 2rem;
	top: 1.4rem;
}

.radiobloc{
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	padding: 1rem 1.5rem;
	
}

.radiobloc input{
	width: 1.8rem;
	height: 1.8rem;
	display: inline-block;
	vertical-align: middle;
	accent-color: var(--clr-accent2);
	margin-top: -2px;
	margin-right: .5rem;
}

form#accesvip input[type=submit]{
	-webkit-appearance:none;
	appearance:none;
	border:0;
	background-color: var(--clr-200);
	color: var(--clr-accent);
	font-family: var(--ff-body);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 1.4rem;
	display: inline-block;
	margin-top: 1.5rem;
	padding: 1.5rem 4rem;
	transition: all .4s;
}

form#accesvip input[type=submit]:hover, a.bouton:hover{
	background-color: var(--clr-accent2);
	color: #fff;
}

.about{
	background-image: url("images/bg1.jpg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.about .wrap{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-top: 13rem;
	padding-bottom: 8rem;
}

.about .txt{
	padding-left: 8rem;
	padding-right: 10rem;
	width: calc(65% - 8rem);
}

.about .img img{width: 100%;}
.about .img{
	width: calc(35% + 8rem);
	transform: translateY(26rem);
}

ul{
	list-style-type: none;
	margin-bottom: 2.5rem;
}

li{
	position: relative;
	line-height: 1.6;
	margin-bottom: .8rem;
}

li:before{
	content: "";
	width: .8rem;
	height: .8rem;
	border:1px solid var(--clr-accent);
	transform: rotate(45deg);
	position: absolute;
	top: .6rem;
	left: -2.5rem;
}

a.bouton{
	text-transform: uppercase;
	font-weight: 700;
	background-color: var(--clr-accent);
	padding: 2rem;
	color: #fff;
	font-size: 1.4rem;
	text-decoration: none;
	display: inline-block;
	transition: all .4s;
}

.about a.bouton{
	margin-left: -2.5rem;
}

.promoteur{
	background-color: var(--clr-accent);
	color: #fff;
	padding-top: 15rem;
}

.promoteur .wrap{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}

.promoteur .tit{
	width: 34rem;
	max-width: calc(65% - 8rem);
}

.promoteur .h3 p{
	font-family: var(--ff-body);
	text-transform: none;
	font-weight: 300;
	font-size: 1.4rem;
	margin-bottom: 1rem;
}

.promoteur .tit img{width: 100%;}

.imgfull{display: block;width: 100%;margin-top: 5rem;}

.promoteur .txt{
	padding-right: 8rem;
	width: calc(35% + 8rem);
}

.promoteur p:not(:last-child), .architecture p, .quartier p, .contact p{
	margin-bottom: 2.5rem;
}

.caracteristiques .wrap{
	padding: 5rem 8rem 20rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.half{
	width: calc(50% - 3rem);
}

.half li{margin-bottom: 3rem;}

.architecture{
	background-color: var(--clr-200);
	background-image: url("images/bg3.jpg");
	background-size: auto 100%;
	background-position: left 10rem center;
	background-repeat: no-repeat;
}

.architecture .wrap{
	padding: 7rem 4rem 0rem 4rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.architecture .img img, .quartier .img img{display: block;width: 100%;}
.architecture .img, .quartier .img{
	width: calc(50% - 10rem);
	transform: translateY(-20rem);
}

.architecture .txt{
	width: calc(50% + 10rem);
	padding-left: 10rem;
	padding-right: 4rem;
}

.quartier{
	background-image: url("images/bg2.jpg");
	background-size: auto 100%;
	background-position: right center;
	background-repeat: no-repeat;
}

.quartier .wrap{
	padding: 10rem 0rem 4rem 8rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.quartier .txt{
	width: calc(50% + 10rem);
	padding-right: 4rem;
}

.quartier .img{
	transform: translateY(-15rem);
}

.contact{
	background-color: var(--clr-200);
}

.contact .wrap{
	padding: 8rem 0rem 10rem 8rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

h2 img{
	display: inline-block;
	vertical-align: middle;
	width: 4.8rem;
	margin-right: 1.5rem;
}

.contact .half>img{margin-bottom: 2.5rem;}

.contact-info{
	margin-bottom: 2.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.contact-info p{margin-bottom: 0 !important;}

.contact-info p a{
	color: var(--clr-accent);
	text-decoration: none;
	transition: all .4s;
}

.contact-info p a:hover{color: var(--clr-accent2);}

.contact-info p a span{
	display: inline-block;
	vertical-align: middle;
	font-size: 2rem;
	margin-right: 1rem;
}

.caracteristiques .half:first-of-type a.bouton{display: inline-block;}
	.caracteristiques .half a.bouton{display: none;}

@media screen and (max-width: 1200px) {

	header a.logo{width: 27rem;}
	a.btn-vip{padding-right: 2rem;padding-left: 2rem;font-size: 2rem;}
	.navcont{padding: 1.5rem 1.5rem 3rem;}
	.navcont nav a{margin-left: 1.3rem;}
	.banner .wrap{height: 60rem;}
	.banner .intro{padding-bottom: 4rem;}
	.architecture .wrap{padding-bottom: 7rem;}
}

@media screen and (max-width: 1025px) {
	.navcont nav{
		display: none;
		position: absolute;
		top: 7.1rem;
		right: 6.5rem;
		background-color: #fff;
		text-align: center;
		padding: 1rem 0;
	}
	
	.navcont nav a{
		display: block;
		width: 100%;
		color: var(--clr-accent);
		margin-left: 0;
		margin-bottom: .5rem;
		margin-top: .5rem;
	}
	.navcont .soc{margin-bottom: 0;line-height: 1;}
	.navcont{
		padding: 2.5rem 1.5rem;
	}
	.menu-ico{
		display: block;
		font-size: 3.5rem;
		align-self: center;
		color: #fff;
		margin-left: 1.5rem;
		cursor: pointer;
	}

	form#accesvip{
		right: 0;
		width: calc(35% + 8rem);
	}
	
	h3:after, .h3:after{
		left: -4rem;
	}
	
	.banner .intro, .about .txt, .promoteur .tit, .caracteristiques .wrap, .quartier .wrap, .contact .wrap{
		padding-left: 4rem;
	}
	
	.caracteristiques .wrap{padding-right: 4rem;}
	
	.promoteur .txt{padding-right: 0;}
	
	h2 img{
		width: 3.5rem;
		margin-right: .5rem;
	}
	
	.contact h2{font-size: 1.3rem;}
	
	.caracteristiques .wrap{padding-bottom: 10rem;}
	
	.architecture .img, .quartier .img{
		transform: translateY(-10rem);
	}
	
	.quartier .wrap{padding-top: 7rem;}
}

@media screen and (max-width: 850px) {
	header a.logo {
    	width: 25rem;
	}

	.banner .intro{padding-right: 2rem;text-shadow: 0px 0px 5px #000000;}
	.about .txt{padding-right: 2rem;}
	
	h3 br{display: none;}
	h3{font-size: 3.4rem;}
	.half {
    	width: calc(50% - 2rem);
	}
	h2 img{display: block;margin-bottom: 1rem;}
}

@media screen and (max-width: 750px) {
	a.btn-vip {
		padding-right: .8rem;
		padding-left: .8rem;
		font-size: 1.3rem;
	}
	a.langSwitch{margin-bottom: .5rem;}
	a.telh, a.langSwitch{font-size: 1.3rem;display: block;text-align: right;margin-right: 0;padding-right: .5rem;}
	a.telh span{display: none;}
	.navcont {
    	padding: 1rem 0rem;
		border:0;
	}
	
	header a.logo{margin-right: 1rem;width: 14rem;align-self: center;}
	
	.menu-ico{margin-left: .5rem;}
	
	header .wrap{
		max-width: calc(100% - 1rem);
	}
	header{padding-bottom: 0;}
	
	.navcont nav{
		width: 100% !important;
		right: 0;
		top: 5.1rem;
	}
	
	.banner .intro{width: 100%;}
	form#accesvip{width: 100%;transform: translateY(calc(100% + 1.5rem));}
	
	.banner .intro, .about .txt, .promoteur .tit, .caracteristiques .wrap, .quartier .wrap, .contact .wrap{padding-left: 0rem;}
	h3:after, .h3:after{left: -2rem;width: 25rem;}
	h3, .h3{padding-bottom: 2rem;margin-bottom: 1.5rem;}
	
	.banner{margin-bottom: 60rem;}
	
	.about .wrap{padding-top: 3rem;padding-bottom: 3rem;}
	
	.about .wrap, .caracteristiques .wrap, .architecture .wrap, .quartier .wrap, .contact .wrap{flex-wrap: wrap;}
	.about .txt, .about .img, .promoteur .tit, .promoteur .txt, .half, .architecture .img, .quartier .img, .architecture .txt, .quartier .txt{width: 100%;transform: none;max-width: 100%;}
	
	.about .img, .half+.half, .architecture .txt, .quartier .img{margin-top: 2rem;}
	.about a.bouton{margin-left: 0;}
	
	li{margin-left: 2rem;}
	
	.caracteristiques .half:first-of-type a.bouton{display: none;}
	.caracteristiques .half a.bouton{display: inline-block;}
	
	.promoteur{padding-top: 3rem;}
	.caracteristiques .wrap{padding-bottom: 3rem;padding-top: 2rem;}
	
	.architecture .wrap, .architecture .txt, .quartier .txt{padding-left: 0;padding-right: 0;}
	
}