.banner 								{ position: relative; margin-top: 120px;}
.banner:after                           { width: 70%; background: linear-gradient(-60deg,rgba(0, 83, 126, 1) 0%, rgba(0, 56, 81, 1) 100%); display: block; transform: skew(-10deg); position: absolute; left: -200px; top: 50px; bottom: -50px; z-index: -1; border-radius: var(--imgRadius); content: "";}
.banner .container						{ display: grid; grid-template-columns: 1fr 65%; grid-gap: clamp(40px, 3vw, 80px); align-items: center; justify-items: center;}
.banner .img   							{ position: relative; z-index: 5; transform: skew(-10deg); overflow: hidden; max-width: 89%; border-radius: var(--imgRadius);}
.banner .img img,
.banner .img video  					{ width: 116%; height: auto; max-height: 680px; object-fit: cover; position: relative; display: block; transform: skew(10deg) translateX(-8%);}
.banner .txt 							{ position: relative; padding: 60px 0 0 0; color: #fff;}
.banner .txt .wrap						{ max-width: 580px;}
.banner .txt .link 				        { background: var(--mainColor2); margin-top: 10px;}
.banner .txt .link:hover 				{ background: var(--mainColor3); color: var(--mainColor1)}

@media (max-width:1400px) {
.banner .txt 							{ padding: 80px 0 0 0;}
}
@media (max-width:1200px) {
.banner 								{ margin-top: 100px;}
.banner:after                           { top: 0; bottom: 0;}
.banner .txt 							{ padding: 5vw 0;}
}
@media (max-width:1000px) {
.banner:after,
.banner .img,
.banner .img img,
.banner .img video  					{ transform: none; border-radius: 0;}
.banner:after                           { width: 100%; left: 0; top: 20%; bottom: 0;}
.banner .container						{ grid-template-columns: 1fr; grid-gap: 0;}
.banner .img 							{ max-width: none;}
.banner .img img,
.banner .img video  					{ width: 100%; border-radius: var(--imgRadius);}
.banner .img   							{ grid-area: 1;}
.banner .txt 							{ text-align: center;}
}
@media (max-width:700px) {
.banner .txt 							{ padding: 8vw 2vw 12vw 2vw;}

}



/***** adresses *****/
.adresses 								{ position: relative; padding: clamp(40px, 3vw, 60px) 0 0 0; margin: var(--marginTB);}
.adresses .container					{ display: grid; grid-template-columns: 1fr 1.4fr; grid-gap: clamp(40px, 3vw, 80px); align-items: center;}
.adresses .txt    				        { display: block; text-align: left;}
.adresses .item					        { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; text-align: center;}
.adresses .item .infos					{ background-color:var(--mainColor3); padding: 30px; transform: skew(-10deg); border-radius: var(--imgRadius)}
.adresses .item .infos>*				{ transform: skew(10deg);}
.adresses .item .infos img				{ display: block; margin: 20px auto; height: 80px; width: auto;}

@media (max-width:1200px) {
.adresses 								{ padding: 0;}
.adresses .container					{ grid-template-columns: 1fr; grid-gap: 20px;}
.adresses .item					        { grid-gap: 20px; padding: 0 20px;}
}
@media (max-width:1000px) {
.adresses .item					        { padding: 0;}
.adresses .item .infos, 
.adresses .item .infos>*				{ transform: none;}
}
@media (max-width:700px) {
.adresses .container					{ grid-gap: 2vw;}
.adresses .txt        					{ text-align: center;}
.adresses .txt p:not(.sous_titre)       { display: none;}

.adresses .item					        { grid-template-columns: 1fr; grid-gap: 3vw;}
.adresses .item .infos					{ padding: 10px 20px;}
.adresses .item .infos img				{ margin: 15px auto 20px auto; height: 60px;}
}



/***** bloc txt img *****/
.bloc_txt_img .container .txt .titre_main span 	{ margin: 0 0 5px 0;}




/***** assurances *****/
.assurances                                 	{ display: grid; grid-template-columns: 520px 1fr; grid-gap: 80px; align-items: start; position: relative;}
.assurances .nav 								{ grid-area: 1; margin: 0; display: grid; grid-gap: 15px; align-items: start;}
.assurances .nav .item .titre 					{ display: grid; grid-template-columns: 90px 1fr; align-items: center; background: var(--mainColor1); overflow: hidden; position: relative; transition: all 300ms ease-in-out; color: #fff; border-radius: var(--linkRadius); cursor: pointer;}
.assurances .nav .item .titre:after         	{ width: 10px; height: 100%; position: absolute; right: 25px; top: 0; background: url("../images/arrow_link_white.svg") 50% / contain no-repeat; transition: none; content: "";}
.assurances .nav .item .titre.active 			{ background-color: var(--mainColor2)}
.assurances .nav .item .titre img				{ display: inline-block; margin: 10px 0 10px 20px; transition: all 300ms ease-in-out; filter: brightness(0) invert(1);}
.assurances .nav .item .titre span 				{ font-size: 16px; line-height: 20px; font-weight: 500;}
.assurances .content .item  					{ display: none; transition: all 400ms ease-in-out; padding: 60px 40px; background-color: #fff; border-radius:var(--imgRadius); filter: drop-shadow(0 20px 20px rgba(112, 157, 190, 0.5)); margin-top: -60px}
.assurances .content .item.show  				{ display: block;}
.assurances .content .item .sous_titre 			{ font-size: 22px;}
.assurances .content .item p 					{ margin: 15px 0 0 0;}
.assurances .content .item ul li a 				{ display: block; width: 100%; background-color: var(--bgColorLight); margin: 15px 0 0 0; padding: 10px 30px; border-radius:var(--linkRadius); color: var(--mainColor1); font-weight: 500; position: relative;}
.assurances .content .item ul li a:after   	 	{ width: 10px; height: 100%; position: absolute; right: 25px; top: 0; background: url("../images/arrow_link.svg") 50% / contain no-repeat; transition: none; content: "";}
.assurances .content .item ul li a:hover    	{ background-color: var(--mainColor2); color: #fff}
.assurances .content .item ul li a:hover:after 	{ background: url("../images/arrow_link_white.svg") 50% / contain no-repeat;}

@media (max-width: 1200px){
.assurances                                 	{ grid-template-columns: 1fr; grid-gap: 0; padding: 0; margin-top: -4vw;}
.assurances .nav 								{ grid-template-columns: 1fr 1fr;}
.assurances .nav .item .titre.active 			{ background-color: var(--mainColor1);}
.assurances .content   							{ display: none;}
.assurances .content .item  					{ margin-top: 0;}
}
@media (max-width: 700px){
.assurances .nav                                { grid-template-columns: 1fr; grid-gap: 3vw;}
.assurances .nav .item .titre 					{ grid-template-columns: auto 1fr; grid-gap: 15px; padding-right: 40px;}
.assurances .nav .item .titre:after         	{ width: 8px; right: 20px;}
.assurances .nav .item .titre img				{ margin: 10px 0 10px 15px; width: 44px; height: auto;}
.assurances .nav .item .titre span 				{ font-size: 14px; line-height: 20px;}
}


/***** secteurs *****/
.secteurs	 									{ position: relative; margin-top: clamp(20px, 10vw, 100px);}
.secteurs .container							{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: clamp(10px, 3vw, 20px); text-align: center;}
.secteurs .intro								{ display: block; background-color: #fff; text-align: left; align-self: center;}
.secteurs .intro .titre_main					{ font-size: clamp(25px, 2.2vw, 30px); margin: 0 0 0 20px;}
.secteurs .intro .titre_main span				{ margin: 0 0 5px 0;}
.secteurs .container .item						{ display: block;}
.secteurs .container .item a					{ padding: 15px 30px; min-height: 140px; background-color: var(--bgColorLight); border-radius: var(--linkRadius); color: var(--mainColor1); font-weight: 500; line-height: 22px; display: grid; align-items: center;}
.secteurs .container .item img					{ margin: 0 auto; display: block; transition: all 300ms ease-in-out;}
.secteurs .container .item span					{ margin: 0 auto; display: block; max-width: 300px;}

@media (min-width:1200px) {
.secteurs .container .item a:hover				{ color: #fff; background-color: var(--mainColor2);}
.secteurs .container .item a:hover img			{ filter: brightness(0) invert(1);}
}
@media (max-width:1200px) {
.grid_bloc .container					    	{ grid-gap: clamp(10px, 3vw, 15px);}
}
@media (max-width:1000px) {
.grid_bloc .container					    	{ grid-template-columns: 1fr 1fr;}
}
@media (max-width:700px) {
.secteurs .container 							{ display: flex; gap: 3vw; width: 100vw; margin-left: -5vw; overflow-x: auto; padding: 0 5vw 8vw 5vw; padding-top: 70px;}
.secteurs .container:before						{ width: 5vw; height: 4px; background: #fff; position: absolute; left: -5vw; bottom: 0; content: "";}
.secteurs .container:after						{ width: 5vw; height: 4px; background: #fff; position: absolute; right: -5vw; bottom: 0; content: "";}
.secteurs .container::-webkit-scrollbar 		{ width: 4px; height: 4px; background-color: var(--bgColorLight);}
.secteurs .container::-webkit-scrollbar-thumb	{ background-color: var(--mainColor1);}
.secteurs .intro								{ position: absolute; left: 0; top: 0;}
.secteurs .intro .titre_main					{ font-size: clamp(22px, 4.6vw, 35px); margin: 0;}
.secteurs .container .item 						{ min-width: clamp(200px, 60vw, 300px);}
}



/***** services *****/
.services							{ position: relative; min-height: 60vh; max-height: 1000px; padding: 80px 0; display: grid; align-items: center; background-color: #002436; margin: var(--marginTB);}
.services .img						{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("../images/bkg.webp") 50% / cover no-repeat; background-attachment: fixed; opacity: 0.2;}
.services .content					{ display: block; margin: auto; text-align: center; color: #fff;}
.services .content .sous_titre		{ font-weight: 600;}
.services .content .link			{ margin-top: 10px;}

@media (max-width:1200px) {
.services							{ min-height: inherit; padding: 100px 0;}
.services .img						{ background-attachment:scroll;}
}
@media (max-width:1000px) {
.services							{ padding: 10vw 0;}
}
@media (max-width:1000px) {
.services							{ padding: 14vw 0; background: linear-gradient(-60deg,rgba(0, 83, 126, 1) 0%, rgba(0, 56, 81, 1) 100%);}
.services .img						{ display: none;}
.services .content .titre_main		{ padding: 0 2vw;}
.services .content .sous_titre		{ font-weight: 500;}
.services .link 				    { background: var(--mainColor2); margin-bottom: -5px;}

}