/***** banner *****/
.banner                          						{ position: relative; padding: 200px 0 0 0}
.banner .photo                     						{ position: relative; padding: 0 40px;}
.banner .photo:before 									{ position: absolute; right: 10%; bottom: -12px; background: var(--mainColor1); width: 55%; height: 24px; transition: none; z-index: 5; content: "";}
.banner .photo .flamme                    				{ width:4.3%; position: absolute; right: 50%; top:50%; transform: translate(50%, -50%);}
.banner .photo img                     				    { width: 100%; height: auto; max-height: 720px; object-fit: cover; object-position: 50% 50%; display: block; border-radius: clamp(12px, 3.5vw, 40px);}
.banner .photo video                     				{ width: 100%; height: auto; object-fit: cover; display: block;}
.banner .content                 						{ position: relative; padding-bottom: clamp(20px, 2vw, 60px); z-index: 10;}
.banner .content .txt                 					{ text-align: center;}
.banner .link 	            							{ margin: 10px 0 0 0;}
.banner .wrapper_large            						{ z-index: 10;}

@media (max-width:1400px) {
}
@media (max-width:1200px) {
.banner                          						{ padding: 100px 0 0 0}
.banner .photo                     						{ padding: 0 20px;}
.banner .photo:before 									{ bottom: -10px; height: 20px;}
}
@media (max-width:1000px) {
.banner .content                 						{ padding: 4vw 0 0 0;}
}
@media (max-width:700px) {
.banner .photo                     						{ padding: 0;}
.banner .photo:before 									{ display: none}
.banner .photo img                                      { border-radius: 0;}
}
@media (max-width:700px) {
.banner .content                 						{ padding: 10vw 0 0 0;}
}



/***** services *****/
.services .txt 						                    { margin: 0 auto 80px auto; display: block; text-align: center; max-width: 1000px}
.services .titre_line:before                            { left: 50%; transform: translate(-50%, 50%);}
.services .item .link_text_arrow 						{ margin-top: 15px; display: block; color: #fff}
.services .item.cursor img              				{ transition: all 300ms ease-in-out;}

.services .item.cursor                                  { cursor: pointer; position: relative;}
.services .hover_show                                   { opacity: 0; transition: opacity 300ms ease-in-out; position: absolute; top: calc(50% - 30px); transform: translateY(-50%); padding: 20px 40px; font-size: 14px;}



@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 .item.cursor:hover img              			{ transform: scale(0.95); filter: brightness(0.25);}
.services .item.cursor:hover a .link_text_arrow         { color: var(--mainColor1);}
.services .item.cursor:hover .hover_show                { opacity: 1; transition: opacity 300ms ease-in-out;}
}
@media (max-width:1000px) {
.services .container img                                { height: 40vw;}
}
@media (max-width:1200px) {
.services .titre_main 									{ margin: -15px 0 20px 0;}
}
@media (max-width:700px) {
.services .item .link_text_arrow 						{ display: inline-block; margin-top: 0; width: 100%; }
.services .item.cursor                                  { background: var(--mainColor3); padding: 10px 20px; display: inline-block; line-height: 40px; margin: 0; border-radius: 10px;}
}




.produits	 										{ position: relative; padding: 100px 0}
.produits .txt 						                { margin: 0 auto 80px auto; display: block; text-align: center; max-width: 1000px}
.produits .titre_line:before                        { left: 50%; transform: translate(-50%, 50%);}
.produits .bkgimg                                   { display: block; 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; border-radius: clamp(12px, 3.5vw, 40px); z-index: 0; overflow: hidden; min-height: 700px}
.produits .container                                { display: grid; grid-gap: clamp(20px, 4vw, 40px) clamp(15px, 2vw, 40px);}
.produits .container img							{ width: 100%; height: auto; object-fit: cover; display: block; border-radius: var(--imgRadius);}
.produits .container.col_4							{ grid-template-columns: repeat(4, 1fr);}
.produits .link 									{ margin: 80px 0 0 0; display: block; text-align: center}

@media (max-width:1200px) {
.produits                                           { background:var(--mainColor3);}
.produits .bkgimg                                   { display: none;}
}
@media (max-width:1000px) {
.produits	 										{ position: relative; padding: 30px 0}
.produits .txt 						                { margin: 20px 0;}
.produits .container.col_4							{ grid-template-columns: repeat(2, 1fr);}
.produits .link 									{ margin: 20px 0 0 0; }
.produits .container img                            { height: 40vw;}

}

@media (max-width:700px) {
.produits .txt p                                    { display: none}
.produits .container img							{ aspect-ratio:1/1;}

}

