/*RESET CSS*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

:root{
	--white : 		#f1f1f1;
	--green : 		#006e61;
	--light-green : #5c9f97;
	--bg-green : 	#006c5f;
	--light-gray : 	#18313c;
	--dark-gray : 	#98a1b1;
	--bg-gray : 	#f1f1f1;
	--pink :  		#FFC0CB;
	--pink-pastel : #fdb0ab;
	--yellow : 		#ebc94f;
	--light-blue : 	#aad3df;
}

/**************************************** Global */

*{
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body{
	font-size: 18px;
	color: var(--light-gray);
	font-family: sans-serif;
	letter-spacing: 1px;
	overflow-x: hidden;
}

/************************************** Layout **/
section{
	display: inline-block;
	width: 100%;
	clear: both;
	padding: 4em 0;
}

.container{
	width: 100%;
	max-width: 1200px;
	position: relative;
	margin: 0 auto;
	padding: 0 10px;
}

.flex{
	display: flex;
}

.col-2{
	width: 50%;
	float: left;
	position: relative;
}

.col-3{
	width: 33.3333333333333%;
	float: left;
	position: relative;
}

.clear{clear:both;}

.max-width-600{max-width:600px;}
.max-width-400{max-width:400px;}

/************************************** Text **/
h1,h2,h3,h4{
	color: var(--green);
	margin-bottom: 1.5em;
	font-weight: bold;
	line-height: 1.1em;
}

h1{font-size: 2em}
h2{font-size: 1.6em}
h3{font-size: 1.4em; margin-bottom:15px;}
h4{font-size: 1.2em}

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

p {
	padding: 0 0 10px 0;
	line-height: 1.2em;
}

button{cursor: pointer;}
button.btn {
	border: none;
	border-radius: 30px;
	text-transform: uppercase;
	padding: 1em;
	text-align: center;
	min-width: 300px;
	max-width: 100%;
	font-size: 1em;
	position: relative;
	overflow: hidden;
}

button.btn::before {
	content:"";
	width: 0%;
	height: 120%;
	position: absolute;
	background: var(--pink-pastel);
	top: -1%;
	left: -1%;
	transition: ease-out .2s;
	z-index: 0;
}
button.btn span{position:relative;z-index: 1}

button.btn.btn-green:hover,
button.btn:hover{
	background: var(--pink-pastel);
	transition: 1s;
	color: #fff;
}

button.btn.btn-light:hover{
	transition: .1s;
	color: #fff;
}


button.btn:hover::before {
	width: 110%;
}

button.btn.btn-green{
	background-color: var(--bg-green);
	color: var(--white);
}

button.btn.btn-light{
	background: var(--light-green);
	color: var(--white);
}
button.btn.btn-pink {
	background: var(--light-green);
	color: var(--light-gray);
}

b{font-weight: bold;}

.text-right{text-align:right;}
.text-left{text-align:left;}
.text-center{text-align:center;}

.uppercase{text-transform: uppercase;}

.bg-gray{background-color: var(--bg-gray);}

.display-none{display:none;}
.success {
	display: inherit;
	background: #006c5f;
	color: var(--white);
	text-align: center;
	padding: 10px;
	line-height: 1.5em;
	text-transform: uppercase;
}

/************************************** HEADER **/
header{color: #EFEFEF;
}

header .logo img {
	max-width: 100px;
	margin: 10px 0;
}

/****************************************BURGER**/

.content-burger {
	display: none!important;/*en attendant de finir le site*/
	width: 40px;
	height: 40px;
	position: absolute;
	right: 25px;
	top: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 105;
}

.burger {
	width: 32px;
	height: 24px;
	z-index: 20;
	margin-top: 20px;
}

.burger span {
	width: 100%;
	height: 2px;
	background-color: var(--light-gray);
	border-radius: 12px;
	display: block;
	transition: background-color 0.2s ease-in-out;
}

.burger span::before,
.burger span::after {
	content: "";
	width: 100%;
	background-color: var(--light-gray);
	display: block;
	transition: 0.2s ease-in;
	border-radius: 12px;
	height: 2px;
}

.burger span::before {
	transform: translateY(-10px);

}

.burger span::after {
	transform: translateY(10px);
	margin-top: -2px;
}

input[type="checkbox"].checkbox {
	position: absolute;
	display: block;
	height: 60px;
	width: 60px;
	right: 0;
	top: 0px;
	opacity: 0;
	cursor: pointer;
	z-index: 110;
}

input[type="checkbox"]:checked + .content-burger {
	filter: invert(1);
}

input[type="checkbox"]:checked + .content-burger .burger span {
	background: transparent;
}

input[type="checkbox"]:checked + .content-burger .burger span::before {
	transform: rotateZ(45deg);

}

input[type="checkbox"]:checked + .content-burger .burger span::after {
	transform: rotateZ(-45deg);
}

/***************************************Menu**/

nav.navbar{
	background-color: var(--green);
	right: -100%;
	display: none;
	transition: .4s;
}

input[type="checkbox"]:checked ~ .navbar {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 100%;
	z-index: 100;
	display: block;
	transition: .4s;
}

nav.navbar ul {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	justify-content: center;
}

nav.navbar ul li {
	font-size: 2em;
	padding: 1em;
}

nav.navbar ul.menu a{
	text-decoration: none;
	color: var(--white);
	transition: 1s ease-in-out;
}

/************************************** MAIN **/
/********************** #LANDING **/
section#landing{
	padding-bottom: 0;
}

