@import url(https://fonts.googleapis.com/css?family=Roboto:100,400,600,900); /*100:thin,300:light,400:regular,500:medium, 700:bold, 900:black;*/	
	

	


	/*debug*/
	.red{background:red;opacity:.6;}

	:root{
		--scroll:0;
		--scroll_invite_h:calc(2vh + 100px);
		--hero_h:calc(100vh - var(--scroll_invite_h));
		--logo_w: calc(2vh + 8vw + 120px);
		--logo_h: calc(var(--logo_w) / 2.222);
		--nav_h:70px;
		--main-padding:8vh;
		/*img*/
		--services-img1:url(/assets-web/img/home/00069-558.png);
		--services-img2:url(/assets-web/img/home/00003-4208349037.png);
		--job-offers-img1:url(/assets-web/img/home/00114-423.png);
		--about-img1:url(/assets-web/img/home/00114-423.png);
		/*color*/
		--primary-color : #54b3d6;
		--dark-color : #15171a;
	} 
		@media (max-width: 991.98px) {:root{--main-padding:4vh;}}
		@media (max-width: 767.98px) {:root{--main-padding:2px;}}



	* {margin:0; padding:0; box-sizing:border-box;}
	a{text-decoration:none !important;}
	html, body {position:relative; font-weight:400; font-size:18px; font-family:"Roboto", Arial, Helvetica, sans-serif; font-style:normal; }
	body.hidden {visibility: hidden;}

	.no-select{
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Old versions of Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
		user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
	}

	/* general elements ------------------------------------------------------ */

	h2{color:var(--dark-color); display:inline-block;}
	h2 .underline-anim{background:var(--dark-color); height:3px; width:15%;}
	h2.white{color:#fff; text-shadow:0 1px 7px rgba(4, 13, 50, 0.2);}
	h2.white .underline-anim {background:#fff; box-shadow:0 1px 10px rgba(4, 13, 50, 0.3);}
	h3.white{color:#fff; text-shadow:0 1px 6px rgba(4, 13, 50, 0.25);}
	h3.h3-special{font-size: 2.2em !important; margin: .3rem 0 0 0 !important; text-align:center;}

	h1, h2, h3{font-weight:400; line-height: 1.5;}
	h1{font-size: 2.75rem; margin-top: 4rem; padding-bottom: 1.5rem !important;}
	h2{font-size: 2.4rem; margin-top: 4rem; padding-bottom: 1.5rem !important;}
	h3{font-size: 1.6rem; margin: .3rem 0 .5rem 0; padding-bottom: 1.5rem !important;}
	h4{font-size: 1.25rem; margin: .3rem 0 .5rem 0;}
	h5{font-size: 1rem; margin: .3rem 0 .5rem 0; font-weight:900;}
		@media (max-width: 768px) { 
			h2 {margin-top:2rem;}
		}

		@media (max-width: 991.98px) {
			section h2{ font-size: calc(0.2vh + 0.5vw + 1.7rem);}
			section h3{ font-size: calc(0.2vh + 0.5vw + 1.2rem);}
		}

		.break {display: inline-block;}
		@media screen and (max-width: 575.98px) {.break {display: block;}}

	p {color:#33393f; line-height:1.8; font-weight:400; margin-top:0; margin-bottom: 1rem;}
	@media (max-width: 768px) { p {line-height:1.8; font-size:0.9rem; margin-bottom: 1rem;}}
	p b {font-weight:900;}


	.logo{
		position:relative; display:block; left:0; background-color:#fff; overflow: hidden; text-indent: -999999px; mask-size:contain; mask-position:center center; 
		mask-image: url(/assets-GENERAL/logos/logo.svg); 
		mask-repeat: no-repeat;
		-webkit-mask-size:contain; -webkit-mask-position:center center; 
		-webkit-mask-image: url(/assets-GENERAL/logos/logo.svg); 
		-webkit-mask-repeat: no-repeat;
	}

	.blue-bkg{position:absolute; width:100%; height:100%; background: linear-gradient(75deg, rgba(123,65,255,1) 0%,rgba(63,187,254,1) 46%,rgba(63,254,220,1) 100%);}
	@media screen and (max-width: 768px) {
		.blue-bkg{background: linear-gradient(75deg, rgb(92, 33, 232) 0%,rgb(30, 160, 230) 46%,rgb(23, 238, 199) 100%);}
	}
	
	.blue-bkg::before,
	.blue-bkg::after{height:calc(50vh + 50vw); width:calc(50vh + 50vw); position:absolute; transform:translateX(-50%) translateY(-50%); background:url('../svg/bubble.svg') center center; background-size:cover; background-repeat:no-repeat;}
	.blue-bkg::before{left:5vw; content:''; opacity:0.2;}
	.blue-bkg::after{left:110vw; top:-5vh; content:''; opacity:0.3;}

	.bkg-for-text {background:rgba(255,255,255,1)}
	.primary-color {color:var(--primary-color)}

	.white_top_bkg{position:absolute; width:100%; height:clamp(50px, 20vh, 500px);  top:0; background: linear-gradient(180deg, rgba(255,255,255,0.9) 0% 30%,rgba(255,255,255,0) 100%);}
	.white_bottom_bkg1 {position:absolute; width:100%; height:clamp(100px, 90vh, 1000px);  bottom:0; background: linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 30%,rgba(255,255,255,0) 100%);}
	.white_bottom_bkg2 {position:absolute; width:100%; height:clamp(100px, 90vh, 1000px); bottom:0; background: linear-gradient(0deg, rgba(255,255,255,0.5) 30%,rgba(255,255,255,0) 100%);}


	/* image ------------------------------------------------------ */
	.bg-responsive {background-size:cover; background-repeat:no-repeat;}
	.bg-lt {background-position: left top;}.bg-ct {background-position: center top;}.bg-rt{background-position: right top;}
	.bg-lc {background-position: left center;}.bg-cc {background-position: center center;}.bg-rc {background-position: right center;}
	.bg-lb {background-position: left bottom;}.bg-cb {background-position: center bottom;}.bg-rb {background-position: right bottom;}

	/* estompage ------------------------------------------------------ */
	.top-fade-100{mask-image: linear-gradient(to bottom, transparent 0%, black 100%); 
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);}
	.bottom-fade-100{mask-image: linear-gradient(to top, transparent 0%, black 100%); 
		-webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);}
	.bottom-fade-50{mask-image: linear-gradient(to top, transparent 0%, black 50%); 
		-webkit-mask-image: linear-gradient(to top, transparent 0%, black 50%);}


	/* side-nav (menu) ------------------------------------------------------ */
	.side-nav {mix-blend-mode:normal; position:fixed; list-style:none; z-index:100; top:50%; right:4vw; transform:translateY(-50%); display:none; flex-direction:column;}
		.side-nav .nav-item a {position:relative; width:calc(1.2vw + 20px); height:calc(1.2vw + 20px); display:flex; align-items:center; justify-content:center; cursor:pointer; }
		.side-nav .nav-item a::before {position:absolute; opacity:0.4; background-color:var(--dark-color); box-shadow:0 0 4px rgba(0,0,0,0.05);  content:''; width:calc(0.4vw + 3px); height:calc(0.4vw + 3px); border-radius:50%; transition:all 0.3s ease;}
		.side-nav .nav-item:hover a::before,
		.side-nav .nav-item.active a::before {width:calc(0.7vw + 12px); height:calc(0.7vw + 12px); background-color:var(--dark-color); opacity:0.8;}
		
		.side-nav .nav-item a::after {position:absolute; outline:2px solid #fff;  content:''; width:calc(0.4vw + 3px); height:calc(0.4vw + 3px); border-radius:50%; transition:all 0.3s ease;}
		.side-nav .nav-item:hover a::after,
		.side-nav .nav-item.active a::after {width:calc(0.7vw + 12px); height:calc(0.7vw + 12px); outline:2px solid #fff;}

	
		.side-nav .nav-item a span{transition:opacity .3s, transform .3s; opacity:0; white-space: nowrap; position:absolute; left:0; color:#fff; background:var(--dark-color); padding:5px 10px; border-radius:15px; transform:translateX(calc(-100% + 30px));}
		.side-nav .nav-item a:hover span{opacity:1; transform:translateX(-100%);}


	@media (max-width: 767.98px) {.side-nav {visibility:hidden;}}



	/* all sections ------------------------------------------------------ */
	
	
	section{position:relative; width:100%; overflow:hidden;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizelegibility;}
		.main-padding-bottom{padding-bottom:var(--main-padding);}
		.main-margin-top{margin-top:var(--main-margin) !important;}


		.padding-bottom-section {padding-bottom:8vh;}
		.margin-bottom-section {margin-bottom:8vh;}
		@media (max-width: 991.98px) {.padding-bottom-section {padding-bottom:5vh;}}

	/* sections#home ------------------------------------------------------ */
	section#home{ height:var(--hero_h);}
		#hero {margin:0; padding:0; position:relative; height:100%; width:100%; color:white; z-index:0; overflow:hidden;}
			#hero .bkg {position:absolute; width:100%; height:100%; background:#010d33;} /* background:#010d33 5a7085; */
			#hero #videoContainer{position:absolute; top:0; left:0; width:100%; height:100%; opacity:.85;}
			#hero video{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
			/*pas de video sur mobile*/
			@media (max-width: 768px) {
				#hero video {display: none;}
			}
			#hero #poster {display:none; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
			}
			@media screen and (max-width: 768px) {
				#hero #poster {display:block;}
			}



			#hero .gradient-bkg {background: linear-gradient(50deg, rgb(84, 65, 255) 0%,rgba(63,187,254,1) 20%,rgba(63,254,220,1) 100%);
								mask-image: linear-gradient(180deg, transparent 68%, black 98%); 
								-webkit-mask-image: linear-gradient(180deg, transparent 68%, black 98%);
								opacity:.7; position:absolute; width:100%; height:100%; min-height:18px; top:0; 
								}
			#hero-container{height:100%; padding:0 2vw;}
			.hero-margins{width:80vw; max-width:1000px; margin:0 auto; position:relative; padding:0;}
				@media (max-width: 575.98px) {.hero-margins{ width:85vw;}}

				/*home*/
				#hero #header{ height:clamp(130px, calc(13vh + 2vw), 210px); display:flex; justify-content:space-between; align-items:end; width:100%; position:relative; padding:0;}
				@media screen and (max-width: 768px) {
					#hero #header{ height:clamp(130px, 15vh, 150px);}
				}
				#hero .logo { width: clamp(170px, var(--logo_w), 250px); height: clamp(calc(100px / 2.222), var(--logo_h), calc(250px / 2.222));}
				/*contact*/
				#contact #header{ height:clamp(130px, calc(13vh + 2vw), 210px); display:flex; justify-content:space-between; align-items:end; width:100%; position:relative; padding:0;}
				@media screen and (max-width: 768px) {
					#contact #header{ height:clamp(130px, 15vh, 150px);}
				}
				#contact .logo { width: clamp(170px, var(--logo_w), 250px); height: clamp(calc(100px / 2.222), var(--logo_h), calc(250px / 2.222));}



				#hero #medias-btns,
				#contact #medias-btns {position:relative; top:10px; display:flex; align-items:center; justify-content:flex-end; width:300px; height:50px;}
					.social-wrap {margin-right:30px; display:flex; position:relative; left:-8px;}
					.social-wrap a{display:block; height:50px; width:50px; margin-right:0.8vw; display:flex; align-items:center; justify-content:center;}
					.social-wrap a i{font-size:clamp(1.4rem, 4vw ,2rem); color:rgba(255,255,255,1); transition:color .3s; transition:font-size .2s;}
					.social-wrap a:hover i{font-size:2.5rem;}
					#lang_selector{cursor:pointer; display:flex; align-items:center; position:relative; top:4px; font-size:clamp(1rem, 2vw ,1.2rem); font-weight:600;
						height:60px; line-height:40px; color:rgba(255,255,255,1); transition:color .3s; text-transform:uppercase;}
					#lang_selector::before{display:inline-block; content:'';
						height:clamp(30px,3vw,35px); width:clamp(30px,3vw,35px); margin-right:5px; background-color:rgba(255,255,255,1); transition:background-color .3s; 
						mask-size:contain; mask-position:left center; mask-image:url("../svg/globe.svg"); mask-repeat:no-repeat;
						-webkit-mask-size:contain; -webkit-mask-position:left center; -webkit-mask-image:url("../svg/globe.svg"); -webkit-mask-repeat:no-repeat;}
						#lang_selector ul{position:absolute; overflow:hidden; transition: all .3s; visibility:hidden; z-index:100; width:calc(100% + 40px); transform:translateY(100%); list-style:none; bottom:0; right:-40px; border-radius:8px; background:#fff; opacity:0;}
						#lang_selector:hover ul {opacity:1; visibility:visible;}
							#lang_selector ul li {text-align:center; width:calc(100% + clamp(30px,3vw,35px) -40px); color:#c3c3c3; transition:all .3s;}
							#lang_selector ul li:hover {background:rgba(0,0,0,0.1); color:#2d2d2d;}
							#lang_selector ul li a {color:#c3c3c3;}
							#lang_selector ul li:hover a {color:#2d2d2d;}
			
							
			#hero #line, #contact #line {position:relative; z-index:0; top:2vh; display:block; width:100%; height:0.2vh; overflow:hidden;}
				#hero #line span, #contact #line span {position:absolute; top:0; height:100%; width:20vw; left:-20vw; background:#fff; animation:line-grow 4s infinite cubic-bezier(0.075, 0.82, 0.165, 1); display:block;}
				@keyframes line-grow {0% {width:20vw; left:-20vw;} 100% {width:5vw; left:100%;}}
			
			#hero h2 { position:absolute; display:block; top:35%; left:calc(2vw - 5px);}

			#hero h2 div {position:absolute; transform:translateY(-50%); color:#fff; font-weight:400; font-size:calc(3.8vh + 1.2vw + 1.7rem);}
			.carousel_text div {display:none;}
			.carousel_text div span {display:block; position:relative; width:100%; height:calc(4vh + 1.3vw + 2rem); margin:0; padding:0;}
					.blur-animation {filter: blur(10px);transition: filter 1s ease-out;}
					.blur-animation.blur-out {filter: blur(0px);}

			#hero h3 {position:absolute; bottom:calc(40px + 5vh); height:50px; width:100%; color:#fff; font-size:calc(0.8rem + 0.2vh + 0.2vw);}
			#hero h3 .hyphen::after{ display:inline-block; content:' - '; white-space: pre;}
				@media (max-width: 768px) {
					#hero h3 {bottom:calc(60px + 5vh);}
					#hero h3 .hyphen{ display:block; height:0;}
					#hero h3 .hyphen::after{content:'';}
				}


			nav {position:absolute; bottom:0; width:100vw; height:var(--nav_h);
				background:rgba(255,255,255,1);}
				@media (max-width: 768px) {nav {background:rgba(255,255,255,.8); backdrop-filter: blur(6px);}}

					ul#nav{position:relative; left:-8px; align-items:center; justify-content:start; display:flex;}
					@media (max-width: 575.98px) {ul#nav {width:100vw; max-width:inherit; margin:0; padding:0; justify-content:center;}}


						ul#nav li{margin:0; height:var(--nav_h); position:relative;}
						ul#nav li a{overflow: hidden; color:#3f3f3f; position:relative; font-size:1.05rem; font-weight:400; 
							display:flex; height:100%; top:0; align-items:center; margin:0; padding: 0 2vw; background:rgba(255,255,255,0); transition:all .3s}
						ul#nav li a::before,
						ul#nav li a::after {content: ''; position:absolute; width:100%; left:0; display:flex; align-items:center; padding: 0 2vw;}
						ul#nav li a::before {
							font-weight:400;
							background-color: var(--primary-color);
							height: 2px;
							bottom: 0;
							transform-origin: 100% 50%;
							transform: scaleX(0);
							transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
						  }
						  ul#nav li a::after {
							font-weight:400;
							content: attr(data-replace);
							height: 100%;
							top: 0;
							transform-origin: 100% 50%;
							transform: translate3d(0, 200%, 0);
							transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
							color: var(--primary-color);
						  }
						  
						  ul#nav li a:hover::before {
							transform-origin: 0% 50%;
							transform: scaleX(1);
						  }
						  ul#nav li a:hover::after {transform: translate3d(0, 0, 0);}
						  ul#nav li a span {display: inline-block; transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); }
						  ul#nav li a:hover span {transform: translate3d(0, -300%, 0);}


						  ul#nav li .sublink {position:absolute; background:#fff; width:100%; height:200%; bottom:-200%; opacity:0; transition:bottom .2s, opacity .2s;}
						  ul#nav li:hover .sublink {bottom:0; opacity:1;}
						  ul#nav li .sublink a {height:50%; text-align:center; position:relative;}
						  ul#nav li .sublink a span{width:100%;}
						  ul#nav li .sublink a::after {display:flex; align-items:center; justify-content:center;}



						/*
						ul#nav li a:hover{color:#10b1ec; text-shadow:none; background:#eee; -webkit-box-shadow: 0px 4px 20px rgba(0,0,0,0.1); box-shadow: 0px 4px 20px rgba(0,0,0,0.1); z-index:1;}
					    */
					@media (max-width: 992px) {
						:root{
							--logo_w: calc(10vw + 100px);
						}
						ul#nav li a{position:relative; font-size:clamp(0.8rem, calc(0.4rem + 1vw), 2rem); font-weight:400;}
					}
					@media (max-height: 800px) {
						:root{
							--logo_w: calc(10vw + 100px);
							--nav_h:60px;
						}
				
					}
					@media (max-height: 768px) {
						:root{
							--hero_h:calc(100svh - 1vh);
							--logo_w: calc(10vw + 100px);
							--nav_h:60px;
						}
					}
					@media (max-height: 500px) {
						#hero h2 div {font-size:calc(1.2vh + 0.3vw + 3rem);}
						#hero h3 {display:none;}
					}




					/* iPhone 5/SE */
					@media only screen and (max-device-width: 320px) and (max-device-height: 568px) {
						:root {--hero_h: calc(100vh - 80px);}
					}
					
					/* iPhone 6/7/8 */
					@media only screen and (max-device-width: 375px) and (max-device-height: 667px) {
						:root {--hero_h: calc(100vh - 80px);}
					}
					
					/* iPhone 6/7/8 Plus */
					@media only screen and (max-device-width: 414px) and (max-device-height: 736px) {
						:root {--hero_h: calc(100vh - 90px);}
					}
					
					/* iPhone X/XS/11 Pro */
					@media only screen and (max-device-width: 375px) and (max-device-height: 812px) {
						:root {--hero_h: calc(100vh - 140px);}
					}
					
					/* iPhone XR/11 */
					@media only screen and (max-device-width: 414px) and (max-device-height: 896px) {
						:root {--hero_h: calc(100vh - 140px);}
					}
					
					/* iPhone XS Max/11 Pro Max */
					@media only screen and (max-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
						:root {--hero_h: calc(100vh - 140px);}
					}



