/*************************************************************************************/
/*********************** S1 / TOP SLIDE INTRODUCTION***********************/
/*******************************************************************************/


.swiper-container-TopHome{
	background:$color__tchatbooster_orange;
	@media screen and (max-width: $max_size_small_tablette - 1px) {
		background:none;
		padding-bottom:40px;
	}
	position:relative;
	color:#fff;

	.swiper-slide{
		height:auto;
	}

	.swiper-bullet-pagination{
		position:absolute;
		bottom:20px;
		width:auto;
		display:flex;
		justify-content:center;
		width:100%;
		left:0px;
		z-index: 99;
		@media screen and (max-width: 1439px) {
			width:50%;
			justify-content:flex-start;
			left:40px;
		}
		@media screen and (max-width: $max_size_small_tablette - 1px) {
			left:20px;
		}
		@media screen and (max-width: $max_size_small_tablette - 1px) {
			width:100%;
			left:0px;
			justify-content:center;
			bottom:0px;
		}
		.swiper-pagination-bullet{
			width:30px;
			height:30px;
			background:none;
			position:relative;
			&:before{
				content:'';
				display:block;
				position:absolute;
				background:rgba(#fff,0.8);
				width:19px;
				height:19px;
				top:5px;
				left:5px;
				border-radius: 50%;
			}
		
			&.swiper-pagination-bullet-active{
				&:before{
					background:#fff;
				}
			}

			@media screen and (max-width: $max_size_small_tablette - 1px) {
				&:before{
					background:rgba($color__tchatbooster_orange,0.9);
				}
				&.swiper-pagination-bullet-active{
					&:before{
						background:rgba($color__tchatbooster_orange,1);
					}
				}
			}
		}

		@media screen and (max-width: 1188px) {
		
			.swiper-pagination-bullet{
				&:before{
					width:15px;
					height:15px;
				}
			}
		}

	}
}


/* Slide topHoome*/
.slide-TopHome{
	&--inner{
		display:flex;
		flex-wrap:wrap;
		overflow:hidden;
	}
	.slide-TopHome-L{
		width:50%;
		background:$color__tchatbooster_orange;

		position:relative;
		z-index:2;
		

		display:flex;
		flex-direction:column;
		justify-content:center;
		
		.wysiwyg{
			padding:90px 0px;
			padding-bottom: 90px;
			padding-left:calc((100vw - 1286px) / 2);
			padding-right:120px;
			position:relative;

			@media screen and (max-width: $max_size_big_tablette - 1px) {
				padding:70px 0px;
				padding-bottom: 60px;
			}

			@media screen and (max-width: 1386px) {
				padding:0px 0px;
				padding-left:50px;
				padding-right:10px;
			}


			.title_pasrobots{
				position:absolute;
				left:calc((100vw - 1286px) / 2);
				@media screen and (max-width: 1386px) {
					left:50px;
				}
				@include font-size(2.25);
				color:$color__tchatbooster_bleutc;
				font-family:$font__title;
				font-weight:600;

				@media screen and (max-width: 1439px) {
					@include font-size(2);
				}

				@media screen and (max-width: $max_size_small_tablette) {
					@include font-size(1.5);
					position:inherit;
					left:0px;
				}
			
			}


			p{
				font-weight:400;
				font-family:$font__title;
				@include font-size(1.75);
				line-height:1.4em;

				@media screen and (max-width: 1439px) {
					@include font-size(1.5);
				}
				@media screen and (max-width: 1024px) {
					@include font-size(1.4);
				}

				@media screen and (max-width: $max_size_small_tablette) {
					@include font-size(1.3);
				}
				@media screen and (max-width: 450px) {
					@include font-size(1);
				}


			}
		}

		svg{
			position:absolute;
			right:0px;
			right:2px;
			height:100%;
			height:calc(100% + 4px);
			width:auto;
			top:-2px;
			vertical-align:top;
			z-index:20;
			transform:translate(100%,0px);
			path{
				fill:$color__tchatbooster_orange;
			}
		}

	}
	.slide-TopHome-R{
		width:50%;
		position:relative;
		min-height:550px;
		img{
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:100%;
			object-fit: cover;
			object-position: center;
		}
	}

	.slide-TopHome-Logo{
		width:50%;
		background:$color__tchatbooster_bleuf;
		min-height:550px;
		display:flex;
		justify-content:center;
		img{
			margin:auto;
			width:250px;
		}
	}

	@media screen and (max-width: $max_size_small_tablette - 1px) {
		.slide-TopHome--inner{
			flex-direction:column;
			justify-content:flex-end;
		}
		.slide-TopHome-R,.slide-TopHome-Logo{
			width:100%;
			position:absolute;
			height:500px;
			top:0px;
		}
		.slide-TopHome-Logo{
			justify-content:flex-start;
			img{
				width:180px;
				margin-bottom:auto;
				margin-top:50px;
				
			}
		}
		.slide-TopHome-L{
			svg{
				display:none;
			}
			width:auto;
			margin-top:300px;
			margin-left:20px;
			margin-right:20px;
			border-radius:30px;
			.wysiwyg{
				padding:30px;
			}
		}
	}

	
}


.slide-TopHome{
	.slide-TopHome-L{
		transform:translate(60px, 0px);
		transition:1s 0s;
	}
	&.swiper-slide-active{
		.slide-TopHome-L{
			transform:translate(0px, 0px);
		}
	}
}


/*************************************************************************************/
/*********************** GENERATION LEADS ***********************/
/*******************************************************************************/

/* svg animation */

.fleche_leads{
	animation: 1s ease-out 1s infinite alternate move_arrow_leads;
}

@keyframes move_arrow_leads {
  from {
    transform: translate(-10px,-10px);
  }
  to {
   transform: translate(10px,10px);
  }
}


/*********************** ROW LEADS INTRO ***********************/
/*******************************************************************************/

.RowIntroSection{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	justify-content:space-between;
	&-L{
		width:percentage(760px / 1286px);
		.BigSectionTitle{
			margin-bottom:0.5em;
		}
	}
	&-R{
		width:percentage(400px / 1286px);
		text-align:right;
	}

	@media screen and (max-width: $max_size_small_tablette) {
		&-L{
			width:100%;
		}
		&-R{
			width:100%;
			margin-top:20px;

			svg{
				display:block;
				max-width:450px;
				margin:0px auto;
			}
		}
	}
}



/*********************** IMAGE / TEXTE SUR FOND ORANGE DESSUS ***********************/
/*******************************************************************************/



.RowImgTxtOn{
	position:relative;
	padding:72px 0px;
	
	@media screen and (min-width: $max_size_small_tablette + 1px) {
		.RowImgTxtOn-Img{
			position:absolute;
			width:percentage(848px / 1064px);
			height:100%;
			top:0px;
			left:0px;
			img{
				position:absolute;
				top:0px;
				left:0px;
				width:100%;
				height:100%;
				object-fit:cover;
				object-position:center;
				border-radius:30px;
			}
		}
	}

	.RowImgTxtOn-Txt{
		width:percentage(522px / 1064px);
		margin-left:auto;
		position:relative;
		z-index:2;
		border-radius:20px;
		padding:50px;

		p{
			margin:0.6em 0px;
			line-height:1.6em;
			&:first-child{
				margin-top:0px;
			}

			&:last-child{
				margin-bottom:0px;
			}
		}

	}

	@media screen and (max-width: $max_size_small_tablette) {
		padding:0px;
		.RowImgTxtOn-Img{
			position:relative;
			left:-20px;
			width:calc(100% + 40px);
			img{
				width:100%;
				border-radius:30px;
			}
		}
		.RowImgTxtOn-Txt{
			width:100%;
			padding:30px;
			position:relative;
			top:-50px;
		}
	}
}







/*********************** CHIFFRES CLES ***********************/
/*******************************************************************************/

.keynumber-container{
	@media screen and (max-width: 768px) {
		margin-top: 20px;
	}
}
	
.keynumber_item_container{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

.keynumber_item{
	text-align:center;
	width:33%;
	position:relative;

	&:last-child{
		&:after{
			display:none;
		}
	}

	&:after{
		content:'';
		display:block;
		position:absolute;
		height:48px;
		width:1px;
		background:$color__tchatbooster_orange;
		top:50%;
		right:0px;
		transform:translate(0px,-50%);
	}


	&-top{
		color:$color__tchatbooster_orange;
		font-family:$font__title;
		.big_number{
			@include font-size(6);
			font-weight:900;

			@media screen and (max-width: 1439px) {
				@include font-size(5);
			}
			@media screen and (max-width: 768px) {
				@include font-size(4);
			}
			@media screen and (max-width: 600px) {
				@include font-size(3);
			}
		}
		.litle_info{
			@include font-size(1.25);
			text-transform:uppercase;
			font-weight:900;
			@media screen and (max-width: 600px) {
				@include font-size(1);
			}
		}
	}
	&-desc{
		@include font-size(1.125);
		font-weight:700;

		@media screen and (max-width: 1024px) {
			@include font-size(1);
		}
		@media screen and (max-width: 768px) {
			
		}

		@media screen and (max-width: 600px) {
			@include font-size(0.75);
			line-height:1.4em;
			display:block;
		}
	}

	@media screen and (max-width: 768px) {
		width:50%;	
		padding:0px 10px;
		&:nth-child(2n){
			&:after{
				display:none;
			}
		}
		&:nth-child(3n){
			width:100%;
		}
	}

}



/*********************** LIVE TCHAT + SMS / ROW TXT IMG ***********************/
/*******************************************************************************/



.RowTxtImg{
	
	&-Item{
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;

		&:last-child{
			padding-bottom:0px;
		}
		@media screen and (min-width: 768px) {
			&:nth-child(2n){
				flex-direction:row-reverse;
			}
		}

		&.vcenter{
			align-items:center;
		}
	}

	&-Txt{
		width: percentage(414px / 1064px);
	}

	&-Img{
		position:relative;
		img{
			border-radius: 30px;
		}
		width: percentage(522px / 1064px);
	}

	@media screen and (max-width: 767px) {
		&-Txt{
			width: 100%;
		}

		&-Img{
			width: 100%;
			text-align:center;
			margin-top: 2em;
		}
	}
}



/*********************** ROW TOOLS ***********************/
/*******************************************************************************/

.RowToolsTop{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	align-items:center;
}

.RowTools-L{
	width: percentage(630px / 1064px);
}

.RowTools-R{
	width: percentage(372px / 1064px);
}

@media screen and (max-width: 767px) {
	.RowTools-L{
		width: 100%;
	}

	.RowTools-R{
		width: 100%;
		text-align:center;
		margin-top: 2em;

		img{
			max-width:90%;
			margin:0px auto;
		}
	}
}

.RowTools-FB{
	position:relative;
	background-size:cover;
	&-Txt{
		position:relative;
		z-index:10;
	}

	&:after{
		content:'';
		display:block;
		position:absolute;
		width:100%;
		height:100%;
		background:rgba(#000,0.3);
		z-index:8;
		top:0px;
	}
}

/*********************** ROW PRESSE ***********************/
/*******************************************************************************/

.RowPresseTop{
	color:#fff;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	
	h3{
		color:$color__tchatbooster_bleuf;
		span{
			color:#fff;
		}
	}

	&-L{
		width: percentage(478px / 1064px);
	}
	&-R{
		width: percentage(522px / 1064px);
	}

	@media screen and (max-width: $max_size_small_tablette - 1px) {
			&-L{
				width:100%;
			}
			&-R{
				width:100%;
				margin-top: 2em;
			}
	}
}

.RowTools-Article{
	margin-top:2em;
}

.PostPress{
	color:#fff;
	display:block;
	border-radius:20px;
	margin:1em 0px;
	padding:15px;
	background:rgba($color__tchatbooster_beige,0.2);
	padding-right: 20px;
	position:relative;
	padding-right: 50px;
	transition:0.35s;
	&-Title{
		display:block;
		font-weight:900;
		@include font-size(1.125);
		color:#fff;
		transition:0.35s;
		@media screen and (max-width: $max_size_small_tablette - 1px) {
			@include font-size(1);
		}
	}
	&-Desc{
		display:block;
		color:#fff;
		@include font-size(0.75);
		line-height:1.6em;
		display:block;
		font-weight:500;
		font-style: italic;
		margin-top: 0.5em;
		transition:0.35s;
	}
	i{
		font-size:30px;
	}
	.icon-next-arrow{
		position:absolute;
		top:50%;
		right:20px;
		color:$color__tchatbooster_bleutc;
		font-size:22px;
		transform: translate(0px,-50%);
		transition:0.35s;
	}

	&:hover{
		background:rgba($color__tchatbooster_beige,1);
		.PostPress-Title{
			color:$color__tchatbooster_orange;
		}	
		.PostPress-Desc{
			color:$color__tchatbooster_orange;
		}	
		.icon-next-arrow{
			color:$color__tchatbooster_orange;
				transform: translate(10px,-50%);
		}	
	}
}



/*********************** ROW CONTACT ***********************/
/*******************************************************************************/

.RowContact{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
		
	&-L{
		width:50%;

		.RowContact-Inner{
				padding-left:calc((100vw - 1286px) / 2);
				padding-right: 60px;

					@media screen and (max-width: 1386px) {
						padding-left:50px;
					}

					@media screen and (max-width: 768px) {
						padding-left: 24px;
						padding-right:24px;
					}

		}

		.RowContact-Two-method{
			margin-top:3em;
			display:flex;
			justify-content:space-between;
			
			text-align:center;

			a{
				width:47%;
			}
		}
	}

	&-R{
		width:50%;
		position:relative;

		img{
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:100%;
			object-fit:cover;
			object-position:center
		}
	}

	@media screen and (max-width: $max_size_small_tablette) {
		&-L{
			width:100%;
			order:2;
		}

		&-R{
			width:100%;
			height:200px;
			order:1;
		}
	}
}


.methodLink{
	&-Title{
		font-weight:900;
		font-family:$font__title;
		@include font-size(1.75);
		display:block;
		margin-bottom:20px;
		transition:0.35s;
		@media screen and (max-width: 768px) {
			@include font-size(1.5);
		}
	}	

	&:hover{
		.methodLink-Title{
			color:$color__tchatbooster_orange;
		}
	}
}