section#landing .container{
	background: url('../img/home_application_visuel.png') no-repeat;
	background-position: bottom right;
	background-size: contain;

}
#landing > div > div{
	padding: 2em 0;
}

section#landing h1 {
	margin-bottom: 1em;
}

section#landing img {
	width: 100%;
	margin-bottom: 0;
}

section#landing p.cta{
	padding: 2em 0 4em;
}

/********************** #REVIEWS **/
section#reviews{
	background: var(--bg-green);
	color: var(--white);
}

section#reviews h2{
	color: var(--white);
	text-align: center;
}

section#reviews .flex {
	display: flex;
	justify-content: space-between;
}

section#reviews .review {
	width: 30%;
	text-align: center;
}

section#reviews .review img {
	border-radius: 100%;
	border: 5px solid var(--white);
	max-width: 200px;
	margin-bottom: 1em;
}

section#reviews p.stars{
	color: var(--yellow);
}

/*****************************#FONCTIONS**/
section#fonctions{
	text-align: center;
}

section#fonctions .flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

section#fonctions div.col-3.flex {
	display: flex;
	flex-direction: column;
	row-gap: 2em;
	width: 20%;
}

section#fonctions div#carousel{
	padding: 1em;
	width: 50%;
}

div#carousel img {
	position: relative;
	z-index: 10;
	margin: 0 -2em;
}

div#carousel img.slick-current {
	z-index: 11;	
}

/*****************************#SECTIONS.details**/
section.details div.container.flex {
	align-items: center;
}

section.details div.container img {
	max-width: 300px;
	margin: 2em auto;
}

section.details div.container .col-3{
	text-align: center;
	background: red;
}

/*****************************#FAQ**/
section#faq{}
section#faq div.answer{
	padding-bottom: 1em;
	margin-bottom: 2em;
	border-bottom: 1px solid #c0c0c042;
	position: relative;
	cursor: pointer;
}


section#faq div.answer button {
	border-radius: 100%;
	position: absolute;
	right: 20px;
	border: none;
	padding: 10px 15px;
	font-size: 1em;
	top: 0;
}
section#faq div.answer h3 {
	max-width: 80%;
	white-space: break-spaces;
	transition: .4s
}

/* section#faq div.answer h3:hover {
	padding-left: 1em;
	} */

	section#faq div.answer p.content{
		max-width: 80%;
		transition: ease-in .4s;
		display: none;
	/* 	opacity: 0;
	height: 0; */
}

