/*************************************************************************
 _____   _____   _   __   _   _____        _          __  _____   _____  
|  _  \ /  _  \ | | |  \ | | |_   _|      | |        / / | ____| |  _  \ 
| |_| | | | | | | | |   \| |   | |        | |  __   / /  | |__   | |_| | 
|  ___/ | | | | | | | |\   |   | |        | | /  | / /   |  __|  |  _  { 
| |     | |_| | | | | | \  |   | |        | |/   |/ /    | |___  | |_| | 
|_|     \_____/ |_| |_|  \_|   |_|        |___/|___/     |_____| |_____/ 

**************************************************************************

    @ Copyright © 2019 POINT WEB
    @ Catégorie : Structure site
    @ Site : Deguilien
    @ Auteur : SERCO POINT WEB / www.point-web.fr

**************************************************************************/

/************* GENERAL **************/

#explicitsubmit, #explicitsubmit:focus{border:none;background:transparent;color:#FFF;margin-left:0.5em;outline:none;}
input#impliedsubmit{background-color:#FFF;color:#3e4035;border:none;border-radius:100px;margin:0 0 0 1em;padding:0 0.5em;font-size:10px;}
*, *:after, *:before{-webkit-tap-highlight-color:transparent;list-style-position:inside;list-style-type:none;color:inherit;box-sizing:border-box;margin:0;padding:0;outline:none;position:relative;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
*:after,*:before{display:inline-block;z-index:1;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td,p,figure,figcaption,button,var,abbr{font-style:normal;border:0;font-size:inherit;color:inherit;background:transparent;text-decoration:none;}
section,article,header,footer,nav,aside{display:block;}
table,td,blockquote,code,pre,textarea,input,video{max-width:100%;}
p,dd,ul{word-wrap:break-word;-webkit-hyphens:none;-ms-hyphens:none;-o-hyphens:none;hyphens:none;}
input,textarea,button{resize:none;-webkit-appearance:none;font-family:inherit;}
img{border:none;max-width:100%;height:auto;}
a,button{border:0;cursor:pointer;color:inherit;text-decoration:none;transition:.25s;}
a,a:hover,a:active,a:focus,button,button:hover,button:focus,button:active{text-decoration:none;outline:none;}
.clear{clear:both;background:none;outline:none;border:none;height:1px;margin:0;}
.swiper-slide{display:flex;align-items:center;overflow:hidden;flex:1 0 auto;height:100%;}
.swiper-wrapper{display:flex;flex-wrap:nowrap;height:100%;}
[data-link]{cursor:pointer;}
[data-bg]{background-size:cover;background-position:center center; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
[data-mail]{cursor:pointer;display:inline;transition:.4s;}
[data-mail]:hover {background: #FDC441;}
[data-zoom]{cursor:zoom-in!important;}
[data-grid] > *{position:absolute;transition:transform .5s;transform:scale(0);}
[data-grid] > *.show{position:absolute;transform:scale(1);}
strong{font-weight:700;}
address {font-style: normal;}
a:hover {color: inherit;}
i.fa-at{font-size:90%!important;top:1px!important;margin:0!important;}
hr{outline:none;border:none;}
.separator{display:block;width:100%;height:1px;background:#d0d0d0;margin:10px auto;}
.important{font-weight:bold;color:#5ec6c7;font-size:1em;margin-bottom:1em;}


/* font */

@font-face{font-family:"Font Awesome 5 Pro";font-style:normal;font-weight:300;font-display:auto;src:url(../../lib/fontawesome/webfonts/fa-light-300.eot);src:url(../../lib/fontawesome/webfonts/fa-light-300.eot?#iefix) format("embedded-opentype"),url(../../lib/fontawesome/webfonts/fa-light-300.woff2) format("woff2"),url(../../lib/fontawesome/webfonts/fa-light-300.woff) format("woff"),url(../../lib/fontawesome/webfonts/fa-light-300.ttf) format("truetype"),url(../../lib/fontawesome/webfonts/fa-light-300.svg#fontawesome) format("svg")}
@font-face{font-family:"Font Awesome 5 Pro";font-style:normal;font-weight:900;font-display:auto;src:url(../../lib/fontawesome/webfonts/fa-solid-900.eot);src:url(../../lib/fontawesome/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../../lib/fontawesome/webfonts/fa-solid-900.woff2) format("woff2"),url(../../lib/fontawesome/webfonts/fa-solid-900.woff) format("woff"),url(../../lib/fontawesome/webfonts/fa-solid-900.ttf) format("truetype"),url(../../lib/fontawesome/webfonts/fa-solid-900.svg#fontawesome) format("svg")}
@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;src:url(../../lib/fontawesome/webfonts/fa-brands-400.eot);src:url(../../lib/fontawesome/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../../lib/fontawesome/webfonts/fa-brands-400.woff2) format("woff2"),url(../../lib/fontawesome/webfonts/fa-brands-400.woff) format("woff"),url(../../lib/fontawesome/webfonts/fa-brands-400.ttf) format("truetype"),url(../../lib/fontawesome/webfonts/fa-brands-400.svg#fontawesome) format("svg")}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-Regular.eot');src:local('Gilroy Regular'),local('Gilroy-Regular'),url('../../lib/gilroy/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-Regular.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-Regular.woff') format('woff'),url('../../lib/gilroy/Gilroy-Regular.ttf') format('truetype');font-weight:normal;font-style:normal;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-ExtraboldItalic.eot');src:local('Gilroy Extrabold Italic'),local('Gilroy-ExtraboldItalic'),url('../../lib/gilroy/Gilroy-ExtraboldItalic.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-ExtraboldItalic.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-ExtraboldItalic.woff') format('woff'),url('../../lib/gilroy/Gilroy-ExtraboldItalic.ttf') format('truetype');font-weight:800;font-style:italic;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-Bold.eot');src:local('Gilroy Bold'),local('Gilroy-Bold'),url('../../lib/gilroy/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-Bold.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-Bold.woff') format('woff'),url('../../lib/gilroy/Gilroy-Bold.ttf') format('truetype');font-weight:bold;font-style:normal;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-Black.eot');src:local('Gilroy Black'),local('Gilroy-Black'),url('../../lib/gilroy/Gilroy-Black.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-Black.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-Black.woff') format('woff'),url('../../lib/gilroy/Gilroy-Black.ttf') format('truetype');font-weight:900;font-style:normal;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-Light.eot');src:local('Gilroy Light'),local('Gilroy-Light'),url('../../lib/gilroy/Gilroy-Light.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-Light.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-Light.woff') format('woff'),url('../../lib/gilroy/Gilroy-Light.ttf') format('truetype');font-weight:300;font-style:normal;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-Semibold.eot');src:local('Gilroy Semibold'),local('Gilroy-Semibold'),url('../../lib/gilroy/Gilroy-Semibold.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-Semibold.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-Semibold.woff') format('woff'),url('../../lib/gilroy/Gilroy-Semibold.ttf') format('truetype');font-weight:600;font-style:normal;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-Medium.eot');src:local('Gilroy Medium'),local('Gilroy-Medium'),url('../../lib/gilroy/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-Medium.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-Medium.woff') format('woff'),url('../../lib/gilroy/Gilroy-Medium.ttf') format('truetype');font-weight:500;font-style:normal;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-MediumItalic.eot');src:local('Gilroy Medium Italic'),local('Gilroy-MediumItalic'),url('../../lib/gilroy/Gilroy-MediumItalic.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-MediumItalic.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-MediumItalic.woff') format('woff'),url('../../lib/gilroy/Gilroy-MediumItalic.ttf') format('truetype');font-weight:500;font-style:italic;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-BlackItalic.eot');src:local('Gilroy Black Italic'),local('Gilroy-BlackItalic'),url('../../lib/gilroy/Gilroy-BlackItalic.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-BlackItalic.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-BlackItalic.woff') format('woff'),url('../../lib/gilroy/Gilroy-BlackItalic.ttf') format('truetype');font-weight:900;font-style:italic;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-UltraLight.eot');src:local('Gilroy UltraLight'),local('Gilroy-UltraLight'),url('../../lib/gilroy/Gilroy-UltraLight.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-UltraLight.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-UltraLight.woff') format('woff'),url('../../lib/gilroy/Gilroy-UltraLight.ttf') format('truetype');font-weight:200;font-style:normal;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-RegularItalic.eot');src:local('Gilroy Regular Italic'),local('Gilroy-RegularItalic'),url('../../lib/gilroy/Gilroy-RegularItalic.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-RegularItalic.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-RegularItalic.woff') format('woff'),url('../../lib/gilroy/Gilroy-RegularItalic.ttf') format('truetype');font-weight:normal;font-style:italic;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-SemiboldItalic.eot');src:local('Gilroy Semibold Italic'),local('Gilroy-SemiboldItalic'),url('../../lib/gilroy/Gilroy-SemiboldItalic.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-SemiboldItalic.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-SemiboldItalic.woff') format('woff'),url('../../lib/gilroy/Gilroy-SemiboldItalic.ttf') format('truetype');font-weight:600;font-style:italic;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-HeavyItalic.eot');src:local('Gilroy Heavy Italic'),local('Gilroy-HeavyItalic'),url('../../lib/gilroy/Gilroy-HeavyItalic.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-HeavyItalic.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-HeavyItalic.woff') format('woff'),url('../../lib/gilroy/Gilroy-HeavyItalic.ttf') format('truetype');font-weight:900;font-style:italic;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-Extrabold.eot');src:local('Gilroy Extrabold'),local('Gilroy-Extrabold'),url('../../lib/gilroy/Gilroy-Extrabold.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-Extrabold.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-Extrabold.woff') format('woff'),url('../../lib/gilroy/Gilroy-Extrabold.ttf') format('truetype');font-weight:800;font-style:normal;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-BoldItalic.eot');src:local('Gilroy Bold Italic'),local('Gilroy-BoldItalic'),url('../../lib/gilroy/Gilroy-BoldItalic.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-BoldItalic.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-BoldItalic.woff') format('woff'),url('../../lib/gilroy/Gilroy-BoldItalic.ttf') format('truetype');font-weight:bold;font-style:italic;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-UltraLightItalic.eot');src:local('Gilroy UltraLight Italic'),local('Gilroy-UltraLightItalic'),url('../../lib/gilroy/Gilroy-UltraLightItalic.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-UltraLightItalic.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-UltraLightItalic.woff') format('woff'),url('../../lib/gilroy/Gilroy-UltraLightItalic.ttf') format('truetype');font-weight:200;font-style:italic;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-LightItalic.eot');src:local('Gilroy Light Italic'),local('Gilroy-LightItalic'),url('../../lib/gilroy/Gilroy-LightItalic.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-LightItalic.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-LightItalic.woff') format('woff'),url('../../lib/gilroy/Gilroy-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-Heavy.eot');src:local('Gilroy Heavy'),local('Gilroy-Heavy'),url('../../lib/gilroy/Gilroy-Heavy.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-Heavy.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-Heavy.woff') format('woff'),url('../../lib/gilroy/Gilroy-Heavy.ttf') format('truetype');font-weight:900;font-style:normal;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-Thin.eot');src:local('Gilroy Thin'),local('Gilroy-Thin'),url('../../lib/gilroy/Gilroy-Thin.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-Thin.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-Thin.woff') format('woff'),url('../../lib/gilroy/Gilroy-Thin.ttf') format('truetype');font-weight:100;font-style:normal;}
@font-face{font-family:'Gilroy';src:url('../../lib/gilroy/Gilroy-ThinItalic.eot');src:local('Gilroy Thin Italic'),local('Gilroy-ThinItalic'),url('../../lib/gilroy/Gilroy-ThinItalic.eot?#iefix') format('embedded-opentype'),url('../../lib/gilroy/Gilroy-ThinItalic.woff2') format('woff2'),url('../../lib/gilroy/Gilroy-ThinItalic.woff') format('woff'),url('../../lib/gilroy/Gilroy-ThinItalic.ttf') format('truetype');font-weight:100;font-style:italic;}


/* autocomplete styles in Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 0 #000 inset;transition:background-color 5000s ease-in-out 0s;background-color:inherit!important;}


/* fa */
    .fa:before{font-family:"Font Awesome 5 Pro"; font-weight:300; font-style: normal;}
    .fab:before{font-family:"Font Awesome 5 Brands"; font-weight:400; font-style: normal;}
    .cookie:before {content:'\f563';}
    .at:before {content:'\f1fa';}
    .home:before {content:'\f015';}
    .times:before {content:'\f00d';}
    .arrow-right:before {content:'\f30b';}
    .arrow-left:before {content:'\f30a';}
    .arrow-up:before {content:'\f062';}
    .envelope:before {content:'\f0e0';}
    .angle-right:before {content:'\f105';}
    .off:before {content:'\f011';}
    .close:before {content:'\f00d';}
    .prev:before {content:'\f060';}
    .next:before {content:'\f061';}
    .pin:before {content:'\f276'; font-weight: 900;}
    .sort:before {content: '\f0dc'; font-weight: 900;}
    .search:before{content:'\f002';}


/* selection styling */
*::-moz-selection{background:#433535;color:#fff;}
*::selection{background:#433535;color:#fff;}

/* selection placeholder */
::-webkit-input-placeholder{color:inherit;opacity:.5;}
::-moz-placeholder{color:inherit;opacity:.5;}
::-ms-input-placeholder{color:inherit;opacity:.5;}

/* scrollbar */
*::-webkit-scrollbar{width:4px;background-color:#131A22;}
*::-webkit-scrollbar-thumb{background:#FDC441;}
*{scrollbar-color:#FDC441 #131A22;scrollbar-width:thin;scroll-behavior:smooth;}

/* cookies */
#ck{transition:transform .6s, opacity .6s, visibility .6s;transform:translateY(100%);opacity:0;visibility:hidden;box-shadow:0 15px 20px rgba(0,0,0,.3);background:#292623;color:#fefefe;max-width:calc(99vw - 20px);display:flex;align-items:flex-start;position:fixed;bottom:calc(10px + .5vw);left:calc(10px + .5vw);z-index:9999;border-radius:3px;width:400px;font-size:12px;line-height:1.3;padding:20px;}
.cks #ck{transform:translateY(0);opacity:1;visibility:visible;}
#ck a{font-weight:bold;text-decoration:underline;}
#ck i{font-size:35px;margin-right:15px;color:#FDC441;}
#ck i:before{animation:cookies 1s infinite linear;}
#ck .times{opacity:.7;font-size:12px;position:absolute;padding:10px;top:0;right:0;}
#ck .times:hover, #ck a:hover{color:#FDC441;opacity:1;}
@keyframes cookies{0%{content:'\f563';}100%{content:'\f564';}}

/* recaptcha styling */
.captcha{height:40px;display:inline-block;margin:5px 0 10px;}
.captcha .g-recaptcha{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:.4s;z-index:9;cursor:pointer!important;margin-right:8px;float:left;border:2px solid #FDC441;cursor:pointer;overflow:hidden;width:29px;height:29px;border-radius:50%;}
.captcha .g-recaptcha:hover{border-color:#433535;}
.captcha .g-recaptcha > div{cursor:pointer!important;width:500px!important;margin-top:-24px;margin-left:-14px;position:static;}
.captcha .no-robot{font-weight:500;float:left;font-size:13px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
.captcha .no-robot .liens{font-family:'gilroy', sans-serif;font-size:10px;font-weight:normal;}
.captcha .no-robot .liens a:hover{color:#FDC441;}

/* error */
.error-page{text-align:center;padding:calc(20px + 5%) 0;}
.error-page img{width:300px;max-width:70%;}
.error-page .error-code{letter-spacing:2px;margin-top:calc(25px + 2%);font-size:calc(18px + 20 * (100vw - 320px) / 1080);font-weight:bold;text-transform:uppercase;}
.error-page p{font-size:calc(13px + 2.5 * (100vw - 320px) / 1080);margin:10px 0 calc(15px + 2%);}

/* title */
.tl {font-weight: 700; font-size: calc(20px + 20 * (100vw - 320px) / 1080); margin-bottom: calc(20px + 2%); pointer-events: none;}
.stl {font-weight: 700; font-size: calc(15px + 5 * (100vw - 320px) / 1080); margin-bottom: calc(5px + 1%);}

/* text */
.it {font-size: calc(15px + 4 * (100vw - 320px) / 1080); line-height: 1.2; font-weight: 700; margin-bottom: calc(10px + 1%); #131A22}
.p {font-size: calc(12px + 3 * (100vw - 320px) / 1080); opacity: .8; line-height: 1.6; font-weight: 400;}
.p p + *, .p ul + * {margin-top: calc(10px + 1%); }
.yw {color :#FDC441;}


/* btn */
.bn{white-space:nowrap; display:inline-block; padding:calc(8px + .6vw) calc(17px + .7vw) calc(7px + .7vw); cursor: pointer; border-radius:10px; text-transform:uppercase; font-weight:bold; letter-spacing:2px; font-size:calc(11px + 1 * (100vw - 320px) / 1080); color: #131A22; border: solid 1px #131A22; transition: .5s ease-in-out;}
.bn span {z-index: 1;}
.bn:hover{background: #FDC441; border-color: #FDC441; }
.bn-group {display: flex; width: 100%; justify-content: space-between;}


/* pages */
.page {padding: calc(25px + 5%) 0; color: #433535;}
.cn {padding: 0 calc(25px + 70 * (100vw - 320px) / 1080); }
.page .bn {margin-top: calc(15px + 2%);}

/* html body */
html{width:100%;overflow-x:hidden;line-height:1;}
body{width:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-family: 'gilroy', sans-serif; background: #FBFAF9;}



/*----------------------------------------------------< APP >---------------------------------------------------*/

/************* header **************/

    #h {transition:transform .6s; width:100%; position:absolute; z-index:900;}
    #h .tp {padding: 15px calc(25px + 70 * (100vw - 320px) / 1080); display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; color: rgba(255,255,255,.5); font-size: calc(8px + 2 * (100vw - 320px) / 1080);}
    #h .bt {padding: calc(15px + 1%) calc(25px + 70 * (100vw - 320px) / 1080); display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.8); font-size: calc(12px + 3 * (100vw - 320px) / 1080);  border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5);}
    #h .lg {width: calc(150px + 50 * (100vw - 320px) / 1080); transition: .4s ease-in-out;}
    #h .hc {font-weight: 600; color: #FDC441; transition: .4s;}
    #h .hc:hover {color: #fff;}
    .fix #h {position:fixed; background: rgba(0,0,0,.5);}
    .fix #h  .lg {width: calc(100px + 35 * (100vw - 320px) / 1080);}
    .down #h {transform:translateY(-100%);}
    h1 {font-weight: 400;}


/************* data-nav **************/

    [data-nav]{transition:.3s;display:none;justify-content:center;width:60px;height:60px;align-items:center;cursor:pointer;}
    [data-nav]:hover{border-color:#FDC441;}
    .openNav [data-nav]{transform:rotate(90deg);}
    [data-nav] > div{background:#fff;transition:.3s;margin:auto;align-self:center;width:25px;height:2px;}
    [data-nav]:hover > div,
    [data-nav]:hover > div:before{background:#FDC441;}
    [data-nav]:hover > div:after{background:#FDC441;}
    .openNav [data-nav] > div{width:0;}
    [data-nav] > div:before,
    [data-nav] > div:after{left:0;transition:.3s;content:'';width:25px;height:2px;background:#fff;position:absolute;}
    [data-nav] > div:before{top:-7px;}
    [data-nav] > div:after{bottom:-7px;}
    .openNav [data-nav] > div:before{transform:rotate(45deg);left:-7px;top:-8px;transform-origin:top left;}
    .openNav [data-nav] > div:after{transform:rotate(-45deg);left:-7px;bottom:-9px;transform-origin:bottom left;}

/************* banner **************/

    #b {height: 50vh; position: relative; z-index: 10;}
    #b:before {content:''; height: 100%; width: 100%; position: absolute; background: rgba(0,0,0,.5);}
    #b .content {display: flex;flex-direction: column; padding-top: 150px; height: 100%; justify-content: center; align-items: flex-end; text-align: center; z-index: 2; padding-right: calc(25px + 70 * (100vw - 320px) / 1080);}
    .ban-title {font-size: calc(30px + 20 * (100vw - 320px) / 1080);font-weight: 600;margin-bottom: 15px;color: #fff;}
    #b h1 {position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-weight: 300; font-size: calc(7px + 2 * (100vw - 320px) / 1080); }
    #b [data-bg]{transition:transform 1s;z-index:0;position:absolute;width:100%;height:100%;top:0;left:0; opacity: .5; background-size: cover; background-repeat: no-repeat;}

/* breadcrumb */
    .bc {display: flex; width: 100%; justify-content: flex-end;}
    .bc ol {display: flex; color: #bbb;font-size: calc(8px + 3 * (100vw - 320px) / 1080); text-transform: uppercase; letter-spacing: 1px; font-weight: 300;}
    .bc i {margin-right: 10px;}
    .bc li:hover {color: #FDC441; }
    .bc li:not(:last-child):after {content:'|'; margin-left: 10px; margin-right: 10px; color: #bbb!important;}



/************* slider **************/

    #s {width:100%;height:100vh;min-height:400px;background:#eee;}
    #s > div:not(#nw){width:100%;height:100%;}
    #s .swiper-slide {padding:0 calc(20px + 3%);overflow:hidden;align-items:center;justify-content:center;height:100%;}
    #s .cn {line-height:1.1; z-index:1000;color:#fff; text-align: right; width: 80%; top: 82px;}
    #s .tl {transition:opacity 1s, top 1s; opacity:0; top:-50px; font-size:calc(20px + 40 * (100vw - 320px) / 1080); font-weight:bold; margin-bottom: 0;}
    #s .end .tl {opacity:1; top:0;}
    #s .bn {transition:all .25s, opacity 1s, bottom 1s; bottom:-40px; opacity:0; margin-top: calc(15px + 2%); color: #fff; border-color: #fff;}
    #s .bn:hover {border-color: #FDC441; color: #131A22;}
    #s .end .bn {bottom:0; opacity:1;}
    #s [data-bg]:before {content:''; z-index:0; position:absolute; width:100%; height:100%; top:0; left:0; background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.2));}
    #s [data-bg] {transition:transform 1s;z-index:0;position:absolute;width:100%;height:100%;top:0;left:0;}
    #s .end [data-bg] {transform:scale(1.05);}
    #s .swiper-pagination {position: absolute; right: calc(25px + 70 * (100vw - 320px) / 1080); top: calc(50% - 151px); z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: solid 2px #FDC441; height: 468px; width: 92px; }
    #s .swiper-pagination-bullet {height: 6px; width: 6px; border-radius: 50%; background: rgba(255,255,255,.6); cursor: pointer; margin:15px 0;}
    #s .swiper-pagination-bullet-active {height: 9px; width: 9px; background: rgba(255,255,255,1); }

    #nw {position: absolute; top: 40%; left: 0; background: #1A1A1A; opacity: 5; color: #fff; z-index: 1; height: calc(150px + 150 * (100vw - 320px) / 1080); width: calc(150px + 150 * (100vw - 320px) / 1080);}
    #nw picture {width: 100%; height: 50%; display: block;}
    #nw img {width: 100%; height: 100%; object-fit: cover;}
    #nw .ld {color: #FDC441; text-transform: uppercase; font-size: calc(5px + 5 * (100vw - 320px) / 1080); letter-spacing: 2px; font-weight: 600;}
    #nw a {color: #FDC441; font-size: calc(5px + 5 * (100vw - 320px) / 1080); margin-top: 10px;}
    #nw .nwt {font-size: calc(8px + 6 * (100vw - 320px) / 1080);  font-weight: 600; margin: 10px 0;}
    #nw .nwc{font-size: calc(6px + 5 * (100vw - 320px) / 1080); opacity: .7; line-height: 1.4; max-height: 40px; overflow: hidden;}
    #nw > div {padding: calc(15px + 2%); display: flex; flex-direction: column; justify-content: center; height: 50%;}


/************* index **************/

    #idx section, #hr, #prt {padding: calc(25px + 5%) 0;}
    #id1 picture, #id2 picture {height: 100%; width: 100%; display: block;}
    #id1 img, #id2 img {height: 100%; width: 100%; object-fit: cover;}
    #idx .bn {margin-top: calc(15px + 2%);}
    #id1:after {content: ''; height: calc(250px + 300 * (100vw - 320px) / 1080); width: calc(150px + 300 * (100vw - 320px) / 1080); background: #999; position: absolute; top: 0; left:0; z-index: -1; opacity: .1;}
    #id1 .cn, #id2 .cn {display: flex; justify-content: center; align-items: center; color: #131A22;}
    #id2:after {content: ''; height: calc(150px + 300 * (100vw - 320px) / 1080); width: calc(250px + 300 * (100vw - 320px) / 1080); background: #999; position: absolute; bottom: 0; right:0; z-index: -1; opacity: .1;}
    #id1 .left {height: calc(80px + 550 * (100vw - 320px) / 1080); width: 40%;}
    #id1 .right {width: 40%; margin-left: 5%;}
    #id1 {padding-bottom: 0;}
    #id2 .right {height: calc(100px + 300 * (100vw - 320px) / 1080); width: 40%;}
    #id2 .left {width: 40%; margin-right: 5%;}
    #hr {background: #131A22; color: #fff;}
    #hr .cn > div {display: flex; width: 100%; justify-content: space-between;}
    #hr .cn > div span {white-space: nowrap;}
    #hr .cn > div:not(:last-child) {margin-bottom: calc(10px + 1%);}
    #hr .tl, #hr .stl {font-weight: 600;}
    #hr .stl {text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0;}
    #hr .stl:after {content:''; margin-left: 15px; height: 3px; width: 42px; background: #FDC441; top: -5px;}
    #prt {color: #131A22; text-align: center;}
    #prt [data-swiper] {margin-top: calc(15px + 5%); overflow: hidden;}
    #prt .swiper-slide {height: 100px; justify-content: center;}
    #prt a {display: block; height: 100%; width: 100%;}
    #prt img {filter: grayscale(1); height: 100%; transition: .3s ease-in-out;}
    #prt img:hover {filter: grayscale(0);}

/************* pages **************/

    .prs .cn {display: flex;}
    .prs:after {content: ''; height: calc(150px + 300 * (100vw - 320px) / 1080); width: calc(150px + 300 * (100vw - 320px) / 1080); background: #999; position: absolute; top: 0; left:0; z-index: -1; opacity: .1;}
    .prs .left {width: 30%; height: calc(150px + 200 * (100vw - 320px) / 1080); overflow: hidden;}
    .prs .right {width: 50%; margin-left: 5%;}
    .prs li:before {content: '\f0da'; margin-right: 7px; color: #FDC441; font-family: "Font Awesome 5 Pro"; font-weight: 900;}
    .prs picture {height: 100%; width: 100%; display: block;}
    .prs img {height: 100%; width: 100%; object-fit: contain;}
    [data-swiper="prs"] {overflow: hidden; height: 100%;}
    [data-swiper="prs"] .nav{transition:.2s;opacity:0;z-index:1000;position:absolute;top:50%;transform:translateY(-50%);width:100%;}
    [data-swiper="prs"]:hover .nav{opacity:1;}
    [data-swiper="prs"] .nav button{color:#fff;position:absolute;background:#131A22;width:40px;height:40px;}
    [data-swiper="prs"] .nav button:hover{background:#FDC441;color:#131A22;}
    [data-swiper="prs"] .nav button.next{right:0;}
    #cons picture {width: 40%; margin-right: 5%;}
    #cons .swiper-wrapper {align-items: center;}
    #cons .swiper-slide {justify-content: center; align-items: flex-start;}



/************* footer **************/

    #f{padding: calc(15px + 3%) 0; clear:both; color: #131A22; font-weight: 400; font-size: calc(12px + 3 * (100vw - 900px) / 1080); border-top: 2px solid #FDC441;}
    #f .cn {display: flex; justify-content: space-between; align-items: center; width: 100%;}
    #f strong {text-transform: uppercase; font-size: 100%; color: #252525;}
    #f ul {display: inline-flex;}
    #f ul li:not(:last-child){margin-right: calc(10px + 20 * (100vw - 320px) / 1080);}
    #f .text-orange {font-weight: 500;}
    #f a:hover {background: #FDC441;}


/************* contact **************/

    #ctc .cn {display: flex;}
    #ctc form{margin-top:1.5em;clear:both;width:100%;float:left;}
    #ctc form input[type=submit]{margin-top:1em;}
    #ctc .bottom {display: flex; justify-content: space-between; align-items: center; margin-top: calc(20px + 2%);}
    #ctc .bn {margin-top: 0;}
    #ctc p {margin-bottom: calc(25px + 3%);}
    #ctc .form-bloc {width: 50%; margin-left: 7%;}
    #ctc .address {width: 40%; line-height: 2; color: #4a4a4a; font-weight: 500; font-size: calc(14px + 2 * (100vw - 320px) / 1080);  }
    #ctc strong {font-size: 150%;}
    #ctc .map-pin {font-weight: 700; font-size: 110%; transition: .4s;}
    #ctc .map-pin:hover {background: #FDC441;}
    #ctc .pin {margin-right: 10px;}
    #ctc .map iframe {margin-top: calc(25px + 3%); height: 500px; width: 100%;}
    #ctc .form-flex .form-group {width: 50%;}
    input[type="radio"]{-webkit-appearance:radio;}
    input[type="submit"],
    input[type="button"]{-webkit-appearance:button;}
    select{-webkit-appearance:textfield;}
    .form-group {margin-top: calc(15px + 3%);}
    .form-group label {font-weight: 600; margin-bottom: 15px; display: block;}
    .form-control {padding: 15px; background-color: #f7f6f2; border-radius: 3px; color: #555; font-weight: 500; width: 100%; box-shadow: inset 2px 2px 13px 1px rgba(0,0,0,0.03); transition: .3s ease-in-out;}
    .form-control:focus {border: solid 1px #FDC441;}
    .form-flex {display: flex;}
    .form-flex .form-group:first-child {margin-right: 10px;}
    .form-devis .form-flex .form-group {margin-top: 0;}


/************* Produits **************/

    #cg .bottom, #cg .top {display: flex;}
    #cg .bottom {align-items: flex-start;}
    #cg .top .left { width: 20%; background: #EFEDEB; padding: 15px 15px 15px 0; border: 1px solid #EFEDEB; font-size: calc(11px + 2 * (100vw - 320px) / 1080); min-width: 200px;}
    .sch {height: 50px; display: flex; border: 1px solid #EFEDEB; width: 100%; font-size: calc(11px + 2 * (100vw - 320px) / 1080);}
    #cg .top .right { width: 80%; border: 1px solid #EFEDEB; font-size: calc(11px + 2 * (100vw - 320px) / 1080);}
    #cg .top label, .sch label { width: 50px; display: flex; justify-content: center; align-items: center; font-size: calc(11px + 2 * (100vw - 320px) / 1080);}
    #cg .top input, .sch input { width: calc(100% - 50px); }
    #cg .top .form-flex, .sch .form-flex { height: 100%; width: 100%;}
    #cg .filters { width: 20%; border: 1px solid #EFEDEB; min-width: 200px;}
    #cg .filter span { width: 50px; display: inline-block;}
    #cg .right {display: flex; width: 80%; flex-wrap: wrap;}
    #cg .c-item {width: 25%;  overflow: hidden; padding: calc(5px + .5%);}
    #cg .c-item:hover .c-title:after {right: -25%;}
    #cg .c-item picture {display: block; height: 300px; width: 100%; overflow: hidden;}
    #cg .c-item img {transition: .3s ease-in-out; height: 100%; width: 100%; object-fit: cover;}
    #cg .c-item:hover img {transform: scale(1.1);}
    #cg .c-item .bottom {justify-content: space-between; width: 100%; padding: calc(7px + 3%); background: #fff; align-items: flex-end; font-size: 13px;}
    #cg .c-item small {display: block; color: #888; margin-top: 2px;}
    #cg .c-item .right {width: auto;}
    .price del {margin-left: 10px; display: inline-block;}
    .catatt  {justify-content: space-between; padding: 1px 17px 0; border-bottom: 1px solid rgba(0,0,0,.1); text-transform: uppercase; letter-spacing: 2px; height: 50px; display: flex; align-items: center; font-size: 10px;}
    .catatt:after  {font-size: 8px; left: 3px; content: '\f078'; font-family: "Font Awesome 5 Pro";}
    .catatt + ul {border-bottom: 1px solid rgba(0,0,0,.1); padding-bottom: 14px;}
    #cg .filters li {font-size: 13px; transition: .4s;}
    #cg .filters li a {display: block; padding: 14px;}
    #cg .filters li:hover, #cg .filters li.selected {background: #FDC441;}
    .ck {padding: 5px 0;}
    .ck input + label { cursor: pointer; display: inline-block; padding-left: 30px;}
    .ck input + label::before { font-family: 'Font Awesome 5 Pro'; box-shadow: 0 1px 5px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.1) inset; transition: all .4s, border-color .2s; position: absolute; left: 0; top: -2px; vertical-align: middle; border-radius: 3px; content: '\f00c'; width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; font-size: 0;}
    .ck input:checked + label::before { font-size: 11px; background: #171717; border-color: #171717; color: #fff;}
    .prdlist {display: flex; width: 100%; flex-wrap: wrap;}
    .zui-pager {width: 100%; display: flex; justify-content: flex-end; margin-top: calc(25px + 3%);}
    .pagination {width: 200px; display: flex; justify-content: space-between;}
    #loading-div {width: 100%; text-align: center;}
    #no-results {padding: 5%; text-align: center; width: 100%;}



/************* article list **************/

    .nwsi {display: flex; align-items: center; background: #f4f4f4; padding: calc(10px + 1%);}
    .nwsi:not(:last-child) {margin-bottom: calc(10px + 1%);}
    .nwsi picture {height: calc(150px + 100 * (100vw - 320px) / 1080); width: 30%;}
    .nwsi img {height: 100%; width: 100%; object-fit: cover;}
    .nwsi > div {margin-left: 5%; width: 65%;}
    .nwst {font-size: calc(12px + 7 * (100vw - 320px) / 1080); margin: calc(7px + 1%) 0; pointer-events: none;}
    .date {color: #FDC441; text-transform: uppercase; font-size: calc(7px + 5 * (100vw - 320px) / 1080); letter-spacing: 2px; font-weight: 600;}



/************* legal **************/

    #lgl .p {margin-bottom: calc(7px + 2%);}
    #lgl a {transition: .4s;}
    #lgl a:hover {background: #FDC441;}
    #lgl li:before {content: '\f0da'; margin-right: 7px; color: #FDC441; font-family: "Font Awesome 5 Pro"; font-weight: 900;}


/*----------------------------------------------------< MEDIA QUERIES >---------------------------------------------------*/

/************* min 1101 **************/ @media screen and (min-width:1101px){

    #nav {position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%;}
    #nav nav > ul{ margin-bottom:0; line-height:1; display:flex;}
    #nav nav > ul > li{padding:0 20px; transition: .4s ease-in-out;}
    #nav nav > ul > li:hover {color: rgba(255,255,255,1);}
    #nav nav > ul > li[data-sub] > a:after{transition:.2s;margin-left:8px;font-size:10px;top:-1px;content:'\f078';font-family:'Font Awesome 5 Pro';font-weight:300;}
    #nav nav > ul > li[data-sub] > a.open:after{transform:rotate(180deg);top:0;}
    #nav nav > ul > li ul{display:flex; flex-wrap:wrap; transition:.4s;opacity:0;visibility:hidden;padding:10px;font-size:14px;color:#fff;background:#131A22;position:absolute;min-width:160px; width: 900px; max-width: 90vw; left:50%;transform:translateX(-50%);top:50px;}
    #nav nav > ul > li > a.open + ul{opacity:1;visibility:visible;top:30px;}
    #nav nav > ul > li ul li{padding:2px 7px; transition: .4s; width: 20%; line-height: 1.3; display: flex; align-items: center;}
    #nav nav > ul > li ul li:hover {background: #FDC441; color: #131A22;}
    #nav nav > ul > li ul li > *:not(ul){text-transform:none;letter-spacing:0;padding:15px 10px;font-weight:400;display:block;}
    #nav nav > ul > li ul li ul{position:absolute;left:100%;top:0;}
    #nav nav > ul > li ul li ul.left{left:auto;right:100%;}
    #nav nav > ul > li ul li ul:hover,
    #nav nav > ul > li ul li *:hover + ul{opacity:1;visibility:visible;display:block;transform:none;}
    #nav .top {display: none;}
    #nav nav > ul:first-child > li:last-child {display: none;}
    #nav nav > ul:last-child {display: none;}
}

/************* max 1500 **************/ @media screen and (max-width:1500px){

    #cg .c-item picture {height: 200px;}
}

/************* max 1350 **************/ @media screen and (max-width:1350px){

    #nav nav > ul > li {padding: 0 11px;}
    #nav nav > ul > li ul {width: 700px;}
    #nav {padding: 0 8px;}
    #s .swiper-pagination {width: 47px;}
}


/************* max 1100 **************/ @media screen and (max-width:1100px){

    #b {height: 35vh;}
    #b .content {padding-top: 80px;}
    [data-nav]{display:flex;}
    #nav{padding: calc(40px + 2%); z-index:99999;transform:translateX(-100%);transition: all .6s;max-width:100vw;width:600px;overflow:hidden;font-size:calc(20px + 10 * (100vw - 320px) / 1080);color:#131A22;background:#FDC441;position:fixed;top:0;left:0;height:100vh;line-height: 1.5; font-weight: 500;}
    .openNav #nav{transform:translateX(0);}
    #nav nav{overflow-y:scroll;height:100vh;width:150vw; padding-top: calc(25px + 2%);}
    #nav nav > ul{margin-bottom:0;margin-left:0;width:600px;max-width:100vw;}
    #nav nav > ul li{transition:.6s;max-width:calc(100vw - 90px);padding:10px 0;}
    #nav nav > ul > li:not(.show){opacity:0;top:-50px;}
    #nav nav > ul > li.show{top:0;opacity:1;}
    #nav .top {display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 70%; opacity: 0; left: -100px; transition: 1.5s ease-in-out;}
    .openNav #nav .top {opacity: 1; left: 0;}
    #nav [data-close]{background: #131A22; color: #FDC441; padding:calc(6px + .6vw) calc(15px + 2vw) calc(8px + .7vw); border-radius: 50px; transition: .4s; cursor: pointer;}
    #nav [data-close]:hover {background: #fff; color: #131A22;}
    #nav .hl:after {content:'\f061'; font-family: "Font Awesome 5 Pro"; margin-left: 10px; font-size: 70%; transition: .4s; top: -1px;}
    #nav .hl:hover:after {margin-left: 20px;}
    #nav nav > ul > li:last-child{display: block;}
    #nav nav > ul li a{display:inline-block; transition: .3s;}
    #nav nav > ul li a:hover{color:#FDC441; background: #131A22;}
    #nav nav > ul:last-child {display: block; margin-top: calc(25px + 2%); font-size: 70%;}
    #nav nav > ul:last-child li {padding: 5px 0;}
    #nav nav > ul li ul {display:none; }
    #nav nav > ul li ul li {padding:calc(6px + .6%) calc(20px + .6%) calc(4px + .6%);}
    #nav nav > ul li ul li a {font-size:80%;}
    #h .hc {display: none;}
    #f .right picture:not(:first-child) img {width: 90px;}
    #f .right picture:first-child img {width: 60px;}
    #cg .c-item {width: 33.33%;}
}


/************* max 992 **************/ @media screen and (max-width:992px){

    #h .bt {padding: calc(1px + 1%) calc(25px + 70 * (100vw - 320px) / 1080); }
    #b .content {padding-top: 120px;}
    #s {height: 70vh;}
    #s .swiper-pagination {border: none;}
    #nw {top: auto; bottom: 0; height: 150px;}
    #nw > div {height: 100%;}
    #nw picture {display: none;}
    #ctc .cn {flex-direction: column;}
    #ctc .form-bloc {width: 100%; order: 1; margin-left: 0;}
    #ctc .address {width: 100%; margin-top: calc(25px + 7%); order: 2;}
    #ctc iframe {width: 100%;}
    .prs .cn {flex-direction: column;}
    .prs .right {order: 1; margin-left: 0; margin-bottom: 5%; width: 100%;}
    .prs .left {order: 2; width: 70%;}
    .prs:after {height: 100%;}
}

/************* max 900 **************/ @media screen and (max-width:900px){

    #f .cn {flex-direction: column; font-size: 12px;}
    #f .left {text-align: center;}
    #cg .c-item {width: 50%;}
    #id1 .cn, #id2 .cn {flex-direction: column; align-items: flex-start;}
    #id1 .left {width: 70%;}
    #id1 .right {width: 100%; margin-left: 0; margin-top: 10%;}
    #idx #id2 {padding-top: 0;}
    #id2 .left {width: 100%; margin-right: 0; margin-bottom: 10%;}
    #id2 .right {width: 60%; margin-left: auto;}
}


/************* max 850 **************/ @media screen and (max-width:850px){

    #f .cn {flex-direction: column; text-align: center;}
    #f .right {margin-top: 20px;}
    #hr .cn > div {flex-direction: column;}
    #hr .stl {margin-bottom: 5px;}
    #cons .swiper-slide {flex-direction: column;}
    #cons picture {width: 100%; margin-bottom: 5%; margin-right: 0;}
    #cons .swiper-wrapper {align-items: flex-start;}
}

/************* max 700 **************/ @media screen and (max-width:700px){

    #nav [data-close] {display: flex;}
}


/************* max 576 **************/ @media screen and (max-width:576px){

    #cg .filters,  #cg .top .left {display: none;}
    #cg .right {width: 100%;}
    #cg .top .right {width: 100%; height: 50px;}
    #cg .top .form-flex {flex-direction: row;}
    #h .tp {justify-content: center;}
    #h .tp > div {display: none;}
    #b .content {align-items: center; padding-right: 0;}
    .bc {justify-content: center;}
    #s {height: 50vh}
    #s .cn {text-align: center; top: 50px;}
    #s .swiper-pagination {flex-direction: row; justify-content: space-between; left: 50%; transform: translateX(-50%); height: auto; bottom: 20px; top: auto; }
    #nw {display: none;}
    #ctc .bottom {flex-direction: column; align-items: flex-start;}
    .form-flex {flex-direction: column;}
    #ctc .form-flex .form-group {width: 100%}
    .form-flex .form-group:first-child {margin-right: 0;}
    #b {height: 30vh;}
    .prs .left {width: 100%;}
}


/************* max 450 **************/ @media screen and (max-width:450px){

    #f ul {flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.5;}
    #cg .c-item picture {height: 150px;}
}


/************* max 350 **************/ @media screen and (max-width:350px) {

    #cg .c-item {width: 100%;}
}