/* ==================== Header no move ==================== */

.header__no-move {
    position        : absolute;
    top             : 0;
    left            : 0;
    z-index         : 900;
    display         : flex;
    flex-direction  : row;
    justify-content : space-between;
    align-items     : center;
    width           : 100vw;
    height          : 108px;
    padding         : 0px 100px;
}


body.logged-in .header__no-move {
    margin-top : -32px;
}

.header-no-move__logo {
    text-decoration : none !important;
    display         : flex;
    justify-content : center;
    align-items     : center;
}

.header-no-move__logo img {
    height     : 40px;
    object-fit : contain;
}

.header-no-move__logo-desktop {
    display : block;
    width   : 200px;
}

.header-no-move__logo-mobile {
    display : none;
    width   : 105px;
}

.header__no-move span {
    font-family    : var(--text-font);
    font-size      : 14px;
    font-weight    : 300 !important;
    color          : var(--primary-color-ponsot) !important;
    text-transform : uppercase;
}

.header-lang {
    display     : flex;
    align-items : center;
    gap         : 20px;
}

.header-lang-select {
    font-family    : var(--text-font) !important;
    font-size      : 14px !important; !important;
    font-weight    : 300 !important;
    text-transform : uppercase;
    position       : relative;
}

.header-lang-select__label {
    font-family : var(--text-font) !important;
    font-size   : 14px !important;
    font-weight : 300 !important; !important;
    line-height : 15px;
    color       : var(--primary-color-ponsot);
    display     : flex;
    align-items : center;
    gap         : 10px;
    cursor      : pointer;
}

.header-lang-select__label i {
    font-size : 10px;
    color     : var(--primary-color-ponsot);
}

.header-lang-select__options {
    position         : absolute;
    top              : 100%;
    left             : 0;
    z-index          : 10;
    display          : none;
    padding-top      : 5px;
    background-color : rgba(0, 0, 0, 0.6);
}

.header-lang-select:hover .header-lang-select__options {
    display : block;
}

.header-lang-select__option {
    color   : #FFFFFF;
    display : block;
    padding : 5px 10px;
}

.header-lang-select__option:hover {
    color            : #000000;
    background-color : var(--primary-color-ponsot);
}

.header-lang-select__option.active {
    color            : #000000;
    background-color : var(--primary-color-ponsot);
}

@media (max-width : 764px) {
    .header__no-move {
        display : none;
    }
}


/* ==================== Header fixed ==================== */


.header-fixed__logo {
    text-decoration : none !important;
    position        : fixed;
    top             : 50px;
    left            : 26px;
    transform       : translate(0, -50%);
    z-index         : 990;
    display         : flex;
    justify-content : center;
    align-items     : center;
    gap             : 15px;
}

.header-fixed__logo .header-fixed__logo-part-1 {
    width      : 57px;
    height     : 62px;
    transition : 0.1s;
    object-fit : contain;
}

.header-fixed__logo .header-fixed__logo-part-2 {
    display    : none;
    transition : 0.1s;
    object-fit : contain;
}


/* ========== Responsive========== */
@media (max-width : 764px) {

    .header-fixed__logo {
        top             : 36px;
        left            : 0;
        justify-content : flex-start;
        width           : 100%;
        padding         : 15px 15px;
        
    }

    .header-fixed__logo.header--scroll {
        justify-content : center;
    }

    .header--scroll .header-fixed__logo-part-1 {
        width  : 48px;
        height : 52px;
    }


    .header-fixed__logo .header-fixed__logo-part-2 {
        display : block;
        width   : 170px;
        height  : 36px;
    }

    /* Quand on scroll */
    .header--scroll {
        background-color        : rgba(0, 0, 0, 0.4);
        backdrop-filter         : blur(30px);
        -webkit-backdrop-filter : blur(30px);
    }

    .header--scroll .header-fixed__logo-part-1 {
        width  : 40px;
        height : 43px;
    }

    .header--scroll .header-fixed__logo-part-2 {
        opacity : 0;
        width   : 0;
        height  : 0;
    }

    .header-no-move__logo-mobile {
        display : block;
    }

    .header-no-move__logo-desktop {
    }
}