section#faq div.answer.active p.content{display: block;}

@media screen and (min-width:600px){
	#faq .container {
		padding: 0 4em;
	}
}
/*min-width:600*/

/*****************************#CTA**/
section#cta{
	text-align: center;
	position: relative;
	background: #F1F1F1;
}

section#cta blockquote{
	max-width: 100%;
	padding: 40px;
	text-align: center;
	background: #006c5f;
	border-radius: 20px;
	position: relative;
}

section#cta h2.title {
	color: #f1f1f1;
	margin-bottom: 0;
	font-size: 5em;
}

span.pink{
	color: var(--pink);
}

section#cta button{
	text-transform: inherit;
}

/************************************** #CONTACT **/
section#contact{}

section#contact > div > div {
	margin-bottom: 2em;
}

/************* FORM */
form{margin:1em 0;}

form label{
	display: inline-block;
	width: 100%;
	margin-bottom: 20px;
}

form input{
	width: 100%;
	padding: 10px 20px;
	margin: 5px 0;
}

form textarea{
	resize: none;
	width: 100%;
	min-height: 300px;
	padding: 10px 20px;
	margin: 5px 0;
}

/************************************** FOOTER **/
footer{
	padding: 2em 0;
}
footer .logo img{
	width: 150px;
}

footer div#social a{color: var(--dark-gray);}
div#social a:hover {
	color: var(--bg-green);
	transition: .4s;
}

footer div#social{
	padding-left: 10px;
	width: 200px;
	margin-top: 20px;
}

footer .col-2{
	display: inline-grid;
	margin-bottom: 55px;
}

footer .col-2 a{
	margin: 10px;
	color: var(--light-gray);
	text-decoration: none;
}

footer .clear hr {
	opacity: .3;
	margin-bottom: 50px;
}

footer .clear{
	padding-left: 20px;
}

footer .clear a{
	padding-bottom: 30px;
	color: var(--dark-gray);
	text-decoration: none;
}

/************************************** RESPONSIVE **/
@media screen and (min-width:1200px){
	.responsive{
		display: none;
	}	

}
/*min-width:1200px*/
@media screen and (max-width:1200px){
	.logo {text-align: center;}
	#landing{text-align: center;}
	.max-width-600 {margin: 0 auto;}
	.responsive img{padding: 1em 1em 0;}
	section#landing .container{background: none;}
	#landing > div > div {padding-bottom: 0px;}
	section#fonctions div.col-3.flex,
	section#fonctions .flex {
		display: block;
		width: 100%!important;
		max-width: 400px;
		margin: 0 auto;
	}

	section#fonctions div#carousel {
		padding: 2em 0;
		width: 100%;
	}
	div#carousel img {
		margin: 3em -1em;
	}

	section.details .container{
		max-width: 500px;
	}
	section#landing p.cta {
		padding: 2em 0 2em;
	}
	.slick-slide{
		height: inherit!important;
	}

	section#fonctions div.col-3.flex, 
	section#fonctions .flex > div {
		margin-bottom: 3em;
	}
}
/*max-width:1200px*/

@media screen and (max-width:1000px){
	.flex{
		width: 100%;
		display: block;
	}
	.col-2,
	.col-3{
		width: 100%;
	}
}
/*max-width:1000px*/

@media screen and (max-width:600px){
	section#reviews .flex{display: block;}
	section#reviews .review {width: 100%; margin-bottom: 2em;}
	section#cta h2.title {font-size: 3em;}
	button.btn{
		width: 80%;
		margin-bottom: 1em;
	}
	h1 {font-size: 2.3em;}
	h2 {font-size: 2em;}
	section#faq div.answer h3{font-size:1.1em;}
	section#faq div.answer.active p.content {
		font-size: 14px;
	}
	section#cta blockquote {
		padding: 49px 10px;
	}
	footer {
		text-align: center;
	}
	footer .col-2 {
		justify-content: center;
		justify-items: center;
	}
}

/*max-width:600px*/