/* ==== section#services ====================================================================== */
	
	#services .bkg-for-text h3{color:#3681bb}


	#scroll_invite{width:100%; height:var(--scroll_invite_h);}
	#scroll_invite .arrow{top:35px; position:absolute; z-index:2; left:50%; transform:translateX(-50%); 
		width:80px; border-radius:20px; height:30vh; background:transparent;}
	#scroll_invite .arrow::before{display:block; content:''; height:40px; width:40px; position:absolute; left:50%; top:-5px; opacity:0; animation:scroll-invite-arrow 1.8s infinite ease-in-out; transform:translateX(-50%) translateY(-50%); 
		background:#fff;
		mask-size:contain; mask-position:center center; mask-image: url("../svg/arrow_down.svg"); mask-repeat: no-repeat;
		-webkit-mask-size:contain; -webkit-mask-position:center center; -webkit-mask-image: url("../svg/arrow_down.svg"); -webkit-mask-repeat: no-repeat;
		}
	@keyframes scroll-invite-arrow{ to { top:35px; opacity:1;} }
	@media (max-width: 768px) { 
		#scroll_invite{display:none;}
	}


	#services-section{overflow:hidden;}

	section #services h2{margin-top:4vh;}
	#services-img1{background-image:var(--services-img1);}
	#services-img2{background-image:var(--services-img2);}

		@media (max-width: 991.98px) {
			#services-img1,
			#services-img2{width: 100%; aspect-ratio: 1.5 / 1; max-height:350px;}
		}
		@media screen and (max-width: 768px) {
			section #services h2{margin-top:2rem;}
			#services-img1 {display:none;}
		}


