/*
 _______  ______   _______  _______  ______   _______    _______  ______   _______  _______  _______  _  _  _  _______  ______   _     _ 
(_______)(_____ \ (_______)(_______)(_____ \ (_______)  (_______)(_____ \ (_______)(_______)(_______)(_)(_)(_)(_______)(_____ \ (_)   | |
 _        _____) ) _____    _______   ____) ) _____      _____    _____) ) _______  _  _  _  _____    _  _  _  _     _  _____) ) _____| |
| |      |  __  / |  ___)  |  ___  | / ____/ |  ___)    |  ___)  |  __  / |  ___  || ||_|| ||  ___)  | || || || |   | ||  __  / |  _   _)
| |_____ | |  \ \ | |_____ | |   | || (_____ | |        | |      | |  \ \ | |   | || |   | || |_____ | || || || |___| || |  \ \ | |  \ \ 
 \______)|_|   |_||_______)|_|   |_||_______)|_|        |_|      |_|   |_||_|   |_||_|   |_||_______) \_____/  \_____/ |_|   |_||_|   \_)

Version 0.9.6.0
Date 02/01/2015                                                                                 
*/

/* ################################################################################################################																		     *                                                                      							
														IMPORTS
 *###############################################################################################################*/


@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Michroma&display=swap');

:root {
  --orange: #ed6923;
  --gblack: #161616;
  
  --grclair: #ededed;	
  --gris: #afafaf;
}




/* ################################################################################################################																		     *                                                                      							
														BASICS
 *###############################################################################################################*/
 
 
	html, body { margin: 0; padding: 0; border: 0; height: 100%;}
	body { 
		font-size:14px; background: #000;
		color: #fff;
		font-family: "Fira Sans", Arial;
		letter-spacing: 0.15em;
		line-height: 1.5em;
		font-weight: 300;
	   -webkit-font-smoothing: antialiased;
		-ms-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-smoothing: grayscale;
		overflow-x: hidden;
		
	}

