/* ==========================================================================
   NAV v2 (aperçu) : fond plus profond, liens dans une capsule,
   pastille dorée qui glisse d'un lien à l'autre. Chargé après modern.css.
   ========================================================================== */

/* ---------- Fond de la barre ---------- */
#header.site-header {
    background: linear-gradient(180deg, rgba(16, 21, 31, .96), rgba(11, 15, 23, .9)) !important;
    border-bottom: 1px solid rgba(244, 241, 234, .06) !important;
    box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .8);
}
@media (min-width: 993px) {
    #header.site-header {
        background: linear-gradient(180deg, rgba(16, 21, 31, .82), rgba(11, 15, 23, .7)) !important;
    }
}
/* Filet doré qui s'estompe vers les bords, à la place du néon */
#header .neon-separator { display: none !important; }
#header.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 184, 150, .45) 50%, transparent);
    pointer-events: none;
}

/* ---------- Capsule des liens (ordinateur) ---------- */
@media (min-width: 993px) {
    #header .main-nav .nav-list,
    #scrolled-header .nav-list {
        position: relative;
        gap: 2px !important;
        padding: 4px;
        border-radius: 999px;
        background: rgba(244, 241, 234, .035);
        border: 1px solid rgba(244, 241, 234, .07);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    }
    #header .main-nav .nav-item,
    #scrolled-header .nav-item {
        position: relative;
        z-index: 1;
        display: inline-block;
        padding: 7px 16px !important;
        border-radius: 999px;
        color: #b8c0c8 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-decoration: none !important;
        transition: color .25s ease;
    }
    #header .main-nav .nav-item::after,
    #scrolled-header .nav-item::after,
    #header .main-nav .nav-item.active::before { display: none !important; }
    #header .main-nav .nav-item:hover,
    #scrolled-header .nav-item:hover { color: #f4f1ea !important; }
    #header .main-nav .nav-item.active,
    #scrolled-header .nav-item.active { color: #ecdcb8 !important; }

    /* Sans JavaScript : la page active garde sa pastille */
    .nav-list:not(.has-indicator) .nav-item.active {
        background: rgba(201, 184, 150, .12) !important;
        box-shadow: inset 0 0 0 1px rgba(201, 184, 150, .3) !important;
    }

    /* La pastille qui glisse */
    .nav-indicator {
        position: absolute;
        z-index: 0;
        top: 4px;
        left: 0;
        height: calc(100% - 8px);
        width: 0;
        border-radius: 999px;
        background: rgba(201, 184, 150, .12);
        box-shadow: inset 0 0 0 1px rgba(201, 184, 150, .3);
        opacity: 0;
        pointer-events: none;
        transition: transform .4s cubic-bezier(.22, 1, .36, 1), width .4s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, background .25s ease;
    }
    .nav-indicator::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -5px;
        width: 16px;
        height: 2px;
        margin-left: -8px;
        border-radius: 2px;
        background: #c9b896;
        box-shadow: 0 0 8px rgba(201, 184, 150, .7);
        transition: opacity .25s ease;
    }
    .nav-indicator.is-on { opacity: 1; }
    .nav-indicator.is-survol { background: rgba(244, 241, 234, .06); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .1); }
    .nav-indicator.is-survol::after { opacity: 0; }
}

/* ---------- Boutons de droite : même hauteur, même rayon ---------- */
@media (min-width: 993px) {
    #header .action-buttons { gap: 8px !important; }
    #header .action-buttons > a:not(.btn-header-cta),
    #header .action-buttons .lang-menu__btn {
        height: 38px !important;
        min-width: 38px;
        border-radius: 12px !important;
        background: rgba(244, 241, 234, .035) !important;
        border: 1px solid rgba(244, 241, 234, .09) !important;
    }
    #header .action-buttons .btn-header-cta { height: 38px; display: inline-flex; align-items: center; padding: 0 18px !important; }
}

/* ---------- Barre flottante (après défilement) ---------- */
#scrolled-header .scrolled-nav-inner {
    background: linear-gradient(180deg, rgba(20, 26, 38, .97), rgba(13, 17, 26, .95)) !important;
    border: 1px solid rgba(244, 241, 234, .09) !important;
    border-radius: 999px !important;
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    padding: 4px !important;
}
#scrolled-header .nav-list { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ---------- Mobile : en-tête et menu ---------- */
@media (max-width: 992px) {
    #header .main-nav {
        background: linear-gradient(180deg, #10151f, #0b0f17) !important;
        border-right: 1px solid rgba(201, 184, 150, .14);
    }
    #header .main-nav .nav-item.active { color: #ecdcb8 !important; }
}

/* La lueur qui tourne autour de la barre flottante suit maintenant sa forme de capsule */
#scrolled-header { border-radius: 999px !important; padding: 1px !important; }
#scrolled-header::before { opacity: .55; }
#scrolled-header .scrolled-nav-inner { border: 0 !important; }