/* =============================================
    INDEX
================================================ */

/* =============================================
    SERVICES
================================================ */

.sectionServices
{
	padding-top: 150px;
	padding-bottom: 100px;
}
	.sectionServices .row
	{
		padding-top: 100px;
	}

h3.sectionTitle
{
	color: #323A3E;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 2.8em;
	line-height: 100%;
	position: relative;
	margin: 0;
}
	h3.sectionTitle span
	{
		color: #58DE9B;
	}
	
		.sectionServices h3.sectionTitle:before
		{
			position: absolute;
			content: '';
			left: 0;
			right: auto;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 30%;
			height: 1px;
			background: #323A3E;
		}
		
		.sectionServices h3.sectionTitle:after
		{
			position: absolute;
			content: '';
			left: auto;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 30%;
			height: 1px;
			background: #323A3E;
		}

.serviceBox
{
	padding: 40px;
	box-shadow: 0 10px 35px rgba(50, 58, 62, .2);
/* 	cursor: pointer; */
/* 	height: 100%; */
	height: inherit !important;
}

	.sectionServices .titre
	{
		padding: 30px 0;
		font-size: 20px;
		font-weight: 600;
		color: #323A3E;
		transition: all .2s;
	}
	
	.sectionServices .contenu
	{
		line-height: 2;
		transition: all .2s;
	}
	
	.serviceBoxImg
	{
		top: 0; left: 0; right: 0; bottom: 0;
		z-index: -2;
		opacity: 0;
		transition: all .2s;
	}
	.serviceBoxFond
	{
		top: 0; left: 0; right: 0; bottom: 0;
		z-index: -1;
		background: rgba(50, 58, 62, .35);
		opacity: 0;
		transition: all .2s;
	}
	
	.serviceBox:hover .serviceBoxImg, .serviceBox:hover .serviceBoxFond
	{
		opacity: 1;
	}
	.serviceBox:hover, .serviceBox:hover .titre
	{
		color: #fff;
	}
	.serviceBox:hover svg g
	{
		stroke: #fff;
	}
	
	
	.plusService a
	{
		color: #58DE9B;
		font-weight: 600;
	}
	
	.serviceBox:hover .plusService a
	{
		color: #fff;
	}
	
	
	.pageApropos .card .card-header:before
	{
		content: "\f067";
	    font-family: "Font Awesome 5 Pro";
	    font-weight: 900;
	    width: 35px;
	    height: 35px;
	    line-height: 35px;
	    background: rgba(88, 222, 155, .6);
	    position: absolute;
	    top: 0;
	    right: 0;
	    left: auto;
	    bottom: 0;
	    margin: auto;
	    font-size: 14px;
	    color: #fff;
	    text-align: center;
	    transition: all 0.2s;
	    cursor: pointer;
	}
	
	.pageApropos .card .card-header.open:before
	{
    	content: "\f068";
	}
	
	.pageApropos .card-header:hover:before
	{
		background: rgba(88, 222, 155, 1);
	}
	.btn-link
	{
		text-decoration: none !important;
	}
	
/* =============================================
    ETAB
================================================ */
.sectionEtab
{
	padding-top: 100px;
	padding-bottom: 100px;
}

	.slickEtab
	{
		border-right: 1px solid #323A3E;;
	}

	.etabBox
	{
		padding: 65px 50px;
		font-weight: 300;
		line-height: 2;
	}
		.etabBoxContenu
		{
			padding-top: 50px;
			padding-bottom: 10px;
		}

.sectionEtab h3.sectionTitle.titleHide
{
	color: transparent !important;
}
		
.titreAbsoluteSectionEtab
{
	top: 65px;
	right: 50px;
	left: calc(50% + 50px);
	bottom: auto;
	margin: auto;
}

.sectionEtab .slick-dots
{
	width: 50%;
	left: 50%;
	bottom: 0;
}
	.slick-dots li button:before
	{
	    border: 1px solid #707070;
	    border-radius: 100%;
	    color: #fff;
	}
	.sectionEtab .slick-dots li.slick-active button:before, .slickService .slick-dots li.slick-active button:before
	{
		background: #58DE9B;
		border: 1px solid #58DE9B;
		color: transparent;
	}
	.slick-dots li button:hover:before, .slick-dots li button:focus:before
	{
		border: 1px solid #58DE9B;
	}