/*
	body.is-loading * {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-o-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}*/

	input, select, textarea {
		color: #aaa;
		font-size: 15px;
		font-weight: 300;
		letter-spacing: 0.025em;
		line-height: 1.75em;
		font-family: "Fira Sans", Arial;
	}

	a {
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		color: #fff;
		text-decoration: none;
	}

	a:hover {
		color:var(--orange)			
	}
	
	a:active, a:focus { outline:0; }
	a img { border:0; }
		

	strong, b { font-weight: 600;	}
	p strong, p b {  font-weight: 600;	}
	/*.chrome strong, b {font-weight: 600;	}*/

	p, ul, ol, dl, table, blockquote {
		margin: 0 0 2em 0;
	}
	p{ }

	h1, h2, h3, h4, h5, h6 {
		color: inherit;
		font-weight: 300;
		line-height: 1.3em;
		margin-bottom: 1em;
		letter-spacing: 0.3em;
	}
	

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
			border: 0;
		}

	h2 {
		font-size: 2em;

	}

	h3 {
		font-size: 1.5em;

	}
	
	h4 {
		font-size: 1.3em;

	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	hr {
		border-top: solid 1px rgba(124, 128, 129, 0.2);
		border: 0;
		margin-bottom: 1.5em;
	}

	blockquote {
		/*border-left: solid 0.5em rgba(124, 128, 129, 0.2);
		font-style: italic;
		padding: 1em 0 1em 2em;*/
	}
	
	pre {
		margin:10px; padding:5px;
		background:#fafafa; border:1px dashed #ebebeb;
		font-family:Arial, Trebuchet MS, Helvetica, sans-serif;
		font-size:12px;
	}
	
	/**
	 * Lists
	 */
	ul { margin:0; padding:0; }
	li { list-style-type:none;}
	
	dl { margin:0; padding:0; }
	dt {}
	dd {}
	
	em{ font-style: italic !important;}
	 
	
	
/* ################################################################################################################																		     *                                                                      							
														ELEMENTS
 *###############################################################################################################*/
	
/* Table */

	table {
		width: 100%;
	}

		table.default {
			width: 100%;
		}

			table.default tbody tr {
				border-bottom: solid 1px rgba(124, 128, 129, 0.2);
			}

			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default th {
				font-weight: 400;
				padding: 0.5em 1em 0.5em 1em;
				text-align: left;
			}

			table.default thead {
				background: #7c8081;
				color: #fff;
			}





/* Form */

	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea{
		-moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: none;
		border: solid 1px rgba(255, 255, 255, 1);
		color: #fff;
		display: block;
		padding: 14px 20px;
		text-decoration: none;
		width: calc(100%);
		outline: 0;
		line-height: 1.3em;
	}
	
	
	select{ -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		background: none;
		color: #fff;
		display: block;
		padding: 0.4em 0.75em;
		border: solid 1px rgba(255, 255, 255, 1);
		width: calc(100%);
		padding: 20px;
		line-height: 1.3em; 
		
		}
		
	select option{ color: #000;}
	

	
	.missingField label, .invalidField label { color:#EE2E24 !important; font-weight: 600; }
	.missingField input, .missingField textarea, .missingField select, .invalidField input, .invalidField textarea, .invalidField select { border-color:#EE2E24 !important; }
	.formErrors { margin:0; padding:10px 0 10px 0; }
	.formErrors li { list-style:none; margin:0px 0 5px 0; line-height:16px; color:#EE2E24 !important; font-weight: 600;}
	
	.fancybox-inner .missingField label, .fancybox-inner .invalidField label { color:#000; }
	.fancybox-inner .missingField input, .fancybox-inner .missingField textarea, .fancybox-inner .missingField select, .fancybox-inner .invalidField input, .fancybox-inner .invalidField textarea, .fancybox-inner .invalidField select { color:#000; }
	.fancybox-inner .formErrors li {  color:#000;}
	
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus, select:focus, 
	input[type="text"]:hover,
	input[type="password"]:hover,
	input[type="email"]:hover,
	textarea:hover, select:hover {
		/*border-color: rgba(0, 161, 222, 0.7);*/
		border-color: rgba(255, 255, 255, 0.7);
	}
	
	fieldset{ border: none !important; margin: 0; padding: 0;}
	
	
	#field-security { display: none !important; }
	label { color: #fff;}
	.textField, .textareaField, p.selectField{ margin: 0 0 25px 0;}
	

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		background: none;
		border: 1px solid #fff;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: 1em;
		font-weight: 300;
		letter-spacing: 0;
		padding: 0.8em 1.5em;
		line-height: 1.2em;
		text-align: center;
		text-decoration: none;
		width: auto;
		letter-spacing: 1px;

		margin: 0 7px 5px 0;
		font-family: "Fira Sans", Arial;
		
	}
	
	input[type="submit"]{ margin: 0; }
	
	
	.button.sfont {
		font-size: 1.1em; padding: 0.5em 1.5em 0.4em;
	}
	
	.button.mini {
		padding: 0.6em 1.3em;
	}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		.button:hover {
			background: var(--orange) !important;
			border-color: var(--orange) !important;
			color: #fff !important;
		}
		.button:hover svg { color: #fff !important; }


		.button.under {
			border: none;
			border-bottom : 1px solid #fff;
			border-top : 1px solid rgba(0,0,0,0);
			padding: 1em 2em;
			margin: 0 25px 12px;
		}
		.button.under.mini {
			padding: 0.5em 1em; font-size:0.7em !important; 
			margin: 8px 10px 8px;
		}
		
		.button.under:hover {
			background: none;
			border-top :  1px solid #fff;
			color: #fff !important;
			text-decoration: none;
		}
		.button.under:hover svg { color: #fff !important; }
	
		.button.square {
			border : 1px solid #fff;
			margin: 0 25px 12px;
		}
		.button.square:hover {
			/*border: none;
			border-bottom : 1px solid #fff;
			border-top : 1px solid #fff;
			text-decoration: none;*/
		}
		
		.button.soulign {
			border: none;
			text-decoration: underline;
			margin: 0 0 15px 0;
			text-underline-offset: 5px;
		}
		
		.button.soulign:hover {
			
		}
	
	
/* Specials */


	 /**
	 * Floating elems
	 */
	.float, .floatL
	{display:inline; float:left;}
	.floatR
	{display:inline; float:right;}
	
	img.floatL, img.floatR{ display:block; }
	img.floatL{ margin: 0 20px 20px 0; }
	img.floatR{ margin: 0 0 20px 20px;  }
	
	
	/**
	 * Away elems
	 */

	.awayText
	{text-indent: -9999px; overflow: hidden; }
	.hidden
	{display: none;}
	
	.no-mobile .mobileZim{ display: none !important;}
	
	 /**
	 * WRAPPERS 980
	 */
	.focus
	{ margin:0 auto; width: 980px; }
	
	.clear{ clear: both; min-height: 1px;}
	.bigclear{ clear: both; height: 80px;}
	/**
	 * Overlays
	 */
	/* WHITE*/
	.overlay-w { background:rgba(255,255,255,0.7); }
	.lt-ie9 .overlay-w{
		background:none;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff)";
		zoom: 1;
	}
	/* BLACK*/
	.overlay-b{ background:rgba(0,0,0,0.7); }
	.lt-ie9 .overlay-b{
		background:none;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000)";
		zoom: 1;
	}

	
	.shadow{ text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); }
	.shadow-w{ text-shadow: 1px 1px 0px rgba(255, 255, 255, 1); }

	
	.focusW{ width: 980px; margin: 0 auto;}
	
	
	
	/* Animations */
	@keyframes fadeSlideUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes fadeSlideLeft {
		from {
			opacity: 0;
			transform: translateX(-20px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	@keyframes fadeSlideRight {
		from {
			opacity: 0;
			transform: translateX(30px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	
	/*.halo {
	  box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.4);
	}*/
	
	
	
	
		
/* ################################################################################################################																		     *                                                                      							
														PAGES
 *###############################################################################################################*/



	.sfont {  font-family: "Michroma", sans-serif; text-transform: uppercase;}
	
	
	.vcard p { margin:0; padding:0; }
	.vcard .tel .type, .vcard .geo, .vcard .uri { display:none; }	
	
	.colzim{ display: block; width: 100%;}
	.absW{ position: relative; }
	
	
	
	.away{ position: relative; opacity: 0; z-index: 1;}
	.awayleft{ left: -120px;}
	.awayright{ right: -120px;}
	.awaytop{ top: -100px;}



	.littleup{ font-size: 1.3em !important; line-height: 1.7em;}
	.ffat{ font-size: 1.3em !important; line-height: 1.6em;}
	.big{ font-size: 1.6em !important; line-height: 1.5em; }
	.super { font-size: 2em !important; line-height: 1.3em; }
	.mega { font-size: 2.7em !important; line-height: 1.1em; }
	.ultra { font-size: 3.4em !important; line-height: 0.9em; }
	
	.little{ font-size: 1.2em !important }
	
	.fontreset{ font-size: 1em !important }
	.mini{ font-size: 0.8em !important; line-height: 1em; display: inline-block; }
	.tiny{ font-size: 0.7em !important; line-height: 1em; display: inline-block; }
	.micro{ font-size: 0.6em !important; line-height: 1em; display: inline-block; }
	
	.maj{ text-transform: uppercase; }

	
	.justified *, .justified { text-align: justify }
	p.justified, .justified p{ line-height: 1.5em; }
	.centered *, .centered, .centeredlist > li p.centered{ text-align: center; }
	.righted *, .righted, .centeredlist > li p.righted{ text-align: right; }
	.lefted *, .lefted, .centeredlist > li p.lefted{ text-align: left; }
	.bigmargin{ margin-top: 50px!important; margin-bottom: 50px !important;}
	.supermargin{ margin-top: 80px!important; margin-bottom: 80px !important;}
	.megamargin{ margin-top: 150px!important; margin-bottom: 150px !important;}
	.notitle{ margin: 50px 0 0 0;}	
	.fontplus{ font-size: 1.15em;}
	
	.bottomAlign{ vertical-align: bottom !important }
	.middleAlign{ vertical-align: middle !important }
	
	.titlepadding{ padding-top: 95px;}
	.titlepaddingmini{ padding-top: 50px;}
	.titlepaddingmadium{ padding-top: 150px;}
	.titlepaddingbig{ padding-top: 200px;}
	.titlepaddingmicro{ padding-top: 20px;}
	
	.bigmargintop{ margin-top: 100px;}
	.littlemargin{ margin-bottom: 15px; }
	
	.nomargintop{ margin-top: 0 !important;}
	.nomarginbottom{ margin-bottom: 0 !important;}
	
	.smallpadding{ padding: 30px 0; }
	.mediumpadding{ padding: 60px 0; }
	.mediumpaddingtop{ padding: 60px 0 0 0; }
	.bigpadding{ padding: 100px 0; }
	.bigpadding2{ padding: 200px 0; }
	.nospacetop{ padding-top : 0; margin-top : 0;}
	
	
	.sidepadding{ padding: 0 25px; width: auto !important;}
	
	
	.centeredlist{  display: table; width: 100%; text-align: center;}
	.centeredlist95{  margin-left: 2.5%!important; margin-right: 2.5%!important; width: 95%}
	.centeredlist93{  margin-left: 3.5%!important; margin-right: 3.5%!important; width: 93%}
	.centeredlist90{  margin-left: 5%!important; margin-right: 5%!important; width: 90%}
	.centeredlist85{  margin-left: 7.5%!important; margin-right: 7.5%!important; width: 85%}
	.centeredlist80{  margin-left: 10%!important; margin-right: 10%!important; width: 80%}
	.centeredlist75{ margin-left: 12.5%!important; margin-right: 12.5%!important; width: 75%}
	.centeredlist70{ margin-left: 15%!important; margin-right: 15%!important; width: 70%}
	.centeredlist60{ margin-left: 20%!important; margin-right: 20%!important; width: 60%}
	.centeredlist50{ margin-left: 25%!important; margin-right: 25%!important; width: 50%}
	.centeredlist40{ margin-left: 30%!important; margin-right: 30%!important; width: 40%}

	
	.centeredlist > li, .centeredlist.col3 > li, .centeredlist.col4 > li{ display: inline-block; vertical-align: top; position: relative;}
	.centeredlist > li.over{ z-index: 15}
	.centeredlist > li{ width: 45.5%; }
	.centeredlist > li div.cellW{ height: 100%; }
	.centeredlist > li:nth-child(odd){ }
	.centeredlist > li:nth-child(even){ }
	
	.centeredlist > li.col25{ width: 22.5%; margin: 0 1%; }
	.centeredlist > li.col25.colbigspace{ width: 23%; margin: 0 5%; }
	.centeredlist > li.col30{ width: 30%; margin: 0 1.5%; }
	.centeredlist > li.col33{ width: 32%; margin: 0 0.5%; }
	.centeredlist > li.col40{ width: 37%; margin: 0 1.5%; }
	.centeredlist > li.col45{ width: 43%; margin: 0 1.5%;}
	.centeredlist > li.col50{ width: 45%; margin: 0 2.4%; }
	.centeredlist > li.col60{ width: 57%; margin: 0 1.5%;}
	.centeredlist > li.col100{ width: 100%; }
	
	.centeredlist > li.decalleft{ margin-left: 19%}
	.centeredlist > li.decalleftmini{ margin-left: 9%}
	.centeredlist > li.decalright{ margin-right: 19%}
	.centeredlist > li.decalrightmini{ margin-right: 9%}
	
	.blackBG{ background: #000; color: #fff;}
	.greyblackBG{ background: #1a171b; color: #fff;}
	.greyBG{ background: #ddd; }
	.sableBG{ background: #c8ae77; }
	
	.greyblackBG .button.under { border-bottom : 1px solid #fff;	border-top : 1px solid #1a171b; color: #fff;	}
	.greyblackBG .button.under:hover { border-top : 1px solid #fff;	}


	.flexi{ display: flex; }
	
	
	strong.ffat, strong.big{ line-height: 1em;}

 
	/*.centeredlist p{ font-size: 1.15em; line-height: 1.4em;}*/
	

	
	.screenCarouselZoomW, .screenCarouselPictosW{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
	.screenCarouselZoom, .screenCarouselPictos{ width: 100%; height: 100%; }
	.carouselZoomZim, .carouselZoomZimW, .carouselPictosZim, .carouselPictosZimW{ display: block; position: absolute; }
	.carouselZoomZimW, .carouselPictosZimW{ opacity: 0;}

	
	.carouselZoomZim {
		 /* image à l'échelle 1 au départ */
	   -webkit-transform: scale(1);
	   -moz-transform: scale(1);
	   -o-transform: scale(1);
	   -ms-transform: scale(1);
	   
	   transform: scale(1);
	}
   
	.carouselZoomZim.scale{
		 /* propriétés de transition */
	   -moz-transition:all 11s ease-out;
	   -webkit-transition:all 11s ease-out;
	   -o-transition:all 11s ease-out;
		transition:all 11s ease-out;
		transform: translate3d(0px, 0px, 0px) scale(1.10);
	}
	
	
	
	#ZoomHalfBanner{ height: 50%; position: relative; overflow: hidden; background: #161515 no-repeat center;}
	#ZoomHalfBanner h2{ position: absolute; z-index: 500; font-size: 3.8em; bottom: 25px; right: 0; 
		margin: 0; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0, 1); text-align: center;
		width: 100%}
	#ZoomHalfBanner h2 img{ max-width: 300px }
	
	#CarouselArrows{ display: none;}
	/*#CarouselArrows a{ font-size: 4em; position: absolute; top: 50%;  z-index: 1000; text-shadow: 1px 1px 1px rgb(0 0 0);}*/
	#CarouselArrows a{ position: absolute; top: 45%;  z-index: 1000; text-indent: -999px; overflow: hidden;
		background: url(zims/icons/slider-arrows.png) no-repeat left center; width: 25px; height: 113px}
	#CarouselArrows a#CarouselPrev{ left: 2%; }
	#CarouselArrows a#CarouselNext{ right: 2%; background-position: right center; }
	
	
	#ScreenVideoHead{ height: 100%; }
	
	/* .video-js .vjs-tech{ height: 600px !important;} */
	
	

	.contactBlock{ display: inherit;}
	.contactBlock li{ vertical-align: top; }
	.contactBlock strong{ font-weight: 600;}
	.contactBlock p{ margin-bottom: 10px;}
	.contactBlock p svg, .contactBlock p svg{ display: block; float: left; font-size: 1.5em;}
	.contactBlock p span.line{ display: block; padding: 0 0 10px 40px; text-align: left;}

	.contactBlockLinks{ display: inline-block; float: right;}



	.overlayPopup{   
		position: fixed;
		bottom: 0; right: 0;
		z-index: 5000;
		background: rgba(255,255,255,0.8);
		display: none;
	}
	.overlayPopup > .overlayCloser{ position: absolute; top: 20px; right: 20px; cursor: pointer; }
	.overlayPopup > .overlayCloser svg{ fill: #000; width: 40px; }
	.overlayPopup > div{ width: 100vw; height: 100vh; 
		display: flex; justify-content: center; align-items: center;  }
	
	.overlayPopup > div img{ display: block; height: 90vh; max-height: 800px;  }
	
	@media(max-width:767px) {
		.overlayPopup > div img{ height: auto; max-width: 95vw;  }
	}
	
	
	
	#HiddenFancyWW{ display: none; 
		position: absolute; top: 0; left: 0; width: 100vw; height: auto; 
		overflow: visible; background: #1a171b url(zims/frontend/backgrounds/black3.jpg) no-repeat center; background-attachment: fixed;
		z-index: 1010;
	}
	#HiddenFancyW{ background: rgba(40,40,40,.1); backdrop-filter: blur(10px); position: relative; z-index: 1015; min-height: 100%;}
	#HiddenFancy{ padding: 50px; }
	#HiddenFancy ul{ display: flex; flex-direction: column;  }
	#HiddenFancy ul li{ text-align: center; margin-bottom: 30px; background: url(zims/loader/zloading.svg) no-repeat center; background-size: 80px; min-height: 200px;  }
	#HiddenFancy ul li img{  max-width: 80vw; max-height: 90vh; vertical-align: top; }
	
	#HiddenFancyCloser{ display: block; position: fixed; z-index: 1020; top: 15px; right: 3vw; color: #fff; cursor: pointer;}
	#HiddenFancyCloser svg{ font-size: 3em; }
	
	
	
	.popGallery{ cursor: pointer; }
	
	
	.initFade{
		opacity: 0;
		animation: fadeSlideUp 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s forwards;
	}
	#TypeTitle{ opacity: 0;}
	.typeLetter{ opacity: 0;}
		
		
		
	
	
	
	
	
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * GENERAL * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 
	/* 
	
	
	*/
	
/* HEADER */

	#HeaderW { position: fixed; z-index: 1000; height: 160px; width: 100vw; transition:all 1s ease-out; }
	#HeaderW::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 100%);
		opacity: 0;
		transition: opacity 1s ease-out;
		z-index: -1;
	}
	.headscrolled #HeaderW::before,
	.forcedHeader #HeaderW::before {
		opacity: 1;
	}

	/*.headscrolled #HeaderW, .forcedHeader #HeaderW { background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%); }*/
	
	#Header { 
		position: absolute; top: 70px; width: 100%; 
	}
	.scrolled #Header, .forcedHeader #Header{ }
	

	
	#HomeLinkW { position: relative; z-index: 5002; margin:  -70px auto 0; width: 100vw; height: 1px; text-align: center;}
	#HomeLinkW a{ display: inline-block; }
	#HomeLinkW a img{ width: 180px; padding: 17px 0 0 0;
		-moz-transition: width 0.2s ease-in-out, padding 0.2s ease-in-out;
		-webkit-transition: width 0.2s ease-in-out, padding 0.2s ease-in-out;
		-o-transition: width 0.2s ease-in-out, padding 0.2s ease-in-out;
		-ms-transition: width 0.2s ease-in-out, padding 0.2s ease-in-out;
		transition: width 0.2s ease-in-out, padding 0.2s ease-in-out;  }

	.scrolled #HomeLinkW a img, .forcedHeader #HomeLinkW a img{ }	
	
	
	#HeaderWOverlay { overflow: hidden; position: absolute; z-index: -1; width: 100%; height: 100%; left: 0; top: 0; 
		background:rgba(0,0,0,0.1); backdrop-filter: blur(15px); overflow: hidden;
		border-top: 1px solid rgba(255,255,255,0.1);
		border-bottom: 1px solid rgba(255,255,255,0.1);
		-moz-transition: all 0.4s ease-in-out;
		-webkit-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		-ms-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
	}
	
	
	.shiny-beam {
	  position: absolute;
	  top: 300%; left: -25%;
	  width: 150%; height: 450%;
	  background: linear-gradient(
		0deg,
		transparent 10%,
		rgba(255,255,255,.25) 50%,
		transparent 90%
	  );
	  transform: skewX(45deg);
	  pointer-events: none;
	  animation: shiny-sweep 1.1s 0s ease-out forwards;
	}

	@keyframes shiny-sweep {
		  0%   { top: 300%; }
		  100% { top: -450%; }
	}






/* MAIN MENU */

	#UpperNav{ position: relative; }
	
	
	#MenuW{ overflow: visible; width: 100%; height: 100%; z-index: 1001; padding-top: 30px;
		-moz-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	#Menu{  padding-top: 40px;	}
	/*.scrolled #MenuW{  padding-top: 60px; }*/
	
	#MenuOverlay{ 
		background: rgba(0,0,0,0.2);
		height: 100%; width: 100%; top: 0; left: 0;
		position: absolute; z-index: 900; 
	}
	
	#NavIco, #MenuOverlay{ display: none; } 

	

	#MainMenu { margin: 0  auto;  display: flex; justify-content: center;
		-moz-transition: padding-top 0.3s ease-in-out;
		-webkit-transition: padding-top 0.3s ease-in-out;
		-o-transition: padding-top 0.3s ease-in-out;
		-ms-transition: padding-top 0.3s ease-in-out;
		transition: padding-top 0.3s ease-in-out;
		
		
	}

	#MainMenu li.HTMLMenuW-Level1, #MainMenu li.HTMLMenuItem-Level1 { float:  left; margin-right: 30px; line-height: 1em; padding: 0 0 0 0; 
		display: flex; align-items: center; height: 70px; position: relative;
		-moz-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;}
	/*.scrolled #MainMenu li.HTMLMenuW-Level1, .scrolled #MainMenu li.HTMLMenuItem-Level1{ height: 70px;  }*/
	
	#MainMenu li.HTMLMenuW-Level1:last-child, #MainMenu li.HTMLMenuItem-Level1:last-child { margin-right: 0;  }
	
	#MainMenu li.HTMLMenuW-Level1 > strong, #MainMenu li.HTMLMenuItem-Level1 > a{ 
		display: block; font-size: 0.9em; text-align:center; text-transform: uppercase;
		line-height: 1.1em; /*padding-bottom: 38px;*/ position: relative; color: #fff;
		letter-spacing: 0.2em;
		
	} 
	/*.scrolled #MainMenu li.HTMLMenuW-Level1 > strong, .scrolled #MainMenu li.HTMLMenuItem-Level1 > a{  }*/

	#MainMenu li.HTMLMenuW-Level1 > strong span, #MainMenu li.HTMLMenuItem-Level1 > a span{ 
		display: block; 
		-moz-transition: border-color 0.3s ease-in-out;
		-webkit-transition: border-color 0.3s ease-in-out;
		-o-transition: border-color 0.3s ease-in-out;
		-ms-transition: border-color 0.3s ease-in-out;
		transition:  border-color 0.3s ease-in-out;		
		
	}
	#MainMenu li.HTMLMenuW-Level1::after, #MainMenu li.HTMLMenuItem-Level1::after{ 
		display: block;  position: absolute; bottom: 0; height: 2px; background: none; width: 100%;
		content: '';  background: none;
		-moz-transition: background-color 0.3s ease-in-out;
		-webkit-transition: background-color 0.3s ease-in-out;
		-o-transition: background-color 0.3s ease-in-out;
		-ms-transition: background-color 0.3s ease-in-out;
		transition:  background-color 0.3s ease-in-out;	
		
	}
	
		
	
	#MainMenu li.HTMLMenuItem-Level1 > a :hover{  text-decoration: none;   }
	
	#MainMenu li.HTMLMenuW-Level1:hover::after, 
	#MainMenu li.HTMLMenuItem-Level1:hover::after, 
	#MainMenu li.HTMLMenuW-Current::after,
	#MainMenu li.HTMLMenuItem-Current::after
	{  background-color: #fff; }
	
	
	
	
	#UpperMenu{  position: absolute; top:22px; right: 3vw;  }
	
	#UpperMenu ul li{ float: right; margin: 0 10px;	}
	
	#UpperMenu ul li a{ color: #fff;   }
	#UpperMenu ul li a svg{ font-size: 1.5em; transition:  color 0.3s ease-in-out;	 }
	#UpperMenu ul li a:hover svg{ color: var(--orange); }  
	
	

	
		
		
	#LangsW{ position: absolute; left: 3vw; top: 22px; width: 50px; z-index: 5010; }
	#LangsW #LangOpen{ display: block; float: left;  color: #fff; font-size: 1.4em; }
	#LangLinks{ float: right;  }
	#LangLinks li{ text-align: right } 
	#LangLinks li a{ color: #fff; text-transform: uppercase;  padding: 1px 4px; display: block; font-size: 0.9em;} 
	#LangLinks li a:hover{ color: var(--orange); } 
	#LangLinks li.disabled{ display: none;} 	
		
		

		
	/* FOOT */
	
	#FooterW{ min-height: 200px; padding: 25px 3% 15px; border-top: 1px solid rgba(255,255,255,0.2); background:rgba(0,0,0,0.1); backdrop-filter: blur(15px);  clear: both; }
	#FooterW{ color: #fff; }
	

	#FooterMenu{ display: inline-flex; float: left; width: 50%; gap: 20px 50px}
	
	#FooterNews{ display: inline; float: left; width: 40%}
	#FooterNews .title{ font-size: 1.2em;}
	
	#FooterAddr{ display: inline; float: right; width: 30%; }
	#FooterAddr sup{ font-size: 0.6em; }
	#FooterBottom{ clear: left;}
	
	
	#Footer p, #Footer li{ text-transform: uppercase; font-size: 0.75em; }
		
	
	
	#FooterMenu { margin-top: 5px; }
	#FooterMenu li{ margin-bottom: 4px; }
	#FooterMenu li a{ font-size: 1.1em; }
	
	#FooterMenu li.minilink{ margin-bottom: 4px; }
	#FooterMenu li.minilink a{ font-size: 0.8em; }
	/*#FooterMenu li a.uppercase{ }*/
	#FooterMenu li a:hover{ color: var(--orange);  }
	
	#FooterAddr {  text-align: right; margin-top: 5px; line-height: 1.6em; font-size: 1.1em; }
	#FooterAddr #Gmap{ text-transform: none; padding: 4px 8px; letter-spacing: 0; margin: 5px 0; font-size: 1em; }
	#FooterAddr .socialLink{ font-size: 1.5em; margin-left: 7px; }
	
	#FooterNews{ position: relative; }
	
	#FooterNews p.title{ text-align: center; font-size: 1.3em; margin-bottom: 20px;}
	#FooterNews .textField { display: inline; float: left; margin: 0; width: 30%;}
	#FooterNews .textField label { display: none; float: left; }
	#FooterNews .textField input { border-right: none; border-top: none; border-left: none; text-align: center; border-color: #fff;}
	#FooterNews .formButtons{ width: auto; float: right;}
	#FooterNews .formButtons input{ padding: 9px 10px 5px;}
	
	#FooterNews #field-valid{ position: absolute; bottom: -55px; left: 0;  margin: 0; line-height: 0.9em; }
	#FooterNews #field-valid label{ font-size: 0.8em; color: #bbb; }
	
	#FooterNews #field-email{ margin: 0 2.5%; width: 45% }
	
	#NewsletterForm { margin: 0;}
	
	
	
	#FootNewsErrors{ color:#EE2E24; margin-bottom: 10px; display: block;}
	#FootNewsCheck{ display: block; position: absolute; bottom: 0; left: 80%; font-size: 2.2em; display: none; }
	
	#FooterSocials{ display: block; margin-top: 15px;}
	#FooterSocials svg{ color: var(--orange)}
	
	#AllLink{ display: flex; margin: 0 auto; font-size: 0.9em; line-height: 1em; width: 500px; }
	#AllLink span{ display: block;  flex: 1; text-align: center; }
	#AllLink img{  padding-bottom: 8px;}
	#AllLink img#AllLogo{  height: 45px;}

	
	#Credits{ float: left; text-align: left; font-size: 0.8em; margin-top: -80px; line-height: 1.2em; }
	
	#FooterW .button,  #FooterW .submitButton { border: 1px solid #fff; color: #fff; }
		
	#Mentions{ font-size: 0.6em !important; margin-top: 20px; clear: both; letter-spacing: 1px;}
	
	
	#kipsu-chat-button{ color: #fff !important;}
	
	
	
	/* CTA */
	
	
	#MainSelector{position: fixed; right: 3%; top: 18px; z-index: 5010;}
	.covidbanner #MainSelector { top: 68px; }
	
	#MainSelector { 
		border : 1px solid #fff; 
		-webkit-box-shadow: 0px 0px 10px 5px #FFFFFF; 
		box-shadow: 0px 0px 10px 5px #FFFFFF;
		-moz-transition:  background-color 0.3s ease-in-out;
		-webkit-transition:  background-color 0.3s ease-in-out;
		-o-transition:  background-color 0.3s ease-in-out;
		-ms-transition:  background-color 0.3s ease-in-out;
		transition:  background-color 0.3s ease-in-out;
	}
	
		
	
	
	
	#MainSelector .resaLegend{ 
		display: block; float: left; padding: 12px 20px 9px;  font-size: 1.1em; letter-spacing: 1px;
		color: #fff; 
	}
	

	#MainSelector:hover { background: #fff;}
	#MainSelector:hover .resaLegend { color: #000; }	
	
	
	#MainSelector p a:hover span{ 
		opacity: 1;
	}
	

	

	
	/* Content */

	/*#ContentW, #Content { height: 100%; }*/
	#ContentW{ padding-top: 240px;}
	.noPadTop #ContentW{ padding-top: 0;}
	#Content{ padding: 0 0 50px 0; min-height:70vh;}

	
	/*#page-presentation.forcedHeader #Content,
	#page-art-du-service.forcedHeader #Content,
	#page-architecture-connectee.forcedHeader #Content
	#page-actualites.forcedHeader #Content
	{ padding-top: 75px;}*/

	
	
	#OverlayLoad{ height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background: #111 url(zims/loader/delfe-loader.svg) no-repeat center; background-size: 50px auto; }
	
	
	/* Global */
	
	.itemBG{ position: relative; display: block; z-index: 5; width: 100% }
	
	

	/* HOME */
	
	#page-home { background: #1a171b url(zims/frontend/backgrounds/black2.jpg) no-repeat center; color: #fff; background-size: cover; background-attachment : fixed;}
	/*#page-home #ContentW, #page-home #Content { height: 100%; }*/
	#page-home #Content{ padding:0; min-height: auto;}
	
	
	
	
	#VideoW {
		box-sizing: border-box;
		height: 100vh;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: -1;
		overflow: hidden;
	}
	#VideoHome{ position: absolute; z-index: -1;}
	.vjs-text-track-display {display: none; }
	#VideoW video, #VideoW .video-js{display: block; }
	

	#VideoOverlay{ overflow: hidden; top: 0; left: 0; height: 100vh; background: rgba(0,0,0,0.2);}
	
	
	
	#HomeLogoSceneW{
	  position: absolute; inset: 0; top: 0; 
	  display: flex; align-items: center; justify-content: center;
	}
	#HomeLogoScene{ position: relative; }

	#HomeLogo {
	  width: min(600px, 70vw);
	  height: auto;
	  overflow: visible;
	}

	@keyframes dlf-fd  { from{opacity:0} to{opacity:1} }
	  @keyframes dlf-rx  { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
	  @keyframes dlf-ryb { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} }
	  @keyframes dlf-ryt { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} }

	  #HomeLogo .st0 { fill:#FFFFFF; }
	  #HomeLogo .st1 { fill:#ED6923; }

	  #g-d   { opacity:0;                  animation: dlf-fd  .9s  cubic-bezier(.4,0,.2,1) 2s    both; }
	  #g-et  { clip-path:inset(0 100% 0 0); animation: dlf-rx  .55s cubic-bezier(.4,0,.2,1) 2.75s  both; }
	  #g-eb  { clip-path:inset(0 100% 0 0); animation: dlf-rx  .55s cubic-bezier(.4,0,.2,1) 2.75s both; }
	  #g-em  { clip-path:inset(0 100% 0 0); animation: dlf-rx  .45s cubic-bezier(.4,0,.2,1) 2.3s both; }
	  #g-l   { clip-path:inset(100% 0 0 0); animation: dlf-ryb .6s  cubic-bezier(.4,0,.2,1) 3.05s both; }
	  #g-ft  { clip-path:inset(0 100% 0 0); animation: dlf-rx  .55s cubic-bezier(.4,0,.2,1) 3.45s both; }
	  #g-fsq { clip-path:inset(0 0 100% 0); animation: dlf-ryt .35s cubic-bezier(.4,0,.2,1) 3.55s both; }
	  #g-fm  { clip-path:inset(0 100% 0 0); animation: dlf-rx  .45s cubic-bezier(.4,0,.2,1) 3.9s  both; }
	  #g-e2t { clip-path:inset(0 100% 0 0); animation: dlf-rx  .55s cubic-bezier(.4,0,.2,1) 4.95s  both; }
	  #g-e2b { clip-path:inset(0 100% 0 0); animation: dlf-rx  .55s cubic-bezier(.4,0,.2,1) 4.2s both; }
	  #g-e2m { clip-path:inset(0 100% 0 0); animation: dlf-rx  .45s cubic-bezier(.4,0,.2,1) 4.55s both; }
	#g-baseline   { opacity:0;                  animation: dlf-fd  .9s  cubic-bezier(.4,0,.2,1) 5.5s    both; }
	
	
	
	#HomeBaseline { position: absolute; bottom: -20px; right: 0; width: 100%; margin: 0;  }
	#HomeBaseline img{ width: 76.5%; float: right; }
	
	
	
	#page-home #ContentW{ padding-top: 100vh;}
	
	
	
	
	
	
	
	
	/* Gallery Expand */
	
	.gallery-wrap {
      width: 100%;
      margin: 0 auto;
	  padding-bottom: 150px;
    }

    /* ── Bande photos ── */
    .gallery {
      display: flex;
      gap: 6px;
      height: 45vh;
    }
	
    .card {
      flex: 1;
      min-width: 0;
      position: relative;
      cursor: pointer;
      transition: flex 0.6s cubic-bezier(0.5, 0, 0.2, 1);
      /* PAS de overflow:hidden ici — le titre doit être visible sous la photo */
    }

    .gallery:hover .card        { flex: 0.8; }
    .gallery:hover .card:hover  { flex: 1.6; }

    /* Ce wrapper interne contient l'image et l'overlay, lui seul clip */
    .card-photo {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .card-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: saturate(1) brightness(1);
      transition: filter 0.55s ease, transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card:hover .card-photo img, .card:focus .card-photo img {
      filter: saturate(0) brightness(1.25);
      transform: scale(1.03);
    }

    /* ── Overlay sombre ── */
    .card-overlay {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.65);
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .card:hover .card-overlay, .card:focus .card-overlay {
      opacity: 1;
    }

    /* ── Icône + (dans card-photo, apparaît centré sur la photo) ── */
    .plus-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, 16px) scale(0.7);
      width: 75px;
      height: 75px;
      /*border: 1px solid rgba(255,255,255,0.8);
      border-radius: 50%;*/
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--orange);
      font-size: 50px;
      font-weight: 200;
      line-height: 1;
      opacity: 0;
      transition: opacity 0.3s ease 0.1s, transform 0.4s ease 0.1s;
      z-index: 3;
    }
	 .plus-icon a { color: var(--orange);}

    .card:hover .plus-icon, .card:focus .plus-icon {
      opacity: 1;
      transform: translate(-50%, 22px) scale(1);
    }

    /* ── Titre ── */
    /*
      Le titre est positionné en absolu dans la carte.
      Position de repos  : en bas, juste SOUS la photo (top: 100% + 12px)
      Position au hover  : centré verticalement dans la photo (top: 50% - offset)
    */
    .card-title {
	  pointer-events: none;
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 1em;
      font-weight: 300;
      letter-spacing: 0.2em;
      padding: 0 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 4;

      /* État repos : sous la photo */
      color: var(--blcasse);
      top: calc(100% + 20px);
      opacity: 0.75;
      transition:
        top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.35s ease,
        opacity 0.35s ease,
        font-size 0.35s ease,
        font-weight 0.35s ease;
    }

    /* État hover : centré sur la photo, au-dessus de l'icône + */
    .card:hover .card-title,  .card:focus .card-title {
      top: calc(50% - 30px);
      color: var(--orange);
      opacity: 1;
      font-size: 17px;
	   font-weight: 600;
	   text-shadow: 0px 0px 10px #ffffff;
    }

    /* ── Sous-titre  — reste sous la photo ── */
    .card-sub {
	  pointer-events: none;
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 11px;
      font-weight: 200;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #333;
      top: calc(100% + 10px);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
      z-index: 4;
    }

    .card:hover .card-sub {
      opacity: 0;
    }

    /* Quand la carte correspondante est active via jQuery */
    .card.is-hovered .card-sub {
      opacity: 1;
      transform: translateY(0);
    }

	
	
	
	#page-projets{
		background: #1a171b url(zims/frontend/backgrounds/black2.jpg) no-repeat center;
		background-size: cover;
		background-attachment: fixed;
	}

	#page-projet-detail{
		background: #1a171b url(zims/frontend/backgrounds/black3.jpg) no-repeat center;
		background-size: cover;
		background-attachment: fixed;
	}
	
	#page-projet-detail #ContentW{ padding-top: 0;}
	

  .hero-wrapper {
    position: relative;
    width: 100%;
	min-height: 90vh;
  }


  .hero-section {
    position: relative;
    width: 100%;
    background: #111 url(zims/frontend/backgrounds/audio.jpg) no-repeat center top;
	background-size: cover;
    background-attachment: fixed;

    /* biseau diagonal bas-droite vers bas-gauche */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
    /* on ajoute du padding bottom pour compenser le clip */
    overflow: hidden; /* contient l'image absolue */
    z-index: 2;
	min-height: 90vh;
	
  }

  /* ─── GRILLE INTERNE ────────────────────────────────────────────── */
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
  }

  /* ─── BLOC TEXTE ────────────────────────────────────────────────── */
  .hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 60px 60px 3vw;
    position: relative;
    z-index: 3;
    /* fond sombre dégradé vers la droite pour transition vers l'image */
   /* background: linear-gradient(to right, #111 60%, transparent 100%);*/
  }
  
   .hero-text h1{ position: relative; margin-bottom: 32px;
		opacity: 0;
		animation: fadeSlideLeft 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s forwards;}
  
   .hero-text h1::after{ 
	content: ""; background: #fff; display: inline-block;
	height: 1px; width: 130%; 
	position: relative; top: 0; left: -30%;
   }
   
  
	.hero-text p { 
		opacity: 0;
		animation: fadeSlideUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.9s forwards;
	}

 

  .hero-image-wrap {
    position: relative;
    /* biseau vertical : coin haut-gauche découpé vers l'intérieur */
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
	min-height: 88vh;
	opacity: 0;
		animation: fadeSlideRight 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.9s forwards;
  }

  .hero-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  /* overlay sombre sur l'image pour atténuer */
  .hero-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(17,17,17,0.35) 0%, transparent 40%);
    pointer-events: none;
  }

	
	
	
	.projGal{ display: flex; gap: 30px; flex-wrap: wrap; justify-content: center;}
	.projGal li { 
		width: calc(33.33% - 20px);
		
	}
	.projGal li img { width: 100%;}
	
	
	.projGal li .galZimW{ 
		display: block;
		position: relative;
		width: 100%;
		overflow: hidden;
		aspect-ratio: 1.33/1;
	}
	.projGal li .galZimW img {
	  width: 100%; height: 100%; position: relative;
	  object-fit: cover; /* ou contain */
	  vertical-align: top; 
	  -moz-transition: all 0.5s ease-in-out;
		-webkit-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
	}
	.desktop .projGal li .galZimW:hover img{ width: calc(100% + 30px); height: calc(100% + 30px); margin: -15px 0 0 -15px; filter: grayscale(100%);}
	
	
	
	.backtoLink{ position: absolute; left: 3vw; top: 160px; z-index: 100; }
	
	
	
	
	
	
	
	
	
	
	
	/* DETAILS PAGES */

	
	
	/* */
	
	
	.floatingbgW{ clear: both; margin: 200px 0 100px; position: relative;}
	.floatingbgW.nomargin{ margin: 20px 0;}
	.floatingbgBand{ height: 75%; position: absolute; top: 12.5%; left: 0; z-index: 0; width: 100%; background: #000;}

	.styledSoulign { position: relative; border-bottom: 5px solid #c8ae77; padding-bottom: 15px;}


	.textW{ padding: 25px;}

	.floatingbgW .textW{ padding-bottom: 0;}
	.tempDeco{ display: inline; float: right; margin: -50px 0 0 25px; max-width: 50%; position: relative; z-index: 100; }
	
	
	
	.tab{ display: none; }
	.tabsMenu{ display: table; width: 100%; text-align: center;}
	.tabsMenu li{ display: inline-block;margin: 0 10px; }
	.tabsMenu li.active a.button{ background: #fff; color: #000 !important;}
	
	
	
	.separLine{ display: block; width: 75%; height: 1px; background: #fff; margin: 25px 0; position: relative; }
	.separLine.separL{ left: -50%; }
	.separLine.separR{ right: -50%; }
	
	
	.straightLine{ display: block; width: 1px; height: 60px; background: #fff; margin: -30px auto 0; position: relative; z-index: 20;}
	
	
	.randomItemMenu{ display: flex; flex-direction : row; align-items: stretch	}
	.randomItemMenu li{
		flex-grow: 1;
		border: 1px solid #fff; margin: 0 5px; text-align: center;
		font-size: 1.2em;
	}
	.randomItemMenu li a{
		display: block; padding: 15px 10px; 
	}
	.randomItemMenu.black li{ border: 1px solid #000; }
	.randomItemMenu li.active{ background: #fff; }
	.randomItemMenu.black li.active{ background: #111;}
	.randomItemMenu li.active a{ color: #111; }
	.randomItemMenu.black li.active a{ color: #fff!important; }
	.randomItemMenu li a:hover{ text-decoration: underline; }
	
	
	
	
	#EventSpacesMenu{ margin: 80px 7.5% 0; width: 75%;}
	#EventSpaces{ min-height: 440px;}
	#Services{ min-height: 440px;}
	
	
	
	/* SECTIONS BG */
	

	
	
	.selectonly{ display: none;  }
	.zimBlocsList .selectonly{ display: inline; }
	.zimBlocsList .titleonly{ display: none; }
	
	
	.inlineVideoW .video-js{ width: 100% !important; height: auto !important;}
	
	
	#page-presentation{ background: #111; background-attachment: fixed; background-size: cover;}
	#page-presentation #Content{ padding-bottom: 0;}
	
	
	#PrezIntroW, #PrezOutroW{ 
		position: relative; width: 100vw; overflow: hidden;
		min-height: 100vh; background: #333;
	}
	
	#PrezIntroW img.sectionBG, #PrezOutroW img.sectionBG{ 
		display: block;
		height: 100%;
		position: absolute; top: 0; 
		z-index: 0;
	}
		
	#PrezIntro, #PrezOutro{ 
		position: relative; z-index: 5; min-height: 100vh;
	}
	
	#PrezIntro{ 
		width: 100vw; background: linear-gradient(-150deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 85%, rgba(0, 0, 0, .5) 100%); 
		display: flex; flex-direction: column; justify-content: flex-end;  }
	#PrezIntro * {color: #fff }
	#PrezIntro > div{ padding: 0 50vw 10vh 3vw;}
	
	
	#PrezIntro h1{ 
		opacity: 0;
		animation: fadeSlideLeft 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s forwards;
		text-shadow: 0px 0px 3px #000000;
	}
	#PrezIntro p{ 
		opacity: 0;
		animation: fadeSlideUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s forwards;
	}
	
		
	#PrezOutro{ 
		width: 100vw; background: linear-gradient(-140deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .6) 80%, rgba(0, 0, 0, .6) 100%); 
		display: flex; flex-direction: column; justify-content: flex-end;}
	#PrezOutro * {color: #fff }
	#PrezOutro > div{ padding: 0 50vw 10vh 3vw;}
	
	
	
	
	.decalblocksW{ margin-bottom: 70px;}
	.decalblocksW.whiteBG{ background: #fff url(zims/frontend/backgrounds/white.jpg) no-repeat center;  background-size: cover; background-attachment: fixed;  padding-bottom: 75px;}
	.decalblocksW.whiteBG p, .decalblocksW.whiteBG a{ color: #000;}
	
	.decalblocksW.whiteBG .button{ border-color: #000;}
	/*.decalblocksW.whiteBG .button:hover{ background-color: #000; color: #fff !important;}*/
	
	.decalblocksW{}
	/*.slick-slide{ margin: 0;}*/
	.slick-list{  margin: 0; }
	
	.decalBlock{ display :flex; gap: 5vw; flex-wrap: wrap;}
	.decalBlock > p, .decalBlock > div{ width: calc(50% - 2.5vw);  }
	.decalBlock p .colZim{ display: block; width: 100%; vertical-align: top; margin-top: -45px;}
	.decalBlock p strong{ font-weight: 400;}
	
	.decalBlockText{ display: flex; justify-content: center; flex-direction: column;  }
	

	.decalBlock p .colZim.notop{ margin-top: 0;}
	
	/*.decalBlock.littleL p{ width: calc(70% - 2.5vw); }
	.decalBlock.littleL p:first-child{ width: calc(30% - 2.5vw);}
	.decalBlock.littleL p .colZim {
		margin-top: 50px;
	}*/
	

	.actulist .decalblocksW:nth-child(even) .decalBlock{ flex-direction: row-reverse;}
	.backtoList, .actuDate{ color: var(--orange);}
	.whiteBG .actubiglink { color: #000;}

	.actuListText{ padding-top: 30px;}
	/*.actuListText a:hover{ color: var(--orange) !important; }*/
	.actuDate{ margin-bottom: 0;}
	
	.inlineVideo{ max-width: 100%; max-height: 90vh;}
	
	
	.blockGalW{ position: relative;     margin-top: -45px; }
	.blockGalW .first{  margin-top: 0; }
	.blockGal img{ display: block; max-width: 100%; }
	
	.gal-arrow{ display:block; position: absolute; top: calc(50% - 65px); font-size: 45px;}
	.gal-prev{ left: -40px; } .gal-next{ right: -40px; }
	.whiteBG .gal-arrow{ color: #000; }
	
	.actuText a{ color: var(--orange); }
	.actuText a:hover{ color: #fff; }
	
	
	
	
	
	#page-equipe{ background: #111 url(zims/frontend/backgrounds/black4.jpg) no-repeat center top; background-attachment: fixed; background-size: cover;}
	
	
	
	
	
	.blocksW{ display: flex; flex-wrap: wrap; gap : 30px; justify-content: center;}
	
	.decoBlockW{ position: relative; width: calc(33.33% - 20px); padding-top:65px; background: url(zims/frontend/flare2.png) no-repeat center top;} 
	/*.decoBlockW.halo{background: none; padding-top:0;} */
	
		
	.decoBlock{  background: #111; position: relative; z-index: 10;  min-height: 100%;  } 
	.decoBlock .textW{   margin: 0; padding: 25px; display: block; font-size: 0.85em;} 
	.decoBlock p:first-child{   margin: 0; } 
	
	.decoBlock .zimW{  margin: 0;display: block;
		display: block;
		position: relative;
		width: 100%;
		aspect-ratio: 1.33 / 1;
		overflow: hidden;
	}
	.square .decoBlock .zimW{ aspect-ratio: 1 / 1;} 
	.decoBlock .zimW img {
	  width: 100%; height: 100%; position: relative;
	  object-fit: cover; /* ou contain */
	  vertical-align: top; 
	  -moz-transition: all 0.5s ease-in-out;
		-webkit-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
	}
	.desktop .decoBlock .zimW:hover img{ width: calc(100% + 30px); height: calc(100% + 30px); margin: -15px 0 0 -15px;filter: grayscale(100%);}
	
	
	.blocksW.centeredlist85 .decoBlockW:nth-child(1) {
		opacity: 0;
		animation: fadeSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s forwards;
	}

	.blocksW.centeredlist85 .decoBlockW:nth-child(2) {
		opacity: 0;
		animation: fadeSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.15s forwards;
	}

	.blocksW.centeredlist85 .decoBlockW:nth-child(3) {
		opacity: 0;
		animation: fadeSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.3s forwards;
	}
	
	
	
	
	
	
	#page-presentation, #page-actualites
	{ background: #111 url(zims/frontend/backgrounds/black3.jpg) no-repeat center top; background-attachment: fixed}
	
	#page-actualites:not(.forcedHeader) #ContentW{  padding-top: 160px; }
	
	
	.actuGal{}
	
	.actuGal{ display: flex; gap: 30px; flex-wrap: wrap; justify-content: center;}
	.actuGal li { width: calc(25% - 23px);}
	.actuGal li img { width: 100%;}
	
	
	.actuGal li .galZimW{ 
		display: block;
		position: relative;
		width: 100%;
		overflow: hidden;
		aspect-ratio: 1/1;
	}
	.actuGal li .galZimW img {
	  width: 100%; height: 100%; position: relative;
	  object-fit: cover; /* ou contain */
	  vertical-align: top; 
	  -moz-transition: all 0.5s ease-in-out;
		-webkit-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
	}
	.actuGal li .galZimW:hover img{ width: calc(100% + 20px); height: calc(100% + 20px); margin: -10px 0 0 -10px; filter: grayscale(100%);}
	
	
	




	#ArrowScroll{ cursor: pointer;}
	
	.sectionW {
		position: relative;
}
	.homeSectionW, .sectionW {
			clear: both;
	}
	

	
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * REAL/PARTS * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
	
	
	
	#page-partenaires{ background: #111 url(zims/frontend/backgrounds/black2.jpg) no-repeat center top; background-attachment: fixed; background-size: cover; }
	
	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
		color: #fff;
	}
	.ui-widget-content {
		color: #fff;
	}
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		color: #fff;
	}
	
	.partnersW{ margin-bottom: 60px;}
	.partnersW h3{  font-size: 1.8em; border: none; border-top: 1px solid #ccc !important; background: none !important}
	.partnersW h3:hover,  .partnersW h3.ui-state-active{ color: var(--orange); }
	.partnersW h3:first-child{  border-top: none !important; }
	.partnersW h3 span{ display: inline-block; /*border-bottom: 2px solid #fff;*/  }
	
	.partnerList{ display: table; text-align: center; flex-wrap: wrap; justify-content: center; width: 100%; background: none !important; border: none;}
	.partnerList > li{ 
		 width: calc(21% - 40px); margin: 0 10px 10px; display: inline-table; padding: 20px; 
		min-height: 130px;}
	.partnerList > li p{ display: table-cell; vertical-align: middle; text-align: center; margin: 0; color: #fff;}
	.partnerList > li p a{  color: #fff; font-size: 1.3em;}
	.partnerList > li p img{ display: inline-block; max-width: 100%; max-height: 80px; position: relative;
		-moz-transition: all 0.3s ease-out;
		-webkit-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out; 
		opacity: 0;		
	}
	.partnerList > li p img:hover {  padding: 3px; max-height: 74px;}
	
	
	
	
	

	
	.contactBlock{ display: table; width: 100%; text-align: center; margin-bottom: 50px;}
	
	.contactBlock li{ display: inline-block; margin: 0; /*border-right: 1px solid #fff;*/ padding: 0 50px;  }
	.contactBlock li.bigf{ font-size: 1.2em; line-height: 1.2em; }
	.contactBlock li .button{ margin-top: 10px; }
	.contactBlock li:last-child{ border: none; }
	
	.socialsLinks svg{ font-size: 2em;}
	
	
	.contactBlock.justifiedBlock li{ width: 45%; padding: 0 2.5%; }
	
	
	#page-contact .contactBlock li{ border:none; vertical-align: top; line-height: 1.5em; }
	#page-contact .contactBlock li strong{ display: inline-block; margin-bottom: 20px; font-size: 1.5em; }
	#page-contact .contactBlock li strong.maj{ font-weight: 400; }
	
	
	
	
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * CONTACT * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
	
	#page-contact, #page-confidentialite {
		background: #1a171b url(zims/frontend/backgrounds/home.jpg) no-repeat center;
		background-size: cover;
		background-attachment: fixed;
	}
	
	
	#jGMapW { width:100vw; height:700px; margin:0; border:none;  clear: both; }
	#jGMapW .vcard{ }
	#jGMap { width:100%; height:100%; }
	
	
	.vcard p { margin:0 0 15px 0; padding:0; font-size:1.1em;}
	.vcard .tel .type, .vcard .uri, .vcard .geo  { display:none; }	
	
	#CoordsW{ gap: 0 40px;  justify-content: space-between; margin-top: 80px; }
	#CoordsW p{ flex: 1; }
	
	
	#CoordsW {
		opacity: 0;
		animation: fadeSlideUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s forwards;
	}
	


	#ContactForm{ margin: 25px 0; padding: 0;}
	#ContactForm fieldset p{  width: 45%; display: inline; float: left;}


	#ContactForm fieldset p#field-societe, #ContactForm fieldset p#field-email{ margin-right: 5%; }
	#ContactForm fieldset p#field-objet, #ContactForm fieldset p#field-message{  width: 100%; }

	#message{  height: 200px; }

	/*#date, #heure, #nbpers{  width: 90px; }*/


	#ReservLegend{ padding: 0 15px 10px 25px; margin: 10px 180px 10px 0; text-align: left; border-bottom: 1px solid #222; }

	.legend {
		font-size: 0.85em;
		color: #999;
		text-align: left;
		margin: 25px 0;
	}

	
	.fancybox-inner  p#Confirmation{ padding: 50px 15px; margin: 0;}
	
	
	#ContactForm select option {}
	form select :checked {
		background: #5b5b5b;
		color: #fff;
	}


	
	
	
	#FancyContactBox{ width: 600px; background: #fff;  }
	#FancyContact{ padding: 0 25px 25px; }
	#FancyContact h2{ color: #000; font-size: 2.5em; font-weight: 900; letter-spacing:normal; margin: 0 0 15px 0; text-align:left; padding-top: 15px;}

	#ContactForm{ margin: 0 0 50px 0;}
	

	input{ width: 90%; margin: 0;}

	#ContactForm fieldset p{  width: 45%; display: inline; float: left;}
	#ContactForm fieldset p#field-nom, #ContactForm fieldset p#field-email, #ContactForm fieldset p#field-ville, #ContactForm fieldset p#field-etat, #ContactForm fieldset p#field-cdate{ margin-right: 10%; }
	#ContactForm fieldset p#field-pj, #ContactForm fieldset p#field-message{  width: 100%; }

	.formButtons { margin-top: 20px;}
	
	.fancybox-inner  #ContactForm *{ color: #000;}
	.fancybox-inner  #ContactFormSubmit { border-color: #000;}
	.fancybox-inner  #ContactFormSubmit:hover { color: #fff;}
	.fancybox-inner  #ContactForm input, .fancybox-inner  #ContactForm textarea { border-bottom: solid 1px rgba(0, 0, 0, 0.85); }

	 
	 
	 #ContactForm ::placeholder{
	  color: #999;
	}
	
	 
	 
	 
	 
	 
 
	 p#Confirmation{
		font-size: 1.2em; font-weight: 300; margin: 10px 5% 150px; text-align:center; line-height: 1.5em;
	}
	
	
	
	
	/* SCROLLICON */
	
	@-webkit-keyframes arrow-jump{0%{opacity:1}50%{opacity:1;-webkit-transform:translateY(111px);-moz-transform:translateY(111px);-0-transform:translateY(111px);transform:translateY(111px)}100%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-0-transform:translateY(0px);transform:translateY(0px)}}
	@-webkit-keyframes arrow-jump-line{0%{opacity:1;height:0}50%{opacity:1;height:111px}100%{opacity:1;height:0}}
	
	.scroll-section {
		position: absolute;
		z-index: 200;
		text-align: center;
		bottom: 180px;
		right: 50px;
		width: 30px;
	}  
	#page-home .scroll-section { right: calc(50% - 15px);}
	/*#ArrowBottom2{ 
		bottom: 150px;
		left: 0;
		right: 0;
		width: 100%;}*/
		
	.scroll-section a {transition: all ease .5s; }
	.scroll-section a:after {
		position: absolute;
		top: 70px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 7px;
		height: 7px;
		background: #fff;
		border-radius: 100%;
		-webkit-border-radius: 100%;
		content: "";
		-webkit-animation: arrow-jump 5s infinite;
		-moz-animation: arrow-jump 5s infinite;
		-o-animation: arrow-jump 5s infinite;
		animation: arrow-jump 5s infinite;
		top: 100%;
	}
	.relative-block {
		position: relative;
	}
	.scroll-section span {
		writing-mode: tb-rl;
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
		font-size: 10px;
		font-weight: 400;
		letter-spacing: 3px;
		color: #fff;

	}
	.scroll-section a:after, .scroll-section:after {
		left: 1px;
	}
	.scroll-section a:after {
		position: absolute;
		top: 70px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 7px;
		height: 7px;
		background: #fff;
		border-radius: 100%;
		-webkit-border-radius: 100%;
		content: "";
		-webkit-animation: arrow-jump 5s infinite;
		-moz-animation: arrow-jump 5s infinite;
		-o-animation: arrow-jump 5s infinite;
		animation: arrow-jump 5s infinite;
		top: 100%;
	}

	.scroll-section:after {
		-webkit-animation: arrow-jump-line 5s infinite;
		-moz-animation: arrow-jump-line 5s infinite;
		-o-animation: arrow-jump-line 5s infinite;
		animation: arrow-jump-line 5s infinite;
	}
	.scroll-section:after {
		position: absolute;
		top: 70px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 1px;
		height: 111px;
		background: #fff;
		content: "";
		top: 100%;
	}

	
	

	
	.mobonly, .mobonlyinline{ display: none !important;}





	/* ----------------- RESPONSIVE ------------------------------*/


	@media(max-width:1560px) {
		
		
	}
	
	
	@media(max-width:1440px) {
	
	
		
		
	}
		
	
	
	
	@media(max-width:1350px) {
		
	
		.centeredlist50 {
			margin-left: 15%!important;
			margin-right: 15%!important;
			width: 70%;
		}
		

		.centeredlist90 {
			margin-left: 2.5%!important;
			margin-right: 2.5%!important;
			width: 95%;
		}
		
		.bigmargin {
			margin-top: 30px!important;
			margin-bottom: 30px !important;
		}
		.titlepaddingmini{ padding-top: 10px;}
		


		
		
	}
	
	
	@media(max-width:1024px) {
			
		body { font-size:15px; }
		input, select, textarea { font-size: 15px; }
		
		.nomob{display: none !important; }
		.mobonly{ display: block !important;}
		.mobonlyinline{ display: inline !important;}
		.away{ opacity: 1;}
		
		.awaymob, .awaymob.away{ position: relative; opacity: 0; z-index: 1;}
			
			
		#Header {  background-position: center -28px; }

	
		#UpperMenu{ display: none;}
		
		
		#HomeLinkW { margin-top: 0;  }
		#HomeLinkW a img {  }

		#Header{ top: 0;}
		#HeaderWOverlay{ height: 75px; opacity: 0;}
		.scrolled #HeaderWOverlay{ opacity: 1;}

		#Nav{ position: fixed; top: 0; width: 100%; height: auto; z-index: 5001;}
		#Nav.open{ height: 100%; }
		
		
		/*
		#UpperMenu{ width: 100%;  position: relative; z-index: 1;}
		#UpperMenu ul{ width: 40%; height: 40px; position: absolute; top: 0; margin-top: 18px;  }
		#UpperMenu ul#LeftUpperMenu{ left: 0; padding-left: 13%;	}
		#UpperMenu ul#RightUpperMenu{ right: 0; padding-right: 5%;	}

		#UpperMenu ul li{ 
			display: inline-block; float: left; margin: -25px 0 0 0; padding-top: 33px;
		}
		.white #UpperMenu ul li{ background-image: url(zims/frontend/upmenu-line2.gif); }
		
		#UpperMenu ul li a{ 
			color: #fff; font-size: 1.1em; border-right: 1px solid #fff; padding: 0 15px; 
			display: inline-block;   color: var(--orange);
		}
		#UpperMenu ul li a span{ display: inline-block; position: relative; }

			
		.white #UpperMenu ul li a{ color: #000; border-right-color: #000; }
		#UpperMenu ul li.noline a{ border-right: none; }
		#UpperMenu ul li a svg, #UpperMenu ul li a svg{ font-size: 1.3em;}
		#UpperMenu ul li a svg.fa-instagram{ font-size: 1.33em;}
		
		#UpperMenu ul#RightUpperMenu li{ float: right;	}
		*/
		
		 
		#NavIco {
			display: block; position: fixed; z-index: 5001; height: 25px; width: 32px;
			right: 5vw; top: 25px;
			cursor: pointer;
		}
		#NavIco span {
			display: block;
			position: absolute;
			height: 2px;
			width: 100%;
			background: #fff;
			border-radius: 9px;
			opacity: 1;
			left: 0;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			-webkit-transition: .25s ease-in-out;
			-moz-transition: .25s ease-in-out;
			-o-transition: .25s ease-in-out;
			transition: .25s ease-in-out;
		}

		#NavIco span:nth-child(1) { top: 0px; 	}
		#NavIco span:nth-child(2),#NavIco span:nth-child(3) {  top: 9px;	}
		#NavIco span:nth-child(4) { top: 19px; }

		#NavIco.active span:nth-child(1) {
		  top: 18px;
		  width: 0%;
		  left: 50%;
		}

		#NavIco.active span:nth-child(2) {
		  -webkit-transform: rotate(45deg);
		  -moz-transform: rotate(45deg);
		  -o-transform: rotate(45deg);
		  transform: rotate(45deg);
		}

		#NavIco.active span:nth-child(3) {
		  -webkit-transform: rotate(-45deg);
		  -moz-transform: rotate(-45deg);
		  -o-transform: rotate(-45deg);
		  transform: rotate(-45deg);
		}

		#NavIco.active span:nth-child(4) {
		  top: 19px;
		  width: 0%;
		  left: 50%;
		}

		#NavIco strong {
			position: absolute;
			left: 55px; font-size: 1.1em;
			line-height: 1em;
			top: 10px; color: #fff;
			font-weight: normal;
		}
		

		
		
		#MenuW{ overflow: visible; width: 100%; height: 100%; position: relative; z-index: 1001; padding: 0;
		}
		
		#MenuOverlay{ 
			background: rgba(0,0,0,0.2);
			height: 100%; width: 100%; top: 0; left: 0;
			position: absolute; z-index: 900; 
		}
		#Menu{ overflow: visible;
			background: rgba(0,0,0,0.5);     backdrop-filter: blur(15px);
			height: 100%; padding-top: 100px;
			position: absolute; z-index: 1000; overflow: visible;
			height: 100%;width: 100%;
		}
		#MainMenu{ flex-direction: column;  }
		
		#MainMenu li.HTMLMenuW-Level1, #MainMenu li.HTMLMenuItem-Level1 {
			float: none;
			margin-right: 0;
			line-height: 1em;
			padding: 0 0 0 0;
			display: flex;
			justify-content: center;
			height: 70px;
			opacity: 0; top: -15px;
		}
		#MainMenu li.HTMLMenuW-Level1.animated, #MainMenu li.HTMLMenuItem-Level1.animated {opacity: 1; top: 0; }
		
		#MainMenu li.HTMLMenuW-Level1 > strong, #MainMenu li.HTMLMenuItem-Level1 > a {	font-size: 1.2em;	}
		
		
		#MainMenu li.HTMLMenuW-Level1::after, #MainMenu li.HTMLMenuItem-Level1::after{ display: none;}

	
		#RightUpperMenu{ position: relative; opacity: 0; top: -15px;     transition: all 0.3s ease-in-out;}
		#RightUpperMenu.animated {opacity: 1; top: 0; }

		

		
		/*#MainMenu > li > a, #MainMenu > li > strong{ 
			display: block; position:relative;
			padding: 10px 0 10px 45px; min-height: 30px; 
			font-weight: 300; color: #fff; font-size: 1.32em; cursor: pointer; text-align: left; 
			-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
			-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
			-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
			-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
			transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }
			
		#MainMenu > li > a span, #MainMenu > li > strong span{ width: 100%; display: inline-block; }
		#MainMenu > li > a  svg, #MainMenu > li > strong  svg { float: right; margin-right: 25px;}
		#MainMenu > li > a  svg.fa-caret-down, #MainMenu > li > a  svg.fa-caret-up, #MainMenu > li > strong  svg.fa-caret-down, #MainMenu > li > strong  svg.fa-caret-up { display: none;}

			
		#MainMenu > li > a:hover, #MainMenu > li > strong:hover, #MainMenu > li.actived > a, #MainMenu > li.actived > strong{  color: var(--orange); text-decoration : none;}
		
		#MainMenu li .submenu{ position: absolute; right: 0; top: 0; padding: 155px 0 0 0; height: 100%; display: none;
			background: rgba(0,0,0,0.7);
		}
		
		

		#MainMenu li ul > li a{ padding: 10px 30px 10px 40px; display: block;	}
		#MainMenu li ul > li a:hover{ background: #333; color: #fff; }
		#MainMenu li ul > li.HTMLMenuW-Level2:hover > a{ background: #444; color: #fff; }
		
		#MainMenu li ul > li > a{ font-weight: 300; color: #fff; font-size: 1.3em; cursor: pointer; text-transform: none;    }
		#MainMenu li ul > li > a img{ vertical-align:top; margin-top: -20px;  }
		#MainMenu li ul > li > a:hover{ text-decoration : none; }
		
		
		#MainMenu li ul > li > ul{ opacity: 0; 
			-moz-transition: opacity 0.7s ease-in-out;
			-webkit-transition: opacity 0.7s ease-in-out;
			-o-transition: opacity 0.7s ease-in-out;
			-ms-transition: opacity 0.7s ease-in-out;
			transition: opacity 0.7s ease-in-out; }
		
		#MainMenu li ul > li.HTMLMenuW-Level2:hover > ul{ opacity: 1; }

		#MainMenu li ul > li > ul > li{
			padding-left : 25px; 
		}
		
		
		#MainMenu-room-presentation-Item, #MainMenu-event-presentation-Item{ display: none;}
		
		
		
		
		
		#SecondaryMenu{ }
		#SecondaryMenu > li > a, #SecondaryMenu > li > strong{ 
			display: block;
			padding: 2px 0 2px 45px; 
			font-weight: 300; color: #fff; font-size: 1em; cursor: pointer; text-align: left; 
		}
		#SecondaryMenu li > a:hover{ text-decoration : underline; color: var(--orange); }
		
		#Copyrights{ padding: 0 40px; font-size: 0.8em; line-height: 1.2em; position: absolute; bottom: 0; color: #fff; }

*/


		
		#LangsW {
			left: 18px;
			top: 24px;
		}
		
		#RightUpperMenu{ width: 100%; margin-top: 30px; display: flex; gap: 40px; justify-content: center;}
		#RightUpperMenu li svg{ font-size: 1.5em;}
		
		
		
		
		
		#Mentions {
			font-size: 0.7em !important;
			text-align:center;
			line-height: 1.5em;
		}
		
		#MentionsHead {
			font-size: 0.7em !important;
			text-align:center;
			line-height: 1.5em; width: 100%;
			position: absolute; bottom: 20px;
		}
		
		
		
		

		
		
		
		
		
		
		
		
		
		
		
		#FooterMenu, #FooterNews, #FooterAddr{  display: block; float: none; width: 100%; margin-bottom: 40px; }
		#FooterMenu{  margin-bottom: 40px; }
		
		
		#FooterMenu li{  text-align: center; font-size: 1.4em; display: block; margin-bottom: 20px;}
		#FooterAddr{  text-align: center;}
		#FooterAddr #Gmap{ margin-bottom: 20px;}
		
		#FooterNews #field-valid label{ font-size: 0.75em;}
		#FooterNews .textField{   isplay: block; float: none;  width: 100% !important; }
		
		#FooterNews #field-valid{ position: static; }
		
		#FooterNews .formButtons {
			width: auto; margin-top: 20px;
			float: none !important;
			display: block;
		}
		#FootNewsCheck {   bottom: -15px;  left: 45%; }
		#Credits {float: none;  text-align: center; margin-top: 0; }

		
		h2{  font-size: 2em; line-height: 1em; margin-bottom: 40px;}
		h3{ margin-top: 30px;}
		.bigmargin > h3{ margin-top: 0;}
		#ZoomHalfBanner h2{ font-size: 2.5em;    line-height: 1em }
		
		p {   font-size: 1em; }
		
		input[type="button"], input[type="submit"], input[type="reset"], .button {
			padding: 0.7em 1.5em;
			line-height: 1.2em;
			transition: color 0s ease-in-out, border-color 0s ease-in-out, background-color 0s ease-in-out;
			margin-bottom: 15px;
		}
		
		input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .button:hover, .zimBlocsList li .itemTitle span.popup .button, .secondLink .button,.zimBlocsList li a:hover .itemTitle span.popup .button, .scaleSelector li a:hover .button {
			background: none;
			border-color: #fff;
			color: #fff !important;
		}.button:hover svg { color: #fff !important; }

		
		.forcedHeader #Content {   padding-top: 150px; }
		
		
		.scroll-section {  }
		
		/***/
		
		.littleup{ font-size: 1em !important; line-height: 1.3em;}
		.ffat{ font-size: 1em !important; line-height: 1.4em;}
		.big{ font-size: 1.3em !important; line-height: 1.2em; }
		.super { font-size: 1.8em !important; line-height: 1em; }
		.mega { font-size: 2.3em !important; line-height: 1em; }
		.ultra { font-size: 2.8em !important; line-height: 1em;}
		
		h1.super{ font-size: 1.4em !important; }
		
		.minimob{ font-size: 0.7em;}
		
	
		.little{ font-size: 1.1em !important }
		
		.fontreset{ font-size: 1em !important }
		.mini{ font-size: 0.8em !important; line-height: 1em; display: inline-block; }
		.tiny{ font-size: 0.7em !important; line-height: 1em; display: inline-block; }
		.micro{ font-size: 0.7em !important; line-height: 1em; display: inline-block; }
		
		.maj{ text-transform: uppercase; }

		
		p.justified, .justified p{ line-height: 1.5em; }
		.bigmargin{ margin-top: 40px!important; margin-bottom: 40px !important;}
		.supermargin{ margin-top: 60px!important; margin-bottom: 60px !important;}
		.megamargin{ margin-top: 120px!important; margin-bottom: 120px !important;}
		.notitle{ margin: 40px 0 0 0;}	
		
		.lefted, .lefted *, .centeredlist > li p.lefted { text-align: left;}
		
		
		
		.titlepadding{ padding-top: 25px;}
		.titlepaddingmini{ padding-top: 10px;}
		.titlepaddingmadium{ padding-top: 50px;}
		.titlepaddingbig{ padding-top: 75px;}
		
		.mainPageTitle { padding-top: 0;}
	
		.centeredlist{ display: block; }
		.centeredlist95, .centeredlist93, .centeredlist90, .centeredlist85, .centeredlist80, .centeredlist75, .centeredlist70, .centeredlist60, .centeredlist50,
		.centeredlist40, #GalleryW 
		{ margin-left: 2.5%!important; margin-right: 2.5%!important; width: 95% !important}

		.centeredlist > li{ width: 100%; }

		
		.centeredlist > li.col25,	.centeredlist > li.col25.colbigspace, .centeredlist > li.col30, .centeredlist > li.col33, .centeredlist > li.col40,
		.centeredlist > li.col45, .centeredlist > li.col50,	.centeredlist > li.col60,	.centeredlist > li.col100
		{ width: 100% !important; margin: 0; }
		
		.centeredlist > li.decalleft{ margin-left: 19%}
		.centeredlist > li.decalleftmini{ margin-left: 9%}
		.centeredlist > li.decalright{ margin-right: 19%}
		.centeredlist > li.decalrightmini{ margin-right: 9%}
		
		
		.itemBG { width: 100%; }
		.zimBlocsList .itemBG { width: 115%; }
		.tabsContent li .itemBG{ width: 100%; }
		
		
		


		
		
				
	
		
	
		/* CONTACT */
		
		#FancyContactBox{ width: auto; }
		
		#ContactW{ width: 90%; margin: 0 5%;}
		#FormW, #CoordsW{ display: block; float: none;}
		#FormW{ width: 100%; margin-right: 0; }
		#CoordsW{ width: 100%; }
		
		
		
		#ContactForm fieldset p{ width: 100%; display: block; float: none;}
		/*#ContactForm fieldset p#field-objet, #ContactForm fieldset p#field-message{ width: 92%;}*/
		
		
		#jGMapW {	width:100%; height:600px;  }
		
		
		
		.fancybox-nav span{ visibility: visible !important;}
		
		
		
		
		
		
		
		
		
		/*#PrezIntroW {
		
		}
		#PrezIntro {
			width: 100vw;
			padding: 100px 2.5vw 50px 2.5vw;
		}
		
	
		
		
		
		#PrezOutroW {
			
		}
		#PrezOutro {
			width: 100vw;
			padding: 80px 2.5vw 80px 2.5vw;
		}
		
		
		#page-solution-detail #Content {
			padding-top: 150px;
		}
		#ClubSwingW {
			
			bottom: auto;
			top: 0;
		}*/
		
		
		.decoBlockW {
			width: calc(50% - 20px);
		}
					

		.projGal {
			gap: 14px;
			
		}
		.projGal li {
			width: calc(50% - 7px);
		}
		
		.actuGal li {
			width: calc(50% - 20px;);
		}
		
		
		
	}
	
	

	
	
	@media(max-width:768px) { 
	
		#HeaderW {
			height: 75px;
		}
			
		
		#Hometitlelegend{ left: 10px;}
		
		#FooterAddr, #Mentions{ font-size: 0.85em;}
		#AllLink{ font-size: 1.2em;}
		
		#FooterMenu li a { font-size: 0.8em; }


		
		.contactBlock.justifiedBlock li{ width: 95%}
		
		
		
		input[type="text"], input[type="password"], input[type="email"], textarea{ width: 100%}
		
		
		#ContentW {
			padding-top: 160px;
		}
		.forcedHeader #Content {
			padding-top: 0;
		}
				

		
		.decalBlock {
			flex-direction: column;
			gap: 20px 0;
		}
		.whiteBG .decalBlock {
			flex-direction: column-reverse;
		}
		.actulist .whiteBG .decalBlock {
			flex-direction: column;
		}

		
		.actulist { padding-top: 50px;}
		.actuListText{ padding-top: 0}
		.actulist .decalBlock p:first-child {
			margin-bottom: 0;
		}
		
		.gal-prev{ left: -10px; } .gal-next{ right: -28px; }
		
		
		
		
		.gallery-wrap {
		  padding-bottom: 65px; 
		}
		.gallery{ flex-direction: column; height: auto; gap: 65px;}
		.card {
			min-height: 250px;
		}
		
		.gallery:hover .card:hover {
			flex: 1;
		}
		
		
		.decoBlockW {
			width: calc(100%);
		}
		

		
		#RealList {
			flex-direction: column;
		}
		#RealList > li {
			width: 100%;
			margin: 0 0 40px 0;
		}
		
		
		.ui-accordion .ui-accordion-content {
			padding: 1em 0;
		}

			
		#VideoW, #VideoFrame {height: 100vh; }	
		#VideoW video{ height: 100vh;}
		
		
		/*.projGal li {
			width: calc(100%);
		}*/
		
		.hero-inner {
			display: flex;
			flex-direction: column-reverse;
		}
		
		.hero-text {
			padding: 55px 2.5vw 30px 5vw;
			width: 100vw;
		}
		
		.hero-image-wrap {
			clip-path: unset;
			height: 50vh; min-height: unset;
			position: relative;
			overflow: hidden;
			display: flex;
			justify-content: center;
		}

		.hero-image-wrap img {
			display: block;
			height: 100%;
			width: auto;
			object-fit: cover;
			object-position: center top;
		}
		
		.backtoLink {
			left: 5vw;
			top: 52vh;
		}
		
		
		
		.decalBlock > p, .decalBlock > div {
			width: calc(100%);
		}
		
		
		#PrezIntroW, #PrezOutroW {
			 background: none; min-height: unset;
		}
		#PrezIntro, #PrezOutro {
			 min-height: unset;
		}
		#PrezOutroW {
			display: flex;
			flex-direction: column-reverse;
		}
		
		#PrezIntro {
			width: 100vw;
			/*background: linear-gradient(-150deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 85%, rgba(0, 0, 0, .5) 100%);*/
			background: none;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
		}
		#PrezIntroW .scroll-section{display: none }
		
		#PrezIntroW img.sectionBG, #PrezOutroW img.sectionBG {
			display: block;
			height: auto;
			position: relative;
			width: 170%;
			top: unset; left: -35%;
			opacity: 0; top: 30px;
		}
		
		#PrezIntro > div {
			padding: 155px 5vw 5vh 5vw;
		}
		#PrezOutro > div{
			padding: 40px 5vw 2vh 5vw;
		}
		
		.actuGal li {
			width: calc(100%);
		}
		
		
		.mobInitZim{ min-height: 50vh;}
		.mobInitFade{
			opacity: 0;
			animation: fadeSlideUp 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s forwards;
		}
		
		.blocksW {
			gap: 10px;
		}	
		
		#Content{ position: relative;}
		
		#HiddenFancyWW {
			min-height: 100%;	
		}

		#HiddenFancy {
			padding: 10px;
		}		
		#HiddenFancy ul li img {
			max-width: 95vw;
			max-height: 80vh;
		}
	
		
		
	}
	
	
	
	@media(max-width:480px) {


		
		#HomeZimW-Mob img{ left: -595px !important; }
		
		
		.faqItemList.questionlist li .response { padding: 0;}
		
		
	}
	
	
	@media(max-width:375px) {
		


		input, select, textarea { font-size: 15px; }
		
		
		#jGMapW { height:500px;  }
		
		
		
	}
	
	@media(min-height:760px) and (max-width:415px) {
		
		#HomeZimW-Mob img{ left: -695px !important; }
		
	}