/* =========================================================
   CERFBOX - HEADER / NAVIGATION
   ========================================================= */

.header {
    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    width: 100%;
    height: 13.492063vw;
}

.logo {
    position: absolute;

    z-index: 5;

    top: 1.488095vw;
    left: 2.976190vw;

    width: 6.440476vw;
}

.logo img {
    width: 100%;
    height: auto;
}

.main-nav {
    position: absolute;

    top: 3.769841vw;
    left: 13.071vw;

    display: flex;
    align-items: center;
}

.main-nav-annexe{
    left: auto;
    right: 1.5vw;
}

.main-nav > a:not(.reservation-button) {
    position: relative;

    display: flex;
    align-items: center;

    height: 4.067460vw;

    color: var(--color-nav-text);

    font-size: 1.091270vw;
    font-weight: var(--weight-medium);

    line-height: 1;

    white-space: nowrap;
}

.main-nav > a:nth-child(1) {
    margin-right: 5.158730vw;
}

.main-nav > a:nth-child(2) {
    margin-right: 5.158730vw;
}

.main-nav > a:nth-child(3) {
    margin-right: 5.059524vw;
}

.main-nav > a:not(.reservation-button)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0.6vw;

    width: 0;
    height: 1px;

    background: var(--color-black);

    transition: width 0.2s ease;
}

.main-nav > a:not(.reservation-button):hover::after {
    width: 100%;
}

.reservation-button {
    width: 14.087302vw;
    height: 3.968254vw;

    padding:
            0
            0.992063vw
            0
            1.190476vw;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: var(--color-black);
    color: var(--color-white);

    font-size: 1.091270vw;
    font-weight: var(--weight-medium);

    white-space: nowrap;

    transition: background 0.2s ease;
}

.reservation-button:hover {
    background: var(--color-black-dark);
}

.reservation-icon {
    width: 1.984127vw;
    height: 2.380952vw;

    display: flex;
    align-items: center;
    justify-content: center;
}

.reservation-icon svg {
    width: 1.686508vw;
    height: auto;
}

.mobile-menu-button {
    display: none;

    border: 0;

    background: transparent;

    cursor: pointer;
}