/* © 2020 www.point-web.fr - noemie - Clémentine Mermet Maréchal - Love Coach */

html {
    --primary: #FF3644;
    --background: #F2F1F0;
    --secondary: #EFD0C9;
    --light: #F1E7E4;
    --lighter: #F1ECEA;
    --textColor: #212529;
    --textColorLight: #4A4D4F;
    --textXL: 35px;
    --textL: 22px;
    --textM: 18px;
    --textS: 15px;
    --marginL: 100px;
    --marginM: 50px;
    --marginS: 25px;
    --marginCalc: calc(10px + 50 * (100vw - 320px) / 1080);
    --bezier: cubic-bezier(.19,1,.22,1);
    --sphere: 70px;
    --height: calc(220px + 100 * (100vw - 320px) / 1080);
}
 @media screen and (max-width:600px){
    html {
        --textXL: 23px;
        --textL: 18px;
        --textM: 15px;
        --textS: 13px;
        --sphere: 50px;
    }
}

/* font-face */
    @font-face{font-family:"Font Awesome 5 Pro";font-style:normal;font-weight:300;font-display:swap;src:url(../../lib/fa/webfonts/fa-light-300.eot);src:url(../../lib/fa/webfonts/fa-light-300.eot?#iefix) format("embedded-opentype"),url(../../lib/fa/webfonts/fa-light-300.woff2) format("woff2"),url(../../lib/fa/webfonts/fa-light-300.woff) format("woff"),url(../../lib/fa/webfonts/fa-light-300.ttf) format("truetype"),url(../../lib/fa/webfonts/fa-light-300.svg#fontawesome) format("svg")}
    @font-face{font-family:"Font Awesome 5 Pro";font-style:normal;font-weight:900;font-display:swap;src:url(../../lib/fa/webfonts/fa-solid-900.eot);src:url(../../lib/fa/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../../lib/fa/webfonts/fa-solid-900.woff2) format("woff2"),url(../../lib/fa/webfonts/fa-solid-900.woff) format("woff"),url(../../lib/fa/webfonts/fa-solid-900.ttf) format("truetype"),url(../../lib/fa/webfonts/fa-solid-900.svg#fontawesome) format("svg")}
    @font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:swap;src:url(../../lib/fa/webfonts/fa-brands-400.eot);src:url(../../lib/fa/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../../lib/fa/webfonts/fa-brands-400.woff2) format("woff2"),url(../../lib/fa/webfonts/fa-brands-400.woff) format("woff"),url(../../lib/fa/webfonts/fa-brands-400.ttf) format("truetype"),url(../../lib/fa/webfonts/fa-brands-400.svg#fontawesome) format("svg")}
    @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-display: swap;}
    @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-display: swap;}
    @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-display: swap;}
    @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-display: swap;}
    @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-display: swap;}
    @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-display: swap;}
    @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-display: swap;}
    @font-face {  font-family: 'DM Serif Text';  font-style: normal;  font-weight: 400;  src: url('../../lib/dm-serif/dm-serif.eot'); src: local(''), url('../../lib/dm-serif/dm-serif.eot?#iefix') format('embedded-opentype'), url('../../lib/dm-serif/dm-serif.woff2') format('woff2'), url('../../lib/dm-serif/dm-serif.woff') format('woff'), url('../../lib/dm-serif/dm-serif.ttf') format('truetype'), url('../../lib/dm-serif/dm-serif.svg#DMSerifText') format('svg');}


