@charset "utf-8";

* { box-sizing:border-box!important; -webkit-box-sizing:border-box; -moz-box-sizing:border-box }


/*
body				{ margin: 0; padding: 0; font-family: Sofia,Verdana,Arial,sans-serif; font-size: 18px; line-height: 22px; color: #231f20; transition: margin-left .5s;	}
*/
header				{ width: 100% }



header							{ display: block; width: 1200px; margin: auto } 

header .tagline					{ position: absolute; margin-left:-45px; margin-top:6px }

header #logo					{ position: relative }	

header #logo img				{ width: 100%; height: auto }	

header #logo_mobi				{ display: none; visibility:hidden }


nav .rubriques					{ position: absolute; right: 1%; bottom: 45px }

nav .rubriques ul 				{ margin: 0	}

nav .rubriques ul li			{ display:inline-block; vertical-align:middle; box-sizing:border-box; font-size: 14px; text-transform:uppercase; letter-spacing: 2px; cursor: pointer	}

nav .rubriques li a				{ margin: 0 8px; padding: 10px 6px; line-height: 1.3em; color: #333 }

nav .rubriques li:hover a		{ color: #9D000C; font-weight:600 }

nav .rubriques li.choix a		{ color: #9D000C }

nav .menu, nav .sidenav			{ display: none; visibility:hidden }



@media (max-width: 1200px){

nav, header						{ width: 100% }

}



@media (max-width: 1000px){

nav .rubriques					{ right: 0 }

nav .rubriques li a				{ padding: 10px 4px }

}




@media (max-width: 900px){

header #logo_mobi				{ display: block; visibility: visible; text-align: center; padding-top: 10px }

header .tagline, nav .rubriques, #logo 		{ display: none; visibility: hidden }

nav .menu						{ display: block; visibility:visible; position: absolute; margin-left: 5%; margin-top: 5%; cursor: pointer; color: #9D000C; font-size: 30px; text-align: center }

nav .menu-logo					{ display: block; visibility:visible  }

nav .menu-logo img 				{ width: 70px; height: auto; padding-bottom: 10px }

nav .sidenav 					{ display: block; visibility:visible; height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #D3D0D1; overflow-x: hidden; transition: 0.5s;  }

nav .sidenav .closebtn 			{ display: block; text-align: right; margin: 10px 25px 10px 0; font-size: 50px; color: #9D000C  }

nav .sidenav .logo				{ text-align: center; margin-bottom: 10px }

nav .sidenav .logo img			{ width: 150px; height: auto }

nav .sidenav ul 				{ list-style: none; padding: 0; margin: 0; border-top: 1px solid #736C68 }

nav .sidenav li 				{ padding: 0; margin: 0 }

nav .sidenav li a 				{ display: block;  border-bottom: 1px solid #736C68;  padding: 1em; font-size: 16px; letter-spacing: 2px; color: #736C68; transition: 0.3s; text-transform:uppercase }

nav .sidenav li a:hover 		{ background-color: #A3A0A1; color: #EEE }

}


@media (max-width: 460px) {

nav .band-logo img				{ width: 100% }

.sidenav 						{ padding-top: 15px;}

.sidenav a 						{ font-size: 18px;}

}



@media (max-height: 450px) {

.sidenav 						{ padding-top: 15px;}

.sidenav a 						{ font-size: 18px;}

}



#jssor_fade			{ position:relative;margin:0 auto;top:0px;left:0px;width:1200px;height:306px;overflow:hidden;visibility:hidden }

#jssor_slides		{ position:relative;margin:0 auto;top:0px;left:0px;width:1200px;height:306px;overflow:hidden;visibility:hidden }

.jssor_slides		{ cursor:default;position:relative;top:0px;left:0px;width:1200px;height:306px;overflow:hidden }

.jssor_load			{ position:absolute;top:0px;left:0px;background-color:#CCC }




.jssor-dots 		{ position: absolute }

.jssor-dots div, .jssor-dots div:hover, .jssor-dots .av { position: absolute;  width: 15px; height: 15px; filter: alpha(opacity=70); opacity: .7; overflow: hidden; cursor: pointer; border: #fff 1px solid;  }

.jssor-dots div 	{ background-color: #d3d3d3; }

.jssor-dots div:hover, .jssor-dots .av:hover { background-color: gray; }

.jssor-dots .av 	{ background-color: #000; }

.jssor-dots .dn, .jssor-dots .dn:hover { background-color: #a9a9a9; }



@media (max-width: 1200px){

#jssor_slides		{ top: 25px }

}



.jsslider					{ position:relative;margin:0 auto;top:0px;left:0px;width:500px;height:425px;overflow:hidden;visibility:hidden }

.jsslider .jssor_slides-v	{ cursor:default;position:relative;top:0px;left:0px;width:500px;height:425px;overflow:hidden }



.jssora22l, .jssora22r { display: block; position: absolute; width: 40px; height: 58px; cursor: pointer; background: url('/scripts/images/jssor-fleches.png') center center no-repeat; overflow: hidden}

.jssora22l { background-position: -10px -31px; }

.jssora22r { background-position: -70px -31px; }

.jssora22l:hover { background-position: -130px -31px; }

.jssora22r:hover { background-position: -190px -31px; }

.jssora22l.jssora22ldn { background-position: -250px -31px; }

.jssora22r.jssora22rdn { background-position: -310px -31px; }

.jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }

.jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }







#page 							{ width: 100% }


.contenu blockquote 			{ max-width: 800px; margin-left: auto; margin-right: auto }

/*
hr 								{ margin: 20px auto; width: 500px; height: 0; border: solid #CCC; border-width: 1px 0 0 }
*/

.accroche						{ font-size: 24px; line-height: 26px; margin: 2% auto; max-width: 1000px; font-weight: 300; font-style: normal }

.photos	img						{ width: 100%; height: auto }

.titrepage						{ border-left: 1px solid #9D000C; border-bottom: 1px solid #9D000C; padding-left: 10px }

.titrepage h1					{ font-size: 28px; text-transform: uppercase; letter-spacing: 3px; color: #9D000C; font-weight: 200; padding: 10px; margin: 30px 0 0 }

.filet 							{ border-bottom: 1px solid #9D000C!important; padding: 2%; width: 100% }

.filet-t						{ border-top: 1px solid #9D000C; padding: 2%; width: 100% }

.filet300 						{ border-bottom: 1px solid #9D000C; padding: 2%; width: 300px; margin: auto }

h1 								{ font-size: 28px; letter-spacing: 3px; font-weight: 300; font-style: normal; text-transform: uppercase; margin-bottom: 2px; padding-bottom: 2px; line-height: 1.3em; color: #4A4143 }

h2 								{ font-size: 20px; letter-spacing: 3px; font-weight: 300; font-style: normal; text-transform: uppercase; margin-bottom: 2px; padding-bottom: 2px; line-height: 1.3em; color: #4A4143 }

.hp-newsletter img.lien			{ width: 100%; height: auto; max-width: 1000px }


@media (max-width: 1200px){

.contenu						{ width: 940px }

.accroche						{ padding-top: 3% }

}



@media (max-width: 992px){

.contenu						{ width: 100% }

.hp-newsletter img.lien			{ width: 66%; height: auto }

.hp-newsletter img.pdf			{ width: 33%; height: auto }

}

@media (max-width: 768px){

hr 								{ width: 33% }

.accroche						{ width: 90%; font-size: 14px }

.contenu blockquote 			{ max-width: none }

h1 								{ font-size: 20px; letter-spacing: 2px }

}



@media (max-width: 480px){



}



.bloc-clair						{ width: 100%; background-color: #EAE8E8 }

.bloc-moyen						{ width: 100%; background-color: #DEDADB }

.bloc-rouge						{ width: 100%; background-color: #9D000C; color: #EEE; border-top: 1px solid #9D000C }



.bloc-rouge .more		 		{ display: block; max-width: 250px; background-color: #AAA; color: #EEE; margin: 15px auto; font-size: 12px; text-align:center; text-transform:uppercase; letter-spacing: 2px; cursor: pointer; border: 1px solid #CCC }

.bloc-rouge .more a				{ display: block; margin: 15px; color: #252525 }

.bloc-rouge .more:hover			{ background-color: #DEDADB; transition: all 400ms ease-in-out; }

.bloc-rouge .more:hover a		{ color: #252525 }



.blocs-3						{ display: flex; flex-wrap: wrap; align-items: stretch; padding-bottom: 5% }

.blocs-3 .bloc					{ flex: 0 0 30%; vertical-align: top; margin: 1%; padding: 5px; background-color: #EEE; box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3); }

.blocs-3 .bloc img				{ width: 100%; max-width: 200px; height: auto }

.blocs-3 .bloc-txt				{ padding: 5%; text-align: left }

.bloc .more		 				{ display: block; max-width: 250px; background-color: #EAEAEA; color: #252525; margin: 15px auto; font-size: 12px; text-align:center; text-transform:uppercase; letter-spacing: 2px; cursor: pointer; border: 1px solid #CCC }

.bloc .more a					{ display: block; margin: 15px }

.bloc .more:hover				{ background-color: #AAA; transition: all 400ms ease-in-out; }

.bloc .more:hover a				{ color: #EEE }



.blocs-4 						{ display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center }

.blocs-4 .bloc					{ flex: 0 0 23%; vertical-align: top; margin: 1%; padding: 1% }

.blocs-4 .bloc-fond				{ background-color: #F0F1F2; box-shadow: 1px 1px 3px 0px  rgba(0,0,0,0.3); }

.blocs-4 .bloc i				{ display: block; margin: 2% auto; font-size: 36px; height: auto }

.blocs-4 .bloc-txt				{ padding: 5%; text-align: left }



.blocs-5 						{ display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center }

.blocs-5 .bloc					{ flex: 0 0 18%; vertical-align: top; margin: 1%; padding: 1% }

.blocs-5 .bloc-fond				{ background-color: #F0F1F2; box-shadow: 1px 1px 3px 0px  rgba(0,0,0,0.3); }

.blocs-5 .bloc i				{ display: block; margin: 2% auto; font-size: 36px; height: auto }

.blocs-5 .bloc-txt				{ padding: 5%; text-align: left }



@media (max-width: 768px){

.blocs-3 .bloc					{ flex: 0 0 90%; margin: 1% auto }

.blocs-4 .bloc, .blocs-5 .bloc	{ font-size: 14px }

}

@media (max-width: 480px){

.blocs-4 .bloc, .blocs-5 .bloc	{ flex: 0 0 45%; }

}



.cols 							{ text-align: center; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; font-style: normal; font-weight: 300; color: #666 }

.cols:hover						{ color: #9D000C }

.cols i							{ display: block; width: 100%; font-size: 2em; color: #9D000C }

.col2							{ display: inline-block; width: 45% }

.col4							{ display: inline-block; width: 25% }




.tabs label 					{ -webkit-order: 1; -ms-flex-order: 1; order: 1; display: block; padding: 0.5rem 1rem; margin-right: 0.2rem; cursor: pointer; background: #CCC; -webkit-transition: background ease 0.2s; transition: background ease 0.2s; text-transform: none; direction: ltr }

.tabs .tab 						{ -webkit-box-ordinal-group: 100; -webkit-order: 99; -ms-flex-order: 99; order: 99; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; width: 100%; display: none; padding: 10px; background: #FFF; direction: ltr }

.tabs input[type="radio"] 							{ position: absolute; opacity: 0; width: 30px; height: 30px  }

.tabs input[type="radio"]:checked + label 			{ background: #9D000C; color: #FFF }

.tabs input[type="radio"]:checked + label + .tab 	{ display: block }



 @media (max-width: 45em) {

.tabs .tab,  .tabs label { -webkit-box-ordinal-group: NaN; -webkit-order: initial; -ms-flex-order: initial; order: initial }

.tabs label { width: 100%; margin-right: 0; margin-top: 0.2rem }

}



.hp-piliers 					{ display: table; width: 86%; margin: auto; font-size: 20px; line-height: 1.3em }

.hp-piliers:last-child			{ margin-top: -2%; margin-left: 15% }

.hp-piliers .pilier				{ display: table-cell; width: 43%; vertical-align: middle }

.pilier	.pilier-icone			{ display: table-cell; width: 35%; vertical-align: middle }

.pilier	.pilier-icone img		{ width: 90%; height: auto }

/*.pilier	.pilier-icone:hover img.recto	{ opacity: 0 }

.pilier	.pilier-icone img.verso			{ opacity: 0 }

.pilier	.pilier-icone:hover img.verso	{ opacity: 1; z-index: 999 }*/

.pilier-icone img.verso			{ display: none; visibility: hidden; position: absolute; top: 0; left: 0; z-index: 99 }

.pilier	.pilier-txt				{ display: table-cell; width: 65%; vertical-align: middle; padding-left: 3% }



@media (max-width: 992px){

.hp-piliers 					{ font-size: 16px }

}

@media (max-width: 750px){

.hp-piliers 					{ width: 100%; margin: auto }

.hp-piliers:last-child			{ margin: auto }

.hp-piliers .pilier				{ display: table; width: 94%; margin: 3% }

.pilier	.pilier-icone img		{ width: 100px }

}



.piliers-tdm  					{ text-align: center; margin: 1% }

.piliers-tdm img 				{ width: 70px; height: auto }



.pilier-page					{ }



.pilier-silico 					{  }

.pilier-silico .col1			{ display: inline-block; width: 20%; vertical-align: middle; text-align: right; margin: 1% }

.pilier-silico .col1 .cercle	{ display: table-cell; width: 120px; height: 120px; border-radius: 50%; border: 4px solid #9D000C; vertical-align: middle; text-align: center; font-weight: 900; color: #888; font-size: 20px }

.pilier-silico .col2			{ display: inline-block; width: 70%; vertical-align: middle; padding: 3%; background-color: #EEE }



.pilier-research				{  }

.pilier-research .col1			{ display: inline-block; width: 45%; vertical-align: middle; text-align: right }

.pilier-research .project h1	{ font-size: 30px; line-height: 1.1em; color: #000; font-weight: normal }

.pilier-research .project h2	{ font-size: 24px; margin: 0; line-height: 1.2em; font-weight: 400; text-transform: lowercase }

.pilier-research .project .duration		{ display: block; font-size: 18px; font-weight: 600 }

.pilier-research .project .description	{ font-size: 14px }

.pilier-research .col2			{ display: inline-block; width: 35%; padding-left: 5%; vertical-align: middle; animation-duration: 3s;  animation-name: slidein }

@keyframes slidein {

  from { margin-left: 5%; width: 30% } to { margin-left: 0; width: 30% }

}



.pilier-support	.puces			{ padding: 5% 5% 5% 25% }

.pilier-support	.puce			{ border-left: 22px solid #9D000C; padding-left: 10px; margin-bottom: 30px }

.pilier-support	.training 		{ display: inline-block; width: 33%; vertical-align: middle; letter-spacing: 2px }

.pilier-support	.training img	{ width: 60px; height: auto }

.pilier-support	.training ul	{ text-align: left; font-size: 13px; color: #EEE }



@media (max-width: 1200px){

.piliers-tdm  					{ padding-top: 3% }

}

@media (max-width: 768px){

.piliers-tdm  					{ padding-top: 6% }

.pilier-page blockquote 		{ padding: 0 5% } 

.pilier-page h1 				{ padding: 0 5% }

}

@media (max-width: 650px){

.pilier-page .col1, .pilier-page .col2 { display: block; width: 90%; margin: 1% auto }

.pilier-silico .col1 .cercle	{ display: table-cell; width: 120px; height: 60px; font-size: 18px }

.pilier-support	.puces			{ padding: 5%}

.pilier-support	.training 		{ display: block; width: 90%; margin: auto }

}



.about-image					{ float: left; margin-right: 5% }

.about-image img				{ width: 300px; height: auto }

.about-txt						{ margin: 5% 8%; text-align: justify }

.about-txt h5					{ font-size: 24px; margin: 2% 0 }



.team 							{ margin: 2% }

.team-photo						{ display: inline-block; width: 45%; vertical-align: top; text-align: right; margin-right: 5% }

.team-photo	h2					{ font-size: 28px; letter-spacing: 3px; font-weight: 300; text-transform: none; margin-bottom: 2px; padding-bottom: 2px }

.team-photo	h3					{ font-size: 18px; letter-spacing: 1px; font-weight: 300; margin-top: 5px; padding-top: 5px }

.team-photo	img					{ width: 45%; max-width: 300px; height: auto }

.team-txt						{ display: inline-block; width: 45%; vertical-align: top; text-align:justify; line-height: 1.6em; letter-spacing: 1.2px; font-weight: 300; font-style: normal }



@media (max-width: 600px){

.about-image					{ float: none; margin: auto; text-align: center }

.team-photo 					{ display: block; width: 90%; margin: 2% auto; min-height: inherit; text-align: left }

.team-txt 						{ display: block; width: 90%; margin: 2% auto; min-height: inherit }

.team-photo	h2					{ font-size: 22px; letter-spacing: 2px }

.team-photo	h3					{ font-size: 16px }

}



.products						{ }

.products .products-texte		{ display: block; width: 80%; margin: 0 auto; font-size: 16px;}

.products .products-tdm			{ display: inline-block; padding: 32px; vertical-align: top; background-color: #43435B; color: #f5f5f7;border-radius:27px;margin-left:80px;margin-bottom:64px;}

.products .products-tdm	ul		{ line-height: 1.3em; list-style: none; margin: 0; padding: 0; color: white; font-weight: 300;  font-size: 12px }

.products .products-tdm	li		{ cursor: pointer; border-bottom: 1px solid #666; padding: 8px }

.products .products-tdm	li:hover{ background-color: #9D000C; border-left: 12px solid white; border-radius: 10px; /* Vous pouvez ajuster la valeur selon vos préférences */}

.products .products-tdm	li.choix{ background-color: #9D000C; border-left: 12px solid white; border-radius: 10px;}

.products .products-tdm	img		{ display: block; width: 100%; height: auto }

.products .products-tdm	select	{ display: none; visibility: hidden }

.products .products-txt			{ display: inline-block; width: 80%; vertical-align: top; padding-left: 4%; padding-right: 4%; padding-top: 0% }

.products .products-txt h5		{ font-size: 18px; margin: 20px 0 5px }

/*.products .click			 	{ background:url(/images/click.png) no-repeat; min-height: 75px; padding: 30px 0 0 100px; color:#9D000C; cursor:pointer; text-transform: uppercase; letter-spacing: 3px; font-size: 13px }modif stagiaire*/

.products .click:hover	 		{ border-right: 5px solid #9D000C; margin-left: 5% } 

.products .product-button {
	display: inline-block;
	padding: 8px 16px;
	background-color: #d9d9d9; /* Couleur de fond du bouton */
	color: #2c2c3c; /* Couleur du texte */
	text-decoration: none; /* Supprimer le soulignement du lien */
	border: 1px solid #2c2c3c; /* Bordure */
	border-radius: 46px; /* Coins arrondis */
	margin: 4px; /* Marge autour des boutons */
	transition: background-color 0.3s, color 0.3s; /* Animation de transition */
	text-align: center; /* Centrage du texte horizontalement */
	line-height: 20px; /* Centrage du texte verticalement */
  }
  
 .products .product-button:hover {
	background-color: #f5f5f7; /* Changement de couleur de fond au survol */
	color:#2c2c3c
  }

#ch {
	display: none;
}

#lab {
	width: 30px;
	height: 30px;
	margin: 4px;
	display: none;
}

@media (max-width: 600px){

.products .products-tdm, .products .products-tdm, .products .products-txt { display: block; }

.products .products-tdm	img		{ display: none; visibility: hidden }

.products .products-tdm	select	{ display: block; visibility: visible; color: #666; padding: 8px; text-transform: uppercase; font-size: 12px }

}



.careers						{ min-height: 300px; margin: 5% }

.careers h3 i					{ display: block; margin: 2% auto; font-size: 36px; height: auto; color: #9D000C }	

.careers-bloc					{ background-color: #ECECEB; margin: 2%; border: 1px solid #AAA; display: table; width: 100% }

.careers-bloc:hover				{ border-left: 5px solid #9D000C }

.careers-bloc .careers-bloc-col	{ display: table-cell; width: 25%; padding: 2% }



.career							{ width: 80%; margin: 2% auto; padding: 2%; border: 1px solid #AAA }

.career .career-resume			{ display: inline-block; width: 35%; vertical-align: top }

.career .career-resume em		{ font-style: italic; color: #9D000C; display: block; margin-top: 5% }

.career .career-txt				{ display: inline-block; width: 62%; vertical-align: top; padding: 0 5%; line-height: 1.3em }

.career .career-txt	i			{ font-size: 48px; width: 100%; text-align: center; color: #9D000C }



@media (max-width: 992px){

.career 						{ width: 90% }

}

@media (max-width: 768px){

.career .career-resume, .career .career-txt { display: block; width: 90%; margin: 2% auto }

}

@media (max-width: 480px){

.careers-bloc .careers-bloc-col	{ display: table; width: 100% }

.career .career-txt				{ padding: 0 }

}



.faqs	 						{ width: 80%; margin: 2% auto; font-weight: 400 }

.faqs .faq 						{ width: 100%; line-height: 1.5em; text-align: justify; margin: 5px; cursor:pointer}

.faqs .faq .titre 				{ margin: 0; padding: 2%; font-size: 16px }

.faqs .faq .style1 				{ background-color:#DDD }

.faqs .faq .style2 				{ background-color:#BBB }

.faqs .faq .accordion-open		{ background-color:#FFF; color: #9D000C; font-size: 18px }

.faqs .faq .accordion-open span { display: block; float: right; padding: 10px; margin: 0 20px; background: url(/scripts/images/faq-moins.png) center center no-repeat;}

.faqs .faq .accordion-close span{ display: block; float: right; padding: 10px; margin: 0 20px; background: url(/scripts/images/faq-plus.png) center center no-repeat;}

.faqs .faq .accordion-no span	{ display: block; float: right; padding: 10px; background: url(/scripts/images/faq-no.png) center center no-repeat;}

.faqs .faq .content 			{ padding: 0 5%; font-weight: 300 }



@media (max-width: 768px){

.faqs	 						{ width: 95% }

}



.actus							{ background-color: #2C2C3C; margin-top: 20px; padding-top: 10px; border: 1px solid #2C2C3C }

.actus .actu					{ display: block; width: 100%; background-color: #FFF; transition: width .2s; margin-top: 20px; padding: 10px; font-weight: 400; font-style: normal  }

.actus .actu:last-child			{ margin-bottom: 30px }

.actus .pair					{ margin-right: 7px}

.actu .actu-infos				{ display: inline-block; width: 55%; vertical-align: top; padding: 10px }

.actu .actu-photo				{ display: inline-block; width: 40%; vertical-align: top }

.actu .actu-photo:hover			{ opacity: 0.7; transition: opacity .5s }

.actu .actu-infos h3			{ font-size: 24px; margin: 0; padding: 20px 0; text-transform: uppercase; letter-spacing: 4px; font-weight: 200; line-height: 1.4 }

.actu-first .actu-infos h3		{ font-size: 28px }

.actu .actu-infos h4			{ font-size: 22px; margin: 10px 0; padding: 0; letter-spacing: 1px; color: #9D000C }

.actu-first .actu-infos h3, .actu-first .actu-infos h4			{ height: auto }

.actu .actu-infos .actu-txt		{ font-size: 14px; padding: 15px; letter-spacing: 1px; max-width: 550px; margin: auto; line-height: 1.6 }

.actu .actu-infos .posted		{ float: right; font-size: 12px; letter-spacing: 2px; color: #999 }

.actu .actu-infos .posted span 	{ display: block }

.actu .actu-infos .more a		{ font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: #9D000C }

.actu .actu-photo 				{ height: 250px; background-repeat: no-repeat; background-size: cover; background-position: center; cursor: pointer }

.actu-first .actu-photo 		{ height: 300px }

.actu .actu-photo-mobi			{ display: none; visibility: hidden }



@media (max-width: 992px){

.actu .actu-infos h3			{ font-size: 20px }

}

@media (max-width: 768px){

.actu .actu-infos, .actu .actu-photo { display: block; width: 100%; margin: 2% auto }

.actu .actu-infos h3			{ font-size: 18px; padding: 10px 0 }

.actu .actu-infos h4			{ font-size: 16px; height: auto }

.actu .actu-infos .actu-txt		{ padding: 5px }

.actu .actu-photo				{ display: none; visibility: hidden }

.actu .actu-photo-mobi			{ display: block; visibility: visible; text-align: center }

.actu .actu-photo-mobi img		{ width: auto; max-height: 300px; max-width: 100%  }

.actu .actu-infos .posted		{ float: none }

}



.actualite      				{ display: block; width: 100%; background-color: #FFF; transition: width .2s; margin: 20px 0 40px; padding: 10px 30px; font-weight: 400; font-style: normal; text-align: left  }

.actualite .filet-t     		{ padding: 30px 30px 0 }

.actualite .actualite-photo     { float: right; padding: 20px; margin-left:  5% }

.actualite .actualite-photo img { width: 100%; height: auto; max-width: 500px }

.actualite .actu-infos h3			{ font-size: 28px; margin: 0; padding: 20px 0; text-transform: uppercase; letter-spacing: 4px; font-weight: 200; line-height: 1.4 }

.actualite .actu-infos h4			{ font-size: 18px; margin: 10px 0; padding: 0; letter-spacing: 1px; color: #9D000C }

.actualite .actu-infos .actu-txt	{ font-size: 17px; padding-left: 5%; letter-spacing: 1px; line-height: 1.6 }

.actualite .actu-infos .posted		{ font-size: 13px; letter-spacing: 2px; color: #999 }

.actualite .actu-infos .posted span { display: block }

.actualite .actu-photos img			{ display: inline-block; vertical-align: middle; max-width: 500px; height: auto; margin: 2% }



@media (max-width: 768px){

.actualite      				{ margin: 10px  }

.actualite .actualite-photo 	{ float: none; padding: 20px; margin-left: 0 }

.actualite .actu-infos .actu-txt{ padding-left: 0 }

.actualite .actu-infos h3		{ font-size: 18px }

.actualite .actualite-photo     { text-align: center }

.actualite .actualite-photo img { width: auto; max-height: 300px; max-width: 100% }

}



.partners						{ width: 80%; margin: 5% auto }

.partners .partner-photo		{ display: inline-block; width: 35%; vertical-align: top; text-align: center }

.partners .partner-photo img	{ display: block; width: 150px; height: auto }

.partners .partner-txt			{ display: inline-block; width: 62%; vertical-align: top; padding: 0 5% }

.partners .partner-txt a		{ display: block; padding: 5px 20px; }

.partners .partner-txt a i		{ font-size: 18px; color: #9D000C; padding-right: 10px }



@media (max-width: 600px){

.partners .partner-photo, .partners .partner-txt { display: block; width: 90%; margin: 2% auto; padding: 0 }

}



.tutorials						{  }

.tutorials .tutorial-txt		{ width: 100%; margin: 2% auto; border: 1px solid #2c2c3c; padding: 32px!important; font-size: 16px ; border-radius: 27px; box-shadow: 0px 4px 10px -5px rgba(0,4,10,0.5);}

.tutorials .tutorial-txt img.tutorial-photo	{ width: 200px; height: auto; float : left; margin: 0 3% ; padding: 16px;}
.tutorials .tutorial-button { 
	display: inline-block;
	padding: 8px 16px;
	background-color: #d9d9d9; /* Couleur de fond du bouton */
	color: #2c2c3c; /* Couleur du texte */
	text-decoration: none; /* Supprimer le soulignement du lien */
	border: 1px solid #2c2c3c; /* Bordure */
	border-radius: 46px; /* Coins arrondis */
	margin: 4px; /* Marge autour des boutons */
	transition: background-color 0.3s, color 0.3s; /* Animation de transition */
	width: 160px; /* Largeur du bouton */
	height: 40px; /* Hauteur du bouton */
	text-align: center; /* Centrage du texte horizontalement */
	line-height: 20px; /* Centrage du texte verticalement */
	margin-top: auto;
  }
 .tutorials .row {
    display: flex;
    flex-wrap: wrap;
}

.tutorials .col-md-4 {
    display: flex;
    flex-direction: column;
}

.tutorials .tutorial-txt {
    display: flex;
    flex-direction: column;
    flex: 1; /* Permet à chaque bloc de s'étendre pour remplir l'espace disponible */
}
.tutorials .mt-auto {
    margin-top: auto; /* Pousse le bouton vers le bas */
}
.tutorials .index-bar {
	width: 100%;
	height: 1px; /* Hauteur de la barre */
	background-color: #2c2c3c; /* Couleur de la barre */
	margin: auto; /* Centre la barre horizontalement */
  }


.contact .contactform			{ display: inline-block; vertical-align:top; width: 70%; padding: 3%; font-size: 13px }

.contact .contactform	.col2	{ display: inline-block; width: 49% }

.contactform input, .contactform textarea, .contactform select { position: relative; border: 1px solid #CCC; font-family: Sofia,Verdana,Arial,sans-serif; color: #333; font-size: 15px; line-height: 20px; letter-spacing: 1px; padding: 8px 16px; margin: 0; resize: none;}

.contactform  input, .contactform select { display: inline; width: 100% }

.contactform  textarea			{ width: 100% }

.contactform  label				{ display: block; text-transform:uppercase;	margin: 13px 0 2px 0; letter-spacing: 2px; font-size: 12px }

.contactform  input[type="checkbox"] { width: 17px; height: 17px; margin: 5px 0 5px 60px; vertical-align: middle }

.contactform input[type="submit"] {	width: 100%; height: 40px; background-color: #9D000C; color:#FFF; border: none; cursor: pointer; text-align: center;	vertical-align: middle;	font-size: 15px; letter-spacing: 5px;  text-transform:uppercase	}

.contactform input[type="submit"]:hover		{	background-color: #767171	}	



.contact .contactinfos			{ display: inline-block; vertical-align:top; width: 28%; text-align: center; line-height: 20px; margin-top: 5%; color :#FFF; font-weight: 300 }

.contact .contactinfo img		{ width: 150px; height: auto }

.contact .contactinfo			{ border: 1px solid #CCC; padding: 10px; background-color: #c3c3c3 }

.contact .contactinfo a			{ color :#FFF; font-weight: 400 }

.contact .contactinfo a:hover	{ font-style: italic }

.contact .contactinfo .tel		{ font-size: 16px; letter-spacing: 3px }

.contact .contactinfo .mail		{ font-size: 14px; letter-spacing: 2px; text-transform: uppercase; padding: 2% 0 }

.contact .contactinfo i			{ display: block; width: 100%; font-size: 2em; color: #FFF }



.contact .map		 			{ display: block; width: 100% }

.contact .map .carte  			{ background-color: #AAA }

.contact .map iframe 			{ width: 100%!important; height: 500px!important; padding: 0; margin: 0 }

.contact .map h3	 			{ text-align: center; margin: 1% 0 }



@media (max-width: 900px){

.contact .contactinfos			{ width: 35%;  }

.contact .contactform, .contact .contactinfos			{  display: block; width: 100%; }

}

@media (max-width: 1200px){

.contact section .container		{ width: 100%; padding: 0 }

}

@media (max-width: 768px){

.contact .contactform	.col2	{ display: block; width: 90% }

.contactform input[type="submit"] {	margin-top: 15px	}

}



.legal							{ width: 80%; margin: 5% auto }

.legal h3						{ font-size: 20px; letter-spacing: 3px; font-weight: 300; font-style: normal; text-transform: uppercase; margin: 0; padding-top: 20px; line-height: 1.3em; color: #9D000C }



@media (max-width: 600px){

.legal 							{ width: 90% }

}



.grpd							{ padding: 2% 5% }

.grpd .grpd-txt 				{ width: 80%; margin: 1% auto }

.grpd .grpd-blocs				{ font-size: 15px; text-align: center; margin-top: 2% }

.grpd .grpd-bloc				{ display: inline-block; width: 31%; min-height: 370px; box-sizing: border-box; border: 1px solid #627788; text-align: justify; padding: 2% 2% 1% 2%; margin: 1%; vertical-align:top; line-height: 1.3em }

.grpd h2 						{ color: #22384D; text-align: center; line-height: 1.4em; font-weight: bold; text-transform: none }

.grpd .grpd-icone 	 			{ text-align: center }

.grpd .grpd-icone img 			{ width: 48px; height: auto }



@media (max-width: 768px){

.grpd .grpd-bloc				{ display: inline-block; width: 45% }

}

@media (max-width: 580px){

.grpd .grpd-txt					{ width: 90% }

.grpd .grpd-bloc 				{ display: block; width: 90%; margin: auto; min-height: inherit; margin-bottom: 2% }

}



.grpd-logo img 					{ width: 100px; height: auto }

.grpd-legal						{ margin-top: 5%; font-size: 12px; line-height: 1.1em; text-align: justify; color: #333 }



.pied-videos					{ background-color: white; border: 1px solid white; font-size: 16px }

.pied-videos .videos-col		{ display: inline-block; width: 30%; vertical-align: top; padding: 2% }

.pied-videos .videos-col:last-child		{ display: inline-block; width: 68%; vertical-align: top; padding: 3% }

.videos-col h2					{ font-size: 36px; line-height: 1em; margin-bottom: 20px; font-weight: 600; text-transform: none; letter-spacing: 2px; text-align: left; color: #9D000C }

.videos-col .video				{ display: inline-block; width: 45%; vertical-align: top; margin: 1% }

.videos-col .video iframe		{ width: 350px; height: 196px }

.video .video-txt				{ color: #231F20; font-size: 15px; line-height: 1.4em; text-align: justify; padding: 1% }





@media (max-width: 1200px){

.pied-videos .videos-col, .pied-videos .videos-col:last-child	{ width: 48% }

.videos-col .video				{ display: block; width: 90% }

}

@media (max-width: 940px){

.videos-col .video iframe		{ width: 300px; height: 168px }

.video .video-txt				{ text-align: left }

}



@media (max-width: 540px){

.pied-videos .videos-col, .pied-videos .videos-col:last-child	{ display: block; width: 100% }

.videos-col h2					{ font-size: 24px }

.videos-col .video iframe		{ width: 350px; height: 196px }

}



.pied-isaferat					{ background-color: #F2F1F1; border: 1px solid #F2F1F1; font-size: 24px; color: #9D000C }

.pied-isaferat .isaferat-col	{ display: inline-block; width: 46%; vertical-align: middle; padding: 2% }

.isaferat-col .bloc-jsslider	{   } 

.isaferat-col h2				{ font-size: 36px; line-height: 1em; margin-bottom: 20px; font-weight: 600; text-transform: none; letter-spacing: 2px; text-align: left; color: #333 }

.isaferat-col a					{ color: #333 }

.isaferat-col a.minus			{ font-size: 14px }



.pied-isaferat-rouge			{ background-color: #9D000C; border: 1px solid #9D000C; font-size: 18px; color: #EEE; padding: 2% }

.pied-isaferat-rouge .isaferat-col					{ display: inline-block; width: 55%; vertical-align: middle }

.pied-isaferat-rouge .isaferat-col:last-child		{ width: 40%; padding: 5% }

.pied-isaferat-rouge .isaferat-col:last-child img	{ margin-top: -5% }



@media (max-width: 992px){

}

@media (max-width: 768px){

.pied-isaferat .isaferat-col	{ display: block; width: 100%; text-align: center }

.pied-isaferat-rouge .isaferat-col	{ display: block; width: 90%; margin: auto }

.pied-isaferat-rouge .isaferat-col:last-child		{ width: 90%; text-align: center }

.pied-isaferat-rouge .isaferat-col:last-child img	{ margin-top: 0; max-width: 350px }

.pied-isaferat-rouge h1			{ font-size: 20px }

}

@media (max-width: 480px){

.videos-col 					{ width: 45% }

.videos-col .video				{ display: block; width: 90% }

}



.pied-team						{ background-color: #A3A0A1; border: 1px solid #C3C0C1; font-size: 16px; text-align: center; padding: 2% 0 }

.pied-team h2					{ font-size: 24px; line-height: 1em; margin-bottom: 20px; font-weight: normal; letter-spacing: 2px; text-transform: none; color: #FFF }

.pied-team .pied-team-bloc		{ display: inline-block; position: relative; width: 12%; vertical-align: top; margin: 1% }

.pied-team-bloc img				{ display: block; width: 100%; height: auto }

.pied-team-bloc .overlay		{ position: absolute; bottom: 0; left: 0; right: 0; background-color: #9D000C; overflow: hidden; height: 0; transition: .5s ease }

.pied-team-bloc:hover .overlay	{ height: 100% }

.pied-team-bloc .overlay .pied-team-txt	{ color: #CCC; font-size: 14px; padding: 20%; font-weight: bold; line-height: 1.2em; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);  transform: translate(-50%, -50%) }



@media (max-width: 768px){

.pied-team .pied-team-bloc		{ width: 28% }

.pied-info-txt					{ width: 46% }

.pied-info-photos				{ width: 52% }

}



@media (max-width: 480px){

.pied-info-txt, .pied-info-photos 		{ display: block; width: 90%; margin: auto }

}



#pied-fd				{ display: block; width: 100%; background-color: #ECECEB; border-top: 1px solid #ECECEB }

#pied-fd .filet			{ border-bottom: 1px #9D000C solid; padding: 10px }

#pied-fd .rs			{ text-align: right; padding-right: 10%; letter-spacing: 3px; font-size: 11px; text-transform: uppercase }

#pied-fd .rs img 		{ vertical-align: middle; margin-right: 5px; width: 32px; height: auto }

#pied 					{ width: 1140px; margin: auto; padding: 20px 0; color: #231F20 }

#pied a 				{ color: #231F20 }

#pied a:hover 			{ color: #000 }

#pied .info 			{ display: inline-block; vertical-align: middle;  width: 32% }

#pied .info img			{ width: 170px; height: auto }

#pied .info h1 			{ font-size: 15px; font-weight: bold; text-transform: none; line-height: 1.5em; font-family: yanone_thin  }

#pied .info ul 			{ list-style: none; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; padding-left: 30% }	

@media (max-width: 1200px){

#pied 						{ width: 940px }

}

@media (max-width: 992px){

#pied 						{ width: 100% }

}

@media (max-width: 768px){

#pied 					{ text-align: center }

#pied .info 			{ width: 45% }

#pied .info img			{ width: 120px }

#pied .info ul 			{ margin-top: 20px; padding-left: 0; border-top: 1px #9D000C solid; padding-top: 10px }	

}



@media (max-width: 480px){

#pied .info 			{ width: 85%; margin-top: 10px; padding-top: 10px; border-top: 1px solid #F2F2F2 }

}



.ordersexport				{ width: 60%; margin: auto }

.ordersexport .annees a		{ display: inline-block; margin: 10px }

.ordersexport a				{ display: block; margin: 10px }



@media (max-width: 1200px){



}

@media (max-width: 992px){



}

@media (max-width: 768px){



}

@media (max-width: 480px){



}