@charset "utf-8";
@import url("faq.css");

/*hero-banner style*/
.hero{
	background: url("../img/webp/hero-banner.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 80% top;
	height: 800px;
}

.hero .container{
	height: inherit;
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
}

.hero .container div:not(.controls){
	width: 70%;
	max-width: 720px;
	height: auto;
}
h1{
	margin-bottom: 24px;
	color: white;
}
.hero .container div:first-child h4{
	color: white;
	width: 100%;
}

.controls{
	width: 100%;
	max-width: 792.34px;
	background-color: white;
	margin: 160px auto 0;
	justify-self: flex-end;
	display: flex;
	justify-content: center;
	column-gap: 160px;
	padding: 40px 95px;
	border-radius: 16px;
	position: relative;
	z-index: 2;
	box-shadow: var(--shadow);
}

.controls img{
	height: 64px;
	width: auto;
	display: block;
	margin: 0 auto;
}
.controls a{
	transition: all .2s ease-in-out;
}
.controls a:hover{
	transform: scale(1.1)
}
.mobile-hero{
	display: none;
}
.controls.mobile{
	display: none;
}
/*Separateur*/
.sepa-phone{
	width: 100%;
	height: 1124px;
	background: url("../img/svg/sepa-1-xl.svg");
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
	top: -128px;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}
.sepa-phone .row div{
	width: 48%;
}
.sepa-phone .row div:first-child{
	position: relative;
	display: flex;
	justify-content: flex-start
}
.sepa-phone .row div img{
	width: 264px;
	margin-left: 24px;
	transform-origin: center;
	transform: rotate(8deg);
}
.conv-anim2{
	width: 264px;
	height: auto;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow);
	position: absolute;
	right: 40px;
	bottom: 40px;
}

.sepa-phone h2{
	margin-bottom: 16px;
}
.sepa-phone p{
	margin-bottom: 8px;
}
.sepa-phone .CTA{
	margin-top: 32px;
}

