/* ==========================================================================
   HEADER
   ========================================================================== */

/* Structure
   ========================================================================== */

.o-header {
    position: relative;
    width: 100%;
    transition: 400ms var(--cubic-bezier) all;
    z-index: 100;
    padding: calc(var(--space) * 6) 0;
    background: var(--Bleu);
}

.o-header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(10px) grayscale(.8);
    background-color: rgba(40, 58, 73, 0.8);
    height: auto;
    animation: headerFromTop var(--cubic-bezier) 700ms;
    padding: calc(var(--space) * 3) 0;
    z-index: 1000;
}

.o-header .gs-wrapper {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.o-header .gs-hook[data-hook-name="body_header_inside"] {
    display: none;
}

.o-header .gs-custom-btn__phone {
    justify-content: flex-end;
    align-items: center;
    border-radius: 0 14px 0 0;
    border: 1px solid var(--Beige);
    padding: calc(var(--space) * 3) calc(var(--space) * 6);
    justify-self: flex-end;
    background: linear-gradient(90deg, transparent 0%, transparent 100%);
    background-size: 100%;
    transition: 600ms all var(--cubic-bezier);
}

.o-header .gs-custom-btn__phone:hover {
    background: var(--Degrad);
    color: var(--Blanc);
    background-size: 100%;
}

.o-header .gs-custom-btn__phone,
.gs-custom-btn__phone span,
.gs-custom-btn__phone label,
.gs-custom-btn__phone:before {
    margin: 0;
}

.gs-custom-btn__phone:before {
    margin-right: 10px;
}



.a-header__btnMenu {
    appearance: none;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 2.7px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    column-gap: calc(var(--space) * 4);
    transition: 600ms all var(--cubic-bezier);
}

.a-header__btnStrokes {
    display: flex;
    width: 86px;
    flex-direction: column;
    row-gap: calc(var(--space) * 2);
}

.a-header__btnStrokes > span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--Degrad);
    transition: 600ms all var(--cubic-bezier);
}

.a-header__btnMenu:hover {
    opacity: .7;
    filter: blur(.7px) grayscale(.5);
}

.a-header__btnMenu:hover .a-header__btnStrokes > span {
    width: 75%;
}

.a-header__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 600ms all var(--cubic-bezier);
    align-self: center;
    justify-self: center;
}

.a-header__logo:hover {
    opacity: .7;
    transform: scale(0.97);
}

.o-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--Bleu);
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 750ms all var(--cubic-bezier);
}

.o-menu.-animationStart {
    transform: translateY(-25%);
    opacity: 0;
    filter: grayscale(1) blur(2px);
}

.o-menu.-animationEnd {
    transform: translateY(0);
    opacity: 1;
    filter: grayscale(0) blur(0);
}

.m-menu__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    column-gap: calc(var(--space) * 64);
    max-height: 100%;
}

.a-menu__logo {
    align-self: center;
}

.m-menu__list {
    position: relative;
    display: flex;

}

.m-menu__container > .m-menu__list > ul {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--space) * 10);
    margin: calc(var(--space) * 3) 0;
    max-height: calc(100vh - var(--space) * 6);
    overflow: auto;
}

.m-menu__container > .m-menu__list:before {
    content: "";
    position: absolute;
    display: inline-block;
    left: calc(var(--space) * -32);
    width: 1px;
    top: 0;
    height: 100%;
    background: linear-gradient(180deg, #BB8F6E 0%, #BC9170 45%, #C19877 67%, #CAA484 84%, #D7B697 99%, #D9B899 100%);
}

.m-menu__container > .m-menu__list > ul > li {
    list-style: none;
}

.m-menu__container > .m-menu__list > ul > li > a {
    color: #FFF;
    font-family: "Roboto Condensed", serif;
    font-size: 30px;
    font-style: italic;
    font-weight: 900;
    line-height: 104.5%; /* 31.35px */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.m-menu__container > .m-menu__list > ul > li > a:hover {
    color: var(--Beige);
}

.m-menu__container > .m-menu__list > ul > li > a:not([href]) {
    cursor: default;
}

.m-menu__container > .m-menu__list > ul > li > ul {
    padding-left: calc(var(--space) * 10);
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--space) * 3);
    margin: calc(var(--space) * 3) 0 calc(var(--space) * 5);
}

.m-menu__container > .m-menu__list > ul > li > ul > li {
    list-style: none;

}

.m-menu__container > .m-menu__list > ul > li > ul > li > a:before {
    content: "";
    background-image: url('data:image/svg+xml,<svg width="32" height="12" viewBox="0 0 32 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31.3386 6.40536H0.659761C0.294831 6.40536 0 6.1255 0 5.77911C0 5.43271 0.294831 5.15286 0.659761 5.15286H29.7449L25.741 1.3523C25.4833 1.10767 25.4833 0.710389 25.741 0.46576C25.9987 0.22113 26.4172 0.22113 26.675 0.46576L31.8067 5.33682C31.9963 5.51687 32.052 5.78498 31.9489 6.01982C31.8458 6.25271 31.6046 6.40536 31.3386 6.40536Z" fill="url(%23paint0_linear_40_1030)"/><path d="M26.2007 11.2823C26.0317 11.2823 25.8626 11.2216 25.7348 11.0983C25.4771 10.8537 25.4771 10.4564 25.7348 10.2118L30.8727 5.33486C31.1304 5.09023 31.5489 5.09023 31.8066 5.33486C32.0644 5.57949 32.0644 5.97677 31.8066 6.2214L26.6688 11.0983C26.5389 11.2216 26.3698 11.2823 26.2007 11.2823Z" fill="url(%23paint1_linear_40_1030)"/><defs><linearGradient id="paint0_linear_40_1030" x1="0" y1="5.78273" x2="32" y2="5.78273" gradientUnits="userSpaceOnUse"><stop stop-color="%23BB8F6E"/><stop offset="0.45" stop-color="%23BC9170"/><stop offset="0.67" stop-color="%23C19877"/><stop offset="0.84" stop-color="%23CAA484"/><stop offset="0.99" stop-color="%23D7B697"/><stop offset="1" stop-color="%23D9B899"/></linearGradient><linearGradient id="paint1_linear_40_1030" x1="0" y1="5.78273" x2="32" y2="5.78273" gradientUnits="userSpaceOnUse"><stop stop-color="%23BB8F6E"/><stop offset="0.45" stop-color="%23BC9170"/><stop offset="0.67" stop-color="%23C19877"/><stop offset="0.84" stop-color="%23CAA484"/><stop offset="0.99" stop-color="%23D7B697"/><stop offset="1" stop-color="%23D9B899"/></linearGradient></defs></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 32px;
    height: 12px;
}


.m-menu__container > .m-menu__list > ul > li > ul > li > a {
    text-decoration: none;
    display: flex;
    align-items: center;
    column-gap: calc(var(--space) * 2);
    color: var(--Beige);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 3px;
}

.a-menu__btnClose {
    appearance: none;
    cursor: pointer;
    background: none;
    padding: 0;
    border-radius: 9999px;
    border: 1px solid var(--Beige);
    width: 104px;
    height: 104px;
    position: absolute;
    left: calc(var(--space) * 8);
    top: calc(var(--space) * 8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.a-menu__btnClose:hover {
    opacity: .7;
    filter: grayscale(.5);
}

.m-page__banner {
    height: 345px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: calc(100vw - 180px);
    margin: 0 auto calc(var(--space) * 4);
}

@keyframes headerFromTop {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}