/* ==================== BTN burger ==================== */
.btn-burger {
    position         : fixed;
    top              : 52px;
    right            : 26px;
    transform        : translate(0, -50%);
    z-index          : 990;
    width            : 40px;
    height           : 40px;
    border           : none;
    background-color : transparent;
}

.btn-burger .btn-burger__bar {
    position         : absolute;
    left             : 0;
    width            : 100%;
    height           : 1px;
    transition       : transform .8s ease;
    background-color : var(--primary-color-ponsot);
}

.btn-burger .btn-burger__bar--1 {
    transform : translate3d(0, 15px, 0);
}

.btn-burger .btn-burger__bar--2 {
    transform : translate3d(0, 25px, 0);
}

.btn-burger:hover .btn-burger__bar--1 {
    transform : translate3d(0, 15px, 0) rotate(-180deg);
}

.btn-burger:hover .btn-burger__bar--2 {
    transform : translate3d(0, 25px, 0) rotate(-180deg);
}

.btn-burger:hover .active .btn-burger__bar--1 {
    transform : rotate(-180deg);
}

.btn-burger:hover .active .btn-burger__bar--2 {
    transform : translate3d(0, 15px, 0);
}

.btn-burger.active .bar {
    transition : transform .6s ease;
}

.btn-burger.active .btn-burger__bar--1 {
    transform : translate3d(0, calc(1.5 * 15px), 0) rotate(-135deg);
}

.btn-burger.active .btn-burger__bar--2 {
    transform : translate3d(0, calc(1.5 * 15px), 0) rotate(-225deg);
}

/* ========== Responsive========== */
@media (max-width : 764px) {
    .btn-burger {
        top : 35px;
    }
}


/* ========== End BTN burger ========== */


/* ======================================== Header Modal ======================================== */

.header__modal {
    position         : fixed;
    top              : -100vh;
    left             : 0;
    z-index          : 950;
    display          : flex;
    align-items      : center;
    width            : 100vw;
    height           : 100vh;
    padding          : 30px 50px;
    background-color : var(--background-color-ponsot);
}


/* ================== Background ================== */
.header__modal-rock {
    opacity         : 0;
    position        : absolute;
    right           : 0;
    bottom          : 0;
    z-index         : 0;
    width           : auto;
    height          : 100vh !important;
    user-select     : none;
    pointer-events  : none;
    object-position : center;
    object-fit      : cover;
}


/* ======================================== Header Menu ======================================== */
.menu {
    position        : fixed;
    top             : 0;
    left            : 50px;
    z-index         : 0;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : flex-start;
    gap             : 40px;
    width           : 100%;
    height          : 100vh;
}

.menu__link {
    text-decoration : none !important;
    opacity         : 0;
    position        : relative;
    transform       : translate(0, 30%);
    overflow        : hidden;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : flex-start;
    width           : auto;
}

.menu-link__primary {
    font-family     : var(--primary-font) !important;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-items     : center;
    gap             : 1px;
}

.menu-link__secondary {
    font-family     : var(--primary-font) !important;
    position        : absolute;
    bottom          : 0;
    left            : 0;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-items     : center;
    gap             : 1px;
}

/* ========= Menu Word ========= */
.menu-link__word {
    overflow        : hidden;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-items     : center;
    gap             : 1px;
}

.menu__link .menu-line__char {
    font-size      : 30px;
    line-height    : 30px;
    color          : var(--text-color-ponsot);
    text-transform : uppercase;
}

.menu-link__secondary .menu-line__char {
    color     : var(--primary-color-ponsot);
    transform : translate(0, 118%);
}


@media (max-width : 1300px) {
    .menu__link .menu-line__char {
        font-size   : 30px;
        line-height : 30px;
    }
}


@media (max-width : 764px) {
    .menu {
        left    : 0;
        gap     : 27px;
        height  : 85vh;
        padding : 70px 20px 20px 20px;
    }

    .menu__link .menu-line__char {
        font-size   : 24px;
        line-height : 24px;
    }

    .header__modal {
        padding : 30px 20px;
    }

    .header__modal-rock {
        bottom : -40%;
        rotate : 70deg;
    }
}