/* div p a													{ color: var(--mainColor1); font-weight: 600;}
div p a:after											{ width: 13px; height: 13px; background: url("../images/arrow_sup.svg") 100% 0 no-repeat; display: inline-block; margin: 0 1px -3px 0; content: "";}

@media (min-width:1201px) {
div p a:hover											{ filter: brightness(1.5);}
} */






/***** partners *****/
.partners 									{ position: relative;}
.partners .container 						{ display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 20px; position: relative; padding-top: 30px;}
.partners .titre							{ text-align: left;}
.partners .item .icon 						{ border-radius: var(--linkRadius); display: grid; align-items: center; height: 90px; background:var(--mainColor3)}
.partners .item .icon img					{ display: block; margin: 0 auto; width: 120px; height: auto;}
.partners .item .icon a img              	{ transition: all 300ms ease-in-out;}



@media (max-width: 1200px){
.partners .container 				        { grid-template-columns: repeat(3, 1fr);}
}

@media (max-width: 700px){
.partners .container 				        { grid-gap: 10px;grid-template-columns: repeat(2, 1fr);}
.partners .item .icon 						{ height: 70px;}
.partners .item .icon img					{ width: 100px;}
}



/***** Atouts *****/
.atouts 								{ position: relative; text-align: center}
.atouts .titre_line:before              { left: 50%; transform: translate(-50%, 50%);}
.atouts .container 						{ display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 20px; position: relative; padding: 60px 0 0 0; font-size: 20px}
.atouts .container .item				{ background:var(--mainColor3); text-align: center; padding: 40px; border-radius: var(--linkRadius); display: block}
.atouts .container .item span			{ color:var(--mainColor1); text-transform: uppercase; display: block; font-weight: 800}

@media (max-width: 1200px){
.atouts .container 				    { grid-template-columns: repeat(3, 1fr);}
}

@media (max-width: 1000px){
.atouts .container 				    { grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 700px){
.atouts .container 				    { grid-template-columns: repeat(1, 1fr);}
}



/***** valeurs *****/
.valeurs 							{ position: relative; text-align: center; padding: 160px 0; overflow: hidden}
.valeurs .titre_main				{ display: none;}
.valeurs ul 						{ position: relative;}
.valeurs li 						{ display: inline-block; font-size: 20px; line-height: 30px; margin-right: 50px; position: relative;}
.valeurs li:after                   { background: url(../images/flamme.svg) 50% / cover no-repeat; width: 16px; height: 25px; position: absolute; right: -35px; top: 0; content: "";}
.valeurs li:last-child  			{ margin: 0;}
.valeurs li:last-child:after 		{ display: none;}

.moving_text 						{ width: 100vw; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 140px; overflow: hidden;}
.moving_text .row 					{ display: flex;}
.moving_text .row .item 			{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5vw; white-space: nowrap; font: 700 150px/150px "Inter"; text-transform: uppercase; letter-spacing: 0.8px; color: #fff; opacity: 5%; padding-left: 5vw; animation: scroll_text 35s linear infinite;}



@keyframes scroll_text {
0%									{ transform: translate(-100%, 0);}
100% 								{ transform: translate(0%, 0); }
}
@media (max-width:1600px) {
.valeurs 							{ padding: 120px 0;}
.moving_text .row .item 			{ font-size: 130px;}
}
@media (max-width:1200px) {
.valeurs 							{ padding: 80px 0;}
.valeurs 							{ text-align: left;}
.valeurs .titre_main				{ display: block;}
.valeurs ul 						{ column-count: 4; margin-top: 40px;}
.valeurs li 						{ font-size: 16px; line-height: 36px; margin: 0; display: block; padding-left: 30px;}
.valeurs li:after					{ right: auto; left: 0; top: 5px;}
.valeurs li:last-child:after 		{ display: block;}
.moving_text 						{ display: none;}
}
@media (max-width:1000px) {
.valeurs ul 						{ column-count: 3;}    
}
@media (max-width:600px) {
.valeurs 							{ padding: 40px 0;}
.valeurs ul 						{ column-count: 2; margin: 15px 0 -5px 0;}
.valeurs li 						{ font-size: 14px; line-height: 34px;}
}
@media (max-width:400px) {
.valeurs ul 						{ column-count: 1;}
}

@media (max-width:1000px) {
.bloc_txt_img.reverse .container .video { order: 2;}
.bloc_txt_img.reverse .container .text  { order: 1;}
.bloc_txt_img.reverse .container>.item:last-child { grid-area: initial;}

}