/***** banner
.banner 								{ position: relative; padding-top: 140px; margin-top: 0;}
.banner:before                          { content: ""; position: absolute; left: 50%; top: 0; right:0; bottom:-10%; background: var(--bgColorLight); z-index: -1; visibility: visible; transition: none; overflow: hidden;}
.banner .container						{ display: grid; grid-template-columns: 1fr 60%; grid-gap: 60px; align-items: center;}
.banner .img   							{ position: relative; z-index: 5; }
.banner .img img, .banner .img video  	{ width:100%; height: auto; display: block; object-fit: cover; position: relative; display: block; aspect-ratio:10/7; border-radius: var(--imgRadius);}
.banner .txt 							{ position: relative; padding-bottom: 10px;}
.banner .txt .wrap						{ max-width: 580px;}
.banner .txt p  						{ font-size: 18px; margin: 20px 0 30px 0; max-width: 480px;}


@media (max-width:1400px) {
.banner:before                          { left: 60%;}
.banner .container						{ grid-template-columns: 1fr 50%; grid-gap: 40px; align-items: center;}

}
@media (max-width:1200px) {
.banner 								{ padding-top: 120px;}
.banner .container						{ grid-gap: 40px;}
.banner .img .img_1 img					{ aspect-ratio: 5/4;}
}
@media (max-width:1000px) {
.banner 								{ padding-top: 100px;}
.banner:before                          { display:none;}
.banner .container						{ grid-template-columns: 1fr;}
.banner .img   							{ grid-area: 1;}
.banner .img .img_1 					{ margin: 0 -5vw;}
.banner .img .img_1 img					{ aspect-ratio: 3/2; border-radius: 0;}
.banner .txt .wrap   					{ text-align: center; max-width: 100%}
.banner .txt p  						{ max-width: 100%;}
.banner .img video  	                { width:100%; height: auto; aspect-ratio:inherit;}
.link.devis                             { margin: 0 auto;}
}
@media (max-width:700px) {
.banner 								{ padding-top: 70px;}
.banner .container						{ grid-gap: 30px;}
.banner .txt:before 					{ width: 100vw; left: -5vw; bottom: 30px;}
} *****/



.banner 								{ position: relative; padding-top: 160px; margin-top: 0;}
.banner:before                          { content: ""; position: absolute; left: 50%; top: 0; right:0; bottom:-10%; background: var(--bgColorLight); z-index: -1; visibility: visible; transition: none; overflow: hidden;}
.banner .container						{ display: grid; grid-template-columns: 1fr 60%; grid-gap: 80px; align-items: center;}
.banner .slider img                     { width: 100%; height: auto; display: block; object-fit: cover; }
.banner .txt 							{ position: relative; padding-bottom: 10px;}
.banner .txt .wrap   					{ max-width: 580px}
.banner .txt p  						{ font-size: 18px; padding: 20px 0 30px 0;}


@media (max-width:1400px) {
.banner .container						{ grid-template-columns: 1fr 50%; grid-gap: 40px; align-items: center;}
.banner:before                          { left: 60%;}
}

@media (max-width:1200px) {
.banner 								{ padding-top: 100px;}
.banner .container						{ grid-gap: 40px;}
.banner .img .img_1 img					{ aspect-ratio: 5/4;}
}

@media (max-width:1000px) {
.banner .container						{ grid-template-columns: 1fr;}
.banner:before                          { display:none;}
.banner .img   							{ grid-area: 1; overflow: hidden;}
.banner .txt .wrap   					{ text-align: center;  max-width: 100%}
.banner .slider img                     { width: 100%; height: 40vh;}
}

@media (max-width:700px) {
.banner 								{ padding-top: 70px;}
.banner .container						{ grid-gap: 30px;}
.banner .txt p  						{ font-size: 16px; padding: 10px 0 20px 0;}
}



/***** quote */

.quote_txt_img 											{ position: relative;}
.quote_txt_img .container	                        	{ display: grid; grid-template-columns: auto 1fr; grid-gap: 0 60px; align-items: center; position: relative;}
.quote_txt_img .container.align_top                		{ align-items: start;}
.quote_txt_img .container .item							{ position: relative;}
.quote_txt_img .container .item :last-child 			{ margin-bottom: 0;}
.quote_txt_img .container p               				{ margin-bottom: 15px;}
.quote_txt_img .container .link							{ margin-top: 10px;}
.quote_txt_img .container :last-child					{ margin-bottom: 0;}
.quote_txt_img 	a										{ color: var(--mainColor1)}