/*Roadmap*/
.roadmap{
	background: url("../img/svg/roadmap.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	padding: 240px 0 230px;
	position: relative;
	top: -240px;
}
.roadmap .row div:last-child{
	width: auto;
	padding: 40px;
	box-shadow: var(--shadow);
	background-color: white;
	border-radius: 16px;
}
.roadmap h2{
	margin-bottom: 16px;
}
.roadmap .row div{
	width: 32%;
}
.roadmap .row div img{
	display: block;
	margin: 0 auto;
	width: 40%;
}
.roadmap .row:first-child div img{
	width: 80%;
}
.roadmap .row div:last-child{
	width: 56%;
}
.roadmap .row div:last-child *{
	width: 100%;
}
.roadmap .container .row:nth-child(2){
	margin: 160px 0;
	flex-direction: row-reverse;
}

/*composante d'alignement inférieur de la page*/
.upup{
	position: relative;
	top: -310px
}
/*Séparateur 2*/
.sepa-sepa{
	background: url("../img/svg/sepa-2-xl.svg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 584px;
	margin-bottom: 160px;
	display: flex;
	align-items: center;
}
.sepa-sepa .container * {
	text-align: center;
}
.sepa-sepa .container div{
	width:  auto;
	margin:  0 auto;
}
.sepa-sepa h2{
	margin-bottom: 16px;
}
.sepa-sepa h3{
	margin-bottom: 40px;
}

/*phones*/
.phones h2~h3, .phones h2{
	text-align: center;
}
.phones h2{
	margin-bottom: 16px;
}
.phones .row{
	margin-top: 80px;
}
.buttons{
	width: 64%;
}
.buttons div.active{
	background-color: white;
	box-shadow: var(--shadow);
}
.buttons div{
	padding: 40px;
	background-color: var(--lighter-lighter-blue);
	border-radius: 16px;
	transition: all .4s ease-in-out;
	cursor: pointer;
}
.buttons div:nth-child(2){
	margin: 24px 0;
}
.buttons h3{
	margin-bottom: 16px;
}

.imgs{
	width: 32%;
	position: relative;
}
.imgs div:not(#img-0){
	display: flex;
	justify-content: flex-end;
	position: absolute;
	top: 0;
	opacity: 0;
	transition: all .4s ease-in-out;
}
.imgs div.active:not(#img-0){
	opacity: 1;
}
.imgs img{
	width: 80%;
}
.phones .mobile{
	display: none;
}

/*meta-sepa*/
.meta{
	width: 100%;
	margin: 160px 0;
}
.meta div:last-child{
	transform-origin: center;
	transform: rotate(180deg)
}
.meta div:not(:nth-child(2)){
	width: 32%;
}
.meta div:not(:nth-child(2)) img{
	width: 100%;
}

/*testimonies*/
.testimonies .row div{
	width: 16%;
	position: relative;
}
.testimonies .row div div{
	width: 100%;
	margin-top: 16px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	overflow: hidden;
}
.testimonies img{
	width: 100%;
}
.testimonies .row p{
	margin: 0 auto;
	position: absolute;
	z-index: 1;
	padding: 8px;
	background-color: white;
	border-radius: 24px;
	box-shadow: var(--slight-shadow);
}

.testimonies .container .revolution{
	width: 64%;
	margin: 40px auto;
	padding: 40px;
	background-color: white;
	border-radius: 16px;
	box-shadow: var(--shadow);
}
.testimonies .container .revolution h2{
	margin: 0 auto 24px;
	text-align: center;
}
.testimonies .container .revolution div{
	width: 100%;
	display: flex;
	justify-content: center;
}
.testimonies .row:first-child div:nth-child(2n+1){
	padding-top: 24px;
}
.testimonies .row:last-child > div:nth-child(2n){
	padding-top: 50px;
}


		/*Responsive tablette*/
@media screen and (max-width: 1050px){
/*Bannière*/
	.hero{
		height: 1000px;
		position: relative;
		background: radial-gradient(315.94% 187.46% at -15.81% -16.68%, #FFF 0%, #F7E6D0 100%);
	}
	.hero .container{
		align-content: flex-start;
		padding-top: 160px;
	}
	.hero .container div:first-child{
		width: 100%;
		max-width: 2000px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.hero h1{
		width: 100%;
		margin: 0 auto 24px;
		text-align: center;
		color: var(--dark-blue);
	}
	.hero .container div:first-child h4{
		color: var(--dark-blue);
		text-align: center;
		margin: 0 auto;
	}
	.controls{
		display: none;
	}
	.controls.mobile{
		width: 100%;
		max-width: 2000px;
		border-radius: 0 40px 0 40px;
		position: absolute;
		bottom: -40px;
		column-gap: 40px;
		display: block;
		display: flex;
		justify-content: center;
	}
	.controls img{
		width: 64px;
	}
	.controls h3{
		text-align: center;
	}
	.mobile-hero{
		display: block;
		width: 100%;
		position: absolute;
		bottom: 0;
	}
	.mobile-hero  div{
		width: 320px;
		position: relative;
		margin: 0 auto;
	}
	.mobile-hero img{
		width: 80%;
		transform-origin: center;
		transform: rotate(8deg);
	}
	.mobile-hero .conv-anim{
		transform-origin: right;
		transform: scale(0.72);
		border-radius: 16px;
		overflow: hidden;
		box-shadow: var(--shadow);
		position: absolute;
		right: -80px;
		bottom:96px;
		height: auto;
	}
	
	
	
/*Séparateur*/
	.sepa-phone{
		display: none;
	}

/*Roadmap*/
	.roadmap{
		top: 0;
		background: url("../img/svg/roadmap_mobile.svg");
		background-repeat: no-repeat;
		background-position: center;
	}
	.roadmap .row{
		flex-wrap: wrap;
	}
	.roadmap .row div, .roadmap .row div:last-child{
		width: 80%;
		margin: 0 auto;
	}
	.roadmap .row div:first-child img{
		height: 184px;
		margin-bottom: 40px;
	}

/*UpUp*/
	.upup{
		top: -80px;
	}
/*Séparateur 2*/
	.sepa-sepa .container{
		width: 80%;
	}
/*How*/
	.phones h2{
		width: 80%;
		margin: 0 auto 16px;
	}
	.phones .row{
		display: none;
	}
	.phones .mobile{
		width: 80%;
		display: block;
		margin: 80px auto 160px;
	}
	.phones .mobile > div{
		width: 80%;
		aspect-ratio: 4/2;
		margin: 0 auto;
		padding: 40px;
		background-color: white;
		box-shadow: var(--shadow);
		overflow: hidden;
		border-radius: 16px;
		position: relative;
	}
	.phones .mobile div{
		width: 100%;
	}
	.phones .mobile div div{
		width: 64%;
	}
	.phones .mobile h3{
		margin-bottom: 16px;
	}
	.phones .mobile img{
		position: absolute;
	}
	.phones .mobile > .home {
		margin: 40px auto 0;
	}
	.bob img{
		width: 40%;
		top: 0;
		right: 0;
	}
	.home img{
		width: 64%;
		top: 40px;
		right: -80px;
	}
	
/*Meta*/

	.meta div:nth-child(2){
		width: 24%;
	}
	.meta div:nth-child(2) img{
		width: 100%;
	}
/*Témoignages*/

	.testimonies .row > div:last-child{
		display: none;
	}
	.testimonies .row{
		width: 80%;
		display: block;
		margin: 0 auto;
	}
	.testimonies .row > div{
		width: 100%;
		display: flex;
	}
	.testimonies .row div div{
		width: 128px;
	}
	.testimonies .row:first-child > div:nth-child(2), .testimonies .row:last-child > div:first-child{
		justify-content: flex-end;
	}
	.testimonies .row:first-child > div:first-child p, .testimonies .row:last-child > div:nth-child(2) p{
		left: 40px;
	}
	.testimonies .row:first-child > div:nth-child(2) p, .testimonies .row:last-child > div:first-child p{
		right: 40px;
	}
	
/*FAQ*/
	.faq{
		display: none;
	}
}

		/*Responsive Mobile*/
@media screen and (max-width: 800px){
/*Roadmap*/
	.roadmap .row div, .roadmap .row div:last-child{
		width: 100%;
	}
	
/*How*/
	.phones .mobile{
		width: 100%;
	}
}

@media screen and (max-width:650px){
	/*Hero*/
	.mobile-hero .conv-anim{
		transform-origin: center;
	}
	.mobile-hero div img{
		transform: translatex(-40px) rotate(8deg);
	}
	/*How*/
	.phones .mobile div{
		aspect-ratio:5/3;
	}
	.phones .mobile p{
		height: 0;
		opacity: 0;
		text-indent: 999em;
	}
	/*Testimonies*/
	.testimonies .container .revolution{
		width: 100%;
	}
	
}