/* ============================================================
   Barre de navigation et pied de page - FEUILLE COMMUNE
   ------------------------------------------------------------
   Source unique du style du « chrome » des 69 pages du site.
   Le markup correspondant vient de `partials/nav.html` et
   `partials/footer.html` (cf. partials/README.md).

   Avant cette feuille, ces regles etaient dupliquees en ligne
   dans 59 pages et dans `module-detail.css`. On y a releve
   76 selecteurs, dont 22 divergents : trois valeurs de `gap`,
   deux styles de titre de colonne, trois implementations du
   bouton burger et surtout TROIS breakpoints differents pour
   basculer en menu tiroir (600, 900 et 960 px). Sur une
   tablette de 800 px, les articles de blog affichaient donc un
   menu de 9 entrees serre la ou l'accueil montrait deja le
   burger.

   Reference retenue : `index.html`, page de reference du design.
   Breakpoint unifie a 960 px, le plus large - necessaire depuis
   que le menu compte une entree « Legal ».

   COULEUR : ne jamais ecrire la teinte en dur ici. Elle vient de
   `--purple`, que chaque page module redefinit (orange pour
   Adherents, rose pour Facturation...). C'est ce qui permet a
   un markup commun de rester thematise.
   ============================================================ */

/* ── Barre de navigation ──
   `--nav-bg` : les pages a fond CLAIR (articles de blog) ont besoin d'une
   barre opaque en permanence, sinon leur texte blanc devient invisible. Les
   pages a fond sombre gardent une barre transparente qui s'assombrit au
   scroll. La variable porte cette difference, exactement comme `--purple`
   porte la teinte : un markup et une feuille communs, un theme par page. */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: 64px; padding: 0 40px;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--nav-bg, transparent);
    transition: background .4s, box-shadow .4s;
}
/* Le flou reste sur le seul etat `scrolled` : applique en permanence, il
   floutait l'arriere-plan sous les barres TRANSPARENTES du haut de page.
   Les pages a barre opaque le perdent, sans effet visible a 97 % d'opacite. */
nav.scrolled {
    background: var(--nav-bg, rgba(13,13,26,0.96));
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.nav-logo { font-size: 20px; font-weight: 800; color: #fff; text-decoration: none; }
.nav-logo span { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* `align-items: center` : sans lui, les <li> s'etirent (stretch) sur la hauteur
   de « Legal » (qui porte 10px de padding pour ponter le sous-menu), et son
   libelle se retrouve 10px plus bas que les autres entrees. */
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }
.nav-links a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: #fff; }

/* ── Bouton « Se connecter » ── */
.nav-cta {
    line-height: 1; text-decoration: none; display: inline-flex;
    border: none; cursor: pointer; align-items: center; gap: 0.6rem;
    background-color: var(--purple); color: #fff; border-radius: 10rem;
    font-weight: 700; font-size: 13px; font-family: inherit;
    padding: 0.55rem 0.85rem 0.55rem 1.1rem;
    white-space: nowrap; transition: background-color 0.3s, color 0.3s;
}
.nav-cta:hover { background-color: #fff; color: #0d0d1a; }
.nav-cta__icon {
    flex-shrink: 0; width: 22px; height: 22px; position: relative;
    color: var(--purple); background-color: #fff; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    transition: background-color 0.3s, color 0.3s;
}
.nav-cta:hover .nav-cta__icon { background-color: var(--purple); color: #fff; }
.nav-cta__icon svg { position: absolute; transition: transform 0.3s ease-in-out; }
.nav-cta__icon svg:last-child { transform: translate(-150%, 150%); }
.nav-cta:hover .nav-cta__icon svg:first-child { transform: translate(150%, -150%); }
.nav-cta:hover .nav-cta__icon svg:last-child { transform: translate(0); transition-delay: 0.1s; }

/* ── Bouton burger ── */
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; margin-left: 12px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: all .3s; }
.nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Entree « Legal » et son sous-menu ──
   Ouverture au survol ET au focus clavier : sans `:focus-within`,
   le sous-menu serait inatteignable sans souris. Aucun JavaScript. */
.nav-legal { position: relative; padding: 10px 0; }
.nav-legal > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-legal > a::after {
    content: ""; width: 5px; height: 5px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform .2s;
}
.nav-legal:hover > a::after, .nav-legal:focus-within > a::after { transform: rotate(-135deg); margin-top: 1px; }
.nav-legal-menu {
    position: absolute; top: 100%; right: 0; z-index: 210;
    margin: 0; padding: 8px 0; min-width: 212px; list-style: none;
    background: #15152b; border: 1px solid rgba(255,255,255,0.10);
    border-radius: 0 0 10px 10px; box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s, visibility .18s, transform .18s;
}
.nav-legal:hover .nav-legal-menu, .nav-legal:focus-within .nav-legal-menu {
    opacity: 1; visibility: visible; transform: none;
}
.nav-legal-menu li { border: 0; }
.nav-legal-menu a { display: block; padding: 9px 16px; font-size: 13px; white-space: nowrap; }
.nav-legal-menu a:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* ── Pied de page ── */
footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 60px 40px 28px; background: rgba(0,0,0,0.3); }
.footer-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
    margin-bottom: 40px;
}
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.4); line-height: 1.7; margin-top: 10px; max-width: 300px; }
.footer-links-group { display: flex; gap: 60px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.footer-col a { color: rgba(255,255,255,0.4); text-decoration: none; font-size: 14px; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-copy {
    max-width: 1100px; margin: 0 auto;
    font-size: 13px; color: rgba(255,255,255,0.25);
    border-top: 1px solid rgba(255,255,255,0.05); padding-top: 24px; text-align: center;
}

/* ── Tablette et mobile : menu en tiroir ── */
@media (max-width: 960px) {
    nav { padding: 0 16px; }
    .nav-links { display: none; }
    .nav-burger { display: block; }
    .nav-links.open {
        display: flex; flex-direction: column; align-items: stretch; position: fixed;
        top: 64px; left: 0; right: 0;
        background: rgba(13,13,26,0.98); padding: 20px 24px; gap: 4px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav-links.open li { border-bottom: 1px solid rgba(255,255,255,0.05); }
    .nav-links.open a { padding: 14px 8px; display: block; font-size: 15px; }
    /* Pas de survol au doigt : le sous-menu « Legal » est deplie. */
    .nav-links.open .nav-legal-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        background: none; border: 0; box-shadow: none;
        padding: 0 0 6px 14px; min-width: 0;
    }
    .nav-links.open .nav-legal > a::after { display: none; }
    .footer-links-group { flex-direction: column; gap: 28px; }
}

@media (max-width: 600px) {
    footer { padding: 50px 20px 24px; }
}

/* ── Petits ecrans : le bouton « Se connecter » chevauchait le logo ──
   Sous 400 px, logo + bouton + burger ne tiennent plus sur une ligne :
   le bouton passait par-dessus le logo. On resserre le bouton et on
   laisse le logo se reduire plutot que de le tronquer. */
@media (max-width: 400px) {
    nav { padding: 0 10px; gap: 8px; }
    .nav-logo { font-size: 17px; }
    .nav-cta { font-size: 12px; padding: 0.5rem 0.7rem 0.5rem 0.85rem; gap: 0.45rem; }
    .nav-cta__icon { width: 19px; height: 19px; }
    .nav-burger { padding: 8px 4px; margin-left: 4px; }
}