/* general */
    *,*:after,*:before{position:relative;box-sizing:border-box;}
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button,hr,input,textarea{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
    a,button{transition:.3s;cursor:pointer;color:inherit;}
    button{border:0;padding:0;background:none;display:inline-block;}
    a,a:hover,button,button:hover,*:focus,*:active{text-decoration:none;outline:none;}
    body{line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:subpixel-antialiased;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}
    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 {border: 0;font-size: inherit;color: inherit;background: transparent;background-color: transparent;}
    ol,ul{list-style:none;}
    blockquote,q{quotes:none;}
    blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
    table{border-collapse:collapse;border-spacing:0;}
    strong{font-weight:700;}
    img,svg{vertical-align:bottom;height:auto;width:auto;}
    textarea{resize:none;}
    select, input {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
    input, textarea, button {resize: none;-webkit-appearance: none;font-family: inherit;}
    picture{display:block; overflow: hidden;}
    [data-link], [data-mail]{cursor:pointer;}
    input,textarea{background-color:transparent;resize:none;}
    input[type="date"]{cursor:text}
    input[type="date"]::-webkit-inner-spin-button,
    input[type="date"]::-webkit-calendar-picker-indicator{color:rgba(0,0,0,0);background:rgba(0,0,0,0);opacity:0;display:none;}
    input::-webkit-datetime-edit-day-field:focus,
    input::-webkit-datetime-edit-month-field:focus,
    input::-webkit-datetime-edit-year-field:focus{background-color:var(--light);color:var(--primary);outline:none;}
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
    input[type=number]{-moz-appearance:textfield;}
    select{cursor:pointer;border:0;background-color:transparent;-webkit-appearance:none;font-family:inherit;}
    select option:hover{background-color:var(--light);color:var(--primary);}
    picture{display:block; overflow: hidden}
    picture img{max-width:100%; width:auto;}
    em,i:not(.fa, .fab){font-style:italic;}
    .sf-toolbar{display:none!important;}
    [data-link]{cursor:pointer;}
    html.wait *{cursor:wait!important}
    .badge {display: inline-block;padding: 7px 10px;border-radius: 50px;margin-bottom: 0;}
    .grecaptcha-badge {visibility: hidden;}
    button:disabled {cursor: not-allowed;}

/* scrollbar styling */
    *{scrollbar-color:var(--primary) var(--secondary);scrollbar-width:thin;}
    *::-webkit-scrollbar{width:3px;background-color:var(--secondary);}
    *::-webkit-scrollbar-thumb{background-color:var(--primary);}

/* selection styling */
    *::-moz-selection{background-color:var(--primary);color:var(--background);}
    *::selection{background-color:var(--primary);color:var(--background);}

/* selection placeholder */
    ::-webkit-input-placeholder{color:inherit;opacity:.5;}
    ::-moz-placeholder{color:inherit;opacity:.5;}
    ::-ms-input-placeholder{color:inherit;opacity:.5;}

/* fontawesome */
    .fa:before{font-family:"Font Awesome 5 Pro";font-weight:300;font-style:normal;}
    .fab:before{font-family:"Font Awesome 5 Brands";}
    .fa-at:before{content:'\f1fa';font-size:80%;}
    .fa-cookie:before{content:'\f563';}
    .fa-map-marker:before{content:'\f3c5'; font-weight: 900;}
    .fa-phone:before{content:'\f095';}
    .fa-envelope:before{content:'\f0e0';top:1px;}
    .fa-long-arrow-right:before{content:'\f178';}
    .fa-long-arrow-left:before{content:'\f177';}
    .fa-long-arrow-up:before{content:'\f176';}
    .fa-arrow-left:before{content:'\f060';}
    .fa-arrow-right:before{content:'\f061';}
    .fa-arrow-down:before{content:'\f063';}
    .fa-fb:before{content:'\f39e';}
    .fa-tiktok:before{content:'\e07b';}
    .fa-instagram:before{content:'\f16d';}
    .fa-linkedin:before{content:'\f0e1';}
    .fa-tw:before{content:'\f099';}
    .fa-youtube:before{content:'\f167';}
    .fa-clock:before{content:'\f017';}
    .fa-link:before{content:'\f0c1';}
    .fa-check:before{content:'\f00c';}
    .fa-user:before{content:'\f007';}
    .fa-map-signs:before{content:'\f277';}
    .fa-map:before{content:'\f279';}
    .fa-heart:before{content:'\f004'; font-weight:900;}
    .fa-times:before{content:'\f00d';}
    .fa-plane:before{content:'\f1d8'; font-weight: 900;}


/* app */
    html, body{background-color:var(--background);font-family:Gilroy, sans-serif;font-size:var(--textM); color: var(--textColorLight); font-weight: 500;overflow-x:hidden;;}
    [data-link] {cursor: pointer;}
    [data-bg]{background-size:cover;background-position:center center;}
    [data-mail]:hover, a:hover{color:var(--primary);}
    [data-img]{opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;}
    .bg-img{background-size:cover;background-position:center center;}

/* ct */
    .ct{width:80%;max-width:1300px;margin:auto;}

/* titles */
    .h2 {font-size: 53px; font-family: 'DM Serif Text', serif; color: var(--primary);}
    .h2 small {font-size: var(--textXL); display: block;}
    .h3 {font-size: var(--textL); color: var(--primary); font-weight: 500; margin-top: var(--marginM); margin-bottom: var(--marginS);}

/* breadcrumb */
    #page #t .h2 {margin-bottom: 10px;}
    #page #t {margin-bottom: var(--marginM);}
    #bc ol {display: flex; color: var(--textColorLight); font-weight: 500; font-size: var(--textS); }
    #bc ol > * + *:before {content: '.'; margin: 0 7px; }

/* date */
    time {color: var(--primary); font-size: 13px; font-weight: 600; display: block; margin-bottom: 10px;}

/* intro */
    .intro {font-size:var(--textL);color: var(--textColorLight);line-height:1.5;font-weight: 500;}

/* paragraphe */
    .p {font-size:var(--textM);line-height:1.5;color: var(--textColorLight); font-weight: 500;}
    .p a, .p [data-mail]{font-weight:600;}
    .p > * + *{margin-top:calc(15px + 2 * (100vw - 320px) / 1080);}

/* swiper */
    .swiper-slide{flex:1 0 auto;}
    .swiper-wrapper{display:flex;flex-wrap:nowrap;height:100%;}
    .sw-n, .sw-p{display:flex;align-items:center;pointer-events:none;}
    .sw-n{justify-content:space-between;}
    .sw-n > *{pointer-events:auto;}
    .sw-n > .swiper-button-disabled{pointer-events:none;opacity:0!important;}
    .sw-p{justify-content:center;}
    .sw-p > *{transition:.2s;background-color:#fff;opacity:.5;pointer-events:auto;cursor:pointer;display:block;width:8px;height:8px;border-radius:50%;}
    .sw-p > *:hover{opacity:1;}
    .sw-p > *.swiper-pagination-bullet-active{background-color:var(--primary);opacity:1;transform:scale(1.5);}
    .sw-p > * + *{margin-left:15px;}

/* sub */
    .sub{font-weight:400;color:var(--primary);font-size:.9rem;text-transform:uppercase;letter-spacing:.5rem}
    .cls-2 {fill: var(--light);}

/* btn */
    .bn{border-radius:5px;background-color:var(--primary);color:var(--background);font-size:var(--textM);padding:calc(17px + 3 * (100vw - 320px) / 1080) calc(22px + 3 * (100vw - 320px) / 1080) calc(19px + 3 * (100vw - 320px) / 1080);align-items:center;display:inline-flex;justify-content:space-between; height: 50px; text-transform: lowercase; font-weight: 500; user-select:none;-moz-user-select:none;}
    .bn:hover{background-color:var(--secondary);color:var(--primary);}
    .bn .fa {margin-left: 7px;}
    .sphere {height: var(--sphere); width: var(--sphere); min-width: var(--sphere); display: flex; justify-content: center; align-items: center; color: var(--primary); background: var(--secondary); border-radius: 50%; font-weight: 600;  transition: .4s var(--bezier);}
    .sphere:hover {background: var(--primary); color: var(--secondary);}

/* cookies */
    #ck{overflow:hidden;background-color:var(--primary);color:#fff;box-shadow:0 15px 20px rgba(0,0,0,.3);border-radius:3px;transition:transform .6s, opacity .6s, visibility .6s;transform:translateY(100%);opacity:0;visibility:hidden;max-width:calc(99vw - 20px);position:fixed;bottom:calc(10px + .5vw);left:calc(10px + .5vw);z-index:9999;width:400px;font-size:11px;line-height:1.3;}
    .cks #ck{transform:translateY(0);opacity:1;visibility:visible;}
    #ck .ckc{display:flex;align-items:flex-start;padding:20px;}
    #ck p strong{display:block;margin-bottom:10px;font-size:130%;line-height:1;}
    #ck a{font-weight:bold;text-decoration:underline;}
    #ck a:hover{color:#222;}
    #ck i{color:#fff;font-size:35px;margin-right:15px;top:-8px;}
    #ck i:before{animation:cookies 1s infinite linear;}
    #ck .ckb{display:flex;font-size:15px;font-weight:bold;}
    #ck .ckb > *{border-top:1px solid rgba(0,0,0,.1);flex:1;background-color:rgba(0,0,0,.1);padding:14px 0 15px;}
    #ck .ckb > *:hover{background-color:rgba(0,0,0,.15);}
    #ck .ckb > * + *{border-left:1px solid rgba(0,0,0,.1);}
    #ck .ckb small{font-size:13px;font-weight:normal;}
    @keyframes cookies{0%{content:'\f563';}100%{content:'\f564';}}

/* alert */
    .alert{text-align:left;background:#222;border-radius:1px;color:#fff;font-size:11px;font-weight:400;line-height:1;padding:20px;}
        .alert.alert-danger, .btn.danger, .badge.badge-danger, .badge.danger{background:#ff5353;}
        .alert.alert-warning, .btn.warning, .badge.badge-warning, .badge.warning{background:#bd6e28;}
        .alert.alert-success, .btn.success, .badge.badge-success, .badge.success{background:#8dc111;}
        .alert.alert-info, .btn.info, .badge.badge-info, .badge.info{background:#2875bd;}
    .alert.hide{transition:opacity .3s;}
    .alert [data-close-alert]{position:absolute;top:2px;right:4px;font-size:10px;}
    .alert.no-close [data-close-alert]{display:none;}
    .alert.none{display:none;}


/* header */
    #h{transition: .6s ease-in-out;position:fixed;top:0;left:0;width:100%;z-index:500;font-size:var(--textL); display: flex; align-items: center; justify-content: space-between; padding: var(--marginM) var(--marginCalc);}
    #h > *{display:flex;align-items:center;justify-content:space-between;z-index:10;}
    #h > .left {z-index: 250;}
    #h a{pointer-events:auto;}
    .logo {display: flex; align-items: center;}
    .logo svg{height: 20px; width: 22px;}
    #h .logo:after {content: attr(data-long); transition: 3s var(--bezier); margin-left: 8px; font-weight: 500; margin-bottom: 2px;}
    .fix #h {background: rgba(242, 241, 240, .6);backdrop-filter: blur( 2px );-webkit-backdrop-filter: blur( 2px ); padding-top: var(--marginS); padding-bottom: var(--marginS);}
    .fix #h .logo:after {content: attr(data-short); }
    h1 {position: absolute; bottom: 25px; right: var(--marginCalc); font-size: 11px; font-weight: 500; color: var(--primary);}
    .fix h1 {opacity: 0;}


/* data-nav */
    [data-nav] {height: 18px;width: 21px;cursor: pointer;display: none;align-items: center;z-index: 250;}
    [data-nav] > div { height: 2px; width: 100%; background-color: var(--primary); display: inline-block; transition: background-color .3s cubic-bezier(.19,1,.22,1); }
    [data-nav]:after,
    [data-nav]:before {content: "";display: block;position: absolute;height: 2px;width: 100%;background-color:var(--primary);left: 0;transition: transform .3s cubic-bezier(.19,1,.22,1),background-color .3s cubic-bezier(.19,1,.22,1);transform-origin: 0 0;}
    [data-nav]:before {top: 0;}
    [data-nav]:after {bottom: 0;}
    .onav [data-nav]:before {transform: rotate(45deg) translate3d(1px,-1px,0);}
    .onav [data-nav]:after {transform: rotate(-45deg) translate3d(1px,-1px,0);color: var(--primary);}
    .onav [data-nav] > div {background-color: transparent;}


/* socials */
    #socials{color: var(--primary); font-size: 15px; position: fixed; top: 50%; transform: translateY(-50%); left: calc(var(--marginCalc) - 25px); z-index: 999;}
    #socials li {cursor: pointer; height: 50px; width: 50px; transition: .5s var(--bezier);}
    #socials li:after {content:''; z-index: -1; width: 100%; height: 100%; border-radius: 50%; background: var(--secondary); position: absolute; top: 0; left: 0; opacity: 0; transform: scale(0); transform-origin: center; transition: .3s ease-in-out;}
    #socials li:hover:after {opacity: 1; transform: scale(1);}
    #socials li a {width: 100%; height: 100%;;display: flex; justify-content: center; align-items: center;}
    #socials + a {color: var(--primary); font-size: 15px; position: fixed; right: calc(var(--marginCalc) - 25px); top: calc(100vh - 75px); z-index: 999; height: 50px; width: 50px; display: flex; align-items: center; justify-content: center;}
    #socials + a:after {content:''; z-index: -1; width: 100%; height: 100%; border-radius: 50%; background: var(--secondary); position: absolute; top: 0; left: 0; opacity: 0; transform: scale(0); transform-origin: center; transition: .3s ease-in-out;}
    #socials + a:hover:after {opacity: 1; transform: scale(1);}


/* progressbar */
    #progressBar {position: fixed;top: 50%;right: var(--marginCalc);z-index: 5;height: 100px;width: 2px;background: var(--secondary);overflow: hidden;transform: translate(0, -50%);}
    #progressBar .progressFill {width: 2px;background: var(--primary);height: 0}


/* actu */
    #actu {padding: var(--marginL) 0 0;}
    #actu .h2 {text-align: center; margin-bottom: var(--marginL);}
    .actu-item {padding: var(--marginL); height: var(--height); background: var(--light); transform: translate(0%, 0); transition: .5s var(--bezier); overflow: hidden;}
    .actu-item:before {content:''; position:absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(0deg, rgba(241,231,228,1) 25%, rgba(241,231,228,0) 50%); z-index: 1;}
    .actu-item .date {color: var(--secondary); font-size: 150px; position: absolute; top: -26px; left: -2px; font-weight: 900; opacity: .5; transition: .5s var(--bezier);}
    .actu-item a {color: var(--secondary); font-size: 120px; position: absolute; bottom: -13px; right: 0; opacity: .5;transition: .5s var(--bezier); z-index: 2;}
    .actu-item a i:before {font-weight: 900;}
    .actu-item .intro {margin-bottom: 10px;}
    .actu-item:hover {transform: translate(0%, -10px);}
    .actu-item:hover a,
    .actu-item:hover .date {opacity: 1;}
    .actu-item .p  {max-height: calc(var(--height) / 2.2); overflow: hidden;}
    .gal {overflow: hidden; margin-top: var(--marginM);}
    .gal img {width: 100%;}


/* avis */
    #avis {padding: var(--marginL) 0;}
    #avis .ct {display: flex; align-items: center; justify-content: space-between;}
    #avis .ct > .left {width: 45%;}
    #avis .ct .sw-c {margin-top: var(--marginM);}
    #avis .ct .sw {height: 500px; overflow: hidden;}
    #avis .ct > .left .swiper-wrapper {display: block; height: 100%;}
    #avis .ct > .left .swiper-slide {width: 100%; display: flex;}
    .avis-item .top {display: flex; align-items: center; margin-bottom: 30px;}
    .avis-item .left {display: flex; align-items: center; justify-content: center; height: 60px; width: 60px; min-width: 60px; text-transform: uppercase; color: var(--primary);  background: var(--light); font-size: var(--textM); border-radius: 50%; margin-right: 30px; font-weight: 500;}
    .avis-item .right li:last-child {font-weight: 400; color:var(--primary); font-size: 12px; margin-top: 5px;}
    #avis .ct > .right {width: 45%; display: flex; justify-content: flex-end;font-weight: 500;}
    #avis .ct > .right > ul:last-child {margin-left:  var(--marginM);}
    #avis .ct > .right li {display: block; height: 200px; width: 200px;}
    #avis .ct > .right li:not(:last-child) {margin-bottom:  var(--marginM);}
    #avis .ct > .right picture {display: block; height: 100%; width: 100%;}
    #avis .ct > .right img {height: 100%; width: 100%;}
    #avis .sw-n {position: absolute; right: 0; top: 0; color: var(--primary);}
    #avis .sw-n > * {transform: rotate(90deg); --dim: 50px; height: var(--dim); width: var(--dim); display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 50%; transition: .3s ease-in-out;}
    #avis .sw-n > *:after {content: '';z-index: -1;width: 100%;height: 100%;border-radius: 50%;background: var(--light);position: absolute;top: 0;left: 0;opacity: .5;transform-origin: center;transition: .3s ease-in-out;}
    #avis .sw-n > * + * {margin-left: 10px;}
    #avis .sw-n > *:hover:after {opacity: 1;}
    #avis .sw-n > .swiper-button-disabled {opacity: .3!important;}
    #avis .sw-n > .swiper-pagination-bullet-active {background-color: var(--primary); transform: none;}


/* bottom */
    #bottom {padding: var(--marginL) 0; border-top: solid 1px var(--light);text-align: center;}
    #bottom .filli {position: absolute; bottom: -15px; right: 0; width: 70%;}
    #bottom .bn {margin-top: var(--marginM);}


/* footer */
    #f{background-color:var(--light);color:var(--primary); padding: var(--marginM) 0; font-size: var(--textS); text-align: center; font-weight: 400;line-height: 1.5;}
    #f .ct{display:flex;align-items:center; justify-content: space-between;height: 100%;}
    #f .logo {display: flex; align-items: center;}
    #f .logo svg{height: 20px;}
    #f .logo:after {content: attr(data-short); transition: transform .5s var(--bezier); margin-left: 8px; font-weight: 500; margin-bottom: 2px; font-size: var(--textM); color: var(--textColor);}
    #f .logo:hover:after {color: var(--primary);}


/* fieldset */
    .fieldset{z-index:100;width:100%;height:55px;border-radius:3px;margin-bottom:20px;transition:box-shadow .3s;box-shadow:0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0) inset;}
    .fd2 {width:calc(50% - 15px);float:left;margin-right:15px;}
    .fd2 + .fieldset{width:50%;float:left;}
    .fd2 + .fieldset + .fieldset {clear: both;}
    .fieldset + .bc{padding-top:20px;}
    .fieldset i{pointer-events:none;color:#666;transition:color .3s;display:flex;font-size:calc(14px + 2 * (100vw - 320px) / 1080);padding-left:5px;align-items:center;justify-content:center;height:55px;width:55px;position:absolute;left:0;top:0;z-index:300;}
    .fieldset.foc i{color:var(--primary);}
    .fieldset label, .fieldset input, .fieldset textarea{background-color:transparent;position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;border-radius:3px;display:flex;align-items:center;font-size:calc(13px + 2 * (100vw - 320px) / 1080);padding-right:calc(20px + 5 * (100vw - 320px) / 1080);padding-left:calc(20px + 5 * (100vw - 320px) / 1080);}
    .fieldset label{width:auto;white-space:nowrap;overflow:hidden;color:var(--primary);transition:all .3s ease-in-out;opacity:1;height:45px;top:5px;pointer-events:none;max-width:calc(100% - 47px - 5 * (100vw - 320px) / 1080);padding:0 6px 0px 8px;margin-left:calc(20px + 5 * (100vw - 320px) / 1080);user-select:none;-moz-user-select:none; font-weight: 400;}
    .fieldset.act label{max-width:none;background-color:var(--background); color:var(--primary);opacity:1;height:15px;font-size:10px;top:-7px;margin-left:calc(5px + 5 * (100vw - 320px) / 1080);}
    .fieldset .span{background-color:#ddd;position:absolute;top:0;left:0;height:100%;width:100%;border-radius:3px;overflow:hidden;transition:background .3s;}
    .fd:hover .span{background-color:var(--primary);}
    .fieldset .span:before{background-color:var(--background);position:absolute;transition:.3s;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;content:'';border-radius:3px;z-index:5;}
    .fieldset .span:after{background-color:var(--secondary);opacity:0;transition:.3s;position:absolute;width:400%;height:100%;left:0;top:0;content:'';border-radius:3px;z-index:3;animation:fcs 3s infinite linear;}
    .saf .fieldset .span:after{display:none;opacity:1;}
    html:not(.saf) .fieldset.foc .span:after{opacity:1;}
    .saf .fieldset.foc .span:after{display:block;}
    .txa{height:150px;clear:both;}
    .txa textarea{padding-top:20px;border-radius:3px;}

    input[type="checkbox"] + label,
    input[type="radio"] + label {font-size: var(--textS); cursor: pointer;}
    input[type="checkbox"] + label::before,
    input[type="radio"] + label::before {content: ""; font-weight: 600; background-color: var(--secondary); display: inline-block; width: 15px; height: 15px; margin-right: 10px; vertical-align: bottom; color: transparent; transition: .2s;}
    input[type="checkbox"] + label::before {border-radius: 5px;}
    input[type="radio"] + label::before {border-radius: 50%;}
    input[type="radio"]:checked + label::before,
    input[type="checkbox"]:checked + label::before {background-color: var(--primary); border: 2px solid var(--light);}

    @keyframes fcs{ 0%{left:0%;} 100%{left:-200%;} }


/* media */

@media screen and (max-width:1500px){
    .actu-item {padding: var(--marginM);}
    #avis .sw-n {position: relative; justify-content: flex-start; margin-top: var(--marginS);}
    #n {font-size: var(--textM)}
}
@media screen and (max-width:1250px){
    #h {font-size: var(--textM);}
    #avis .sw-p {right: -30px;}
    #avis .ct > .right li {height: 150px; width: 150px;}
}
 @media screen and (max-width:1084px){
    #p.err img{width:80px;position:relative;transform:none;left:0;margin-bottom:calc(20px + 10 * (100vw - 320px) / 1080);}
    .l-act > *.frst{width:50%;max-width:50%;flex-basis:50%;}
    .act{padding:15px;}
    .frst .act-t{margin-left:0;padding:calc(25px + 5 * (100vw - 320px) / 1080);}
    .frst .act-c{flex-direction:column;}
    .frst .act-c > *{width:100%;max-width:100%;flex-basis:100%;}
    .frst .rsme{display:none;}
    .frst [data-img]{position:relative;}
}
@media screen and (min-width:1351px){
    #n{height:auto!important;text-align:center;user-select:none;-moz-user-select:none; font-weight: 500;}
    #n nav > ul{display:flex;align-items:center;}
    #n nav > ul > li:not(:last-child):after{content:'.';margin-left: calc(10px + 5 * (100vw - 320px) / 1080);margin-right: calc(15px + 5 * (100vw - 320px) / 1080);}
    #n ul span:not(.open) + ul{position:absolute;opacity:0; pointer-events: none;}
    #n ul span.open + ul{z-index:100; pointer-events: auto;}
    #n ul span:not(.open) + ul a {pointer-events: none;}
    #n ul span.open + ul a {pointer-events: auto;}
    #n li > *:not(ul){pointer-events:auto;transition:.2s;cursor:pointer;}
    #n li > *:not(ul):hover{color:var(--primary);}
    #n li ul{white-space:nowrap;border-radius:3px;transition:opacity .2s;position:absolute;top:100%;font-size:.9rem;left:50%;transform:translateX(-50%);text-align: left;background: var(--light);text-transform: lowercase;}
    #n li ul li {border-bottom: 1px solid var(--background);}
    #n nav > ul > li > ul{margin-top:25px;}
    #n li ul li > *:not(ul){display:block;padding:10px 25px 13px;}
    #n li ul li > *:not(ul):hover{color:var(--primary);}
    #n li ul li:first-child > *:not(ul){border-radius:3px 3px 0 0;}
    #n li ul li:last-child > *:not(ul){border-radius:0 0 3px 3px;}
    #n nav > ul > li > ul ul{position:absolute;top:0;transform:none;left:calc(100% + 2px);}
    #n .lft + ul{right:calc(100% + 2px);left:auto;}
    #n span:after{color:var(--primary);font-size:70%;margin-left:.5rem;top:-1px;content:'\f067';font-family:"Font Awesome 5 Pro";font-weight:300;}
    #n nav > ul > li ul span{padding-left:35px;padding-right:35px;}
    #n nav > ul > li ul span:after{color:#222;position:absolute;top:50%;transform:translateY(-50%);}
    #n span.open:after{content:'\f068';}
    #n .show {display: none;}
    #n .filli {display: none;}
}

@media screen and (max-width:1350px){
    #n{background-color:var(--background);width: 100%;pointer-events:auto;transition:transform .6s;position:fixed;left:0;top:0;z-index:100;height:100vh;overflow:hidden;user-select:none;-moz-user-select:none;transform:translateX(-100%);display: flex; flex-direction: row-reverse; padding: var(--marginL) var(--marginCalc);}
    .onav #n{transform:translateX(0);}
    #n picture.show {display: flex; align-items: center; width: 50%; padding-left: var(--marginM);}
    #n img {height: 100%; width: 100%; object-fit: contain;}
    #n div.show {display: block;position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--marginCalc); color: var(--primary); font-size: var(--textS); text-align: center; width: 100%; line-height: 1.5;}
    #n div.show ul {display: flex; justify-content: center; margin-top: 5px; flex-wrap: wrap;}
    #n div.show li + li {margin-left: 10px;}
    #n nav {width: 50%; display: flex; justify-content:center; align-items: center; font-size: var(--textL);font-weight: 500;}
    #n nav li + li {margin-top: 15px;}
    #n li ul {text-transform: lowercase; font-size: 80%; margin-top: 18px; margin-bottom: 20px;}
    #n li ul li + li {margin-top: 10px;}
    #n li ul li:before{content:'.'; margin-right: calc(15px + 5 * (100vw - 320px) / 1080);}
    #n .filli {display: block;z-index: -1;position: absolute; right: 0; bottom: 0;}
    #h [data-nav] {display:flex;}
    .onav #socials {opacity: 1; pointer-events: auto; z-index: 600;}
    h1 {right: auto; left: var(--marginCalc);}
}

@media screen and (max-width:950px){
    .ct{width:88%;}
    #progressBar {display: none;}
    #socials + a {display: none;}
    #socials {opacity: 0; pointer-events: none; transition: .5s var(--bezier);}
    #f .ct {flex-direction: column;}
    #f .left + div {margin: var(--marginS) 0;}
    #actu {padding-bottom: var(--marginL);}
    .actu-item .date {font-size: 75px; top: -12px;}
    #avis {padding-top: 0;}
    #avis .ct {flex-direction: column;}
    #avis .h2 {text-align: center;}
    #avis .ct > .left {width: 90%; margin-bottom: var(--marginM);}
    #avis .ct .right {width: 100%; flex-direction: column; }
    #avis .ct .right ul {display: flex; justify-content: center;}
    #avis .ct > .right > ul:last-child {margin-left: 0;}
    #avis .ct > .right > ul:last-child li {margin-bottom: 0;}
    #avis .ct > .right li:not(:last-child) {margin-right: var(--marginM);}
    #avis .ct .sw-c {margin-top: 0;}
    #avis .ct > .left .swiper-slide {padding: 30px 0;}
    #avis .sw-n {justify-content: center;}
    .quote {text-align: left;}
}
@media screen and (max-width:800px){
    .h2 {font-size: 40px;}
    #avis .ct .sw-c {pointer-events: none;}
    .l-act > * {width: 100%; margin-left: 0;}
}
@media screen and (max-width:650px){
    #avis .ct > .right li:not(:last-child) {margin-right: var(--marginS);margin-bottom: var(--marginS);}
}
@media screen and (max-width:600px){
    #avis .ct > .right li {height: 100px; width: 100px;}
    .bn{padding:calc(15px + 2 * (100vw - 320px) / 1080) calc(19px + 2 * (100vw - 320px) / 1080) calc(18px + 2 * (100vw - 320px) / 1080);}
}
@media screen and (max-width:500px){
    #h {padding-top: var(--marginS);padding-bottom: var(--marginS);}
    #n {flex-direction: column-reverse; justify-content: center; align-items: center;}
    #n nav {width: 100%; text-align: center;}
    #n picture.show {margin-bottom: var(--marginS); padding-left: 0;}
    h1 {opacity: 0;}
}
@media screen and (max-width:400px){
    #avis .ct > .right li:last-child {display: none;}
    #avis .ct > .right li:not(:first-child) {margin-right: 0;}
}
