:root {
    --header-height: 3.8125rem;
    --header-height-desktop: 4.75rem;
    --transition-duration: 0.4s;
    --active-color: #ffdf6b;
}

body {
    margin-top: var(--header-height);
}

header {
    position: fixed;
    top: 0;
    z-index: 50;
    width: 100%;
    background-color: var(--blue);
    box-shadow: var(--shadow)
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3.75rem;
    max-height: var(--header-height);
    margin: 0 auto;
}

.header-logo-link {
    position: absolute;
    left: 0;
    z-index: 50;
    top:1rem;
}

.header-container-wave {
    position: absolute;
    width: 20.625rem;
    height: 1.875rem;
    top: calc(var(--header-height) - 1px);
    left: calc(5.9375rem/2 + var(--min-external-margin));
    transform: translateX(-50%);
    z-index: 30;
    transition: width 0.4s ease, height 0.4s ease, top 0s ease;
}

.header-logo-link img {
    /* width: 5.9375rem; */
    width: 7.9375rem;
    transform: translateY(1.5rem);
    margin-left: 0;
    /* margin-left: var(--min-external-margin); */
}

.header nav {
    position: static;
    display: flex;
    height: var(--header-height);
    justify-content: flex-end;
    flex-grow: 1;
    gap: 1.4375rem;
    background: transparent;
}

.header nav ul {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header nav a {
    color: var(--white);
    font-weight: 500;
    font-size: 0.875rem; /* 14px */
    line-height: 1.125rem; /* 18px */
    letter-spacing: 0.03125rem; /* 0.5px */
    text-transform: uppercase;
    text-align: center;
}

.open-close-menu {
    background: none;
    border: none;
    cursor: pointer;
}

.open-close-menu svg {
    width: 1.875rem; /* 30px */
    height: 1.875rem; /* 30px */
}

.open-close-menu svg path {
    stroke: var(--white);
}

.open-close-menu.close-menu {
    position: absolute;
    top: 1.813rem; /* 29px */
    right: 1.875rem; /* 30px */
}

.open-close-menu.close svg {
    width: 1.313rem; /* 21px */
    height: 1.313rem; /* 21px */
}

.header .nav-mobile {
    position: fixed;
    top: var(--header-height);
    right: -100%;
    width: 100%;
    height: calc(100vh - var(--header-height));
    padding: 3.125rem 0; /* 50px */
    background: var(--white);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* 20px */
    box-shadow: var(--shadow);
    transition: right var(--transition-duration);
}

.header .nav-mobile.active {
    right: 0;
}

.header .nav-mobile li {
    padding: 0 2.1875rem; /* 35px */
}

.header .nav-mobile a {
    position: relative;
    color: var(--dark-blue);
    font-weight: 700;
    font-size: 1.625rem; /* 26px */
    line-height: 2.3125rem; /* 37px */
    letter-spacing: 0.0125rem; /* 0.2px */
    text-transform: uppercase;
    font-family: "Mitr Bold", sans-serif;
}

.header .nav-mobile a.is-active::before {
    content: "";
    position: absolute;
    left: -0.875rem; /* 14px */
    top: 0;
    height: 100%;
    width: 0.1875rem; /* 3px */
    border-radius: 0.0625rem; /* 1px */
    background-color: var(--active-color);
}

.menu-fondation-lactel, 
.menu-vie-lactel,
.menu-lactel-club {
    display: flex;
    align-items: center;
    gap: 0.4375rem; /* 7px */
    padding: 0.3125rem 0.4375rem; /* 5px 7px */
    border-radius: 0.8125rem; /* 13px */
    letter-spacing: 0.03125rem; /* 0.5px */
    font-size: 0.6875rem; /* 11px */
    border: 0.0625rem solid var(--blue); /* 1px */
}

.menu-fondation-lactel img,
.menu-lactel-club img {
    width: 2.1875rem; /* 35px */
    height: 2.1875rem; /* 35px */
}

.menu-vie-lactel img {
    width: 4.25rem;
    height: 2.8rem;
}

.header .nav-mobile .menu-fondation-lactel,
.header .nav-mobile .menu-lactel-club {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 30px;
    gap: 7px;
    border-width: 1px;
    border-radius: 13px;
    border: 1px solid var(--blue);
    font-size: 0.688rem;
    letter-spacing: 0.5px;
    font-family: "Mitr SemiBold", sans-serif;
    font-weight:600;
}

.header .nav-mobile .menu-vie-lactel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 30px;
    gap: 7px;
    border-width: 1px;
    border-radius: 13px;
    border: 1px solid var(--blue);
    font-size: 11px;
    letter-spacing: 0.5px;
}

