/* =======================================================================
   NTX — Barre de navigation partagée (composant unique, multi-pages)
   Namespacé en .ntxnav* + variables locales => aucun conflit avec
   style.css / shop.css / shop2026.css / ntx2026.css.
   Modifier UNIQUEMENT ce fichier pour faire évoluer la nav du site.
   ======================================================================= */
.ntxnav, .ntxnav-mobile {
    --nv-gold: #c9a227;
    --nv-gold-2: #e8c547;
    --nv-text: #f8f6f0;
    --nv-muted: #9a9590;
    --nv-surface: rgba(255, 255, 255, 0.04);
    --nv-line: rgba(201, 162, 39, 0.16);
    --nv-line-strong: rgba(201, 162, 39, 0.34);
    --nv-fd: 'Cinzel', serif;
    --nv-fb: 'Montserrat', sans-serif;
    box-sizing: border-box;
}
.ntxnav *, .ntxnav *::before, .ntxnav *::after,
.ntxnav-mobile *, .ntxnav-mobile *::before, .ntxnav-mobile *::after { box-sizing: border-box; }

.ntxnav {
    position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
    width: calc(100% - 2rem); max-width: 1220px; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.55rem 0.55rem 0.55rem 1.2rem; border-radius: 100px;
    background: rgba(12, 11, 9, 0.62); border: 1px solid var(--nv-line);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.ntxnav.scrolled {
    background: rgba(7, 6, 5, 0.88);
    box-shadow: 0 16px 44px -22px rgba(0, 0, 0, 0.85);
    border-color: var(--nv-line-strong);
}
.ntxnav-logo { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.ntxnav-logo img {
    width: 38px; height: 38px; border-radius: 50%; object-fit: contain;
    background: #000; display: block;
}
.ntxnav-links { display: flex; align-items: center; gap: 0.2rem; }
.ntxnav-links a {
    font-family: var(--nv-fb); font-weight: 600; font-size: 0.86rem; color: var(--nv-muted);
    padding: 0.55rem 0.9rem; border-radius: 100px; text-decoration: none;
    transition: color 0.2s, background 0.2s; white-space: nowrap;
}
.ntxnav-links a:hover { color: var(--nv-text); background: var(--nv-surface); }
.ntxnav-links a.is-active { color: var(--nv-gold); background: rgba(201, 162, 39, 0.10); }

.ntxnav-right { display: flex; align-items: center; gap: 0.5rem; }
.ntxnav-socials { display: flex; gap: 0.1rem; }
.ntxnav-socials a {
    width: 34px; height: 34px; display: grid; place-items: center; color: var(--nv-muted);
    border-radius: 50%; text-decoration: none; transition: color 0.2s, background 0.2s;
}
.ntxnav-socials a:hover { color: var(--nv-gold); background: var(--nv-surface); }
.ntxnav-lang {
    display: flex; align-items: center; color: var(--nv-muted); font-family: var(--nv-fb);
    font-size: 0.82rem; font-weight: 600; padding: 0 0.3rem; text-decoration: none;
}
.ntxnav-lang:hover { color: var(--nv-gold); }
.ntxnav-join {
    font-family: var(--nv-fb); font-weight: 700; font-size: 0.86rem; color: #0a0908;
    background: linear-gradient(120deg, var(--nv-gold-2), var(--nv-gold));
    padding: 0.6rem 1.1rem; border-radius: 100px; text-decoration: none; white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
}
.ntxnav-join:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px var(--nv-gold); }
.ntxnav-burger {
    display: none; width: 42px; height: 42px; border: 1px solid var(--nv-line);
    background: var(--nv-surface); border-radius: 12px; color: var(--nv-text);
    font-size: 1.1rem; cursor: pointer; align-items: center; justify-content: center;
}

.ntxnav-mobile {
    position: fixed; inset: 0; z-index: 999; background: rgba(5, 4, 4, 0.97);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.ntxnav-mobile.open { opacity: 1; pointer-events: auto; }
.ntxnav-mobile a {
    font-family: var(--nv-fd); font-size: 1.55rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--nv-text); text-decoration: none;
}
.ntxnav-mobile a:hover, .ntxnav-mobile a.is-active { color: var(--nv-gold); }
.ntxnav-mobile .ntxnav-mobile-lang { font-size: 1rem; color: var(--nv-muted); text-transform: none; }
.ntxnav-mobile .ntxnav-join { font-size: 1rem; }

@media (max-width: 920px) {
    .ntxnav-links { display: none; }
    .ntxnav-socials, .ntxnav-lang { display: none; }
    .ntxnav-burger { display: flex; }
}