/* =============================================================
   LA BARRE DU SITE — une seule, la même partout.
   =============================================================

   ⛔ CE QU'ELLE REMPLACE. Le site avait ONZE barres différentes, une par page.
      Depuis `/insight/` on ne pouvait aller nulle part — pas même à l'accueil.
      Depuis `/radar/` on ne pouvait pas atteindre les autres instruments. Et
      la page de mentions légales du site s'annonçait « LE RADAR ».
      📏 *Un site dont chaque page invente sa navigation n'est pas un site,
      c'est une collection de pages.*

   ⭐ Le tiroir « Les outils » est un `<details>` NATIF : il s'ouvre au clavier,
      se ferme avec Échap, fonctionne sans une ligne de JavaScript et reste
      lisible pour un lecteur d'écran. Un menu fait à la main aurait demandé
      des rôles ARIA, un piège de focus et du script — pour moins bien.

   ⚠️ Chargée APRÈS la feuille de la page : elle doit pouvoir reprendre la main
      sur les règles `nav{…}` que style.css et radar.css posent déjà.
   ============================================================= */

nav.hb{
  position:sticky;top:0;z-index:30;
  background:rgba(7,7,10,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trait);
}
nav.hb .in{
  max-width:1120px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:22px;height:64px;
}

/* ---------- la marque, et le nom de la page ---------- */
nav.hb .marque{
  display:flex;align-items:center;gap:10px;flex:none;
  font-weight:600;letter-spacing:.13em;font-size:13px;color:var(--blanc);text-decoration:none;
}
nav.hb .marque:hover{text-decoration:none;color:var(--blanc)}
nav.hb .marque b{color:var(--soleil);font-weight:600}
nav.hb .marque em{
  font-style:normal;color:var(--numen);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding-left:11px;border-left:1px solid var(--trait);
}

/* ---------- les ancres de la page courante ---------- */
nav.hb .page{
  list-style:none;display:flex;align-items:center;gap:20px;margin:0;padding:0;
  min-width:0;overflow:hidden;
}
nav.hb .page a{color:var(--gris);font-size:14px;text-decoration:none;white-space:nowrap}
nav.hb .page a:hover{color:var(--blanc);text-decoration:none}

/* ---------- le bloc de droite ---------- */
nav.hb .droite{display:flex;align-items:center;gap:14px;margin-left:auto;flex:none}
nav.hb .club{
  color:var(--soleil);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;
}
nav.hb .club:hover{text-decoration:underline;text-underline-offset:3px}
nav.hb .langue{
  border:1px solid var(--trait);border-radius:6px;padding:4px 10px;
  font-size:11px;letter-spacing:.1em;color:var(--gris);text-decoration:none;
}
nav.hb .langue:hover{border-color:var(--soleil);color:var(--blanc);text-decoration:none}

