/**** STYLE - HEADER & MENU */

:root {
    --letter-spacing1: clamp(0.025rem, calc(0.015625rem + ((1vw - 0.37rem) * 0.0045)), 0.032rem);
    --letter-spacing2: clamp(0.044rem, calc(0.0275rem + ((1vw - 0.37rem) * 0.0103)), 0.06rem);
    --letter-spacing3: clamp(0.032rem, calc(0.02rem + ((1vw - 0.37rem) * 0.0052)), 0.04rem);
    --header-margin-mobile: 16px
}

body.noscroll {
    overflow: hidden
}

body {
    margin: 0;
    overflow: hidden auto
}

@media (max-width: 767px) {
    body>header.nav-down,body>header.nav-up {
        transition:opacity 750ms
    }

    body>header.nav-down {
        opacity: 1;
        pointer-events: auto
    }

    body>header.nav-up {
        opacity: 0;
        pointer-events: none
    }
}

body>header {
    position: fixed;
    left: 0;
    bottom: 0;
    top: 0;
    width: var(--menu-width);
    z-index: 999;
    background: var(--wh);
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    font-family: var(--f1);
    box-sizing: border-box
}

body>header .border-right {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 1px;
    height: 100vh;
    background: var(--c1t);
    z-index: 9999999;
    left: 100%
}

@media (max-width: 767px) {
    body>header {
        height:100%;
        width: 100%;
        height: var(--menu-mobile-height);
        justify-content: space-between;
        border-right: none;
        flex-direction: row;
        align-items: center
    }
}

body>header .sf-button-menu-ctnr {
    border-bottom: 1px solid var(--c1t);
    background: var(--wh);
    height: var(--menu-width);
    width: 100%;
    display: flex;
    position: relative;
    z-index: 999;
    overflow: hidden;
    align-items: center;
    justify-content: center
}

@media (max-width: 767px) {
    body>header .sf-button-menu-ctnr {
        justify-content:start;
        margin-left: var(--header-margin-mobile);
        border: none;
        height: var(--menu-mobile-height)
    }
}

body>header img.sf-button-menu {
    margin: auto;
    cursor: pointer;
    width: 26px;
    height: auto
}

@media (max-width: 767px) {
    body>header img.sf-button-menu {
        padding:0;
        margin-left: var(--header-margin-mobile);
        border: none
    }
}

body>header .bck {
    background: var(--wh);
    flex: 1;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 99999;
    box-sizing: border-box
}

@media (max-width: 767px) {
    body>header .bck {
        display:none
    }
}

main,footer {
    width: calc(100% - var(--menu-width));
    height: auto;
    margin-left: auto
}

@media (max-width: 767px) {
    main,footer {
        width:100%
    }
}

@media (max-width: 767px) {
    main {
        padding-top:var(--menu-mobile-height)
    }
}

body>header .sf-button-menu {
    cursor: pointer;
    position: relative;
    z-index: 9999;
    background: var(--wh)
}

body>header>.sf-menus {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1;
    height: 100%;
    width: 41.3rem;
    max-width: 100%;
    left: var(--menu-width);
    background: var(--wh);
    will-change: transform, opacity;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 750ms var(--cubic), opacity 800ms;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--c1t)
}

@media (max-width: 767px) {
    body>header>.sf-menus {
        left:0;
        top: var(--menu-mobile-height);
        box-shadow: none;
        border: none
    }
}

body>header>.sf-menus.active {
    transform: translateX(0%);
    opacity: 1
}

body>header>.sf-menus ul {
    list-style: none;
    padding-inline-start:0}

body>header>.sf-menus a {
    position: relative;
    text-transform: uppercase;
    font-family: var(--f1);
    color: var(--c1)
}

body>header>.sf-menus .menu-menu-principal-container>ul.menu {
    padding-top: var(--menu-width);
    margin: 0;
    box-sizing: border-box
}

@media (max-width: 767px) {
    body>header>.sf-menus .menu-menu-principal-container>ul.menu {
        padding-top:1.6rem
    }
}

body>header>.sf-menus .menu-menu-principal-container>ul.menu>li {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-left: 6.3rem;
    padding-right: var(--margin-mobile);
    border-top: 1px solid var(--c1t)
}

body>header>.sf-menus .menu-menu-principal-container>ul.menu>li:first-child {
    margin-top: 0px
}

@media (max-width: 767px) {
    body>header>.sf-menus .menu-menu-principal-container>ul.menu>li:first-child {
        border-top:none
    }
}

