*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

body{
	overflow-x: hidden;
}

.section-1 p{
	padding: 26px 0px 10px 0px;
}

.section-2{
	margin-top: 1em;
}

.section-2 h1, .section-3 h1, .section-4 h1, .section-5 h1{
	font-size: 20px;
    font-size: max(20px, min(2vw, 40px)); 
	font-size: clamp(20px, 2vw, 40px);
	margin: 1em 0em 1em 0em;
}

.section-2 p{
	text-align: justify;
	padding: 2em 3em 1em 3em;
	font-size: 14px;
    font-size: max(14px, min(1vw, 16px)); 
	font-size: clamp(14px, 1.3vw, 16px);
}


.section-4{
	margin-top: 1em;
}

.section-5{
	background: red;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-family: arial;
	color: white;
	text-align: center;
	padding : 1rem 2rem 1rem 2rem;
}

.section-5 img{
	max-width: 20vw;
}

.section-5 p{
	text-align: justify;
	border-radius: 10px;
	padding: 2em 3em 1em 3em;
	min-width: 60vw;
}

.avant-s5{
	content:url(v-h-s5.svg);
	margin: 0;
	padding: 0;
	width: 100%;
}

.apres-s5{
	content:url(v-b-s5.svg);
	margin: 0;
	padding: 0;
	width: 100%;
	margin-top: -1px;
}

.section-4 p{
	text-align: justify;
	border-radius: 10px;
	padding: 2em 3em 1em 3em;
}

.section-3 p{
	text-align: justify-all;
	border-radius: 10px;
	padding: 2em 3em 1em 3em;
}

.s3-1{
	max-width: 35vw;
}

/*--------------------navbar-------------------*/
.navbar{
	z-index: 1000;
    position: fixed;
    padding: 15px 30px 0px 30px;
    display: flex;
    justify-content:space-between;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
	font-family: Arial;
	font-weight: bolder;
	background-color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: calc(15px + 4 * ((100vw - 700px) / 1000));
}

.navbar-plus{
	z-index:10;
	position: fixed;
	top: 0px;
	left: 0;
	display: flex;
	justify-content: end;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	font-family: Arial;
	font-weight: bolder;
	background-color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: calc(15px + 4 * ((100vw - 700px) / 1000));
	background-color: whitesmoke;
	padding: 10px 6vw 10px 30px;
	transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}


.navbar a, .navbar-plus a{
    color: limegreen;
}

.navbar a:hover, .navbar-plus a:hover{
	color: red;
}

.navbar .logo{
    font-size: 1.5em;
    font-weight: bold;
}

.navbar .logo img{
	height: 40px;
}

.navbar .nav-links ul{
    display: flex;
}

.navbar-plus ul{
	display: flex;
}

.navbar .nav-links ul li{
    margin: 0 1.3vw;
}

.navbar-plus ul li{
	margin: 0 1.3vw;
}

.navbar .nav-links ul li.active a{
    color: red;
    font-weight: bold;
}

.navbar .menu-hamburger{
    display: none;
    position: absolute;
    top: 15px;
    right: 30px;
    width: 35px;
	z-index: 11;
}

.plus{
	top: 60px;
}

.menu-moins{
	display: none;
}

.section-2, .section-3, .section-4, .section-5{
	min-height: 70vh;
}

