/***** banner *****/
.banner 									{ position: relative; padding-top: 130px;}
.banner .label                              { font: 700 13px/40px "Montserrat"; text-transform: uppercase; letter-spacing: 2px; color: var(--mainColor1); margin-bottom: 15px; display: inline-block; vertical-align: top; border-radius: 5px; background-color: var(--mainColor2); padding: 0 15px;}
.banner .inner                              { position: relative; box-shadow: 0 40px 60px 0 rgba(14,21,50,0.15); border-radius: 40px;}
.banner::before			                    { width: 90vw; height: calc(50% + 60px); background: #3a7cff; position: absolute; left: 455px; top: 0; opacity: 0.1; content: "";}
.banner picture 							{ display: block; position: relative;}
.banner picture img  						{ width: 100%; height: auto; object-fit: cover; position: relative; display: block; border-radius: 40px; filter: brightness(0.8);}
.banner .content  						    { position: absolute; left: 60px; top: 60px;}
.banner .titre_main                         { color: #fff; text-shadow: 0 0 20px rgba(41, 56, 80, 0.2);}

@media (max-width:1600px) {
.banner::before                             { left: 210px;}
}
@media (max-width:1300px) {
.banner::before                             { left: calc(245px + 5vw);}
.banner picture img  						{ border-radius: 0;}
.banner .content  						    { left: 5vw; top: 5vw;}
}
@media (max-width:1200px) {
.banner 									{ padding-top: 100px; width: 100vw; left: 50%; margin-left: -50vw;}
.banner .label                              { font-size: 12px; padding: 0 15px;}
}
@media (max-width:1000px) {
.banner picture img  						{ min-height: 60vw;}
}
@media (max-width:700px) {
.banner 									{ padding-top: 70px; border-radius: 0; background-color: var(--mainColor1Hover)}
.banner .label                              { font-size: 11px; padding: 0 12px; height: 34px; line-height: 33px;}
.banner .inner                              { border-radius: 0; box-shadow: none;}
.banner .label                              { font-size: 13px;}
.banner .content  						    { position: relative; padding: 30px 5vw; left: 0; top: 0; border-radius: 0;}
.banner::before			                    { display: none;}
}




/***** devis + intro *****/
.devis_intro 								{ display: grid; grid-template-columns: 1fr 1fr; align-items: start; grid-gap: 80px; margin-top: -100px; position: relative; z-index: 10;}
.devis_intro .devis 						{ padding: 70px; position: relative; background: var(--mainColor1); border-radius: 20px; overflow: hidden;}
.devis_intro .devis .sous_titre             { color: var(--mainColor2); margin-bottom: 25px; text-transform: initial;}
.devis_intro .devis p                       { color: #fff;}
.devis_intro .devis li                      { color: #fff;}
.devis_intro .devis .link					{ width: 100%; text-align: center; border: none;}
.devis_intro .intro 						{ padding: 170px 0 0 0;}
.devis_intro .intro .titre_main             { font-size: 30px; line-height: 40px; text-transform: initial;}
.devis_intro .intro .chapo 					{ margin: 0;}

@media (max-width:1200px) {
.devis_intro 								{ grid-gap: 60px; margin-top: -120px;}
.devis_intro .devis 						{ padding: 40px;}
.devis_intro .devis .titre					{ font-size: 22px; line-height: 28px;}
.devis_intro .intro 						{ padding: 180px 0 0 0;}
.devis_intro .intro .titre 					{ font-size: 18px; line-height: 28px;}
}
@media (max-width:1000px) {
.devis_intro 								{ grid-template-columns: 1fr; grid-gap: 60px; margin-top: -60px;}
.devis_intro .devis 						{ padding: 40px;}
.devis_intro .devis .titre					{ font-size: 22px; line-height: 28px;}
.devis_intro .intro 						{ padding: 0;}
.devis_intro .intro .titre 					{ font-size: 18px; line-height: 28px;}
}
@media (max-width:700px) {
.devis_intro 								{ display: block; width: 100%; max-width: initial; margin: 0;}
.devis_intro .devis 						{ padding: 30px 5vw ; border-radius: 0;}
.devis_intro .intro,
.devis_intro .devis:before					{ display: none;}
}



/***** services *****/
.services              									{ margin: var(--marginTB); overflow: hidden;}
.services .titre_main 									{ opacity: 10%; font-size: clamp(45px, 5.5vw, 130px); line-height: 100%; margin: 20px 0 -120px -5vw; color: #3a7cff; text-transform: uppercase; letter-spacing: 10px; font-weight: 700;}
.services .item .link_text_arrow 						{ margin-top: 15px; display: block;}
.services .slick-list             						{ overflow: visible; margin: 0 -15px; padding-bottom: 50px; padding-top: 100px;}
.services .slick-arrow              					{ position: absolute; top: 25px;}
.services .slick-prev              					    { right: 60px; z-index: 10;}
.services .slick-next              					    { right: 0;}

.services .item                  						{ margin: 0 15px;}
.services .item .grid_icon         						{ display: grid; grid-template-columns: auto 1fr; gap: 45px; align-items: center; margin: 0 0 20px 0;}
.services .item .grid_icon .sous_titre     				{ color: var(--mainColor2);}
.services .item .wrap             						{ padding: 40px 60px 50px;}
.services .item .icon             						{ margin: 0 auto; max-width: 95px; height: auto;}


@media (min-width:1201px) {
.services:before										{ left: 60%; right: 0; bottom: 100px; top: -80px; border-radius: clamp(15px, 3.5vw, 30px) 0 0 clamp(15px, 3.5vw, 30px); visibility: visible;}
.services a:hover img              						{ transform: scale(0.95); filter: brightness(0.65);}
.services a:hover .link_text_arrow         				{ color: var(--mainColor1);}
}
@media (max-width:1200px) {
.services .titre_main 									{ margin: 0;}
.services .slick-arrow              					{ top: -50px; background-color: #000; filter: invert(1);}
.services .slick-list             						{ padding-top: 30px;}
}
@media (max-width:700px) {
.services .item .link_text_arrow 						{ margin-top: 10px; display: inline-block;}
.services .item .wrap             						{ padding: 20px 30px;}
.services .item .grid_icon         						{ gap: 20px;}
.services .item .icon             						{ max-width: 70px; }
.services .slick-arrow              					{ top: 90%;}
.services .slick-prev              					    { right: calc(50% - 10px); transform: translateX(-50%) rotate(-180deg);}
.services .slick-next              					    { right: calc(50% - 60px); transform: translateX(-50%);}

.services .slick-list             						{ padding-bottom: 70px;}
}



/***** card item : bg img + hover content */
.card_item_v2 								{ position: relative; border-radius: 20px 20px 0 20px; overflow: hidden; text-align: left;}
.card_item_v2 img							{ width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover;}
.card_item_v2 .wrap							{ position: absolute; left: 0; bottom: 0; width: 100%; z-index: 5; padding: 40px 90px 40px 40px;}
.card_item_v2 .wrap :last-child				{ margin-bottom: -5px;}
.card_item_v2 .hover_show					{ position: absolute; left: 0; top: 0; color: #fff; background: rgba(0,0,0,75%); width: 100%; height: 100%; padding: 40px; display: none;}
.card_item_v2 .link_pos                    	{ position: absolute; bottom: -10px; right: -10px; padding: 10px; background: #fff; border-top-left-radius: 50%; z-index: 10;}
.card_item_v2 .link_pos:before             	{ position: absolute; bottom: 10px; left: -20px; background: transparent; width: 20px; height: 20px; border-bottom-right-radius: 20px; box-shadow: 10px 10px 0 10px #fff; transition: none; content: "";}
.card_item_v2 .link_pos:after              	{ position: absolute; top: -20px; right: 10px; background: transparent; width: 20px; height: 20px; border-bottom-right-radius: 20px; box-shadow: 10px 10px 0 10px #fff; transition: none; content: "";}
.card_item_v2 .link_pos .link_arrow        	{ z-index: 10;}
.card_item_v2 .link_pos .link_arrow:after   { width: 100vw; height: calc(100% + 30px); position: absolute; right: 0; bottom: 0; content: "";}

@media (min-width:1201px) {
.card_item_v2 .hover_show 					{ display: block; opacity: 0; visibility: hidden; transition: all 300ms ease-in-out;}
.card_item_v2:hover .hover_show 			{ opacity: 1; visibility: visible;}
}
@media (max-width:1200px) {
.card_item_v2 .wrap							{ padding: 30px 90px 30px 30px;}
.card_item_v2 .link_pos .link_arrow:after   { height: 100vh;}
}
@media (max-width:700px) {
.card_item_v2 								{ border-radius: 25px 25px 0 25px;}
.card_item_v2 .wrap							{ padding: 25px 65px 25px 25px;}
.card_item_v2 .wrap :last-child				{ margin-bottom: -3px;}
.card_item_v2 .link_pos                    	{ padding: 10px;}
.card_item_v2 .link_pos:before             	{ left: -20px; width: 20px; height: 20px;}
.card_item_v2 .link_pos:after              	{ top: -20px; width: 20px; height: 20px;}
.card_item_v2 .link_pos .link_arrow        	{ width: 40px; height: 40px;}
}



/***** grid bloc *****/
.grid_bloc	 								{ position: relative; padding: 0; margin: var(--marginTB);}

.grid_bloc:before 							{ height: 90vh; position: absolute; left: 0; right: 0; bottom: 65%; background: linear-gradient(to top, #eee 0%, #fff 100%); z-index: -1; transition: none; content: "";}

.grid_bloc .container						{ display: grid; grid-gap: clamp(10px, 5vw, 40px); text-align: center;}

@media (max-width:1200px) {
.grid_bloc:before							{ left: 0; right: 0; top: 0; bottom: 0; border-radius: 0;}
}

/* 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;}
}
@media (max-width:1000px) {
.grid_bloc.col_3 .container					{ grid-template-columns: 1fr;}
}
@media (max-width:700px) {
.grid_bloc.col_2 .container,	
.grid_bloc.col_3 .container,					
.grid_bloc.col_4 .container					{ grid-template-columns: 1fr;}
}



/***** quote : simple *****/
.quote_simple 											{ position: relative; text-align: center; margin: var(--marginTB);}
.quote_simple:before									{ position: absolute; width: 94vw; max-width: calc(47vw + 720px); left: auto; right: 3vw; top: 0; bottom: 0; background: #eee; border-radius: 50px; visibility: hidden; transition: none; content: "";}
.quote_simple svg										{ width: 60px; height: auto; display: block; margin: 0 auto 15px auto;}
.quote_simple p               							{ margin-bottom: 15px;}
.quote_simple .link										{ margin-top: 10px;}
.quote_simple :last-child								{ margin-bottom: 0;}
.quote_simple .multi_links								{ display: grid; grid-template-columns: 1fr 1fr; max-width: 300px; grid-gap: 10px; margin: 25px auto 0 auto;}
.quote_simple .multi_links .link						{ margin: 0; text-align: center; padding: 0;}

@media (max-width:700px) { 
.quote_simple svg										{ width: 40px; margin-bottom: 10px;}
.quote_simple p               							{ margin-bottom: 10px;}
.quote_simple .multi_links								{ max-width: none; margin-top: 20px;}
}


/* custom highlight */
.quote_simple .txt_highlight svg  						{ bottom: 0; left: 0; right: 0; margin: 0 auto; width: 60px; display: none;}
.quote_simple .txt_highlight svg path					{ fill: var(--mainColor1);}
.quote_simple span.txt_highlight    					{ display: inline-block; margin: 5px 0; padding-bottom: 15px;}
.quote_simple span.txt_highlight svg  					{ display: block;}

@media (max-width:700px) { 
.quote_simple .txt_highlight   							{ padding-bottom: 15px;}
.quote_simple .txt_highlight svg  						{ width: 40px; display: block;}
.quote_simple span.txt_highlight     					{ padding: 0; margin: 0;}
.quote_simple span.txt_highlight svg   					{ display: none;}
}




/*** variant 2 img ***/
.bloc_txt_img:before									{ position: absolute; left: -50px; right: calc(50% + 230px); top: 15%; bottom: 15%; background: #3a7cff; opacity: 0.1; border-radius: var(--imgRadius); visibility: visible; transition: none; content: "";}
.bloc_txt_img .container img 							{ width: 70%; height: auto; object-fit: cover; display: block; position: relative; z-index: 10; aspect-ratio: 1/1; border-radius: var(--imgRadius);}
.bloc_txt_img .container img:first-of-type				{ margin: 0 0 0 30%;}
.bloc_txt_img .container img:last-of-type				{ margin: -15% 30% 0 0;}
.bloc_txt_img.reverse:before							{ right: 0; left: calc(50% + 100px);}

@media (max-width:1200px) { 
.bloc_txt_img:before									{ display: none;}
}
@media (max-width:1000px) { 
.bloc_txt_img .container .img 							{ width: 80%; max-width: 600px; margin: 0 auto;}
.bloc_txt_img .container img 							{ width: 60%;}
.bloc_txt_img .container img:first-of-type				{ margin: 0 0 0 40%;}
.bloc_txt_img .container img:last-of-type				{ margin: -20% 40% 0 0;}
}
@media (max-width:700px) { 
.bloc_txt_img .container .img 							{ width: 100%;}
}




.about.bloc_txt_img .txt .titre_main 					{ opacity: 15%; font-size: clamp(25px, 3.5vw, 45px); line-height: 100%; color: #3a7cff; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700;}




/***** card blog v2 *****/
.carte      											{ margin: var(--marginTB);}
.carte iframe  											{ border: none;}
.card_blog_v2 											{ position: relative;}
.card_blog_v2 .content 									{ display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin: 0 auto; padding: 50px 0;}
.card_blog_v2 .content:before							{ position: absolute; right: 45%; left: 0; top: 0; bottom: 0; border-radius: 40px; background: #3a7cff; opacity: 0.1; content: "";}
.card_blog_v2 .photo 									{ position: relative; overflow: hidden; border-radius: 30px; min-height: 450px; height: 100%; z-index: 5; transition: transform 300ms ease-in-out;}
.card_blog_v2 .photo img 								{ width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 5/3;}
.card_blog_v2 .txt 										{ grid-area: 1; padding: 20px 70px;}
.card_blog_v2 .txt ul li								{ font-size: 16px; font-weight: 500; margin-bottom: 12px;}
.card_blog_v2 .ul_check li:before                       { background-image: url("../images/check_blue.svg");}
.card_blog_v2 .titre 									{ position: relative; font-weight: 600; font-size: 18px; color: var(--mainColor1); line-height: 26px; margin-bottom: 10px;}
.card_blog_v2 .link_arrow 								{ width: 30px; height: 30px; position: absolute; right: 35px; bottom: 35px; background-position: -5px 50%;}

@media (min-width:1201px) {
.card_blog_v2 a:hover .photo 							{ transform: scale(0.9);}
}

@media (max-width:1000px) { 
.card_blog_v2 .content 									{ grid-template-columns: 1fr; padding: 40px 0 0 0;}
.card_blog_v2 .content:before							{ right: 0;}
.card_blog_v2 .txt 										{ padding: 10px 30px 30px;}
}