body>header>.sf-menus .menu-menu-principal-container>ul.menu>li:last-child {
    border-bottom: 1px solid var(--c1t)
}

@media (max-width: 767px) {
    body>header>.sf-menus .menu-menu-principal-container>ul.menu>li {
        padding-top:0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1.6rem
    }
}

body>header>.sf-menus .menu-menu-principal-container>ul.menu>li a {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 2.5rem;
    letter-spacing: var(--letter-spacing2)
}

body>header>.sf-menus .menu-menu-principal-container>ul.menu>li>ul.sub-menu {
    padding: 0
}

@media (max-width: 767px) {
    body>header>.sf-menus .menu-menu-principal-container>ul.menu>li>ul.sub-menu {
        padding-top:0
    }
}

body>header>.sf-menus .menu-menu-principal-container>ul.menu>li>ul.sub-menu>li {
    padding-top: 0.8rem
}

@media (max-width: 767px) {
    body>header>.sf-menus .menu-menu-principal-container>ul.menu>li>ul.sub-menu>li {
        padding-top:0
    }
}

body>header>.sf-menus .menu-menu-principal-container>ul.menu>li>ul.sub-menu>li:last-child {
    padding-bottom: 0.3rem
}

@media (max-width: 767px) {
    body>header>.sf-menus .menu-menu-principal-container>ul.menu>li>ul.sub-menu>li:last-child {
        padding-top:0
    }
}

body>header>.sf-menus .menu-menu-principal-container>ul.menu>li>ul.sub-menu>li a {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 3.5rem;
    letter-spacing: var(--letter-spacing3)
}

body>header>.sf-menus .menu-menu-principal-container>ul.menu>li>ul.sub-menu>li>ul.sub-menu>li {
    padding-left: 2.5rem;
    line-height: 1
}

body>header>.sf-menus .menu-menu-principal-container>ul.menu>li>ul.sub-menu>li>ul.sub-menu>li a {
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: var(--letter-spacing1);
    text-decoration: none;
    font-size: 1.2rem
}

body>header .menu-menu-supplementaire-container>ul {
    padding: 0;
    margin-left: 6.3rem;
    margin-bottom: 0
}

@media (max-width: 767px) {
    body>header .menu-menu-supplementaire-container>ul {
        margin-left:1.6rem
    }
}

body>header .menu-menu-supplementaire-container ul li a {
    color: #844B1A;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 2.5rem;
    letter-spacing: var(--letter-spacing1);
    text-decoration-line: underline;
    text-underline-offset: 2px
}

body>header .sf-social img,body>header .sf-logo-mini img {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999999;
    display: block;
    margin: auto
}

body>header .sf-social img.insta {
    bottom: 45px;
    width: 1.8rem;
    height: 1.8rem
}

@media (max-width: 767px) {
    body>header .sf-social img.insta {
        position:initial;
        margin: 0;
        margin-right: var(--header-margin-mobile);
        width: 1.7rem;
        height: 1.7rem
    }
}

body>header .sf-logo-mini img.logo {
    width: 35px;
    height: auto;
    bottom: calc(50% - var(--menu-width))
}

@media (max-width: 767px) {
    body>header .sf-logo-mini img.logo {
        display:none
    }
}

body>header .bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    width: 100%;
    padding-right: var(--margin-mobile);
    padding-bottom: var(--margin-mobile);
    box-sizing: border-box
}

body>header .bottom img {
    width: 5.9rem;
    height: auto
}

@media (max-width: 767px) {
    body>header .bottom img {
        display:none
    }
}

@media (max-width: 767px) {
    body>header .bottom {
        padding-bottom:calc(4rem + var(--menu-mobile-height))
    }
}

body>header>.sf-menus .header-logo img {
    transform: rotate(-180deg);
    transition: 2s;
    transform-origin: center
}

body>header>.sf-menus.active .header-logo img {
    transform: rotate(0deg)
}

body>header .sf-menus.active {
    overflow: auto
}

.sf-menus::-webkit-scrollbar {
    width: 10px
}

.sf-menus::-webkit-scrollbar-track {
    background: #FFF
}

.sf-menus::-webkit-scrollbar-thumb {
    background: var(--c1t);
    border-radius: 10px
}

.sf-menus::-webkit-scrollbar-thumb:hover {
    background: var(--c1)
}

.sf-menus::-webkit-scrollbar-button {
    display: none
}

.sf-menus {
    scrollbar-width: thin;
    scrollbar-color: var(--c1t) #FFF
}

.sf-menus {
    -ms-overflow-style: -ms-autohiding-scrollbar
}