/* ==================================================
   VARIABLES
================================================== */

:root {
    --navbar-entry-duration: var(--main-entry-duration);
    --navbar-entry-easing: cubic-bezier(0.55, 1, 0.55, 1);

    --navbar-scroll-duration: 0.8s;
    --navbar-scroll-easing: cubic-bezier(0.55, 0, 0.1, 1);
}


/* ==================================================
   NAVBAR
       background-color: var(--color-background);

================================================== */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 70px;

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

    border-bottom: 0px solid black;

    z-index: 1000;

    transition:
        transform var(--navbar-scroll-duration) var(--navbar-scroll-easing),
        opacity var(--navbar-scroll-duration) var(--navbar-scroll-easing);
}


/* ==================================================
   NAVBAR SUR LE HERO
================================================== */

.navbar.navbar-over-hero {
    background-color: transparent;
    box-shadow: none;
}


/* ==================================================
   ÉLÉMENTS BLANCS SUR LE HERO
================================================== */

.navbar.navbar-over-hero .logo,
.navbar.navbar-over-hero .menu-toggle,
.navbar.navbar-over-hero .menu-text {
    color: white;
}

.navbar.navbar-over-hero .nav-links a {
    color: white;
}


/* ==================================================
   MOBILE — COULEURS SUR LE HERO
================================================== */

@media (max-width: 700px) {

    .navbar.navbar-over-hero .nav-links a {
        color: black;
    }

    .navbar.navbar-over-hero .logo {
        color: white;
    }

    .navbar.navbar-over-hero .menu-text {
        color: white;
    }

}


/* ==================================================
   NAVBAR CACHÉE AU SCROLL
================================================== */

.navbar.navbar-hidden {
    transform: translateY(-100%);
}


/* ==================================================
   CONTENEUR
================================================== */

.nav-container {
    width: 100%;
    height: 100%;

    padding: 0 3vw;

    margin: 0 auto;

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


/* ==================================================
   LOGO
       font-family: "Noto Serif Display", serif;

================================================== */

.logo {


    line-height: 0.9;

    text-decoration: none;

    color: var(--color-primary);

    font-size: 1.5rem;

    transition:
        font-size 0.5s cubic-bezier(.55, 0, .1, 1);
}


/* ==================================================
   LIENS DESKTOP
================================================== */

.nav-links {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;
}


.nav-links ul {
    display: flex;
    align-items: center;

    gap: clamp(2rem, 5vw, 6rem);

    margin: 0;
    padding: 0;

    list-style: none;

}


.nav-links a {
    text-decoration: none;

    text-transform: uppercase;

    color: black;

    font-size: 0.75rem;

    letter-spacing: 0.08em;

    font-weight: 500;

    transition:
        opacity 0.3s cubic-bezier(.55, 0, .1, 1);
}


.nav-links a:hover {
    opacity: 0.5;
}


/* ==================================================
   TITRE DU MENU
================================================== */

.menu-title {
    display: none;
}


/* ==================================================
   BOUTON MENU
================================================== */

.menu-toggle {
    display: none;
}


/* ==================================================
   ICÔNE MENU — 2 TRAITS
================================================== */

.menu-icon {
    position: relative;

    display: block;

    width: 18px;
    height: 7px;

    flex-shrink: 0;
}


.menu-icon::before,
.menu-icon::after {
    content: "";

    position: absolute;

    left: 0;

    width: 18px;
    height: 2px;

    background-color: currentColor;

    transform: scaleY(0.5);

    transform-origin: center;
}


/* Trait supérieur */

.menu-icon::before {
    top: 0;
}


/* Trait inférieur */

.menu-icon::after {
    bottom: 0;
}


/* ==================================================
   BOUTON FERMETURE
================================================== */

.menu-close {
    display: none;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {


    /* =========================
       NAVBAR
    ========================= */

    .navbar {
        height: 70px;

        transition:
            transform 0.3s ease,
            opacity var(--navbar-entry-duration) var(--navbar-entry-easing);
    }


    /* =========================
       CONTENEUR
    ========================= */

    .nav-container {
        width: 100%;

        padding: 0 3vw;
    }


    /* =========================
       LOGO
    ========================= */

    .logo {
        font-size: 19px;
    }


    /* =========================
       BOUTON MENU
    ========================= */

    .menu-toggle {
        text-transform: uppercase;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 9px;
        border: none;

    background: none;

    padding: 0;

    color: black;

    font-family: inherit;

    font-size: 0.9rem;

    cursor: pointer;
    }


    /* =========================
       PANNEAU MENU
    ========================= */

    .nav-links {
        position: fixed;

        top: 0;
        left: 0;

        width: 100%;
        height: 100dvh;

        display: flex;

        align-items: center;
        justify-content: center;

        margin: 0;
        padding: 0;

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

        visibility: hidden;

        transform: translateX(-100%);

        transition:
            transform 0.35s ease,
            visibility 0s linear 0.35s;

        z-index: 2000;
    }


    /* =========================
       MENU OUVERT
    ========================= */

    .nav-links.active {
        visibility: visible;

        transform: translateX(0);

        transition:
            transform 0.35s ease,
            visibility 0s linear 0s;
    }


    /* =========================
       CONTENU
    ========================= */

    .nav-menu-content {
        width: 90%;
    }


    /* =========================
       TITRE
    ========================= */

    .menu-title {
        display: block;

        margin: 0 0 20px 0;

        color: var(--color-primary);

        font-size: 2.5rem;

        text-align: left;

        text-transform: uppercase;
    }


    /* =========================
       LISTE
    ========================= */

    .nav-links ul {
        display: block;

        width: 100%;

        margin: 0;
        padding: 0;

        list-style: none;
    }


    /* =========================
       ÉLÉMENTS
    ========================= */

    .nav-links li {
        width: 100%;

        margin: 0;
        padding: 0;
    }


    /* =========================
       LIENS
    ========================= */

    .nav-links li a {
        display: block;

        width: 100%;

        padding: 25px 0;

        color: var(--color-primary);

        font-size: 20px;

        font-weight: 500;

        text-decoration: none;
    }


    /* =========================
       TRAITS ENTRE LES LIENS
    ========================= */

    .nav-links li + li {
        border-top: 1px solid #e5e5e5;
    }


    /* =========================
       CROIX
    ========================= */

    .menu-close {
        position: absolute;

        top: 20px;
        right: 5%;

        display: flex;

        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;

        margin: 0;
        padding: 0;

        border: none;

        background: transparent;

        color: var(--color-primary);

        font-family: inherit;

        font-size: 34px;

        font-weight: 300;

        line-height: 1;

        cursor: pointer;
    }

}


/* ==================================================
   LIGNE SOUS LA NAVBAR — MOBILE
================================================== */

@media (max-width: 700px) {

    .navbar::after {
        content: "";

        position: absolute;

        bottom: 0;
        left: 0;

        width: 100%;
        height: 1px;

        background: var(--color-background);

        transform: scaleY(0.5);

        transform-origin: center;
    }

}