.header .nav-mobile .menu-fondation-lactel img,
.header .nav-mobile .menu-lactel-club img {
    width: 2.1875rem; 
    height: 2.1875rem;
}

.header .nav-mobile .menu-vie-lactel img {
    width: 4.25rem;
    height: 3rem;
}

header,
header ul,
.header-logo-link,
.header-logo-link img {
    transition: all var(--transition-duration);
}

/* DESKTOP */
@media (min-width: 64rem) { /* 1024px */
    :root {
        --header-height: var(--header-height-desktop);
    }

    .header-container {
        /* width: var(--header-width); */
        max-width: var(--max-content-width);
        margin: initial;
    }

    .header-logo-link {
        position: relative;
        /* min-width: 8.875rem; */
    }

    .header-container-wave {
        width: 32.3125rem; /* 517px */
        height: 2.9375rem; /* 47px */
        top: 4.6875rem; /* 76px */
        left: 50%;
        transform: translateX(-50%);
    }

    .header-logo-link img {
        /* width: 8.875rem; */
        width: 13rem;
        margin-left: 0;
        margin: 0 auto;
        padding-left: 0.5rem;
        transform: translateY(1rem);
    }

    .header nav {
        justify-content: center;
        height: var(--header-height);
        gap:1rem;
    }

    .header nav ul {
        display: flex;
        align-items: center;
        gap: 2.875rem; /* 46px */
        /* width: 27.125rem;  */
        width: 100%;
        height: var(--header-height);
    }

    .header nav li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        max-width: 90px;
    }
    /*.header nav .nav-right li:last-child {
        max-width: 210px;
    }*/

    .header nav li a.is-active::after {
        content: "";
        position: absolute;
        bottom: 0.75rem; /* 12px */
        left: 50%;
        width: 2.375rem; /* 38px */
        height: 0.1875rem; /* 3px */
        border-radius: 0.0625rem; /* 1px */
        background-color: var(--active-color);
        transform: translateX(-50%);
    }

    .header nav .nav-left li:last-child a.is-active::after {
        bottom: 0.15rem;
    }

    .menu-fondation-lactel,
    .menu-lactel-club {
        font-size: 0.875rem; /* 14px */
        background: linear-gradient(90.55deg, rgba(255,255,255,0.16) 2.34%, transparent 98.3%);
    }

    .menu-vie-lactel {
        font-size: 0.875rem; /* 14px */
        background: linear-gradient(90.55deg, rgba(255,255,255,0.16) 2.34%, transparent 98.3%);
    }

    .header .nav-left {
        justify-content: flex-end;
    }

    .header .nav-right {
        justify-content: flex-start;
    }

    .header .nav-mobile {
        display: none;
    }

    .header.sticky,
    .header.sticky ul {
        /* height: 3.5625rem; */
        height:4rem;
    }

    .header.sticky .header-container-wave {
        height: 1.875rem; /* 30px */
        width: 25.625rem; /* 330px */
        /* top: 3.5rem; */
        top: 4rem;
    }

    .header.sticky .header nav{
        gap:0;
    }

    .header.sticky .header-logo-link img {
        /* width: 5.9375rem; */
        width: 8.9375rem;
        /* transform: translateY(1.1rem); */
        transform: translateY(0.5rem);
    }
}