/* Give navigation the available space instead of a fixed 50% column. */
@media (min-width: 1400px) {
    body #header > .wrapper > .grid-parent {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    body #header .header-brand {
        width: auto;
        flex: 0 0 180px;
        padding: 0;
    }

    body #header .header-menu {
        width: auto;
        flex: 1 1 auto;
        padding: 0;
    }

    body #header .header-actions {
        width: auto;
        flex: 0 0 auto;
        padding: 0;
    }

    body #header .navigation-principale {
        padding-top: 0;
    }

    body #header .navigation > ul {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(12px, 1.2vw, 24px);
    }

    body #header .navigation > ul::before,
    body #header .navigation > ul::after {
        display: none;
    }

    body #header .navigation > ul > li {
        float: none;
        padding-right: 0;
    }

    body #header .navigation > ul > li > a {
        white-space: nowrap;
    }
}

/* Use the existing hamburger menu when the full navigation cannot fit. */
@media (min-width: 768px) and (max-width: 1399px) {
    body #header .header-menu {
        display: none !important;
    }

    body #header .header-brand,
    body #header .header-actions {
        width: 50%;
    }

    body #header .header-actions .navigation-secondaire > li.hide-on-desktop {
        display: block !important;
    }
}

body #header li.menu-highlight > a,
body #header a.menu-highlight {
    color: #fff !important;
    background: #c8102e;
    border: 2px solid #c8102e;
    padding: 8px 12px;
    font-weight: 700;
}

body #header li.menu-highlight > a:hover,
body #header a.menu-highlight:hover,
body #header li.menu-highlight > a:focus-visible,
body #header a.menu-highlight:focus-visible {
    background: #000;
    color: #fff !important;
    outline: 2px solid #fff;
    outline-offset: 3px;
}