/**
 * En-tête et navigation.
 */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--primary-border-color);
    background-color: var(--header-background-color);

    img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }
}

.locale-switcher {
    border-bottom: none;
    padding: 0;

    ul {
        gap: 0;
    }

    a {
        padding: 4px 10px;
        font-size: 12px;
    }
}

nav {
    padding: 5px;
    border-bottom: 1px solid var(--primary-border-color);

    ul {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        display: block;
        padding: 5px 12px;
        border-right: 1px solid var(--secondary-border-color);
        color: var(--secondary-text-color);
        font-size: 13px;
        letter-spacing: 1.5px;
        text-decoration: none;
        text-transform: uppercase;
        transition: color var(--duration-instant) var(--easing-default);
    }

    a:hover,
    a.active {
        color: var(--primary-accent-color);
    }

    a:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
        color: var(--primary-accent-color);
    }
}