@media screen and (max-width:750px) {
	
    .navbar{
		position : fixed;
		top: 0;
		left: 0;
        padding: 0;
		padding-top: 60px;
		background-color: #fff;
		display: flex;
		justify-content:space-between;
		width: 100%;
		box-sizing: border-box;
		align-items: center;
		height: auto;
    }

    .navbar .logo{
        position: absolute;
        top: 10px;
        left:calc(50% - 50px) ;
    }
    
    .navbar .menu-hamburger{
        display: block;
    }

    .nav-links{
        position: absolute;
        top:0;
        left: 0;
        background-color: whitesmoke;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -100vh;
        transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    }	

    .nav-links.mobile-menu{
        margin-top: 0;
    }

    .nav-links ul{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .navbar .nav-links ul li{
        margin: 2vh 0;
        font-size: 1.1em;
    }
	
	.navbar .nav-links ul li a{
        color: limegreen;
		font-weight: bold;
    }
    
	.navbar .nav-links ul li a:hover{
        color: red;
		font-weight: bold;
    }

	.section-1{
		padding: 0;
	}

	div img{
		display: none;
	}

	.section-2 p, .section-3 p, .section-4 p, .section-5 p{
		text-align: justify;
		border-radius: 10px;
		padding: 1em 0em 1em 0em;
	}

	.navbar p{
		margin: 0;
	}

	.section-1 p{
		font-size: calc(40px + 5 * ((100% - 360px) / 1000) );
		padding: 26px 0px 10px 0px;
	}

	.menu-plus{
		display: none;
	}

	.menu-moins{
		display: block;
	}

	footer div ul li img{
		display: inline;
	}

	footer ul{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	footer ul li{
		padding: 1vh;
	}

	.section-2, .section-3, .section-4, .section-5{
		max-height: 70vh;
	}

}


html{	
	background: rgb(255, 255, 255);
	overflow-x: hidden;
}

body{
	background: white;
	margin:0px;
	padding:0px;
}

/*.header{
	display : flex;
	position: fixed;
	align-items: center;
	left :0;
	background-color: white;
	margin-top: 1rem;
	}*/

/*.logo{
	position: relative;
	left: 1vw;
	height: 3vw;
	padding: 0.5vw;
	width : 20vw;
}

.logo img{
	max-height: 3vw;
}*/

/*nav{
	font-family: Arial;
	font-weight: bolder;
	color : limegreen;
	padding-top: 0.1rem;
	width: 80vw;
	position: relative;
	right: 0;
}

nav a{
	text-decoration: none;
	color : limegreen;
}

nav a:hover{
	color: red;
}*/

/*ul{
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding-right: 2vw;
}

li{
	text-transform: uppercase;
	list-style: none;
	font-size: 1.4vw;
}

li img{
	width: 80px;
}*/

@font-face {
	font-family: "Freestyle Script";
	src: url("fonts/FREESCPT.TTF");
  }

.section-1{
	font-family: Freestyle Script;
	margin-top: -1rem;
	padding-top: 3.5rem;
	text-align: center;
	color: white;
	background: url(vague.svg);
	background-size: cover;
	font-family: Freestyle Script;
	font-size: 3rem;
}


.section-2{
	display: flex;
	justify-content: space-around;
	align-items:center;
	font-family: arial;
	color: #777;
	text-align: center;
	padding : 1rem 2rem 1rem 2rem;
}

.section-4{
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-family: arial;
	color: #777;
	text-align: center;
	padding : 0rem 2rem 1rem 2rem;
	margin-top: 0;
}

.section-2 h1{
	font-family: arial;
	font-weight: bold;
	color: limegreen;
}

.section-4 h1{
	font-family: arial;
	font-weight: bold;
	color: limegreen;
}

.section-2 img{
	width: 30vw;
}

.section-4 img{
	max-width: 20vw;
	border: solid 10px limegreen;
}


.section-2 span{
	background: red;
	border-radius: 1rem;
	padding: 0.5rem 1rem 0.5rem 1rem;
	color: white;
	font-weight: bold;
	text-decoration: none;
	transition: transform .2s;
	width:auto;
	height:auto;
	display: inline-block;
	margin-bottom: 40px;
}

.section-4 span{
	background: red;
	border-radius: 1rem;
	padding: 0.5rem 1rem 0.5rem 1rem;
	color: white;
	font-weight: bold;
	text-decoration: none;
	transition: transform .2s;
	width:auto;
	height:auto;
	display: inline-block;
	margin-bottom: 40px;
}

.section-2 span:hover{
	transform: scale(1.2);
}

.section-4 span:hover{
	transform: scale(1.2);
}

.section-2 a{
	text-decoration: none;
}

.section-4 a{
	text-decoration: none;
}

p{
	margin: 0;
}

.avant{
	content:url(vague_haut.svg);
	margin: 0px;
	padding: 0px;
	width: 100%;
}

.apres{
	content:url(vague_bas.svg);
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.avant-s3{
	content:url(vague_haut_s3.svg);
	margin: 0;
	margin-top: -70px;
	padding: 0px;
	width: 100%;
}

.avant-footer{
	content:url(vague_footer.svg);
	margin: 0;
	padding: 0;
	width: 100%;
}

.section-3{
	background: red;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-family: arial;
	color: white;
	text-align: center;
	padding : 1rem 2rem 1rem 2rem;
}

.section-3 img{
	max-width: 20vw;
}

.apres-s3{
	content:url(vague_bas_s3.svg);
	margin: 0px;
	margin-top: -1px;
	padding: 0px;
	width: 100%;
}

.section-3 span, .section-5 span{
	background: limegreen;
	border-radius: 1rem;
	padding: 0.5rem 1rem 0.5rem 1rem;
	color: white;
	font-weight: bold;
	text-decoration: none;
	transition: transform .2s;
	width:auto;
	height:auto;
	display: inline-block;
}

.section-3 span:hover, .section-5 span:hover{
	transform: scale(1.2);
}

.section-3 a{
	text-decoration: none;
}


footer{
	background-color: limegreen;
	font-family: Arial;
	font-weight: bolder;
	color : white;
}

footer ul{
	display: flex;
	align-items: center;
	justify-content: space-around;
}

footer div{
	padding: 2em 0em 2em 0em;
}

footer img{
	height: 2em;
}

footer a{
	color: white;
	padding: 2vw;
}


/*@media (max-width:719px){
	nav{
		display: none;
		visibility: hidden;
	}

	.logo{
		width: 100vw;
		background-color: white;
		text-align: center;
		min-height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.logo img{
		height: 80%;
		max-height: none;
	}

	.map{
		display: none;
		visibility: hidden;		
	}

	.section-2{
		text-align: justify;
		padding: 0rem 0.5rem 0rem 0.5rem;
	}

	.section-2 h1{
		text-align: center;
	}

	.section-2 p{
		margin: 2rem;
		margin-bottom: 4rem;
	}
}*/

.cache{
	opacity: 0;
	transition: opacity 2s;
}

.montre{
	 opacity: 1;
}

.cache__gauche{
	transform: translateX(-100%);
	transition: all 2s;
}

.montre__gauche{
	transform: translateX(0);
	opacity: 1;
}

.cache__droite{
	transform: translateX(200px);
	opacity: 0;
	transition: all 3s;
}

.montre__droite{
	transform: translateX(0px);
	opacity: 1;
}

@media(prefers-reduce-motion){
	.cache, .cache__droite, .cache__gauche{
		transition: none;
	}
}

.avant-s3, .apres-s3, .avant-s5, .apres-s5, .avant-footer{
	width: 102%;
	margin-left: -5px;
}

footer i{
	margin-right: 5px;
}