/*Police*/


@font-face{
	font-family:"Unbounded-Bold";
	src:url('police/Unbounded-Bold.ttf');
}


@font-face{
	font-family:"Unbounded-Regular";
	src:url('police/Unbounded-Regular.ttf');
}


/* INITIALISATION */

html { 
	margin:0; 
	padding:0;
	font-size:100%;
	width:100%;
	height:100%;
	scroll-behavior:smooth;
}

body{
	background-color:#303841;
	width:100%;
}

html,body,header,main,footer,p,a,h2,h3,h4{
	margin:0px 0px;
	padding:0px 0px;
}






h1{
	font-family:"Unbounded-Bold","Helvetica","Arial";
	font-size:4.7rem;
}

h2{
	font-family:"Unbounded-Bold","Helvetica","Arial";
	font-size:3rem;
}


h3,h4,p,li,button{
	font-family:"Unbounded-Regular","Tahoma","Arial";
	font-size:1.5rem;
}

.titre_cacher,.invivible_parallax{
	display:none;
}


/* ENTRE-SECTION */

.entre-section{
	height:25vw;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center bottom;
}


#trailer{
	background-color:#a19b95;
}

.entre-section.es1{
	background-image:url('../img/gravats1.webp');
	background-color:#a19b95;
}

.s2{
	background-color:#898480;
}

.entre-section.es2{
	background-image:url('../img/gravats2.webp');
	background-color:#898480;
}

#remerciement{
	background-color:#736e6b;
}

.entre-section.es3{
	background-image:url('../img/gravats3.webp');
	background-color:#736e6b;
}

#equipe{
	background-color:#5C5855;
}

.entre-section.es4{
	background-image:url('../img/gravatsfooter.webp');
	background-color:#5C5855;
}

footer{
	background-color:#454240;
}

h3,h4,p{
	font-weight: normal; 
}




/* HEADER */

header{
	background: linear-gradient(#3A889E,#8EAEB7);
	width:100%;
	height:100vh;
	position:relative;
	z-index:-20;
}

header #logo{
	max-height:40%;
	margin-top:10%;
	visibility:hidden;
}

header img{
	width:100%;
}

.rellax{
	position:absolute;
	bottom:0px;
	left:0px;
}


.plan_1{
	z-index:0;
}

.plan_2{
	z-index:-1;
}

.plan_3{
	z-index:-3;
}

.plan_4{
	z-index:-4;
}

.plan_5{
	z-index:-5;
}

.fond{
	z-index:-6;
	height:100%;
}



h1{
	display:none;
}





/* MAIN */


main{
	color:#000000;
}


section{
	padding:100px 0px ;
	min-height:75vh;
}

article{
	padding:100px 0px ;
}




main #trailer{
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-between;
	align-items:center;
}

main #trailer video{
	width:75vw;
	height:auto;
	padding:2vw;
	border-radius:50px;
}

main #trailer p{
	width:75vw;
}





#avancement {
	width:75vw;  
	height:50vh; 
	display:flex;
	margin:0px auto;
	flex-flow:row nowrap;
	justify-content:space-around;
	align-items:center;
}

#avancement .lucarne {
	width:45vw; 
	height:100%; 
	overflow:hidden;
	position:relative;
}

#avancement .plateau { 
	width:225vw; 
	height:100%; 
	position:absolute; 
	top:0; 
	left:0; 
	transition:1000ms;
	display:flex;
	flex-flow:row nowrap;
}

#avancement .plateau div{ 
	width:45vw;
	display:flex;
	justify-content:center;
	align-items:center;
}

#avancement .plateau div img{ 
	max-width:100%;
	max-height:100%;
	border-radius:20px;
}

#avancement .text{  
	height:100%; 
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-around;
	align-items:start;
	padding-left:20px;
}

#avancement .text h3{ 
	padding:10px;
	border-radius:20px;
	color:#000000;
}

#avancement .text>div{
	display:flex;
	flex-flow:row nowrap;
	justify-content:center;
	align-items:center;
}

#avancement .text>div>div{ 
	width:50px;
	height:50px;
	margin:15px;
	transform:translateX(-50px);
	overflow:hidden;
	transition:1000ms;
}

#avancement .text>div>div>div{ 
	background-image:url('../img/v.svg');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center center;
	height:100%;
	width:100%;
	transform:translateX(50px);
	transition:1000ms;
	
}







#progress{  
	width:100%;  
	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:center;
}


#progress>div{ 
	height:50px; 
	width:75vw;
	background-color:#DFDF3B;
	border-radius:25px;
	display:flex;
	justify-content:start;
	align-items:center;
	position:relative;
}

#progress>div>div{ 
	height:42px; 
	width:0%;
	transition:2000ms;
	background-color:#EBFFFF;
	border-radius:21px;
	margin:4px;
	
}

#progress>div>div>div{ 
	position:absolute;	
}

#progress>div>div>div#progress_but{ 
	bottom:-50px;
	left:calc(100% - 50px);	
	background-image:url('../img/etiquette.svg');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center center;
	transform: rotate(180deg) scale(2);
	width:100px;
	height:50px;
}

#progress>div>div>div#progress_but h3{ 
	transform: rotate(180deg) scale(0.7);
}

#progress>div>div>div#progress_now h3{ 
	transform: scale(0.7);
}

