/* SLICK CORE + THEME */ .slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none} .slick-loading .slick-list{background:#fff url(./ajax-loader.gif) center center no-repeat}@font-face{font-family:'slick';font-weight:400;font-style:normal;src:url(./fonts/slick.eot);src:url(./fonts/slick.eot?#iefix) format("embedded-opentype"),url(./fonts/slick.woff) format("woff"),url(./fonts/slick.ttf) format("truetype"),url(./fonts/slick.svg#slick) format("svg")}.slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:none;background:transparent}.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;background:transparent}.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1}.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:.25}.slick-prev:before,.slick-next:before{font-family:'slick';font-size:20px;line-height:1;opacity:.75;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-prev{left:-25px}[dir='rtl'] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'←'}[dir='rtl'] .slick-prev:before{content:'→'}.slick-next{right:-25px}[dir='rtl'] .slick-next{right:auto;left:-25px}.slick-next:before{content:'→'}[dir='rtl'] .slick-next:before{content:'←'}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent}.slick-dots li button:hover,.slick-dots li button:focus{outline:none}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1}.slick-dots li button:before{font-family:'slick';font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-dots li.slick-active button:before{opacity:.75;color:#000} /* FANCY */ .fancybox-wrap,.fancybox-skin,.fancybox-outer,.fancybox-inner,.fancybox-image,.fancybox-wrap iframe,.fancybox-wrap object,.fancybox-nav,.fancybox-nav span,.fancybox-tmp{padding:0;margin:0;border:0;outline:none;vertical-align:top}.fancybox-wrap{position:absolute;top:0;left:0;z-index:8020}.fancybox-skin{position:relative;background:#fbf9f8;color:#000;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.fancybox-opened{z-index:8030}.fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}.fancybox-outer,.fancybox-inner{position:relative}.fancybox-inner{overflow:hidden}.fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:15px;white-space:nowrap}.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%}.fancybox-image{max-width:100%;max-height:100%}#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url(fancybox2/fancybox_sprite.png)}#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:.8;cursor:pointer;z-index:8060}#fancybox-loading div{width:44px;height:44px;background:url(fancybox2/fancybox_loading.gif) center center no-repeat}.fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:8040}.fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;text-decoration:none;background:transparent url(fancybox2/blank.gif);-webkit-tap-highlight-color:rgba(0,0,0,0);z-index:8040}.fancybox-prev{left:0}.fancybox-next{right:0}.fancybox-nav span{position:absolute;top:50%;width:36px;height:34px;margin-top:-18px;cursor:pointer;z-index:8040;visibility:hidden}.fancybox-prev span{left:10px;background-position:0 -36px}.fancybox-next span{right:10px;background-position:0 -72px}.fancybox-nav:hover span{visibility:visible}.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;visibility:hidden}.fancybox-lock{overflow:hidden}.fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:8010;background:rgba(0,0,0,0.7)}.fancybox-overlay-fixed{position:fixed;bottom:0;right:0}.fancybox-lock .fancybox-overlay{overflow:auto;overflow-y:scroll}.fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:8050}.fancybox-opened .fancybox-title{visibility:visible}.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:8050;text-align:center}.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;padding:2px 20px;background:transparent;background:rgba(0,0,0,0.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#FFF;font-weight:700;line-height:24px;white-space:nowrap}.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}.fancybox-title-inside-wrap{padding-top:10px}.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;padding:10px;background:#000;background:rgba(0,0,0,.8)} /* _______ ______ _______ _______ ______ _______ _______ ______ _______ _______ _______ _ _ _ _______ ______ _ _ (_______)(_____ \ (_______)(_______)(_____ \ (_______) (_______)(_____ \ (_______)(_______)(_______)(_)(_)(_)(_______)(_____ \ (_) | | _ _____) ) _____ _______ ____) ) _____ _____ _____) ) _______ _ _ _ _____ _ _ _ _ _ _____) ) _____| | | | | __ / | ___) | ___ | / ____/ | ___) | ___) | __ / | ___ || ||_|| || ___) | || || || | | || __ / | _ _) | |_____ | | \ \ | |_____ | | | || (_____ | | | | | | \ \ | | | || | | || |_____ | || || || |___| || | \ \ | | \ \ \______)|_| |_||_______)|_| |_||_______)|_| |_| |_| |_||_| |_||_| |_||_______) \_____/ \_____/ |_| |_||_| \_) Version 0.9.6.0 Date 02/01/2015 */ @font-face { font-family: Roustel; src: url('font/roustel.woff2') format('woff2'), /* Super Modern Browsers */ url('font/roustel.woff') format('woff'), /* Pretty Modern Browsers */ url('font/roustel.ttf') format('truetype') /* Safari, Android, iOS */ } @font-face { font-family: RedditSans; src: url('font/redditsans-reg.woff2') format('woff2'), /* Super Modern Browsers */ url('font/redditsans-reg.woff') format('woff'), /* Pretty Modern Browsers */ url('font/redditsans-reg.ttf') format('truetype') /* Safari, Android, iOS */ } :root { --rose: #c0087f; } /* ################################################################################################################ * IMPORTS/FONTS *###############################################################################################################*/ /*@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');*/ /* ################################################################################################################ * BASICS *###############################################################################################################*/ html, body { margin: 0; padding: 0; border: 0; } body { font-size:14px; background: #f2f2f2; color: #000; font-family: 'RedditSans', sans-serif; font-weight: 300; letter-spacing: 0; line-height: 1.6em; -webkit-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: grayscale; overflow-x: hidden; } /*body.mousemoving{ cursor: url(zims/icons/burger.png), auto; }*/ input, select, textarea { color: #333; font-size: 14px; font-weight: 300; line-height: 1.5em; font-family: 'RedditSans', sans-serif; } a { -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; color: #111; text-decoration: none; } a:hover { /*border-bottom-color: transparent; text-decoration: none;*/ /*color: #666; */ color: #aaa; text-decoration: underline; } a:active, a:focus { outline:0; } a img { border:0; } strong, b { font-weight: 700; color: #000; } p, ul, ol, dl, table, blockquote { margin: 0 0 1.5em 0; } h1, h2, h3, h4, h5, h6 { color: inherit; font-weight: 300; line-height: 1.1em; margin-bottom: 1em; letter-spacing: 0; text-transform: uppercase; letter-spacing: 2px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; border: 0; } h2 { font-size: 2.7em; } h3 { font-size: 1.5em; } 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: 0 0 0 13px; margin: 0; } 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 {} sup{ font-size: 0.5em;} p strong{ font-weight: 600;} /* ################################################################################################################ * 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="number"], 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: none; border-bottom: solid 1px rgba(56, 85, 66, 0.9); color: #111; display: block; padding: 0.4em 2%; text-decoration: none; width: 96%; outline: 0; line-height: 1.3em; } textarea{ border: solid 1px rgba(56, 85, 66, 0.9); } 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; border: solid 1px rgba(56, 85, 66, 0.9); color: #111; display: block; padding: 0.4em 0.75em; border-right-width: 1px; border-right-style: solid; line-height: 1.3em; -webkit-appearance: menulist; } 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="number"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, select:focus, input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="email"]:hover, textarea:hover, select:hover { /*border-color: rgba(0, 161, 222, 0.7);*/ border-color: #bbb ; } fieldset{ border: none !important; margin: 0; padding: 0;} #field-security { display: none !important; } .formButtons { text-align: center;} label { color: #111;} .textField, .textareaField, p.selectField{ margin: 0 0 20px 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 var(--rose); color: #fff; background: var(--rose); cursor: pointer; display: inline-block; font-size: 1.1em; font-weight: 300; letter-spacing: 0; padding: 9px 2em; line-height: 1.2em; text-align: center; text-decoration: none; width: auto; text-transform: uppercase; font-weight: 500; margin-bottom: 5px; letter-spacing: 1.5px; } .button.greydefault{ background: #f2f2f2; color: var(--rose); border-color: #f2f2f2; padding: 12px 5em; } input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .button:hover { background: #fff; color: var(--rose); } .button.greydefault:hover { background: var(--rose); color: #fff; border-color: var(--rose); } .button.mini { padding: 0.4em 1.3em; } /* Specials */ /** * Floating elems */ .float {display:inline; float:left;} .floatR {float:right;} /** * Away elems */ .awayText {text-indent: -9999px; overflow: hidden; } .hidden {display: none;} /** * WRAPPERS 980 */ .focus { margin:0 auto; width: 980px; } /** * 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; } .overText{ text-shadow: 1px 1px 0px rgba(255, 255, 255, 1); } .centered{ text-align: center !important;} .lefted{ text-align: left !important;} .righted{ text-align: right !important;} .sfont { font-family: 'Roustel', sans-serif; text-transform: none !important; } .titlefont { font-family: 'Roustel', sans-serif; } .rounded{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .vcard p { margin:0; padding:0; } .vcard .tel .type, .vcard .geo, .vcard .uri { display:none; } .colzim{ display: block; width: 100%;} a.specialAnnounce { display:none !important; } .away{ position: relative; opacity: 0;} .awayleft{ left: -120px;} .awayright{ right: -120px;} .awaytop{ top: -100px;} .mini{ font-size: 0.8em !important } .littleup{ font-size: 1.2em !important } .big{ font-size: 1.6em !important } .super { font-size: 2.5em !important } .superplus { font-size: 3.2em !important } .mega { font-size: 4em !important } .ultra { font-size: 5.5em !important } /* .sfont.big { font-size: 2.2em !important; line-height: 1em; } .sfont.super { font-size: 4em !important; line-height: 0.9em; } .sfont.mega { font-size: 6em !important; line-height: 1em; } .sfont.ultra { font-size: 8em !important; line-height: 1em; } */ .centeredlist{ width: 100%; clear: both; margin-left: 7.5%!important; margin-right: 7.5%!important; width: 85%; padding-top: 70px;} .centeredlist:first-child{ padding-top: 0;} .flexi{ display: flex; } .flexilist{ display: flex; flex-wrap: wrap;} .centeredlist100{ margin-left: 0%!important; margin-right: 0%!important; width: 100%} .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%} .centeredlist30{ margin-left: 35%!important; margin-right: 35%!important; width: 30%} .centeredlist > li{ display: inline-block; vertical-align: top; position: relative;} .centeredlist > li{ width: 45%; margin: 0 2.4% } .centeredlist > li.col5{ width: 5%; margin: 0; } .centeredlist > li.col10{ width: 10%; margin: 0; } .centeredlist > li.col20{ width: 19%; margin: 0 0.5%; } .centeredlist > li.col25{ width: 23%; 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: 42%; margin: 0 1.5%;} .centeredlist > li.col50{ width: 45%; margin: 0 2.4%; } .centeredlist > li.col60{ width: 57%; margin: 0 1.5%;} .centeredlist > li.col70{ width: 60%; margin: 0 3.5%;} .centeredlist > li.col100{ width: 100%; } .mediummargin{ margin-top: 40px; margin-bottom: 40px;} .bigmargin{ margin-top: 80px; margin-bottom: 80px;} .nomargintop{ margin-top: 0; padding-top: 0;} .marginbottom{ margin-bottom: 50px;} .titlepadding{ padding-top: 95px;} .titlepaddingmini{ padding-top: 45px;} .titlepaddingmedium{ padding-top: 150px;} .titlepaddingbig{ padding-top: 200px;} .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;} .restr30p{ width: 30%; } .restr40p{ width: 40%; } .restr50p{ width: 50%; } .restr60p{ width: 60%; } .restr70p{ width: 70%; } .screensW, .screensAnimW{ width: 100%; height: 100%; } .screen{ width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 0;} .screenZimW, .screenCarouselW, .screenCarouselZoomW{ width: 100vw; height: 100%; top: 0; left: 0; overflow: hidden; background: #333; position: relative;} .screenZim, .carouselZim, .carouselZoomZim, .carouselZoomZimW{ display: block; position: absolute; } .screenZim{ display: none;} .screenCarouselW{ display: none;} .carouselZim, .carouselZoomZimW{ opacity: 0;} /*.screenCarouselZoomW.half{ height: 50%;}*/ .screenCarouselZoom{ height: 100%; width: 100%;} .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 5s ease-out; -webkit-transition:all 5s ease-out; -o-transition:all 5s ease-out; transition:all 5s ease-out; transform: translate3d(0px, 0px, 0px) scale(1); } .colZim{ display: block; width: 100%; margin: 0 auto;} .rosecolor{ color: var(--rose)!important; } .rosebg, .rosebgtarget:hover, .rosebgtarget.active{ background-color: var(--rose);} .blackbg h2, .blackbg h2, .blackbg p, .blackbg li, .blackbg a { color: #fff; } .rosebg h2, .rosebg h2, .rosebg p, .rosebg li, .rosebg a{ color: #fff; } .pagesection.blackbg{ padding: 40px 0;} .shadowBox{ -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); } #OverlayLoad{ height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background: #fefefe url(zims/loader/loader.gif) no-repeat center; } #SoonPopupW{ display: none;} #SoonPopup{ margin: 100px 150px;} /* ################################################################################################################ * PAGES *###############################################################################################################*/ /*html{ overflow-y: scroll;}*/ html, body, #Main{ height: 100%; } body.noscroll, .noscroll #Main{ overflow: hidden;} #Main{ width: 100%; height: 100%;} .page{ width: 100%; overflow: hidden; position: relative;} .simpleformPage{ width: 100%; height: 100%; overflow: hidden; position: relative;} .screensW, .screensAnimW{ width: 100%; height: 100%; } .screen{ width: 100%; height: 100%; position:absolute; top: 0; left: 0; } .screenZimW, .screenCarouselW, .screenCarouselZoomW{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .screenCarouselZoomW{ overflow: visible; } .screenZim, .carouselZim, .carouselZoomZim, .carouselZoomZimW{ display: block; position: absolute; } .screenZim{ display: none;} .screenCarouselW{ display: none;} .carouselZim, .carouselZoomZimW{ opacity: 0;} /*.screenCarouselZoomW.half{ height: 50%;}*/ .screenCarouselZoom{ height: 100%; width: 100%;} .screensAnimW{ overflow: hidden; } .halfZimW{} .halfZimW div{ width: 50%; height: 100%; overflow:hidden; position:absolute; } .halfZimL{ left: 0; top: 0; } .halfZimR{ right: 0; top: 0; } .halfZimR img{ right: 0; left: auto !important;} .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 9s ease-out; -webkit-transition:all 9s ease-out; -o-transition:all 9s ease-out; transition:all 9s ease-out; transform: translate3d(0px, 0px, 0px) scale(1.15); } #ZoomHalfBanner{ height: calc(100vh - 145px); position: relative; overflow: hidden; background: #222 url(zims/loader/ducat2.gif) no-repeat center 49%;} #ZoomHalfBanner.darkPanel{ } #ZoomHalfBanner h2{ position: absolute; width: 100%; z-index: 100; font-size: 3em; bottom: 50px; left: 0; margin: 0; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,1); text-align: center; text-transform: none; line-height: 1.5em; } #ZoomHalfBanner h2 .maxi{ text-transform: uppercase; letter-spacing: 2px; } #ZoomHalfBanner h2 .sfont{ font-size: 2em; } .paddingupdown { padding: 20px 0; } .screenPanelW{ width: 100%; height: 100%; position: absolute;} .screenPanel{ position: absolute; } h2.pageTitle{ font-size: 3em; margin: 0; } h2.pageTitle span{ } .away{ position: relative; opacity: 0;} .awayleft{ left: -120px;} .awayright{ right: -120px;} .awaytop{ top: -100px;} .majlinks{ text-transform: uppercase; } .absW{ position: relative; } /*.nomob{ display: none;}*/ /* .contactBlockW{ margin: 50px 0;} .contactBlock{} .contactBlock.push{ padding: 70px 0 0 25px; } .contactBlock p{ } .contactBlock p svg{ display: block; float: left; font-size: 1.5em;} .contactBlock p.acces{} .contactBlock p.horaires{ background-position: left -145px;} .contactBlock p.coords{ background-position: left -292px;} .contactBlock p span.line{ display: block; border-bottom: 1px solid #fff; padding: 0 0 20px 40px;} */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * GENERAL * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #HeaderBand{ background: var(--rose); height: 5px; width: 100%;} /* HEADER */ #Header { position: relative; top: 0; width: 100%; z-index: 1000; height: 140px; -moz-transition: background-color 0.2s ease-in-out, border 0.7s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, border 0.7s ease-in-out; -o-transition: background-color 0.2s ease-in-out, border 0.7s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, border 0.7s ease-in-out; transition: background-color 0.2s ease-in-out, border 0.7s ease-in-out; background-repeat: repeat-x; background-position: center top; background: #fff; border-bottom: none; } .scrolled #Header, .forcedHeader #Header{ } #Header h1 { margin: 0; width: 100%; margin: 0 auto; position: absolute; left: 0; top: 5px; height: 1px; z-index: 5002; text-align: center; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } #Header h1 img { } #HeadLogo { padding: 20px 0 30px 0; margin: 0; text-align: center;} #HeadLogo img {width: 320px; } /* .scrolled #Header h1, .forcedHeader #Header h1{ opacity: 1;} */ #Nav{ top: 0; width: 100%; height: auto; z-index: 2001; position: relative;} #UpperNav{ position: absolute; z-index: 2010; height: 70px; width: 70px; display: none; } #NavIco { display: block; position: absolute; z-index: 5001; height: 25px; width: 32px; top: 26px; cursor: pointer; display: none; } #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: 18px; } #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: 18px; width: 0%; left: 50%; } /* MENU */ #Menu{ position: relative; z-index: 1005; } #MainMenuW{ padding-top: 105px; width: 100%; } #MainMenu{ text-align: center; padding: 0; width: 100%; display: flex; justify-content: center; gap: 40px } #MainMenu li{ display: table-cell; font-size: 1.4em; vertical-align: middle; padding: 0; -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 a{ display: block; color: #000; line-height: 1.1em; text-transform: uppercase; height: 35px; font-size: 0.7em; padding: 0; letter-spacing: 1px; -moz-transition: color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; background: repeat-x center bottom; } #MainMenu li { position: relative; } #MainMenu li a:before { content: ""; position: absolute; bottom: 0; inset: calc(100% - 3px) 0 0 0; /* 3px = the thickness */ background: var(--rose); /* the color */ opacity: 0; } #MainMenu li a:hover:before, #MainMenu li a.HTMLMenuItemLink-Current:before { opacity: 1; } #MainMenu li a span.ico{ display: none; } #MainMenu li a:hover, #MainMenu li a:hover span.ico, #MainMenu li a.HTMLMenuItemLink-Current, #MainMenu li a.HTMLMenuItemLink-Current span.ico{ color: #111; text-decoration: none; } #MainMenu li:last-child{ margin-right: 0; padding-right: 0; border-right: none;} .subMenusW{ position: absolute; top: 140px; left: 0; z-index: 505; background: #fff; width: 90%; height: 240px; clear: both; padding: 20px 5% 20px; display: none;} .submenuW{ display: none; height: 100%;} .submenu{ gap: 30px; height: 100%; } .submenuRightZone{ width: calc(42% - 30px); height: 100% } .submenuRightZone > div{ padding: 35px; height: calc(100% - 70px); } .submenuRightZone > div h3{margin-top: 0; } .submenuRightZone > div p{margin-bottom: 0; } .submenuElements{ width: 100%; height: 100%} .photobgLinks{ gap: 30px; margin: 0; height: 100%} .photobgLinks a{ display: block; position: relative; flex: 1; overflow: hidden; font-size: 1.2em;} .photobgLinks a img{ display: block; } .photobgLinks a .photobgOv { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; background: rgba(0,0,0,0.3); color: #fff; text-align: center; align-items: center; -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; } .photobgLinks a .photobgOv.light { background: rgba(0,0,0,0.1); } .photobgLinks a .photobgOv span { flex : 1; font-size: 1.3em; text-transform: uppercase; letter-spacing: 1px; line-height: 1.4em; } .photobgLinks a:hover .photobgOv { background: rgba(0,0,0,0.2); } .logoMenuW{ align-items: center; justify-content: center; height: 90% } .logoMenuW img{ width: 220px;} #HeaderOverlay { background: rgba(0,0,0,0.4); position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 505; display: none; backdrop-filter: blur(8px); } /* #MainMenu-resa-Item{ background: #ffffff; padding: 0 25px 2px; height: 100%; margin: 0; -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#MainMenu-resa-Item a{ padding: 24px 40px !important; color: #111; } #MainMenu-resa-Item:hover { background: #fff; } #MainMenu li#MainMenu-resa-Item:hover a{ color: var(--rose); } #TopLinks{ position: absolute; display: block; top:22px; left: 21%; z-index: 1010; } #ResaButton{ display: block; float: left; background: #aaa; border-color: #aaa !important; color: #fff!important; padding: 0.5em 1.5em; font-size: 1em; -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; text-transform: uppercase; -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; border: 1px solid #fff; transition: transform 280ms cubic-bezier(0.175, 0.885, 0.320, 1.275); } #ResaButton:hover { color: #aaa!important; text-decoration: none; background-color: #fff; transform: rotate(-2deg) translate(-8px, -8px) scale(1.1);} #Socials{ display: inline; float: left; margin: 0; padding-top: 7px; } #Socials a{ color: #fff; margin-right: 20px;} #Socials a svg{ font-size: 1.5em; } #Socials a:hover svg{ color: #ffffff; } #LangsW{ position: absolute; display: block; width: 60px; z-index: 5010; left: 2.5%; top: 28px;} #LangsW #LangOpen{ display: block; float: left; color: #fff; font-size: 2em; position: relative; top: -5px; } #LangLinks{ float: right; } #LangLinks li{ text-align: right; margin-bottom: 2px; } #LangLinks li a{ color: #fff; text-transform: uppercase; padding: 0 5px 8px 0; font-size: 1.1em; } #LangLinks li a svg{ } #LangLinks li.disabled{ display: none;} #Links{ width: 100%; display: table; text-align: center; } #Links li{ display: inline-block; margin: 0 4%; } #MainResa{ font-weight: 400; font-size: 1.2em; background: #fff; padding: 10px 30px; color: #000; letter-spacing: 2px; border: 1px solid #000; -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; text-transform: uppercase; -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; } #MainResa:hover { color: #fff; text-decoration: none; background-color: rgb(26,23,27); } .scrolled #MainResa{ border-color: #000; } */ /*#MainResa{ display: none }*/ #RSIco{ position: absolute; top: 15px; left: 5%; z-index: 2050; } #RSIco a{ margin: 0 20px 0 0; } #RSIco a:hover{ color: var(--rose); } #RSIco a svg{ font-size: 1.1em; } #MembersIco{ position: absolute; top: 15px; right: 5%; z-index: 2050;} #MembersIco a{ margin: 0 0 0 20px } #MembersIco a:hover{ color: var(--rose); } #MembersIco a svg{ font-size: 1.3em; } #FooterW{ min-height: 200px; position: relative; padding-bottom: 10px; background: #000; /*background: url(zims/frontend/carreaux-bg.jpg);*/} #FooterDecal{ margin: 0; } #Footer{ padding: 25px 4% 60px; clear: both; display: flex; gap: 80px; } #Footer *{ color: #fff; } #Footlogo { width: 150px;} .footerMenu{ } .footerMenu li { margin-bottom: 10px; } .footerMenu li strong{ font-size: 1.1em; letter-spacing: 1px; text-transform: uppercase;} #FooterAddr{ flex-grow: 2;} #FooterAddr p{ text-align: right;} .credits{ font-size: 0.8em;} #FooterSocials a{ font-size: 1.5em; margin-right: 15px;} /*#FooterMenu{ display: inline; float: left; width: 30%; padding: 20px 0 0 0;} #FooterMenu2{ display: inline; float: left; width: 20%; padding: 20px 0 0 30px; min-height: 120px;} #FooterMenu2 a{ text-transform: uppercase; } #FooterSocials{ display: inline; float: left; width: 10%; padding: 20px 0 0 30px; min-height: 120px; min-width: 180px} #FooterSocials em{ font-style: normal; position: relative; top: 6px; } #FooterSocials img.logo{ display: block; float: right; width: 170px; margin: 0 7% 20px 0; } #FooterAddr{ display: inline; float: right; width: 27%; padding-right: 7%; line-height: 1.2em; padding: 20px 0 0 30px; min-height: 120px;} #FooterMenu li, #FooterMenu2 li{ margin-bottom: 2px; font-size:1em;} #FooterAddr #Gmap{ text-transform: none; padding: 4px 8px; letter-spacing: 0; } #FooterW .socialLink{ display: inline-block; font-size: 1.5em; margin-right: 10px; margin-top: 7px; vertical-align: top; } #FooterW .socialLink svg{ vertical-align: top; } #FooterW .socialLink img{ width: 18px; vertical-align: top; } #FooterNewsW{ background: var(--rose); padding: 0} #FooterNews{ position: relative; padding: 25px 25px 35px 25px; margin: -2px 0 0 0; } #FooterNews h3{ text-align: center; margin: 0 0 0 0; color: #fff; font-size: 2em; } #FooterNews .formW{ position: relative; padding: 25px 30%; } #FooterNews *{ color: #fff;} #FooterNews .title{ text-align: center; text-transform :none; font-size: 1.15em; letter-spacing: 1.5px;} #FooterNews .textField { display: inline; float: left; margin: 0 } #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; color: #fff !important;} #FooterNews .formButtons{ width: auto; display: block; margin: 0 auto; float: none; clear: left; } #FooterNews .formButtons input{ padding: 10px 25px; font-size: 1.2em; border-color: #fff; } #FooterNews #field-valid{ display: block; clear: both; font-size: 0.9em; padding-top: 15px; text-align: center;} #FooterNews #field-valid label{ font-size: 1.1em; letter-spacing: 1px; } #FooterNews fieldset p input{ padding: 10px 2% 3px; border-bottom: 1px solid #fff; text-transform: none; font-size: 1.2em; line-height: 1.2em;color: #fff !important; letter-spacing: 2px; font-weight: 300; } #FooterNews #field-prenom{ width: 20%; margin: 0 4% 0 28%; } #FooterNews #field-email{ margin: 0; width: 20%; } #NewsletterForm { width: 100%; margin: 0;} #FootNewsErrors{ color:#000; margin-bottom: 10px; display: block; text-align: center;} #FootNewsCheck{ display: block; position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; font-size: 2.2em; display: none; } #FooterBottom{ padding: 25px 0 0 0; text-align: left; font-size: 0.8em; margin-top: 50px; clear: both; } #FooterBottom a{ margin-right: 20px; } #Credits{ clear: both; font-size: 1em; } .alcoolLegend { float: right; text-align: right; } */ input:-internal-autofill-selected { background-image: none !important; background-color: none !important; color: #000 !important; } /*#FooterW .button, #FooterW .submitButton { border: 1px solid #fff; color: #fff; }*/ /* Content */ #ContentW{ padding-bottom: 0; } #page-home #ContentW{ } /*url(zims/frontend/wood.jpg) repeat-y center top; background-size: 100% auto;*/} #Content{ } /*#OverlayLoad{ height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background: #000 url(zims/loader/ducat.gif) no-repeat center 49%; }*/ .simplePageTitle{ font-size: 3em; font-weight: 600; text-align: center; margin: 50px 0; text-transform: uppercase;} #SpecialAnnounce{ display: none;} #SubMenuW{ margin-bottom: 50px; position: relative; z-index: 100; top: -2px; } #SubMenuW.nomargin{margin-bottom: 0; } #SubMenuW ul.submenu{ background: #000; width: 100%; display: table; text-align: center; /*border-bottom: 1px solid #666;*/ } #SubMenuW.colormenu ul.submenu{ background: #2f395a; } #SubMenuW ul.submenu li{ display: inline-block; padding: 0 30px; border-right: 1px solid #666; } #SubMenuW ul.submenu li a { display: block; padding: 10px 0; color: #fff; text-transform: uppercase; } #SubMenuW ul.submenu li:last-child{ border-right:none } #SubMenuW ul.submenu li.current{ background: #fff; } #SubMenuW ul.submenu li.current a{ color: #000; } #SubMenuW ul.submenu li.logoutBTN { padding: 0 15px; background:#000000; margin-left:-3px; } #SubMenuW ul.submenu li.logoutBTN a { } #SubMenuW ul.submenu li.logoutBTN a svg { font-size:1.5em; } .fancybox-inner{ border: 1px solid #fff;} /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * HOME * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /*#page-home #HeaderW{ height: 100px; background: #000; } #page-home #Header h1 { position: absolute; left: 20px; } #page-home #ContentW{ margin-top: auto; background: none; } #page-home #MainMenu{ display: block; } #page-home #MainResa{ border-color: #fff;} */ #page-home #ContentW, #page-home #Content { height: auto;} #HomeContentW { } #HomeZimW { position: relative; } #HomeOverlayW { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; overflow:hidden; } #HomeOverlay { width: 100%; height: 100%; position: relative; overflow:hidden; } @-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: 1000; text-align: center; bottom: 130px; left: 20px; width: 30px; } #ArrowBottom2{ bottom: 200px; 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; text-transform: uppercase; } .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%; } /* HOME */ #IntroLoader{ position: fixed; z-index: 1500; top: 0; left: 0; width: 100%; height: 100vh;} #IntroLoaderTitleW{ position: absolute; z-index: 100; top: 20%; width: 100%;} #IntroLoaderTitleW h2 { line-height: 1em; font-size: 2.2em; text-align: center; color: #fff; text-align: center; margin: 0; text-transform: none } #IntroLoaderTitleW h2 img { width: 430px; display: none; } .loaderDoor{ position: absolute; z-index: 10; width: 50%; height: 100%; background: #fff;} #LoaderDoorL{ left: 0; } #LoaderDoorR{ right: 0; } #IntroLoader{ display: none; } #page-home #Content{ padding:0; min-height: auto;} #page-home #IntroLoader{ display: block } #VideoW { box-sizing: border-box; height: 100%; 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: 100%; width: 100%; position: fixed; z-index: -1;} #VideoOverlayBg{ top: 0; left: 0; height: 100%; width: 100%; background: rgba(0,0,0,0); position: absolute; z-index: 0; } /*#HomeZimW-Mob{ position: fixed;}*/ /* Animated*/ #HomeZimW-Mob{ position: relative;} .videopanelW{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .videopanel{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #VideoPanel2{ position: absolute; z-index: 1;} #VideoPanel3{ position: absolute; z-index: 2;} #VideoPanel4{ position: absolute; z-index: 4;} #VideoPanel5{ position: absolute; z-index: 5;} .videoOverlay, #VideoHomeCache{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;} .videoOverlay.overB{ background: rgba(0,0,0,0.3); } .videoOverlay.overW{ background: rgba(255,255,255,0.3); } #VideoHomeCache{ background: #000; display: none; z-index: 0} #HomeTitleW{ position: absolute; top: 20%; width: 100%; } #HomeTitleW h2 { line-height: 1em; font-size: 2.2em; text-align: center; color: #fff; text-align: center; margin: 0; text-transform: none } #HomeTitleW h2 img { width: 430px; } .headerPhotoBand{ height: 140px; background: url(../media/images/deco/bg-orgue.jpg) no-repeat; background-position: center; background-size: 100% auto; } .icoList{ display: flex; gap: 20px 100px; margin-bottom: 60px; } .icoList li{ flex: 1; text-align: center; text-transform: uppercase; font-size: 1.2em; } .icoList li svg{ font-size: 2em; margin-bottom: 20px; } .contentSectionW{} .contentSectionW.styledR{ background: url(../media/images/logotype-seul-gris.svg) no-repeat; background-position: 95% 25%; background-size: auto 95%; } .contentSectionW.styledGift{ background: url(../media/images/gift.svg) no-repeat; background-position: 5% 25%; background-size: auto 400px; } .contentSection {} .contentSection.textR{} .contentSection .decoZimW{ position: relative; margin: 0; width: 35%; } .contentSection .decoZim { display: block; position: relative; z-index: 10; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat;} .contentSection .bgArr{ display: block; position: absolute; z-index: 1; width: 100%; height: 100%; left: -5px; bottom:-5px; background: var(--rose); } .contentSection .bgArr.right{ left: 5px; } .textBlockW{ background: #fff; padding: 70px 50px; margin: 40px 0; width: calc(65% - 100px); } .textBlockW.huge{ padding: 100px 50px; } .textBlockW h3{ margin-top: 0;} .textBlockW p{ padding: 0 10px; font-size: 1.1em; letter-spacing: 0.5px; color: #666;} .textBlockW p:last-child{ margin-bottom: 0; } .decalTitle{ position: relative; top: 30px; margin-top: 0; } .decalTitle.right{ left: 80px;} h2 .decalR{ position: relative; left: 70px; } .prestaList{width: 65%;} .prestaList ul li{ padding: 5px 20px; letter-spacing: 1px;} .prestaList ul li:nth-child(odd){ background: #fff;} .actionBlock{ position: relative; margin-left:40px; width: calc(35% - 40px); } .actionBlock h3 { line-height: 1em; } .actionBlock h3 .mini{ font-size: 0.5em !important; } #BreadCrumb{ border-bottom: 1px solid #999; padding: 5px 4%; color: #666;} #BreadCrumb .separator{ display: inline-block; padding: 0 5px;} /* GAL */ /*#MiniGalW{ position: relative; overflow: hidden; width: 600px;} #MiniGalW .ul{ width: 100%; overflow: hidden; min-height: 250px; } #MiniGalW .ul li{ display: block; width: 100%; margin:0; border: none !important; padding: 1px 0; } #MiniGalW .ul li img{ display: block; width: 100%; vertical-align: top} #MiniGalArrows{ position: absolute; top: 0; z-index: 1000; width: 100%; height: 100%} #MiniGalArrows a{ position: absolute; top: 36%; z-index: 1000; text-indent: -999px; overflow: hidden; background: url(zims/frontend/minigal-arrows.png) no-repeat left center; width: 25px; height: 113px} #MiniGalArrows a#MiniGalPrev{ left: 2%; } #MiniGalArrows a#MiniGalNext{ right: 2%; background-position: right center; } */ .verticalgalleryW{ position: relative; } .verticalgallery{ width: 100%; overflow: hidden; min-height: 250px; } .verticalgallery li{ display: block; width: 100%; margin:0; border: none !important; padding: 1px 0; } .verticalgallery li img{ display: block; width: 100%; vertical-align: top} .galleryArrowW{ background: rgb(60,60,61); display: block; position: absolute; top:36%; left: -5%; width: 5%; padding: 10px 0; } .grey .galleryArrowW{ background: rgb(200,174,119); } .galleryArrowW.mini{ top: 32%;} .galleryArrowW.right{ left: auto; right: -5%;} .galleryArrow{ display: block; margin: 0 auto; width: 100%; text-align: center; font-size: 1.4em; cursor: pointer; color: #fff;} .galleryArrow.top-arrow{ margin-bottom: 15px; } .galleryArrow.top-bottom{ margin-top: 15px;} .grey .galleryArrow, .grey .galleryArrow i{ color: #000 !important;} .maingallery{ position: relative; margin: 80px 0 60px 0; } .maingallery .bgBand{ position: absolute; width: 100%; height: 90%; z-index: 0; bottom: -50px; background: #fff; } .maingallery ul { width: 85%; clear: both; display: flex; flex-wrap: wrap; gap: 25px; position: relative; z-index: 5; } .maingallery ul li{ width: calc(20% - 20px); } .maingallery ul li img{ display: block; width: 100%; } .galZimW{ display: table-cell; vertical-align: top; } #EventW, #PostuleW, #MentionsW{ margin: 0; padding:0;} #EventForm .textField label, #EventForm .textareaField label, #PostuleForm .textField label, #PostuleForm .textareaField label { text-align: left; margin-bottom: 7px; display: block;} #EventForm #field-ateliers { display:none; } #EventForm fieldset p, #PostuleForm fieldset p{ /*width: 47.5%; display: inline; float: left; */ text-align: left; margin-bottom: 40px;} #EventForm fieldset p#field-cgv, #EventForm fieldset p#field-newsletter{ width: 100%; } #EventForm fieldset p#field-cgv{ margin-bottom: 15px;} #EventForm fieldset p#field-creneau, #EventForm fieldset p#field-quantite, #EventForm fieldset p#field-budget { margin-right: 5%; width: 60%; } #EventForm fieldset p#field-cp { margin-right: 5.5%; width: 22%;} #EventForm fieldset p#field-datesflex { margin-right: 7.5%; width: 20%; } #EventForm fieldset p#field-budgetflex { margin-right:0; width: 22%; } #EventForm fieldset p#field-quantite, #EventForm fieldset p#field-nom { clear: left; } #EventForm fieldset p#field-nom, #EventForm fieldset p#field-email{ margin-right: 5%; } #EventForm fieldset p#field-typeevent, #EventForm fieldset p#field-infos, #EventForm fieldset p#field-newsletter{ width: 100% } #EventForm #infos {resize: none;} #EventForm fieldset p#field-societe{ margin-top: 50px;} #EventForm fieldset p#field-tel { width: 20%; } #EventForm fieldset p#field-cp { clear:left; } #EventForm fieldset p#field-cp, #EventForm fieldset p#field-ville { width: 21%; } #EventForm fieldset p#field-datesevent, #EventForm fieldset p#field-nbpers { margin-right: 5%; } #EventForm fieldset p#field-datesevent, #EventForm fieldset p#field-nbpers { clear:right;} #EventForm fieldset p#field-quantite label { float: left; padding:5px 10px 0 0; line-height:20px; } #ReportReservationForm fieldset p.ladateW { margin-bottom: 10px; } #EventW, #PostuleW, #MentionsW{ margin: 0; padding:0;} #ReportReservationForm .textField label, #ReportReservationForm .textareaField label, #PostuleForm .textField label, #PostuleForm .textareaField label { text-align: left; margin-bottom: 7px; display: block;} #ReportReservationForm fieldset legend { display:none; } #ReportReservationForm #fieldsList-creneau { display:none; } #ReportReservationForm fieldset p, #PostuleForm fieldset p{ /*width: 47.5%; display: inline; float: left; */ text-align: left; margin-bottom: 40px;} #ReportReservationForm fieldset p#field-cgv, #ReportReservationForm fieldset p#field-newsletter{ width: 100%; } #ReportReservationForm fieldset p#field-cgv{ margin-bottom: 15px;} #ReportReservationForm fieldset p#field-creneau, #ReportReservationForm fieldset p#field-quantite, #ReportReservationForm fieldset p#field-budget { margin-right: 5%; width: 60%; } #ReportReservationForm fieldset p#field-cp { margin-right: 5.5%; width: 22%;} #ReportReservationForm fieldset p#field-datesflex { margin-right: 7.5%; width: 20%; } #ReportReservationForm fieldset p#field-budgetflex { margin-right:0; width: 22%; } #ReportReservationForm fieldset p#field-quantite, #ReportReservationForm fieldset p#field-nom { clear: left; } #ReportReservationForm fieldset p#field-nom, #ReportReservationForm fieldset p#field-email{ margin-right: 5%; } #ReportReservationForm fieldset p#field-typeevent, #ReportReservationForm fieldset p#field-infos, #ReportReservationForm fieldset p#field-newsletter{ width: 100% } #ReportReservationForm #infos {resize: none;} #ReportReservationForm fieldset p#field-societe{ margin-top: 50px;} #ReportReservationForm fieldset p#field-tel { width: 20%; } #ReportReservationForm fieldset p#field-cp { clear:left; } #ReportReservationForm fieldset p#field-cp, #ReportReservationForm fieldset p#field-ville { width: 21%; } #ReportReservationForm fieldset p#field-datesevent, #ReportReservationForm fieldset p#field-nbpers { margin-right: 5%; } #ReportReservationForm fieldset p#field-datesevent, #ReportReservationForm fieldset p#field-nbpers { clear:right;} #ReportReservationForm fieldset p#field-quantite label { float: left; padding:5px 10px 0 0; line-height:20px; } #ReportReservationForm fieldset p.ladateW { margin-bottom: 10px; } .uniqueCheckBoxField input{ width: auto; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * CALENDRIER * * * * * * * * * * * * * * * * * * */ #CalW { } .calendarWW { width:100%; /* clear:both; */ display:block; overflow:visible; padding-bottom:30px; width: 291px; float:left; height: 240px; } .calendarWW > div { /*width:49%; float:left; */ /*border:1px solid blue;*/ } .calendarWW > div.horairesW {/* margin-left:1%; */} .calendarWW > div.horairesW ul li { margin-bottom:8px; } .calendarWW > div.horairesW ul li a { background:rgba(248, 215, 73, 1); color:#000000; display:block; padding:4px; } .calendarWW > div.horairesW ul li.complet a { background:#666666; color:#fff; } .calendarWW > div.horairesW ul li a.selected { background:#0093B7; color:#fff; } .calendarWW > .calendarW { width: 291px;} #CalendarTable { width:271px; height: 240px; cellspacing: 0; cellpadding: 0; border-collapse: collapse; -webkit-box-shadow: 1px 1px 6px 0 #cccccc; box-shadow: 1px 1px 6px 0 #cccccc; position:relative; margin:0 auto; margin:0; } #CalendarTable * { text-align: center; cellspacing: 0; cellpadding: 0; } #CalendarTable td { width:14%; background:#ffffff; } #CalendarTable abbr { border: none; text-decoration: none; color:#464646; line-height:2.4em; } #CalendarTable .MonthName, #CalendarTable .arrowRight, #CalendarTable .arrowLeft, #CalendarTable { background-color: var(--rose); border: none; color: #FFF; font-size: 16px; font-weight:500; text-transform:uppercase; } #CalendarTable .arrowRight a, #CalendarTable .arrowLeft a { color: #FFF; padding: 5px; display: inline-block; } #CalendarTable td { background:#ffffff; } #CalendarTable td a { color:#eeeeee; } #CalendarTable td.active { background: rgb(131, 206, 66);; color:#fff; font-weight: 600; } /*#CalendarTable td.today abbr { color:#ffffff; background-color: #554B60; padding:4px; } #CalendarTable td.today { background-color: #554B60; }*/ #CalendarTable td.active:hover { background:rgb(131, 206, 66);; } #CalendarTable td.active a:hover abbr, #CalendarTable td.today a:hover abbr #CalendarTable td.active a:hover abbr { color:#000; } #CalendarTable td.active.free { background: #daffaf; color:#fff; font-weight: 600; } #CalendarTable td.closed, #CalendarTable td.blocked { /*background:#ddcaa4;*/ background:#8d8d8d; font-style:italic; } #CalendarTable td.closed a abbr, #CalendarTable td.blocked a abbr { color:#6C5953; color:var(--rose); } #CalendarTable td.closed:hover, #CalendarTable td.closed a:hover{ cursor: not-allowed; } #CalendarTable td.selected { background:#c0087f;} #CalendarTable td.selected { background:#c0087f;} #CalendarTable td.selected a abbr { color:#ffffff; } #CalendarTable td.selected:hover { background:#c0087f;} #CalendarTable td.closed.selected, #CalendarTable td.blocked.selected { /*background:#ddcaa4;*/ background:var(--rose); font-style:italic; } #CalendarTable td.closed.selected a abbr, #CalendarTable td.blocked.selected a abbr { color:#EAE0DA; } #CalendarTable td.past { background:#eeeeee; } #CalendarTable td.past a abbr { font-style:italic; color:#cccccc; } #CalendarTable td.hebdo { background:#cccccc; } #CalendarTable td.hebdo a abbr { } #CalendarTable .CalendHeaders th {background-color: #000000;} #MyDate { display:none; } #list-creneaux {display: flex; flex-direction: column;} #list-creneaux li:first-child span.button {position: relative; right: -35px;} .choice, .choice em, .choice em *{ vertical-align: middle; } .creneauxList li{ padding: 10px 15px 6px; } .creneauxList li:nth-child(odd){ background: #d9d9d9; } .creneauW { min-height:260px; margin-left:320px; padding-bottom:10px; } .creneauxList li.active { background-color:#d7f9cc; } .creneauxList li.active a.button { background: #fff; color: #000; } ::placeholder{ color: #bbb; } #NewsletterForm ::placeholder, #ContactForm ::placeholder { color: #fff; } #ContactForm input::placeholder { display: none !important; color: rbga(0,0,0,0); opacity: 0; } .legend{ font-size: 0.85em; color: #999; text-align: left; margin: 25px 0;} #fieldset-contact{ padding-top: 20px} #page-mes-reservations { .past{ background-color: #8d8686; } } /*----------------*/ #PostuleForm fieldset p#field-nom, #PostuleForm fieldset p#field-email{ margin-right: 5%; } #PostuleForm fieldset p#field-message, #PostuleForm fieldset p#field-cv, #PostuleForm fieldset p#field-motiv { width: 100% } #PostuleForm fieldset p#field-cv input, #PostuleForm fieldset p#field-motiv input, #PostuleForm .help{ display: block; clear: both; margin-top: 10px;} #PostuleForm .help{ text-align: left; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * CONTACT * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #page-contact #ContentW{ } #ContactW .textBlockW{ width: calc(35% - 100px);} #ContactW{ width: 80%; margin: 0 10%; overflow: auto;} #FormW, #CoordsW{ display: inline; float: left;} #FormW{ width: 60%; margin-right: 5%; } #CoordsW{ width: 35%; } #ContactW h3{ text-transform: uppercase; font-weight: 900; font-size: 2em; } #jGMapW { width:100%; height:600px; margin: 50px 0 0 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; } form fieldset p.fulllen{ width: 100% !important;} /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * FANCY * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #page-contact #Reassu{ display: none;} #ContactForm{ margin: 25px 0; padding: 0 0 0 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%; } /*#objet, #message{ width: 93%; }*/ /* #ContactForm fieldset p#field-date, #ContactForm fieldset p#field-heure, #ContactForm fieldset p#field-nbpers{ width: 30%;}*/ #BonCadeauForm #field-message #message{ height: 100px; resize: none !important; } #BonCadeauForm #field-commentaire #commentaire{ height: 100px; resize: none !important; } #date, #heure, #nbpers{ width: 90px; } /*.formButtons { display: inline; float: left; width: 100%; texta-lign: center;} .formButtons input{ padding: 0.5em 2em; line-height: 2em; border-color: #222; color: #222;} .formButtons input:hover{ color: #fff;}*/ #ReservLegend{ padding: 0 15px 10px 25px; margin: 10px 180px 10px 0; text-align: left; border-bottom: 1px solid #222; } .fancybox-inner p#Confirmation{ padding: 50px 15px; margin: 0;} #FancyContactBox{ width: 600px; } #FancyContact{ padding: 0 25px 25px; } #FancyContact h2{ font-size: 2.5em; letter-spacing:normal; margin: 0 0 15px 0; text-align:left; padding-top: 15px;} #ContactForm{ margin: 0;} input :not(#Ateliers-field-1){ width: 90%; margin: 0;} #ContactForm fieldset p{ width: 46%; display: inline; float: left; margin-bottom: 30px;} #ContactForm fieldset p#field-nom, #ContactForm fieldset p#field-email, #ContactForm fieldset p#field-datesevent{ margin-right: 8%; } #ContactForm fieldset p#field-objet, #ContactForm fieldset p#field-message, #ContactForm fieldset p#field-newsletter{ width: 100%; } .formButtons { display: inline; float: left; width: 100%; text-align: center;} /*.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); }*/ p#Confirmation{ font-size: 1.2em; font-weight: 300; margin: 100px 5%; text-align:center; line-height: 1.5em; } #BonCadeauForm{} #page-espace-membre #Reassu, #page-mes-reservations #Reassu, #page-mes-creations #Reassu, #page-event-request #Reassu{ display: none;} #page-espace-membre #Content, #page-mes-reservations #Content, #page-mes-creations #Content, #page-event-request #Content{ padding-bottom: 60px;} #page-espace-membre fieldset{ display: flex; flex-wrap: wrap; gap: 10px 30px} #page-espace-membre fieldset > div{ width: calc(100%); } #page-espace-membre fieldset p{ width: calc(50% - 15px); } #page-espace-membre label, .fieldsListTitle{ font-size: 1.2em; } .fieldsList { margin-bottom: 20px;} .fieldsListTitle{ margin-bottom: 15px;} .formIntro { background: var(--rose); color: #fff; padding: 15px; text-align: center; font-size: 1.4em; } .formIntro strong { color: #fff; display:inline-block; margin-bottom: 15px; } #page-espace-membre legend{ display: block; background: #fff; color: var(--rose); padding: 15px; font-size: 1.4em; margin-bottom: 20px; } #page-espace-membre fieldset p#field-cvg{ width: calc(100%); } .radio-field label{ cursor: pointer;} .fields { display: flex; gap: 10px 30px; align-content: flex-start; flex-wrap: wrap; } .fields { } #fieldset-sujet .fieldsList { background: #fff; color: var(--rose); padding: 15px; text-align: center;} #fieldset-sujet .fieldsList .fieldsListTitle { font-size: 1.2em;} #fieldset-sujet .fieldsList .fields { justify-content: center; } #fieldset-sujet .fieldsList .fields label{ color: var(--rose);} .accountmenu{ display: flex; gap: 15px; justify-content: center; } .accountmenu li a{ display: block; background: var(--rose); color: #fff; padding: 10px 20px; font-size: 1.2em;} .ateliersList{ gap: 25px; justify-content: center;} .ateliersList li{ background: #fff; width: calc(33.33% - 60px); padding: 20px; } #ContentW .ateliersList .past{ background: #8d8686 !important; } #field-ateliers{ display: flex; background: #fff; color: var(--rose); gap: 20px; padding: 30px 20px; justify-content: center; align-items: center; } #field-ateliers label{ font-size: 1.3em; color: var(--rose); } #field-ateliers select { background: var(--rose); border-color: var(--rose); color: #fff; font-size: 1.3em; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; padding:10px 20px; } #field-ateliers select option{ color: #fff; } #LogoutForm{ position: absolute; top: 25px; left: 25px; font-size: 1.5em;} #page-espace-membre #LogoutForm{ display: none;} #page-espace-membre fieldset{ flex-direction : column; align-items: center; width: 100%;} .formErrors li{ text-align: center;} #CreationFormW{ width: 80%; margin: 0 10%; padding-bottom: 150px;} #CreationFormW fieldset { border: 1px solid var(--rose) !important; margin-bottom: 50px; padding-bottom: 50px; } #CreationFormW fieldset legend{ font-size: 2em; color: var(--rose); background: #fff; padding: 20px; text-align: center; margin-bottom: 20px; } #CreationFormW .selectField, #CreationFormW .textField { text-align: center; } #CreationFormW .selectField select{ } /*#CreationFormW .selectField label:not(#field-format>label){ display: none; }*/ #CreationFormW .textField { text-align: center; } /*#CreationFormW .textField input{ width: 40px; display: inline-block; }* #CreationFormW .textField input#nom_parfum{ width: 200px; display: inline-block; }*/ #CreationFormW ::placeholder { color: #f2f2f2; } .noteW{ display: flex; gap: 40px; justify-content: center; align-items: flex-end;} .noteW .selectField label { opacity: 0; } .noteW .numberField input { width: 50px; border: 1px solid #000; text-align: center;} .noteW .numberField, .noteW .selectField { } #CreationFormW fieldset{ position: relative;} #CreationFormW fieldset#fieldset-format, #CreationFormW fieldset#fieldset-nom { border: none !important; padding-bottom: 0; padding-top: 50px; } #CreationFormW fieldset#fieldset-format p { text-align: center; } #CreationFormW fieldset#fieldset-format p select { display: inline-block; } #CreationFormW fieldset#fieldset-format label, #CreationFormW fieldset#fieldset-nom label { font-size: 1.3em; display: block; margin-bottom: 10px;} #CreationFormW fieldset#fieldset-nom input { width: 300px; text-align: center; display: inline-block;} .textField, .numberField { position: relative; } .numberField span[class^="qte_note_"] { position: absolute; top: 50%; left: 100%; width: max-content; } .btnSave{ text-align: end; margin-bottom: 0px; width: 10%; position: absolute; bottom: -0.7%; right: 0%; transform: translate(-50%); left: 95%; } .recapCreation{ width: 50vw; margin: 0 auto;} @media screen and (max-width:1024px) { .recapCreation{ width: 80vw; margin: 0 auto;} } .recapCreation ul{ display: flex; flex-wrap: wrap; gap: 10px } .recapCreation ul li{ padding: 8px; background: #fff; text-align: center; width: calc(33.33% - 23px); } /*.recapCreation ul li:nth-child(even){ background: #f1f1f1; }*/ .totW{ background: var(--rose); padding: 20px; position: absolute; left: -40px; top: -100px; color: #fff; text-align: center; } #TotalMl{ padding: 25px; position: fixed; left: auto; right: 0; top: 20px; z-index: 1000;} .totW *{ color: #fff;} .totW span.totval{ font-size: 2em; font-weight: 600; } fieldset .totW{ top: auto; bottom: -45px } .fa-eye-slash{ display: none;} .mobonly{ display: none;} /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * MODAL * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ .modal { display: none; /* Cacher par défaut */ position: fixed; /* Reste à l'écran */ z-index: 1; /* Au-dessus du contenu */ left: 0; top: 0; width: 100%; /* Largeur pleine */ height: 100%; /* Hauteur pleine */ overflow: auto; /* Si besoin, faire défiler */ background-color: rgba(0, 0, 0, 0.5); /* Couleur de fond */ } .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% du haut et centrer */ padding: 20px; border: 1px solid #888; width: 30%; min-width: 450px; height: auto; } .close { color: #aaa; float: right; /* À droite */ font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; /* Couleur au survol */ text-decoration: none; cursor: pointer; } /* Responsive */ @media(min-width:1925px) { } @media(min-width:1650px) { } @media(max-width:1650px) { /*#FooterNews #field-prenom{ width: 40%; } #FooterNews #field-email{ width: 42%; }*/ } @media(max-width:1440px) { .titlepadding{ padding-top: 60px;} #LangLinks li { margin-right: 8px; } } @media(max-width:1650px) { #BarDesc{ margin-left: 15%!important; margin-right: 15%!important; width: 70%; } } @media(max-width:1450px) { #BarDesc{ margin-left: 10%!important; margin-right: 10%!important; width: 80%; } #HomeVipBg{ padding-top: 80px; } } @media(max-width:1280px) { .centeredlist70 { margin-left: 5%!important; margin-right: 5%!important; width: 90%; } .alcoolLegend { float: none; display: block; clear: left; text-align: left; } /*#MainMenu li { font-size: 0.9em; margin-right: 6px; padding-right: 9px; }*/ #LangLinks li a { font-size: 0.9em;} #HomeTitleW h2 img { width: 400px; } #HomeTitleW{} .homeSectionW { padding-bottom: 60px; } #TopLinks{ right: 0;} #Socials { margin: 0 0 0 25px; } .HTMLMenu li { margin-right: 10px; padding-right: 0px; } #Intro{ width: 100%; margin: 0 !important; } #HomeAdresseW { padding: 50px 10% 0; margin-top: 30px; } .adresseZimW { width: 40%;} #MiniGalArrows a { top: 30%; } #HomeMenus { } #HomeVipBg .col60{ width: 100% !important } #EventsSection { padding-top: 50px; padding-bottom: 50px; } #HomeAdresse ul.centeredlist80, #EventsSection ul.centeredlist80 { margin-left: 2.5%!important; margin-right: 2.5%!important; width: 95%; } #BarDesc { margin-left: 5%!important; margin-right: 5%!important; width: 90%; } #HomeCarrieres { padding: 30px 0; } #HomeCarrieres .col30 { width: 50% !important } #FooterAddr { width: 30%; } #FooterBottom { padding: 25px 0 0 0; } /*#FooterNews { margin: 0 25%; }*/ } @media(max-width:1024px) { body { font-size:15px; line-height: 1.4em; } input, select, textarea { font-size: 16px; } .mobonly{ display: block;} .mobonly.inline{ display: inline;} .nomob{display: none } .arrowNext{ display: none } .focusW{ width: 95%; margin: 0 2.5%;} /*.desktop{ display: none !important;}*/ /*#HeaderW{ position: fixed; height: 85px !important; background-position: center -22px !important;} #Header.scrolled{ background: #000; } #Header h1{ width: 190px; left: 30px; margin : 0 !important; top: 15px}*/ /*#Header{ background-color: rgba(0,0,0,1); border-bottom: 1px solid #fff; }*/ #Header h1{ width: 150px; top: 7px; left: 2.5% } #ContentW{ margin-top: 75px; } /*.mobile #ResaLink, .mobile #Socials{ display: none } #Header h1 a { margin: 0; float: right; width: 180px}*/ #ResaButton { top: 90px; right: 15px; } #UpperNav{ display: block; left: auto; right: 0;} #NavIco{ display: block; top: 28px; right: 20px; } #TopLinks { right: 70px; } #LangsW { top: 27px; width: 65px; left: auto; right: 20%; } #LangLinks li a{ font-size: 0.9em;} #Menu{ overflow: hidden; width: 100%; background: var(--rose); } .no-mobile #Menu{ display: none; } #RightNav { top: 90px; } #MainResa { font-size: 0.9em; border: 1px solid #000; padding: 7px 24px;} #page-home #MainResa {border: 1px solid #fff; } .scrolled #MainResa { border: 1px solid #000 !important; } #ResaLink{ right: 20px; position: fixed;} #Socials{ display: block; float: none; margin: 30px auto 10px; padding-top: 0; text-align: center; } #Socials a { color: #fff; margin: 0 20px; } #Socials a:hover svg{ color: var(--rose); } #MainMenu li a:hover, #MainMenu li a:hover span.ico, #MainMenu li a.HTMLMenuItemLink-Current, #MainMenu li a.HTMLMenuItemLink-Current span.ico{ color: #fff !important; text-decoration: none; } #MainMenu-resa-Item a, #MainMenu-resa-Item a span, #MainMenu-resa-Item a:hover, #MainMenu-resa-Item a:hover span{ } #MainMenu li#MainMenu-resa-Item a { color: #111 !important; } #MainMenuW{ padding: 100px 0 0 !important; margin: 0 !important; display: block; width: 100%;} /*.scrolled #MainMenuW{ margin: 0 !important}*/ #MainMenu { float: none; text-align: center; padding: 0; display: block; height: auto; } #MainMenu li { display: block; font-size: 1.5em; vertical-align: middle; padding: 0; } #MainMenu li a { display: inline-block; line-height: 1.2em; font-size: 0.9em; padding: 10px 0; } #MainMenu-resa-Item { background: #fff; color : #ffffff } #MainMenu-resa-Item a { padding: 17px 0 !important; color : #ffffff !important; } #MainMenu-resa-Item:hover a { color: #ffffff !important; } .HTMLMenu li{ width: 100%; margin: 0; font-size: 1em; text-align: center; padding: 15px 0; color: #000; float: none; display: block;} .HTMLMenu li:last-child{ border: none; } .HTMLMenu li a{ background: none; padding: 0; } /*#MainMenu li ul{ position: static; padding: 0; min-width: auto; background: none; opacity: 1;} #MainMenu li ul li{ font-size: 0.8em; margin-bottom: 0; padding: 2px 0;}*/ /*#RightNav{ width: 90%; padding: 0 5%; border: none; margin-top: 0;} #Socials li{ width: 25%; text-align: center;} #ContactLink{ float: right;}*/ #ResaButton{ top: 67px; right: -7px; } .scrolled #ResaButton{ top: 54px; } #LangLinks{ position: static; } #Links { margin: 5px 0;} #Links li{ width: 30%; margin: 0 1.5%;} #Links a img{ display: block; max-width: 100%;} h2.pageTitle{ font-size: 2.5em;} h3{ font-size: 1.4em; } .screenZimW{ position: static; height: 300px;} .screenZim{ display: block; position: static; width: 100%;} .screenPanelW, .screenPanel{ position: static;} .mainTextW{ width: 83%; padding: 20px 0 30px 20px; } /*input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, select:focus { border-color: #6c5953; }*/ input[type="button"], input[type="submit"], input[type="reset"], .button { font-size: 0.8em; } #FooterDecal { margin: -1px 0 0 0; } #FooterMenu, #FooterMenu2, #FooterNews, #FooterAddr{ display: block; float: none; width: 100%;} #FooterMenu { } #FooterNews { } #FooterNews .title { font-size: 1em; margin: 0; } #FooterNews h3 { font-size: 4em; } #FooterNews #field-valid label { font-size: 0.9em; } #FooterNews{ margin-top: 0; padding: 20px 5% 0; width: 90%} #FooterNews .formW { padding: 25px 2.5%; } #FootNewsCheck { bottom: 30px; right: 47%; } #FooterNews #field-valid{ width: auto; } #FooterAddr, #FooterMenu2, #FooterSocials { margin-top: 20px; } #FooterNews fieldset p input { font-size: 1em; padding: 6px 2% 5px; } #NewsletterForm{width: auto; } #FooterNews .textField, #FooterNews .formButtons{ display: block; float: none; margin: 0 0 15px 0 !important; width: 100% !important; } #FooterNews .formButtons{ height: 35px;} #FooterNews #field-valid { vertical-align: top; } #FooterNews .formButtons input { padding: 7px 25px 10px; font-size: 1em; } #Footer { padding: 25px 5% 15px; background: none; } #FooterMenu2, #FooterAddr, #FooterSocials { display: block; float: none; width: 100%; border-left: none; padding: 0; min-height: unset; } #FooterBottom { padding: 15px 0; margin-top: 25px; } #FooterBottom a { margin-right: 15px; } #FooterMenu li { font-size: 1em; } #FooterMenu li a { } #FooterAddr { font-size: 1em; } #FooterAddr span{ } #FooterSocials { font-weight: 500; } #FooterW .socialLink { font-size: 1.3em; } /* */ #ChefWW p { font-size: 1em; } .homeSectionW { padding-bottom: 50px; } .homeSection .spacer, .homeSection .spacerMega{ padding-top: 50px;} .centeredlist{ display: block; /*text-align: left;*/} .centeredlist80, .centeredlist85, .centeredlist74, .centeredlist70, .centeredlist60, .centeredlist50{ margin-left: 2.5%!important; margin-right: 2.5%!important; width: 95%} .centeredlist > li, .centeredlist.col3 > li, .centeredlist.col4 > li{ display: block; vertical-align: top; position: relative;} .centeredlist > li, .centeredlist > div, .centeredlist > li.col60, .centeredlist > li.col50, .centeredlist > li.col40, .centeredlist > li.col45, .centeredlist > li.col30 { width: 100%; } .centeredlist > li.decalleft{ margin-left: 0} .centeredlist > li.decalright{ margin-right: 0} .centeredlist > li.decalleft{ margin-left: 0} .centeredlist > li.decalleftmini{ margin-left: 0} .centeredlist > li.decalright{ margin-right: 0} .centeredlist > li.decalrightmini{ margin-right: 0} .sidepadding{ padding: 0; } .sidemargin{ margin: 0;} .littleup { font-size: 1em !important;} .big{ font-size: 1.2em !important;} .superplus { font-size: 1.6em !important } .mega { font-size: 2em !important } .ultra { font-size: 2.5em !important } .sfont.ultra { font-size: 2.5em !important; line-height: 1em; } .galleryArrowW{ position: absolute; right: 0; width: 10%; z-index: 1000; top: 30%;} .galleryArrow { font-size: 2em; } .styledZimFloat{ left: 0 !important;} #DesignFloatLinks{ right: 0;} .scroll-section { display: none; } #ArrowBottom2{ display: block; bottom: 240px; } .mobpadding { padding-top: 60px;} .titlepadding, .titlepaddingmini, .titlepaddingmadium, .titlepaddingbig{ padding-top: 40px; margin-top: 0;} .righted *, .righted, .centeredlist > li p.righted{ text-align: left; } .halfSectionW { flex-direction: column; } .halfSection, .halfSection.imagebg { width: 100%; min-height: 400px; } /* HOME */ #HomeTitleW{ bottom: 30%;} #HomeTitleW h2 img, #IntroLoaderTitleW h2 img { width: 250px;} #HomeTitleW h2 strong{ padding: 0 2%; line-height: 1.2em; } #VideoW {height: 650px; overflow: hidden; } /*#VideoW img.mobonly{ display: block; position: relative; left: -70%; height: 100%;}*/ /* FORMS */ #EventForm fieldset p, #PostuleForm fieldset p { width: 100%; display: block; float: none; } #EventForm fieldset p#field-datesevent, #EventForm fieldset p#field-budget { margin-right: 0; width: 100%; } #EventForm fieldset p#field-datesflex, #EventForm fieldset p#field-budgetflex, #EventForm fieldset p#field-tel { margin-right:0; width: 100%; } #EventForm fieldset p#field-budgetflex, #EventForm fieldset p#field-nbpers { width: 100%; clear: both; padding-top:30px; } .calendarWW { padding-bottom:0; } .calendarWW > .calendarW { position:relative; margin:0 auto; float:none; } #CalendarTable { margin:0 auto; } /* 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; } /* PAGES */ #IntroTitle { font-size: 1.8em !important; line-height: 1em; margin-bottom: 20px; } #IntroBtn a { } #HomeIntro { padding: 30px 0 60px; } #Intro { line-height: 1.3em; } .homeSectionW.bgardoise, #HomeVipBg { background-size: auto 100%; background-attachment: unset; } #EventsSection { padding-top: 40px; padding-bottom: 40px; } .verticalcenteredW { height: 280px; } .verticalcentered h3 { font-size: 1.8em !important; line-height: 1em; padding: 0; } .slick-list { padding-top: 0px ! important; padding-bottom: 0px !important; } } @media(min-width:568px) and (max-width:799px) { .styledZimW, .verticalgalleryW, .embedVideoW { position: relative !important; max-width: 70%; margin: 0 auto !important; } #DesignFloatLinks{ top: 100px; right: 80px;} } @media(min-width:800px) and (max-width:1024px) { .styledZimW, .verticalgalleryW, .embedVideoW { position: relative !important; max-width: 55%; margin: 0 auto !important; } #DesignFloatLinks{ top: 100px; right: 200px;} } @media(max-width:768px) and (min-height: 900px) { #HomeTitleW { bottom: 35%;} #FancyContactBox{ width: 100%; } } @media(max-width:767px) { #VideoW img.mobonly{ display: block; position: relative; left: -70%; height: 100%;} #page-contact #FooterW, #page-event-request #FooterW{ margin-top: 30px; } #HomeGallery{ overflow: hidden; } #MainGalW{ overflow-x: scroll} /* SWIPE */ /*.maingallery { width: 200%; }*/ .maingallery li { width: 100%; margin: 0 0 25px; max-width: 400px; } #HomeTitleW h2 { font-size: 1.4em; } #HomeMenus { padding: 0; } .menulistW{ overflow-x: scroll; } .menulist{ display: flex; width: 300%; margin-left: 0 !important; margin-right: 0 !important;} .menulist li{ width: 33.3% !important;} .mobScrollArrow { display: block; position: absolute; bottom: 200px; left: 0; font-size: 2.5em; text-align: center; width: 100% } .mobScrollArrow span { position: absolute; top: 0; color: var(--rose) ; } .mobScrollArrow span.left{ left: 1.5%; } .mobScrollArrow span.right{ right: 1.5%; } .menusIntro { margin-bottom: 20px; } .menulist li { margin: 15px 0 !important; } .menulist li a { max-height: 380px; overflow: hidden; } .menulist li a img { width: 280px; } .menulist li a.labeltop { padding-top: 0; margin-top: 0; } /*#MenuList li a.labeltop .label { position: relative; top: -20px; } #MenuList li a.labeltop { padding-top: 0; }*/ .menulist li a .label { display: block; position: absolute; bottom: 0; background: rgba(255,255,255,0.6); } /* #BarDescFrame { background: #000; border: 3px solid #fff; } #BarDescFrame * { color: #fff; } #BarDescFrame p { font-weight: 300; } #DjsList li{ margin-right: 0; width: 100%; } .djDetail{ padding: 20px;} */ #PressW h2 { font-size: 4em !important; } #HomeEquip{ background-image: url(zims/frontend/equip-bg-mob.jpg?c=2); } #HomePlage{ background-image: url(zims/frontend/plage-bg-mob.jpg?c=2); } .ServiceList { flex-direction: column; gap: 20px; margin: 50px 0; } .equipList li{ width: 100%;} } /*#EventFormWrapper{ display: flex; justify-content: center; align-items: center; flex-direction: column; }*/ @media(max-width:480px) { #HomeVipBg{ background-position: 0 center; } } @media(max-width:375px) { } @media(max-width:1024px) and (min-height:1350px) { /*#HomeZimW-Mob{ display: block; position: absolute; left: -750px;}*/ } @media(max-width:800px) and (min-height:1024px) { /*#HomeZimW-Mob{ display: block; position: absolute; left: -650px;}*/ } /* @media(max-width:600px) and (max-height:900px) { #HomeZimW-Mob{ display: block; position: absolute; left: -650px;} } @media(max-width:600px) and (max-height:800px) { #HomeZimW-Mob{ display: block; position: absolute; left: -500px;} } @media(max-width:600px) and (max-height:570px) { #HomeZimW-Mob{ display: block; position: absolute; left: -430px;} }*/ @media(max-width:430px) { /*#HomeZimW-Mob{ display: block; position: absolute; left: -580px;}*/ } @media(max-width:380px) { /*#HomeZimW-Mob{ display: block; position: absolute; left: -500px;}*/ } @media(max-width:380px) and (min-height:780px) { /*#HomeZimW-Mob{ display: block; position: absolute; left: -660px;}*/ } @media(max-width:350px) { /*#HomeZimW-Mob{ display: block; position: absolute; left: -430px;}*/ } @media(min-width:3000px) { body { font-size:20px; } } #content-confirm-report{ padding: 0.1em; } div#FancyBox h2{ text-align: center; } div#FancyBox div.focusW{ padding: 1.1em; } span.button.selected { background-color: #4CAF50; /* Couleur verte pour indiquer la sélection */ color: #fff; /* Texte en blanc */ } .reservationLegend_container { width: 100%; display: flex; column-gap: 20px; padding: 50px 0 0 0; } .reservationLegend_container .reservationLegend_title { text-align: left; margin: 20px 0 10px; font-size: 1rem; border-bottom: 1px solid #000; width: fit-content; } .reservationLegend_container .reservationLegend_line { display: flex; align-items: center; column-gap: 10px; } .reservationLegend_container .reservationLegend_line .legend_box { width: 30px; height: 30px; border: 1px solid #000; } .reservationLegend_container .reservationLegend_line .legend_box.closed { background-color: #EEEEEE; } .reservationLegend_container .reservationLegend_line .legend_box.completed { background-color: #7c7c7c; } .reservationLegend_container .reservationLegend_line .legend_box.available { background-color: #83CE42; } .reservationLegend_container .reservationLegend_line p { margin: 0; width: max-content; margin-bottom: 0!important; }