/* Barre de navigation : logo | onglets (texte) | FR-EN, thème, Réserver.
   Les onglets ne passent jamais à la ligne ; la place se répartit selon la largeur de l'écran,
   et en dessous de 1024px le menu latéral (bouton burger) remplace la liste. */

.navbar .nav-container {
    max-width: 1440px;
    gap: 16px;
}
.navbar .logo {
    flex-shrink: 0;
    gap: 8px;
}
.navbar .logo-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
}
.navbar .logo .location-btn {
    margin-left: 0;
}
.navbar .nav-right {
    flex-shrink: 0;
    gap: 14px;
}
.nav-right .btn-cta {
    white-space: nowrap;
    padding: 8px 16px;
}

/* ----- Onglets ----- */
.nav-links.nav-menu {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    font-size: 0.84rem;
}
.nav-menu > li {
    position: relative;
    flex-shrink: 0;
}
.nav-menu .nav-menu-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border-radius: 10px;
    white-space: nowrap;
    color: var(--white-off);
    font-weight: 500;
    line-height: 1.2;
    transition: color .2s, background-color .2s;
}
.nav-menu .nav-menu-link:hover,
.nav-menu .nav-menu-link:focus-visible,
.nav-menu .dropdown.open > .nav-menu-link {
    color: var(--primary);
    background: rgba(237, 27, 36, .08);
}
.nav-menu .nav-menu-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* Page en cours : texte rouge + trait dessous */
.nav-menu .nav-menu-link.is-active {
    color: var(--primary);
    font-weight: 600;
}
.nav-menu .nav-menu-link.is-active::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
}
.nav-menu .nav-caret {
    font-size: 0.62rem;
}
.nav-menu .badge-sponsor {
    font-size: 0.75rem;
    line-height: 1;
}

/* ----- Écrans moyens : on resserre ----- */
@media (max-width: 1280px) {
    .navbar .nav-container { padding: 0 18px; gap: 12px; }
    .nav-links.nav-menu { font-size: 0.8rem; gap: 0; }
    .nav-menu .nav-menu-link { padding: 8px 8px; }
    .nav-menu .nav-menu-link.is-active::after { left: 8px; right: 8px; }
    .navbar .nav-right { gap: 10px; }
    .navbar .logo img { height: 40px; }
    .navbar .logo span { font-size: 1.3rem; }
}
@media (max-width: 1160px) {
    .nav-links.nav-menu { font-size: 0.77rem; }
    .nav-menu .nav-menu-link { padding: 7px 6px; gap: 4px; }
    .nav-menu .nav-menu-link.is-active::after { left: 6px; right: 6px; }
    .navbar .logo img { height: 36px; }
    .navbar .logo span { font-size: 1.15rem; }
    .navbar .logo .location-btn { padding: 6px; }
    .nav-right .btn-cta { padding: 7px 12px; }
    .nav-right .btn-cta i { display: none; }
    .navbar .theme-toggle { padding: 6px; gap: 6px; }
}

/* ----- Tablette (769–1024px) : menu latéral comme sur mobile ----- */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-links.nav-menu,
    .navbar .nav-right {
        display: none;
    }
    .navbar .lang-switch-mobile {
        display: inline-flex;
        margin-left: auto;
        margin-right: 14px;
    }
    .navbar .menu-toggle {
        display: block;
    }
}
