/***** banner : texte + photos *****/
.banner 								{ position: relative; overflow: hidden; padding: 140px 0 40px 0;}	
.banner:before 				            { position: absolute; left: 0; right :50%; bottom: 0; top:-1200px; transform: translateX(-50%); background:var(--bgColorLight); z-index: -1; transition: none; content: ""; border-radius:50%; width: 1600px; height: 1600px}
.banner .container						{ display: grid; grid-template-columns: 1fr 60%; grid-gap: 80px; align-items: center;}
.banner .img   							{ position: relative; z-index: 5;}
.banner .img picture 					{ position: relative; display: block;}
.banner .img img  						{ width: 100%; max-height: 700px; height: auto; object-fit: cover; position: relative; display: block; border-radius: var(--imgRadius);}
.banner .txt 							{ position: relative; text-align: right;}
.banner .txt p							{ display: block; margin-bottom: 30px}


.banner .txt .wrap li                   { position: relative; padding-left: 35px; line-height: 35px; margin: 10px 0; font-size: 20px;}
.banner .txt .wrap  					{ max-width: none; text-align: left;}
.banner .txt .wrap>:first-child			{ margin-bottom: 5px;}
/*.banner .txt .wrap .titre_main  		{ display: none;}
.banner .txt .wrap .titre_main span	    { color:var(--mainColor2);}
.banner .txt .wrap .titre_main:before  	{ display: none;}*/
.banner .txt .wrap .sous_titre  		{ font-size:40px; line-height: 48px}


.banner .slider   						{ width: 100vw; overflow: hidden; max-height: 700px; border-radius:20px 0 0 20px}
.banner .slider .slick-slide			{ width: 55vw; max-width: 1050px; margin-right: 20px;}
.banner .slider_nav   					{ position: absolute; left:20px; bottom: 20px; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0}

@media (max-width:1366px) {
.banner .container						{ grid-gap: 60px;}
.banner .txt .wrap .sous_titre          { font-size: 35px; line-height: 44px;}
}

@media (max-width:1200px) {
.banner 								{ padding-top: 150ox; padding-bottom: 0;}
.banner .txt .wrap .titre_main  		{ display: block; text-transform: uppercase; font-weight: 800; margin: 0; padding: 0; font-size: 50px}
.banner:before							{ left: 0; right: 0; bottom:50%}
.banner .container						{ grid-gap: 40px; grid-template-columns: 1fr;}
.banner .img   							{ grid-area: 1;}
.banner .txt 							{ width: 90vw;}
.banner .txt .wrap .sous_titre  		{ font-size:30px}
}

