/* ============================================================
   BARRE DE NAVIGATION — blanche, collante
   ------------------------------------------------------------
   Celle de la page évènement, sortie de son <style> pour servir
   tout le site. Elle remplace la pilule orange (pill-nav.css),
   dont le fichier reste chargé : il porte aussi tout le pied de
   page. On y masque seulement la barre, pas le reste.

   Les couleurs passent par les jetons de la page quand elle en
   a (--panel, --ink…), sinon par la valeur de repli écrite ici :
   le fichier fonctionne donc seul, sur n'importe quelle page.
   ============================================================ */

/* ── L'ancienne pilule orange et la place qu'elle réservait ── */
.pill-nav-wrapper { display: none !important; }
/* pill-nav.css réserve 88 px (66 sur téléphone) en haut du body pour
   sa barre fixe. Celle-ci est collante, donc dans le flux : elle
   occupe sa place elle-même et n'a rien à faire réserver. */
/* La hauteur de la barre, rendue au contenu : 62 px, 56 sur telephone. */
body { padding-top: 62px !important; }
@media (max-width: 900px) { body { padding-top: 56px !important; } }

/* ── La barre ──
   Fixe et non collante : « sticky » lache des qu'un ancetre porte un
   overflow ou un transform, ce qui arrive sur plusieurs pages du site.
   Fixe, elle ne depend de personne. En contrepartie elle sort du flux,
   donc on reserve sa hauteur en haut du body (regle plus bas). */
.nav-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    background: color-mix(in srgb, var(--panel, #fff) 86%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--panel-brd, #e9e4e2);
    font-family: var(--f-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
}
.nav-in {
    position: relative; width: min(1180px, 100% - 40px); margin-inline: auto;
    height: 62px; display: flex; align-items: center; gap: 26px;
}

/* Une image et non du texte : la marque ne se recompose pas. */
.nav-brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.nav-brand img { display: block; height: 26px; width: auto; }

/* Centrés sur la barre, pas sur ce qui reste à droite du logo. */
.nav-links {
    position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px;
    list-style: none; margin: 0; padding: 0;
}
/* Pilule, comme tout ce qui se clique sur le site : la forme ne dit pas
   ce que fait le lien, elle dit qu'on peut appuyer dessus. */
.nav-links a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 50px;
    color: var(--ink-3, #8b97a8); font-size: 14px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--ink, #1a2438); background: var(--hair, #f0ecea); }
.nav-links a.on { color: var(--ink, #1a2438); }
.nav-links svg { display: block; width: 20px; height: 20px; flex: none; }

/* ── Téléphone : hamburger et menu déroulant ── */
.nav-burger {
    display: none; margin-left: auto; flex: none;
    width: 40px; height: 40px; border: 0; border-radius: 50px;
    background: none; cursor: pointer; color: var(--ink, #1a2438);
    align-items: center; justify-content: center;
}
.nav-burger svg { width: 22px; height: 22px; display: block; }
.nav-burger:hover { background: var(--hair, #f0ecea); }

.nav-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    background: color-mix(in srgb, var(--panel, #fff) 96%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--panel-brd, #e9e4e2);
    display: none; flex-direction: column; padding: 6px 12px 12px;
}
.nav-menu.on { display: flex; }
.nav-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 12px; border-radius: 14px;
    color: var(--ink-2, #46536a); font-size: 15px; font-weight: 600; text-decoration: none;
}
.nav-menu a.on { color: var(--ink, #1a2438); }
.nav-menu a:hover { background: var(--hair, #f0ecea); }
.nav-menu svg { width: 20px; height: 20px; flex: none; }

@media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-burger { display: flex; }
    .nav-in { height: 56px; justify-content: space-between; width: min(1180px, 100% - 32px); }
    /* Un peu d'air à gauche : collée au bord, la marque touchait l'écran. */
    .nav-brand { margin-left: 12px; }
}