/* ---------- le tiroir des outils ---------- */
nav.hb details.outils{position:relative}
nav.hb details.outils > summary{
  list-style:none;cursor:pointer;color:var(--gris);font-size:14px;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
nav.hb details.outils > summary::-webkit-details-marker{display:none}
nav.hb details.outils > summary::after{
  content:"";width:6px;height:6px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;
}
nav.hb details.outils[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
nav.hb details.outils > summary:hover{color:var(--blanc)}
nav.hb details.outils[open] > summary{color:var(--blanc)}
nav.hb .tiroir{
  position:absolute;right:0;top:calc(100% + 14px);width:min(92vw,330px);
  background:var(--ardoise);border:1px solid var(--trait);border-radius:12px;
  padding:8px;box-shadow:0 24px 48px rgba(0,0,0,.6);
}
nav.hb .tiroir a{
  display:block;padding:11px 13px;border-radius:9px;text-decoration:none;
  color:var(--blanc);font-size:14.5px;font-weight:600;line-height:1.35;
}
nav.hb .tiroir a small{
  display:block;color:var(--gris);font-size:12.5px;font-weight:400;margin-top:3px;
}
nav.hb .tiroir a:hover{background:var(--nuit);text-decoration:none}
nav.hb .tiroir a[aria-current]{background:var(--nuit)}
nav.hb .tiroir a[aria-current]::before{content:"◗ ";color:var(--soleil)}
nav.hb .tiroir hr{border:none;border-top:1px solid var(--trait);margin:7px 9px}
nav.hb .tiroir .titre{
  display:block;padding:9px 13px 5px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris-sourd);font-weight:600;
}

/* L'anneau de focus, sur tout ce qui se traverse au clavier. */
nav.hb a:focus-visible,nav.hb summary:focus-visible{
  outline:2px solid var(--numen);outline-offset:3px;border-radius:4px;
}

/* ---------- ce qui cède la place quand l'écran rétrécit ---------- */
/* 📏 L'ordre du sacrifice est délibéré : d'abord les ancres de la page (on est
   déjà dessus, on peut faire défiler), puis le nom de la page, jamais les
   portes vers les autres pages. */
@media(max-width:1000px){ nav.hb .page{display:none} }
@media(max-width:560px){
  nav.hb .in{padding:0 16px;gap:14px;height:58px}
  nav.hb .marque em{display:none}
  nav.hb .marque{font-size:11px;letter-spacing:.06em}
}
/* 🔴 LE PALIER QUI MANQUAIT — remis le 10/09/2026, apres la MEME panne qu'en aout.
   La refonte des onze barres en une seule a repris l'ordre du sacrifice, mais
   PAS le dernier cran : celui ou le nom de la marque s'efface.
   Mesure a 320 px (Chrome, emulation mobile, page en production) :
       32 (marges) + 126,1 (marque) + 14 (ecart) + 181,4 (outils+club+EN) = 353,5 px
   pour 320 disponibles. La barre debordait de 33 px, et un debordement de barre
   n'emporte pas que la barre : le navigateur elargit le viewport de toute la
   page (innerWidth mesure 337 au lieu de 320), donc TOUT le site se decale et
   se retrecit. C'est ce que voit un iPhone regle sur « Affichage → Agrandi »,
   qui ramene la largeur CSS a 320 px — pas un telephone exotique.
   ⭐ La place se reprend sur LA MARQUE, jamais sur les portes : le sceau reste,
   cliquable, et le titre de la page redit le nom juste dessous.
   ⚠️ `font-size:0` et non `display:none` sur le texte : « HORIZON BUILDER » est
   un noeud de texte NU dans le lien (pas de <span> a masquer), et il doit rester
   lu par les lecteurs d'ecran — un lien reduit a « ◗ » ne s'annonce plus.
   Seuil a 420 px et non 353 : il faut de la marge pour le jour ou la police de
   secours d'un telephone rend plus large que celle mesuree ici. */
@media(max-width:420px){
  nav.hb .marque{font-size:0;gap:0;letter-spacing:0}
  nav.hb .marque b{font-size:15px}
}

/* La barre du membre, quand elle existe, se pose AU-DESSUS et reste fine :
   deux barres épaisses l'une sur l'autre mangeraient l'écran d'un téléphone. */
.hb-membre + nav.hb{top:0}

/* =============================================================
   LE PIED DE PAGE : lectures + partage.
   ⛔ Aucun script de réseau social : ce sont de simples liens.
      Les vrais « boutons de partage » savent qui lit la page,
      même sans clic — sur ce site, ils seraient un reniement.
   ============================================================= */
.hb-pied{border-top:1px solid var(--trait);margin-top:64px}
.hb-pied .in{max-width:1120px;margin:0 auto;padding:30px 24px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.hb-pied .lectures{margin:0;font-family:var(--mono);font-size:13px;color:var(--gris-sourd);
  letter-spacing:.06em;white-space:nowrap}
.hb-pied .lectures b{color:var(--blanc);font-weight:600}
.hb-pied .lectures[hidden]{display:none}
.hb-pied .partage{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;margin-left:auto}
.hb-pied .partage .t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris-sourd);font-weight:600}
.hb-pied .partage a,.hb-pied .partage button{
  color:var(--gris);font-size:13.5px;text-decoration:none;background:none;
  border:1px solid var(--trait);border-radius:18px;padding:6px 13px;
  font-family:inherit;cursor:pointer;white-space:nowrap}
.hb-pied .partage a:hover,.hb-pied .partage button:hover{
  border-color:var(--soleil);color:var(--blanc);text-decoration:none}
.hb-pied .note{width:100%;margin:0;font-size:12.5px;color:var(--gris-sourd);line-height:1.5}
@media(max-width:560px){
  .hb-pied .in{padding:24px 16px}
  .hb-pied .partage{margin-left:0}
}