/***** banner *****/
.banner                          						{ position: relative; }
.banner video                     						{ width: 100%; height: 90vh; max-height: 1080px; object-fit: cover; display: block; filter: brightness(0.65);}
.banner .txt               					    		{ position: absolute; left: 12vw; right: 12vw; top: 45%; text-align: center; color: #fff; z-index: 20;}
.banner .txt p             								{ font-size: clamp(40px, 4vw, 50px); line-height: 120%; font-weight: 500; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 2px; margin: 0;}
.banner .txt h1             							{ margin: 0; padding-top: 15px;}

@media (max-width:1200px) {
.banner                          						{ margin-top: 90px;}
.banner video                     						{ height: 80vh;}
}
@media (max-width:1000px) {
.banner video                     						{ height: 80vw;}
.banner .txt               					    		{ left: 8vw; right: 8vw; transform: translateY(-50%);}
.banner .txt p             								{ font-size: clamp(20px, 5vw, 30px);}
}
@media (max-width:700px) {
.banner                          						{ margin-top: 70px;}
.banner video                     						{ height: 100vw;}
.banner .txt               					    		{ top: 48%;}
.banner .txt p             								{ line-height: 130%;}
}


/***** intro *****/
.intro	 								                { position: relative; margin-top: -100px;}
.intro .container						                { display: grid; grid-template-columns: 1fr 1fr; align-items: start; grid-gap: clamp(20px, 5vw, 80px); text-align: left;}
.intro .atouts						                    { padding-top: 200px;}
.intro .atouts .show_hide			                    { margin-bottom: -10px;}
.intro .cta						                    	{ background-color: #fff; padding: clamp(30px, 4vw, 60px); text-align: center; box-shadow: 0 0 40px 0 rgba(0,0,0,8%); border-radius: var(--imgRadius);}
.intro .cta lord-icon			                    	{ margin: 0 auto 5px auto;}
.intro .cta	.link					                	{ text-align: center; width: 100%; display: block; margin-top: 30px;}

@media (max-width:1200px) {
.intro .cta	.link					                	{ margin-top: 25px;}
}
@media (max-width:1000px) {
.intro	 								                { margin-top: -8vw;}
.intro .container						                { grid-template-columns: 1fr; grid-gap: 0;}
.intro .atouts						                    { padding-top: 0; margin-top: var(--marginT);}
}
@media (max-width:700px) {
.intro .cta						                    	{ padding: 5vw;}
.intro .cta	.link					                	{ margin-top: 20px;}
}


/***** card item : img + txt */
.card_item												{ position: relative; overflow: hidden; background: #fff; padding: 20px; box-shadow: 0 0 40px 0 rgba(0,0,0,8%); border-radius: var(--imgRadius);}
.card_item img 											{ width: 100%; height: auto; border-radius: var(--linkRadius); object-fit: cover; display: block; margin: 0 auto 25px auto;}
.card_item .wrap										{ position: relative;}
.card_item .sous_titre 									{ margin: 10px; font-size: 22px; line-height: 28px;}
.card_item p											{ margin: 10px;}
.card_item p a											{ z-index: 25;}
.card_item .link_arrow 									{ right: 0; z-index: 20; width: 44px; height: 44px; background-position: 0 50%; border-radius: var(--linkRadius); margin-top: 8px; float: right;}

@media (max-width:1200px) {
.card_item .sous_titre 									{ font-size: 20px;}
}
@media (max-width:700px) {
.card_item												{ padding: 10px;}
.card_item .sous_titre 									{ font-size: 18px; line-height: 24px; font-weight: 600;}
.card_item .link_arrow 									{ width: 40px; height: 40px;}
}


/***** grid bloc *****/
.grid_bloc	 											{ position: relative; margin-top: clamp(40px, 8vw, 80px);}
.grid_bloc .container									{ display: grid; grid-gap: clamp(10px, 3vw, 30px); text-align: left; grid-template-columns: repeat(4, 1fr);}
.grid_bloc .container:before							{ position: absolute; left: -50vw; right: 62.5%; top: -60%; bottom: 20%; background: url("../images/bkg.webp") repeat; transition: none; z-index: -1; content: "";}
.grid_bloc.reverse .container:before					{ right: -50vw; left: 62.5%;}

@media (max-width:1400px) {
.grid_bloc .container									{ grid-template-columns: 1fr 1fr; max-width: 1000px; margin: 0 auto;}
}
@media (max-width:1200px) {
.grid_bloc .container									{ max-width: 80vw;}
.grid_bloc .container:before							{ left: -20vw; right: -20vw; top: 15%; bottom: 15%;}
.grid_bloc.reverse .container:before					{ right: -20vw; left: -20vw;}
}
@media (max-width:1000px) {
.grid_bloc .container									{ max-width: none;}
}
@media (max-width:700px) {
.grid_bloc .container									{ grid-template-columns: 1fr;}
}


/* swipe mobile */ 
@media (max-width:700px) {
.swipe_mobile .container 								{ display: flex; gap: 3vw; width: 100vw; margin: -8vw 0 0 -5vw; overflow-x: auto; padding: 8vw 5vw;}
.swipe_mobile .container::-webkit-scrollbar 			{ width: 4px; height: 4px; background-color: #eee;}
.swipe_mobile .container::-webkit-scrollbar-thumb		{ background-color: var(--mainColor1);}
.swipe_mobile .container:before,
.swipe_mobile.reverse .container:before					{ width: 5vw; height: 4px; background: #fff; position: absolute; top: auto; right: auto; left: -5vw; bottom: 0; z-index: 80; content: "";}
.swipe_mobile .container:after							{ width: 5vw; height: 4px; background: #fff; position: absolute; top: auto; left: auto; right: -5vw; bottom: 0; z-index: 80; content: "";}
.swipe_mobile .container .item 							{ min-width: clamp(280px, 75vw, 360px);}
}




/***** about *****/
.about .container img.logo 					{ width: 200px; margin-bottom: clamp(15px, 2.2vw, 20px);}

@media (max-width: 1200px){
.about .container img.logo 					{ width: 180px;}
}
@media (max-width: 700px){
.about .container img.logo 					{ width: 160px;}
}