/* nav-public.css — La barre du haut des pages publiques
 *
 * Elle etait recopiee a l'identique dans le bloc <style> de `faq.html`,
 * `about.html` et `privacy.html` : 101 lignes, trois fois, au caractere pres.
 * Le blog en aurait fait une quatrieme. Trois copies d'une meme barre, c'est
 * trois endroits ou elle peut diverger sans que personne regarde, et on l'a
 * deja vu ici : le blog gardait sa propre barre et il a fallu la reparer a
 * part, longtemps apres les autres.
 *
 * `body > nav` et non `nav` : le blog a DEUX elements <nav>, la barre et son
 * fil d'Ariane. Le selecteur nu repeignait le second en barre fixe, qui se
 * retrouvait collee en haut de l'ecran par-dessus la vraie. La barre est le
 * seul <nav> enfant direct de <body> sur les cinq pages.
 * Chargee AVANT `nav-mobile.css`, qui replie cette barre sur telephone.
 *
 * Elle attend trois jetons de la page qui l'inclut : `--cream`, `--ink` et
 * `--font-sans`. Le blog les declare en alias de sa propre palette.
 */

/* La gouttiere et la largeur du contenu, communes aux quatre pages secondaires.
   Elles vivent ici et non dans chaque page : c'est la seule feuille que les
   quatre chargent, et ce sont les memes valeurs que `landing.css`. Une barre
   identique d'une page a l'autre ne suffit pas si le contenu dessous ne se cale
   pas sur la meme ligne.

   Une page qui declare les siennes les impose : la landing le fait, et elle ne
   charge de toute facon pas cette feuille. */
:root {
    --gouttiere: clamp(3rem, 9vw, 10rem);
    --container: 1440px;
}

@media (max-width: 968px) {
    :root {
        --gouttiere: 1.25rem;
    }
}

/* Le creux lateral est le MEME calcul que sur la landing (`landing.css`), et
   ce n est pas un doublon a supprimer : la landing ne charge pas cette feuille
   et cette feuille n est chargee par aucune page qui charge la landing. Les
   deux doivent donner le meme resultat au pixel, sinon la barre saute de
   quelques dizaines de pixels en passant de l accueil a la FAQ.

   La barre traverse l ecran, son contenu non : `max()` lui donne la gouttiere
   sur les ecrans etroits, et la moitie de ce qui depasse du contenu des que
   l ecran est plus large. Les valeurs passent par des variables AVEC REPLI :
   une page qui definit les siennes les impose, les quatre pages secondaires
   n en definissent pas et prennent celles ecrites ici. */
body > nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1.1rem max(var(--gouttiere, clamp(3rem, 9vw, 10rem)),
                        calc((100% - var(--container, 1440px)) / 2));
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(26, 23, 18, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(247, 242, 233, 0.08);
    transition: padding 0.3s ease, background 0.3s ease;
}

body > nav.scrolled {
    padding: 0.7rem max(var(--gouttiere, clamp(3rem, 9vw, 10rem)),
                        calc((100% - var(--container, 1440px)) / 2));
    background: rgba(26, 23, 18, 0.88);
}

.logo {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cream);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Une decoupe et non une image : le fichier du logo est dessine en
   `currentColor`, qui ne vaut rien dans une balise `<img>`, un SVG y etant un
   document isole sans couleur heritee. Il sortirait noir sur cette barre
   sombre. En masque il prend la couleur du lien, quelle qu elle soit. */
.logo-mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../img/logo-mr.svg') center / contain no-repeat;
    mask: url('../img/logo-mr.svg') center / contain no-repeat;
    transition: opacity 0.3s ease;
}

.logo:hover .logo-mark {
    opacity: 0.85;
}

.logo-text {
    display: inline-block;
    white-space: nowrap;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
    margin-right: 1.25rem;
}

.nav-links {
    display: flex;
    gap: 0.25rem;
    list-style: none;
}

.nav-links a {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cream);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-links a:hover {
    color: var(--cream);
    background: rgba(247, 242, 233, 0.07);
}

/* Page courante : encadrée dans la nav */
.nav-links a.nav-active {
    border: 1px solid rgba(247, 242, 233, 0.45);
}

.nav-cta {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.65rem 1.4rem;
    background: var(--cream);
    color: var(--ink);
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.nav-cta:hover {
    background: #ffffff;
    transform: translateY(-1px);
}