.sectionEtabFondImg
{
	top: 0; left: 0; right: 0; bottom: 0; 
	height: 100%;
	width: 100%;
	margin: auto;
	background: rgba(50, 58, 62, .35);
	z-index: 0;
}

	.sectionEtab .etabName
	{
		position: relative;
		z-index: 5;
		color: #fff;
		font-weight: 800;
		font-size: 2em;
		padding: 0 35px;
	}
	 .sectionEtab .etabName span
	 {
		 font-weight: 500;
		 font-size: .7em;
	 }
	 
	 .etabArrow
	 {
		 top: auto;
		 left: auto;
		 right: 0;
		 bottom: 0;
		 background: #fff;
		 border-right: 1px solid #323A3E;
		 border-bottom: 1px solid #323A3E;
	 }
	 .etabArrow:before
	 {
		 position: absolute;
		 content: '';
		 top: 0;
		 bottom: 0;
		 left: 0;
		 right: 0;
		 margin: auto;
		 height: 80%;
		 width: 1px;
		 background: #323A3E;
	 }
	 	.etabArrow i
	 	{
		 	padding: 20px 25px;
		 	cursor: pointer;
	 	}
	 		.etabArrow i:hover
	 		{
		 		transform: scale(1.1);
	 		}
	
	
/* =============================================
    ACTU
================================================ */	

.sectionActu
{
	/* padding-top: 100px;
	padding-bottom: 200px; */
}

.sectionActu h3.sectionTitle
{
	padding-bottom: 100px;
}

.sectionActu .rowActu
{
/* 	padding-left: 100px; */
	border-left: 1px solid #323A3E;
	margin-bottom: 100px;
}
	.sectionActu .topActu
	{
		color: #fff;
		font-size: 1.5em;
		font-weight: 800;
		height: 200px;
		position: relative;
		padding: 15px;
		min-height: 200px;
	}
	
	
	.sectionActu .bottomActu
	{
		border-left: 1px solid #323A3E;
		border-right: 1px solid #323A3E;
		border-bottom: 1px solid #323A3E;
		padding: 15px;
		/* height: 100%; */
	}
	
	.sectionActu .consulter
	{
		width: 60px;
	}
		.sectionActu .consulter svg, .sectionActu .consulter svg g
		{
/* 			height: 100%; */
			width: 100%;
			height: inherit !important;
		}

	.sectionActuBottom:after
	{
		position: absolute;
		height: 1px;
		width: calc(100% - 350px);
		right: 0;
		left: auto;
		top: 0;
		bottom: 0;
		margin: auto;
		content: '';
		background: #323A3E;
		z-index: -1;
	}
	
.bottomActuDescr
{
	width: calc(100% - 60px);
	padding-right: 5px;
	height: inherit !important;
}	


/* =============================================
    MEDIA QUERIES
================================================ */	

@media screen and (max-width: 1745px)
{
	h3.sectionTitle
	{
		font-size: 2.5em;
	}
}