@media (max-width:1200px) { 
.quote_txt_img .container	                        	{ grid-gap: 0 40px;}
}
@media (max-width:700px) { 
.quote_txt_img 											{ margin: 20px 0;}
.quote_txt_img .container	                        	{ grid-template-columns: 1fr; grid-gap: 25px; text-align: left;}
.quote_txt_img .container p               				{ margin-bottom: 10px;}
}

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

.card_item_v1								{ border-radius: var(--allImgBR); background: #fff; overflow: hidden; position: relative; text-align: left; box-shadow: 40px 40px 40px rgba(0, 0, 0, 0.05);}
.card_item_v1 .wrap							{ padding: 60px}
.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;}
.card_item_v1 .sous_titre 					{ margin: 10px 0;}
.card_item_v1 p								{ margin-bottom: 20px;}
.card_item_v1 .link.fullw 					{ width: 100%; padding: 0;}
.card_item_v1_number						{ background-color: var(--bgColorLight); width: 50px; text-align: center; color: var(--bgColorDark); font-size: 20px; padding: 25px 10px; line-height: .65; z-index: 0; display: block;}
.card_item_v1 .link							{ width: 100%; text-align: center; display: flex; align-items: center; line-height: normal; justify-content: center;}


@media (max-width:1200px) {
.card_item_v1 .wrap							{ padding: 30px;}
}
@media (max-width:700px) {
.card_item_v1 .wrap							{ padding: 20px;}
.card_item_v1 .sous_titre 					{ margin: 0 0 10px 0;}
}

/***** grid bloc */

.grid_bloc	 								{ position: relative;} 
.grid_bloc:before	 						{ position: absolute; left: 0; right: 0; top: 15%; bottom: 15%; background-color: var(--bgColorLight); background-attachment: fixed; transition: none; z-index: -1; content: ""; overflow:"hidden"} 
.grid_bloc .container						{ display: grid; grid-gap: clamp(10px, 5vw, 30px); text-align: center;}
.grid_bloc .titre_main	 					{ font-size: 40px; line-height: 48px; margin-bottom: 60px;}

@media (max-width:1200px) {
}
@media (max-width:700px) {
.grid_bloc .container						{ text-align: left;}
.grid_bloc:before	 						{ left: 0; right: 0; top: 60px; bottom: -40px; background-color: var(--bgColorLight);}  
.grid_bloc .titre_main	 					{ font-size: 30px; line-height: 38px; margin-bottom: 20px;}
}


/* custom colums */
.grid_bloc.col_2 .container					{ grid-template-columns: repeat(2, 1fr);}
.grid_bloc.col_3 .container					{ grid-template-columns: repeat(3, 1fr);}
.grid_bloc.col_4 .container					{ grid-template-columns: repeat(4, 1fr);}

@media (max-width:1200px) {
.grid_bloc.col_4 .container					{ grid-template-columns: 1fr 1fr;}
.grid_bloc.col_2 .container					{ grid-template-columns: 1fr 1fr;}

}
@media (max-width:1000px) {
.grid_bloc.col_4 .container					{ grid-template-columns: 1fr;}
.grid_bloc.col_2 .container					{ grid-template-columns: 1fr;}
}
@media (max-width:700px) {
.grid_bloc	 								{ margin:10px 0 0 0;} 					
}


/***** Activités *****/
.atouts .grid						{ display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; align-items: center; align-items: start; }
.atouts .grid .item				{ position: relative; display: block; text-align: center; }
.atouts .grid .item img			{ position: relative; display: block; margin: 25px auto; width: 50px}
.atouts .grid .img:before	        { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 110px; height: 110px; border-radius: 0; background:var(--bgColorLight); transition: none; z-index: -1; content: "";}
.atouts .grid .item p			    { font-size: 18px; font-weight: 800; position: relative; display: block; line-height: 20px; text-align: center; color: var(--mainColor1); margin: 40px auto 20px auto; text-transform: uppercase}
.atouts .grid .item span			{ position: relative; display: block; color: var(--mainColor2); margin-top: 5px; text-transform: none; font-weight: 500;}


@media (max-width:1200px) {
.atouts							{ margin: 90px 0 100px; }
}

@media (max-width:1000px) {
.atouts							{ margin: 70px 0 80px; }
.atouts .grid						{ grid-template-columns: repeat(2, 1fr); grid-gap: 40px; }
.atouts .grid .item img			{ width: 50px; margin: 15px auto;  }
.atouts .grid .img:before	        { width: 90px; height: 90px;}
.atouts .grid .item p           {font-size: 15px;}
}

@media (max-width:700px) {
.atouts							{ margin: 40px 0 60px; }
.atouts .grid						{ grid-gap: 20px; }
}