#progress>div>div>div#progress_now{ 
	top:-50px;
	left:0px;	
	background-image:url('../img/etiquette.svg');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center center;
	transform: scale(2);
	width:100px;
	height:50px;
}







#option{
	width:100%;
	padding-bottom:0px;
}


#option .swiper-container{
	width:100%;
}

#option .swiper-wrapper{
	width:75%;
}

#option .swiper-slide{
	width:100%;
	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:center;
}

#option .swiper-slide div{
	width:75vw;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
}

#option .swiper-slide div.descp{
	justify-content:space-around;	
}

.img_pack{
	display:flex;
	justify-content:center;
	align-items:center;
}

#option img{
	height:60vh;
	margin:0px;
	border-radius:20px;
}

#option h3,#option p{
	padding:20px;
	margin:20px;
}

#option .descp h3{
	border-radius:20px;
    background-color:#DFDF3B;
    color:#474443;
	padding-left:50px;
	padding-right:50px;
}



#option>div>div>div>p{
	width:60vw;
}


.swiper-button-next{
	right: 10vw;
	color:#e9ffff;
}

.swiper-button-prev{
	left: 10vw;
	color:#e9ffff;
	
}

button{
	padding:10px;
	background-color:inherit;
	color:#e9ffff;
	border:solid 3px #e9ffff;
	border-radius:20px;
	font-size:2rem;
	cursor:pointer;
}

button:hover,button:focus{
	background-color:#e9ffff;
	color:#898480;
}

button:active{
	color:#303841;
}






#remerciement {
	display:flex;
	justify-content:center;
	align-items:center;
}

#remerciement ol{
	width:35vw;
	height:100%;
	padding:0px;
}

#remerciement li{
	list-style:none;
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
	border-radius:20px;
	padding:20px;
	margin:15px;
	background-color:#DFDF3B;
	color:#474443;
}







#equipe article{
	width:75vw;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:center;
	margin:0px auto;
}

#equipe img,#equipe article p{
	width:45%;	
}
#equipe article>p{
	color:#e9ffff;
	margin-top:20px;
}
	

#equipe>h3{
	width:75vw;
	margin:0px auto;
} 

article#FAQ{
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-between;
	align-items:center;
	padding-bottom:0px;
}

article#FAQ>div{
	width:100%;
	cursor:pointer;

}

article#FAQ>div h4{
	width:100%;
	text-align:center;	
	

}

article#FAQ>div h3.question{
	border-radius:20px;
	padding: 20px;
	margin-top:30px;
	background-color:#DFDF3B;
    color:#474443;
	transition:1000ms;	
	

}

article#FAQ>div .pop-up h3{
	width:100%;
	height:100%;
}

article#FAQ>div .pop-up{
	height:0px;
	border-radius:0px 0px 20px 20px;
	padding:0px 20px;
	margin-bottom:15px;
	background-color:#5CB289;
	color:#000000;
	overflow:hidden;
	transition:1000ms;	
}

article#FAQ>div .pop-up.open{
	height:auto;
	padding:20px;
}

/* FOOTER */

footer{
	padding-top:40px;
	padding-bottom:40px;
	margin:0px;
}

footer h2{
	margin:0px auto;
	text-align:center;
	color:#e9ffff;
}







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


/* INITIALISATION */



h3,h4{
	font-size:1.5rem;
}

h2{
	font-size:2.7rem;
}

h1{
	font-size:3.7rem;
}



section{
	padding:50px;
	min-height:auto;
	padding-left:10px;
	padding-right:10px;
}


article{
	padding:50px 0px ;
}


/* MAIN */

#avancement {
	width:80vw;  
	height:120vh; 
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-around;
	align-items:center;
}

#avancement .lucarne {
	width:75vw;
}

#avancement .plateau {
	width:300vw;
}

#avancement .plateau div{
	width:75vw;
}


#avancement .text{
	margin-top:10vh;
	padding-left:0px;
}

#progress>div{
	width: 50vw;
}

#option{
	width: 90vw;
	margin: 0px auto;
}





#option img{
	height:auto;
	width:75vw;
}


#option>div>div>div>p{
	width:75vw;
}


.swiper-button-next{
	right: 0px;
}

.swiper-button-prev{
	left: 0px;
	
}


#remerciement ol{
	width:90vw;
}

#remerciement li{
	box-sizing: border-box;
	width:90%;
	margin: 15px auto;
}

#equipe article{
	width: 80vw;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 0px auto;
}

#equipe article p,#equipe article img{
	width: 90%;
}

#equipe article img{
	order:0;
}

#equipe article p{
	order:1;
}

article#FAQ>div h3.question,article#FAQ>div .pop-up{
	box-sizing: border-box;
}


}


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


h3,h4,p,span{
	font-size:1.1rem;
	text-align:center;
}

h2{
	font-size:1.7rem;
}

#progress{
	transform: rotate(90deg);
	height:55vw;
}

#progress>div>div>div#progress_but h3{ 
	transform: rotate(90deg) translateX(-10px) scale(0.5);
}

#progress>div>div>div#progress_now h3{ 
	transform: rotate(-90deg) translateX(10px) scale(0.5);
}

#option .descp h3{
	padding-left:20px;
	padding-right:20px;
}

#equipe article img{
	margin-bottom:20px;
}


}