/* ==== section#job-offers ====================================================================== */

	:root{
		--job-offers-bkg:#e3e7f799;
		--job-offers-label-bkg:rgba(255,255,255,0);
		--job-offers-label-hover-bkg:rgba(255,255,255,1);
		--job-offers-content-bkg:rgba(255,255,255,0.7);
		--radius:6px;
	} 
	.br {border-radius:var(--radius);}

	section#job-offers{overflow:hidden; background:var(--job-offers-bkg); border-top:1px solid #fff;}
	section#job-offers .bkg-img{ background-image: var(--job-offers-img1);}

	.bkg-img{position:absolute; width:100%; height:100vh; background-position:center; background-repeat:no-repeat; background-size:cover;}
	.bkg-img-bottom{bottom:0; background-position:center; }
	@media (min-width: 576px) { .bkg-img{height:95vh;}}
	@media (min-width: 768px) { .bkg-img{height:90vh;}}
	@media (min-width: 992px) { .bkg-img{height: 85vh;}}
	@media (min-width: 1200px) { .bkg-img{aspect-ratio: 1.5 / 1; height:inherit; max-height:85vh}}
	@media (min-width: 1400px) { .bkg-img{aspect-ratio: 1.5 / 1; max-height:80vh; }}

	section#job-offers .bkg-img{mix-blend-mode:screen; opacity:0.2}
	/*iphone*/
	@media (max-width: 768px) { 
		#job-offers div.white_top_bkg {display:none;}
	}



	ul.accordion {width:100%;}
	ul.accordion > li {backdrop-filter: blur(25px);list-style:none; width:100%; margin:30px 0; background-color:var(--job-offers-content-bkg); border-radius:var(--radius); }
	ul.accordion > li label {background-color:var(--job-offers-label-bkg); box-shadow : 0px 0px 5px 0px rgba(0,0,0,0); border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius); transition:all .4s; display:flex; align-items:center; justify-content:space-between; height:70px; padding:0 20px; font-size:18px; font-weight:600; cursor:pointer;}
	ul.accordion > li label:hover {background-color:var(--job-offers-label-hover-bkg); box-shadow : 1px 1px 10px 0px rgba(0,0,0,0.15);}
		ul.accordion > li label div{display:inline-block; display:flex; align-items:center;}
			ul.accordion > li label span.arrow {position:relative; width:35px; height:25px; margin-right:15px; transform:rotate(-90deg); transition:transform 0.4s;}
			ul.accordion > li label span.arrow::before {position:absolute; width:100%; height:100%; content:''; background:#555;
			mask-size:contain; mask-position:center center; mask-image: url("../svg/arrow_down.svg"); mask-repeat: no-repeat;
			-webkit-mask-size:contain; -webkit-mask-position:center center; -webkit-mask-image: url("../svg/arrow_down.svg"); -webkit-mask-repeat: no-repeat;
			}
			
			ul.accordion > li label div.info span{margin:0 10px 0 20px; color:#868686}
			ul.accordion > li label div.info {font-weight:400; font-size:16px; padding-left:10px;}
			ul.accordion > li input[type="checkbox"]{display:none;}
			ul.accordion > li .content{max-height:0; padding:0 30px; opacity:0; border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius); color:#555; line-height:26px; overflow:hidden; transition:max-height 0.8s, padding 0.8s, opacity 0.6s;}
			ul.accordion input[type="checkbox"]:checked + label{background:#9da0a7; color:#fff; border-bottom-left-radius:0; border-bottom-right-radius:0; }
			ul.accordion input[type="checkbox"]:checked + label span.arrow::before{background:#fff;}
			ul.accordion input[type="checkbox"]:checked + label div.info span{color:#fff;}
			ul.accordion input[type="checkbox"]:checked + label + .content{max-height:8000px; padding:30px; opacity:1;}
			ul.accordion input[type="checkbox"]:checked + label span.arrow {transform:rotate(0deg);}
			ul.accordion h4 {position:relative; display:inline-block; font-weight:600; color:#010d33;margin:1.5rem 0 01rem 0;}
			ul.accordion h4::before {position:absolute; display:block; content:''; width:100%; height:3px; bottom:-5px; background:var(--primary-color)}
			ul.accordion ul {list-style:none; margin: 1.1em 0 1em 1em;}
			ul.accordion ul > li {padding: 0.3em 0 0.3em 1em;}
			ul.accordion ul > li::before {position:absolute; content: '\2022 '; left:3em;}




		
		@media (max-width: 767.98px) {
			ul.accordion > li {margin:2vh 0;}
			ul.accordion > li label {flex-direction:column; justify-content:center; height:inherit; min-height:11vh;}
			ul.accordion > li label > div{width:100%;}
			ul.accordion > li label div.info{margin:5px 0 5px 80px;}
			ul.accordion > li label div.info span{margin:5px 30px 5px 0;}
			ul.accordion .content::before{top:100px;}
		}



	section .panel{backdrop-filter: blur(25px); background:var(--job-offers-content-bkg); width:100%; padding:30px; border-radius:var(--radius);}

	.action_btn{color:#444; font-weight:600; display:block; max-width:300px; text-align:center; margin:20px auto; padding:10px 50px; border-radius:var(--radius); cursor:pointer; border:1px solid #ccc; background:#fff; transition:all 0.3s;}
	.action_btn:hover{color:#fff; background:rgba(150,150,150,1);}

	.action_btn.dark{color:#fff;background:#1d1d1d; border:none;}
	.action_btn.dark:hover{color:#fff; background:#3a3a3a;}



/* ==== section#about ====================================================================== */

:root{
	--about-ico-size:90px;
	--about-ico-space:calc(var(--about-ico-size) + 30px);
}

	section#about .img{height:100%; width:100%; background-size:cover; background-image: var(--about-img1);}
	@media (max-width: 767.98px) {
		section#about .img{width:100%; aspect-ratio: 1.5; height:inherit;}
	}

	.strong-space{letter-spacing: 2px;}

	#our_values_title{margin-top:6vh !important;}
	@media (max-width: 1199.98px) { #our_values_title{margin-top:2vh !important;} }
	@media (max-width: 991.98px) { #our_values_title{margin-top:1vw !important;} }


	.about-ico{position:relative; padding-left:var(--about-ico-space); margin-top:2vh;}
	.about-ico::before{position:absolute; content:''; transform:translateX(calc(-1 * var(--about-ico-space))); width:var(--about-ico-size); height:var(--about-ico-size); 
		background-size:100%; background-repeat:no-repeat; }
		.about-authenticity::before{ background-image: url(/assets-web/svg/about_authenticity.svg);}
		.about-ethics::before{ background-image: url(/assets-web/svg/about_ethics.svg);}
		.about-adaptability::before{ background-image: url(/assets-web/svg/about_adaptability.svg);}
		.about-commitment::before{ background-image: url(/assets-web/svg/about_commitment.svg);}
		.about-inclusion::before{ background-image: url(/assets-web/svg/about_inclusion.svg);}


/* ==== info contact =================================================================== */

		#tempo-form-msg{display:block; text-align:justify; margin:0; padding:calc(3vh + 15px) calc(3vh + 15px); position:relative; width:100%; z-index:1; line-height:1.6; 
			margin:calc(2vh + 15px) 0 calc(9vh + 15px) 0; background:rgba(255, 255, 255, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius:6px;}
		#tempo-form-msg .right{text-align:right;}



		#contact-adress{display:flex; align-items:center; justify-content:center; margin:0; padding:calc(2vh + 10px) 0; position:relative; width:100%; z-index:0; 
			background:rgba(255, 255, 255, 0.6); margin-top:6vh;}

			@media (max-width: 991.98px) {#contact-adress{margin-top:3.5vh;}}
			@media (max-width: 767.98px) {#contact-adress{margin-top:2px;}}


		#contact-adress > div a {color:#010d33; line-height: 2; text-align:left; text-decoration:none;}
		#contact-adress span{display:inline-block;margin:10px;}
		#contact-adress .group {display: flex; align-items:center; justify-content:center; gap:1vw;}
		@media (max-width: 991.98px) {
			#contact-adress .group {flex-direction: column;}
		}

		#contact-adress .ico {cursor:pointer; display: flex; align-items: center; position: relative; padding:5px 10px 5px 55px; border-radius:30px; transition:background-color .3s;}
		#contact-adress .ico:hover {background:rgba(255, 255, 255, 0.6);}
		#contact-adress .ico::after {content: ''; display: block; position: absolute; left: 8px; width: 35px; height: 35px; background:#fff; mask-size: cover; mask-repeat: no-repeat; mask-position: center center; transition:background-color .3s;}
		#contact-adress .ico:hover::after {background:rgba(9, 7, 33, 0.8);}
		#contact-adress .ico.position::after { mask-image: url(/assets-web/svg/position.svg);}
		#contact-adress .ico.phone::after { mask-image: url(/assets-web/svg/phone.svg); }
		#contact-adress .ico.contact::after { mask-image: url(/assets-web/svg/contact.svg); }


/* ==== protection of data =================================================================== */


		#protection_of_data {text-align:justify;}

		#protection_of_data .white-stripe {position:absolute; width:1000px; height:100%; left:50%; transform:translate(-50%); background:rgba(255,255,255,1);}
		@media (max-width: 1399.98px) { #protection_of_data .white-stripe {width:72vw; max-width:1000px;} }
		@media (max-width: 1199.98px) { #protection_of_data .white-stripe {width:65vw; min-width:700px;} }
		@media (max-width: 991.98px) { #protection_of_data .white-stripe {width:63vw; min-width:650px;} }
		@media (max-width: 767.98px) { #protection_of_data .white-stripe {width:60vw; min-width:500px;} }
		@media (max-width: 575.98px) { #protection_of_data .white-stripe {width:92%; min-width:inherit;} }
		
		#protection_of_data_txt {padding-bottom:8vh;}
		#protection_of_data_txt a {max-width:300px;}
		#protection_of_data_txt h2 {font-size:1.5em; text-align:left;}
		#protection_of_data_txt h3 {font-size:1.2em; text-align:left; margin-top:2em !important; margin-bottom:0 !important;}
		



/* ==== footer ====================================================================== */


		footer{overflow:hidden; position:relative; background:var(--dark-color); color:#fff; padding:5vh 0 !important;}
		
	
			footer .logo {display:inline-block; height: 40px; width: calc(40px * 2.222);}

			footer ul.nav {line-height:2; margin:10px 0;}
				footer a{color:#fff; padding:10px; border-radius:5px; transition:all .3s;}
				footer a:not(.logo):hover{color:#fff; background: rgba(255,255,255,.15);}

			footer .darker-color{color:rgba(255,255,255,0.38)}

			footer .social_medias_container{display:inline-block;}
				footer .social-medias{width:45px; height:45px; display:flex; align-items:center; justify-content:center; border-radius:5px; transition:all .3s;}
				footer .social-medias:hover{border-radius:50%; background: rgba(255,255,255,.15);}
				footer .social-medias i{font-size:24px;}



/*
neumorphisme box-shadow : 2px 2px 8px -1px rgba(0,0,0,0.05), -5px -5px 8px -1px rgba(250,250,250,0.9); 

	table.job-offers {width: 100%; background: rgba(255,255,255,.8)}
		table.job-offers tr.line:hover {background-color: #fff; cursor: pointer;}
		table.job-offers tr.desc {display:none;}
			table.job-offers td {border: 1px solid #000;padding:10px}
			table.job-offers .arrow {width: 60px;}  




	
		#Xhero::before {content:''; position:absolute; inset:0; z-index:-1; mix-blend-mode: overlay;
			background: rgb(58,0,108); background: linear-gradient(60deg, rgba(58,0,108,1) 0%, rgb(9, 56, 121) 35%, rgb(14, 67, 141) 65%, rgb(0, 148, 165) 100%);}	
		#Xhero .light {position:absolute; left:-150%; bottom:-5px; width:400%; height:70vh;
			background: radial-gradient(ellipse at center 200%, rgba(255,255,255,1) 35%, rgba(255,255,255,0) 60%);
		}
				.min-h-100 {min-height:100vh; min-height:100svh;}




// MEDIAS QUERIES : préférer dans ce sens :
// Small devices (landscape phones, 576px and up)
// Medium devices (tablets, 768px and up)
// Large devices (desktops, 992px and up)
// X-Large devices (large desktops, 1200px and up)
// XX-Large devices (larger desktops, 1400px and up)

@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }
@media (min-width: 1400px) { ... }

// X-Small devices (portrait phones, less than 576px)
// Small devices (landscape phones, less than 768px)
// Medium devices (tablets, less than 992px)
// Large devices (desktops, less than 1200px)
// X-Large devices (large desktops, less than 1400px)

@media (max-width: 575.98px) { ... }
@media (max-width: 767.98px) { ... }
@media (max-width: 991.98px) { ... }
@media (max-width: 1199.98px) { ... }
@media (max-width: 1399.98px) { ... }

*/