/* =============================================================================
   BARRE DE NAVIGATION DU SITE
   =============================================================================
   Partagée entre l'application (index.html) et les pages de contenu générées,
   qui ne chargent pas style.css. Ces règles vivaient dans style.css : les
   pages de contenu portaient donc un en-tête différent — même marque, mais ni
   les mêmes rubriques, ni la même allure. Un visiteur venu d'une recherche
   arrivait sur un site qui n'avait pas l'air du même.

   Ce fichier est la seule définition. Le dupliquer dans contenu.css aurait
   garanti que les deux barres divergent à la première retouche.

   Les rubriques sont des boutons dans l'application (elles changent de
   section sans recharger) et des liens sur les pages statiques (qui pointent
   vers /?vue=...). Les deux portent la classe .lien-site et se ressemblent
   donc trait pour trait.
   ============================================================================= */

.barre-site {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.9rem 1.5rem;
    background: rgba(12, 16, 34, 0.94);
    border-bottom: 1px solid var(--cosmic-blue);
}

.marque-site {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    color: var(--cosmic-white);
    text-decoration: none;
    white-space: nowrap;
}

.marque-site em { color: var(--cosmic-gold); font-style: normal; }

.liens-site { display: flex; gap: 0.4rem; margin-left: auto; }

.lien-site {
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--cosmic-silver);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.lien-site:hover { color: var(--cosmic-white); }

.lien-site.active {
    color: var(--cosmic-white);
    border-bottom-color: var(--cosmic-gold);
}

.bascule-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    margin-left: auto;
}

.bascule-menu span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--cosmic-silver);
}

.barre-site .langue-selecteur {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    margin: 0;
    border: 1px solid var(--cosmic-blue);
    border-radius: 6px;
    background: transparent;
}

.barre-site .langue-btn {
    font: inherit;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    padding: 0.28rem 0.5rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--cosmic-silver);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.barre-site .langue-btn:hover { color: var(--cosmic-white); }

.barre-site .langue-btn[aria-pressed="true"] {
    background: var(--cosmic-blue);
    color: var(--cosmic-white);
}

.reglages-site {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/* ---- Repli mobile -------------------------------------------------------- */

@media (max-width: 860px) {
    .bascule-menu { display: flex; }

    .liens-site {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--cosmic-dark);
        border-bottom: 1px solid var(--cosmic-blue);
        padding: 0.5rem;
        margin: 0;
    }
    .liens-site.ouvert { display: flex; }
    .lien-site { text-align: left; border-bottom: none; border-left: 2px solid transparent; }
    .lien-site.active { border-left-color: var(--cosmic-gold); border-bottom-color: transparent; }
    .barre-site { flex-wrap: wrap; gap: 0.8rem; }
    .reglages-site { order: 3; }
}