/* ══ nb : barre flottante des pages publiques (ordinateur, 769 px et plus). Pilule de verre sombre détachée des bords,
   bulle de verre clair qui glisse sous le lien lu, survolé ou au focus (posée par barre.js).
   Accueil : la bulle suit la lecture, section par section. Autres pages (data-nb-page sur #nav) : elle se pose sous le
   lien de la page en cours, ou n'apparaît qu'au survol et au focus si le menu n'a pas ce lien.
   Sous 769 px, rien ne s'applique : la barre mobile de chaque page reste celle d'avant. ══ */

/* La feuille entière ne s'applique qu'à partir de 769 px (attribut media de son lien, sur chaque page). Sous cette largeur,
   barre.js retire la bulle par l'attribut hidden. */
.nb-bulle {
  position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden;
  border-radius: 100px; pointer-events: none; opacity: 0;
  will-change: transform;   /* couche propre : le glissement ne repeint rien d'autre */
  /* Verre épais et clair (Liquid Glass, 08/10) : presque pas de voile, le mot garde l'encre de la pilule sous lui.
     Le verre ne fait qu'éclaircir et réchauffer un peu ce qu'il couvre (le fond chaud de la pilule, et le fantôme du titre
     qui passe derrière elle au défilement) : il ne rend rien plus net, la pilule a déjà tout flouté à 26 px. */
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(3px) saturate(170%) brightness(1.06); backdrop-filter: blur(3px) saturate(170%) brightness(1.06);
  /* Liseré qui suit la courbe, rebord haut éclairé, lueur intérieure douce en bas, lumière qui se courbe le long du bord */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.62),
              inset 0 -6px 10px -6px rgba(255,255,255,.2), inset 0 0 12px rgba(255,255,255,.05);
  transition: opacity .25s;   /* le déplacement, lui, est un ressort calculé par barre.js (transform seul) */
}
.nb-bulle::before {   /* reflet spéculaire posé sur le bord haut, plus vif à gauche ; il s'arrête au-dessus des lettres (WebKit le rend plus clair : 7:1 au pire sur crème) */
  content: ''; position: absolute; inset: 1px; border-radius: inherit;
  background: radial-gradient(60% 34% at 28% 0%, rgba(255,255,255,.32), rgba(255,255,255,0) 70%),
              linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 34%);
}
.nb-reflet {   /* lumière intérieure qui se décale avec la vitesse, comme à travers une lentille (déplacé par barre.js) */
  position: absolute; inset: 0; border-radius: inherit; will-change: transform;
  background: radial-gradient(45% 80% at 50% 110%, rgba(255,255,255,.16), rgba(255,255,255,0) 100%);
}
@media (prefers-reduced-motion: reduce) { .nb-bulle { transition: none; } }

@media (min-width: 769px) {
  #nav.nb-flottante {
    position: fixed; top: 14px; left: 0; right: 0; height: auto; border-bottom: 0;   /* la barre de faq.html est collante, haute de 64 px, avec un liseré bas : la pilule l'emporte */
    width: min(1120px, calc(100% - 48px)); margin: 0 auto;
    /* 1,5 rem du bord gauche au « B » du logo. À droite, l'icône de connexion garde 3 px de blanc dans son tracé (encre
       jusqu'à x = 25 sur 28) : retirés du retrait, l'espace visible est le même des deux côtés (mesures dans BUILD-D.md). */
    padding: .6rem calc(1.5rem - 3px) .6rem 1.5rem; border-radius: 100px;
    background: rgba(13,11,8,.55);   /* --dark à 55 % : en haut de page, le héros se voit à travers */
    -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.1), 0 12px 32px -14px rgba(0,0,0,.7);
    transition: background .4s, box-shadow .4s;   /* même durée sur toutes les pages (faq.html n'en avait pas) */
  }
  /* Le verre se densifie dès qu'on défile : le titre qui passe derrière ne gêne plus la lecture des liens (UX-02, mesuré dans BUILD-C.md).
     La classe est posée par le script de l'accueil ou de beeunik.html, et par barre.js sur les pages à part. */
  #nav.nb-flottante.scrolled { background: rgba(13,11,8,.8); border-bottom: 0; }
  /* Au-dessus des sections claires (nav-light, posé par updateNavLight() d'index.html), plus dense encore.
     La barre crème est réservée au téléphone (mobile.css) : ici, l'encre reste celle de la barre sombre
     (liens à .55 : 6,2:1 sur le verre dense, 5,4:1 sur le verre posé sur la crème). */
  #nav.nb-flottante.nav-light {
    background: rgba(13,11,8,.88);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.12), 0 12px 32px -14px rgba(0,0,0,.45);
  }
  /* Un seul menu, une seule encre sur toutes les pages : valeurs de l'accueil (beeunik.html et faq.html ont les leurs hors pilule) */
  #nav.nb-flottante .nav-links { position: relative; z-index: 1; gap: 2.5rem; }   /* z-index : les libellés passent devant la bulle */
  #nav.nb-flottante .nav-links a { color: rgba(255,255,255,.55); font-size: .88rem; font-weight: 500; display: inline-block; padding: .4rem 0; }
  #nav.nb-flottante .nav-actions { gap: .75rem; }
  #nav.nb-flottante .btn-nav { padding: .5rem 1.2rem; font-size: .82rem; font-weight: 700; }
  #nav.nb-flottante .nav-links a.nb-actif { color: #fff; }   /* sous la lentille, blanc plein sur l'encre de la pilule : 10,5:1 au pire (crème), 12,7:1 sur sombre ; le verre rempli donnait 5,2:1 (BUILD-BULLE-TRANSPARENTE.md) */
  #nav.nb-flottante .nav-links a:hover, #nav.nb-flottante .nav-links a:focus-visible { color: #fff; }
  #nav.nb-flottante .nb-bulle.nb-visible { opacity: 1; }
}