@media (max-width:1000px) {
.banner 								{ padding-top: 100px;}
.banner .container						{ grid-gap: 50px;}
.banner .img img  						{ border-radius: 0;}
.banner .txt .wrap   					{ text-align: left;}

.banner .slider   						{ margin-left: -5vw; border-radius:0}
.banner .slider .slick-slide			{ width: 100vw; margin-right: 0;}
.banner .slider_nav   					{ display: none;}
}
@media (max-width:700px) {
.banner 								{ padding-top: 100px; }
.banner .container						{ grid-gap: 30px;}
.banner:before							{ display: none}
.banner .txt .wrap  					{ background-color:#fff}

.banner .txt .wrap a  					{ width:100%; text-align: center}
.banner .txt .wrap .titre_main  		{ font-size: 30px;}
.banner .txt .wrap .sous_titre  		{ margin:10px 0; font-size: 20px; line-height: 28px}
.banner .txt .wrap li                   { font-size: 16px;}
.banner .txt .wrap ul                   { margin: 20px 0 0 0 }

}

/* custom 2 img */
.banner .img.two .img_2 				{ position: absolute; left: 100%; top: 0; bottom: 0; margin-left: 20px;}
.banner .img.two .img_2 img				{ width: auto; height: 100%;}

@media (max-width:1400px) {
.banner .img.two .img_2 				{ display: none;}
}
@media (max-width:1200px) {
.banner .img.two .img_1 img				{ aspect-ratio: 3/2;}
}
@media (max-width:1000px) {
.banner .img.two .img_1 				{ margin: 0 -5vw;}
.banner .img.two .img_1 img				{ aspect-ratio: 3/2; border-radius: 0;}
}




/***** quote : txt + img *****/
.quote_txt_img 											{ position: relative;}
.quote_txt_img .container	                        	{ align-items: center; position: relative; text-align: center;}
.quote_txt_img .container .item							{ position: relative;}
.quote_txt_img .container .logos					    { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; position: relative; justify-items:center; margin:50px auto 0 auto; width: max-content;}
.quote_txt_img .container .logos .icon					{ background: var(--bgColorLight); display: block; padding: 20px; line-height: 0; border-radius: var(--linkRadius); width: 100%; text-align: center;}
.quote_txt_img .container .logos .icon img 				{ filter: brightness(0);}
.quote_txt_img .container p               				{ margin-bottom: clamp(10px, 2vw, 15px);}
.quote_txt_img .container .sous_titre			        { position: relative;}
.quote_txt_img .container .sous_titre:before			{ position: absolute; left: 50%; top: 100%; margin-top: 8px; width: 50px; height: 3px; background: var(--mainColor4); content: ""; transform: translate(-50%,50%)}


@media (max-width:1200px) { 
.quote_txt_img .container	                        	{ text-align: left;}
.quote_txt_img .container .sous_titre:before			{ display: none}
.quote_txt_img .container .logos					    { width: auto}
}


@media (max-width:1000px) { 
.quote_txt_img .container .logos .icon img 				{ width: 100px;}
.quote_txt_img .container .logos					    { margin: 50px 0 0 0; grid-gap: 10px; grid-template-columns: repeat(2, 1fr); }
.quote_txt_img .container .logos .icon					{ padding: 10px;}
}



/* link cta v1 : icon + arrow */
.link.cta_v1						{ height: auto; padding: 0 80px 0 30px; text-align: left; width: 100%}
.link.cta_v1:after 					{ width: 20px; height: 100%; background: url("../images/arrow_link.svg") 100% 50% no-repeat; position: absolute; right: 30px; top: 0; content: "";}
.link.cta_v1>span 					{ height: 80px; display: grid; align-items: center; position: relative; padding: 10px 0 10px 60px; font-size: 18px; line-height: 20px;}
.link.cta_v1>span:after				{ width: 30px; height: 100%; background: url("../images/devis_v1.svg") 50% / contain no-repeat; position: absolute; left: 0; top: 0; content: "";}
.link.cta_v1 i 						{ font-style: normal; font-size: 12px; display: block; padding-bottom: 2px;}



/***** card item : img + txt */

.card_item_v1								{ overflow: hidden; position: relative; text-align: left}
.card_item_v1 .wrap							{ padding: 40px; background: #fff; border-radius:  0 0 20px 20px}
.card_item_v1 img 							{ display: block; margin: 0; width: 50px; height: 50px}
.card_item_v1 img:not(.icon)				{ width: 100%; height: auto; aspect-ratio: 5/3; object-fit: cover; margin-bottom: -15px; border-radius: 20px 20px 0 0}
.card_item_v1 .sous_titre 					{ margin: 20px 0 10px 0;}
.card_item_v1 .sous_titre:before			{ position: absolute; left: 0; top: 100%; margin-top: 8px; width: 50px; height: 3px; background: var(--mainColor4); content: "";}
.card_item_v1 p								{ margin: 20px 0;}
.card_item_v1 .link.fullw 					{ width: 100%; padding: 0;}
.card_item_v1 .link							{ width: 100%; text-align: center;}


@media (max-width:1200px) {
.card_item_v1 .wrap							{ padding: 30px;}
}
@media (max-width:700px) {
.card_item_v1 .wrap							{ padding: 30px; border-radius:  0 0 10px 10px}
.card_item_v1 img:not(.icon)				{ border-radius: 10px 10px 0 0}

}


/***** slider services v1 *****/
.slider_services  										{ position: relative; overflow: hidden;}
.slider_services:before	 						        { position: absolute; width: 100%; right :0; bottom: -60px; top:40%; background:var(--bgColorLight); z-index: -1; transition: none; content: ""; border-radius:0;}
.slider_services .slider_wrap  							{ position: relative; text-align: right;}
.slider_services .slider  								{ margin: 25px -30px 25px 0; position: relative;}
.slider_services .slider .slick-list 					{ padding-bottom: 40px;}
.slider_services .slider .slick-slide 					{ margin-right: 30px; opacity: 0; visibility: hidden; transition-duration: 500ms;}
.slider_services .slider .slick-slide .blc				{ opacity: 0; visibility: hidden; transition-duration: 500ms;}
.slider_services .slider .slick-active .blc 			{ opacity: 1; visibility: visible;}
.slider_services .slider .slick-active  			    { opacity: 1; visibility: visible;}
.slider_services .slider_nav 							{ position: absolute; right: 0; top: -70px;}

@media (max-width:700px) {
.slider_services .slider_nav 							{ top: -60px;}
.slider_services .slider .slick-slide .blc				{ opacity: 1;}
}



/***** moving img *****/
.moving_img									{ position: relative; overflow: hidden; padding: 20px 0;}
.moving_img .row 							{ width: auto; display: flex;}
.moving_img .row .grid 						{ width: auto; display: flex; animation: moving_img 80s linear infinite;}
.moving_img .row .grid div 					{ padding: 0 10px;}
.moving_img .row .grid img 					{ width: auto; height: 580px; display: block; object-fit: cover; transition: all 300ms ease-in-out; border-radius: var(--imgRadius)}
.moving_img .link							{ display: block; margin: 50px auto; width: fit-content; }

@keyframes moving_img {
0%											{ transform: translate(0, 0);}
100% 										{ transform: translate(-100%, 0);}
}

@media (max-width:1600px) {
.moving_img .row .grid div 					{ padding: 0 15px;}
.moving_img .row .grid img 					{ height: 420px;}
}
@media (max-width:1400px) {
.moving_img .row .grid img 					{ height: 400px;}
}
@media (max-width:1200px) {
.moving_img									{ margin-top: 40px;}
.moving_img .row .grid div 					{ padding: 0 10px;}
.moving_img .row .grid img 					{ height: 380px;}
}
@media (max-width:1000px) {

.moving_img .row .grid img 					{ height: 350px;}
}
@media (max-width:700px) {
.moving_img .row .grid div 					{ padding: 0 7px;}
.moving_img .row .grid img 					{ height: 60vw; max-height: 350px;}
	
}


/***** Atouts *****/

.atouts_icons .grid						    { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px; align-items: center; align-items: start; }
.atouts_icons .grid .img				    { width: 120px; height: 120px; background: var(--bgColorLight); position: relative; display: block; text-align: center; border-radius: 50%; padding: 0; display: grid; align-items: center; justify-content: center; margin: 0 auto; }
.atouts_icons .grid .item p			        { font-size: 20px; font-weight: 800; position: relative; display: block; line-height: 28px; text-align: center; color: var(--mainColor3); margin: 30px auto 20px auto; text-transform: uppercase}
.atouts_icons .grid .item span			    { font-size: 16px; display: block; text-transform: none; font-weight: 400; color: #222}



@media (max-width:1000px) {
.atouts_icons .grid						    { grid-template-columns: repeat(2, 1fr); grid-gap: 10px; }
.atouts_icons .grid .item p			        { font-size: 16px;}

}

@media (max-width:500px) {
.atouts_icons .grid						    { grid-template-columns: 1fr}

}