@media screen and (max-width: 1444px)
{
	h3.sectionTitle
	{
		font-size: 2em;
	}
	.sectionServices
	{
		padding-top: 100px;
		padding-bottom: 50px;
	}
	.sectionEtab
	{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	/* .sectionActu
	{
		padding-top: 50px;
		padding-bottom: 100px;
	} */
	.sectionActu h3.sectionTitle
	{
		padding-bottom: 50px;
	}
}

@media screen and (max-width: 992px)
{
	h3.sectionTitle.titreAbsoluteSectionEtab
	{
		display: none !important;
	}
	.slickEtab
	{
		border: none;
	}
	.sectionActu .rowActu
	{
		padding-left: 0;
		border: none;
	}
	.sectionActu h3.sectionTitle
	{
		position: relative;
	}
		.sectionActu h3.sectionTitle:before
		{
			position: absolute;
			content: '';
			top: -25px;
			left: 0;
			right: 0;
			bottom: auto;
			width: 100%;
			height: 1px;
			background: #323A3E;
		}
		.sectionActu h3.sectionTitle:after
		{
			position: absolute;
			content: '';
			top: auto;
			left: 0;
			right: 0;
			bottom: 25px;
			width: 100%;
			height: 1px;
			background: #323A3E;
		}
	.sectionActu .rowActu
	{
		margin-bottom: 50px;
	}
	.sectionActuBottom:after
	{
		display: none;
	}
	.sectionActuBottom .bouton
	{
		margin: auto;
	}
	.sectionEtab .slick-dots
	{
		left: 0; right: 0;
		margin: auto;
		display: flex;
	}
	.sectionEtab h3.sectionTitle.titleHide
	{
		color: #323A3E !important;
	}
	
	.etabBoxContenu
	{
		text-align: justify;
	}
	.etabBox .bouton
	{
		margin: auto;
	}
	.sectionEtab .etabName
	{
		text-align: center;
		margin-top: -33%;
	}
	.etabBox
	{
		margin-top: -200px;
		background: #fff;
		box-shadow: 0 10px 35px rgba(50, 58, 62, .2);
		padding: 30px 30px;
	}
	.slideEtab
	{
		padding-bottom: 50px;
	}
}

@media screen and (max-width: 769px)
{
	.sectionServices h3.sectionTitle:before, .sectionServices h3.sectionTitle:after
	{
		width: 20%;
	}
	.scrollBottom:after
	{
		display: none;
	}
	h3.sectionTitle
	{
		font-size: 1.75em;
	}
}

@media screen and (max-width: 577px)
{
	.menuContainerMobile .menuMainItem a
	{
		font-size: 1.75em;
	}
	.titleBannerHomepage h1
	{
		font-size: 3em;
	}
	.sectionEtab .slick-dots
	{
		bottom: -25px;
	}
	h3.sectionTitle
	{
		font-size: 1.5em;
	}
	.etabBoxContenu
	{
		padding-top: 30px;
		padding-bottom: 30px;
	}
}

@media screen and (max-width: 500px)
{
	.titleBannerHomepage h1
	{
		font-size: 2.5em;
	}
	.contenuBannerHomepage, .sectionServices .titre
	{
		font-size: 16px;
	}
	h3.sectionTitle, .sectionEtab .etabName, .sectionActu .topActu
	{
		font-size: 1.25em;
	}
	.font12
	{
		font-size: 12px !important;
	}
	.etabBox .bouton a
	{
		padding: 12px 30px;
	}
	
	.bouton a
	{
		font-size: 12px;
	}
	
	.sectionServices
	{
		padding-top: 50px;
		padding-bottom: 25px;
	}
	.sectionEtab
	{
		padding-top: 25px;
		padding-bottom: 25px;
	}
	.sectionActu
	{ 
        padding-top: 75px;
	}
	.scrollBottom
	{
		display: none;
	}
	.menuContainerMobile .menuMainItem a
	{
		font-size: 1.25em;
	}
	.EtabImg
	{
		height: 400px !important;
	}
	.sectionEtab .slick-dots
	{
		width: 100%
	}
	
	#logo, #logo2
	{
/* 		width: 150px; */
	}
}

@media screen and (max-width: 413px)
{
	.titleBannerHomepage h1
	{
		font-size: 1.5em;
	}
	.serviceBox
	{
		padding: 30px;
	}
}

@media screen and (max-width: 374px)
{
	#logo, #logo2
	{
		width: 120px;
	}
	
	.etabBox
	{
		margin-left: 5% !important;
		flex: 0 0 90% !important;
		max-width: 90% !important;
		box-shadow: 0 10px 15px rgba(50, 58, 62, .2);
	}
	h3.sectionTitle
	{
		font-size: 1em;
	}
	.serviceBox
	{
		padding: 20px;
	}
	 .bouton a, .etabBox .bouton a
	{
		padding: 10px;
	}
}