/* bhe-header.v1.css — LA source unique du style de l'en-tete.
 *
 * 2026-09-05 (Alex : « le header de la landing est parfait, mais des que je
 * vais sur une autre page il change, et l'onglet Outils bugue »). Chacune des
 * 64 pages du site portait sa propre copie du header : elles ont derive, les
 * pages outils ont perdu la bascule de langue et le pont de survol du menu.
 *
 * Ce fichier est EXTRAIT de tools/index.html par tools/sync-header.py. Ne pas
 * l'editer a la main : editer la landing, puis relancer la synchro (deploy.sh
 * le fait). Les variables (--lime, --ease, --z-nav…) viennent de la feuille de
 * la page hote ; toutes celles utilisees ici existent deja dans features.css.
 */
.nav{position:sticky;top:12px;z-index:var(--z-nav);pointer-events:none}
.nav-in{
  pointer-events:auto;
  display:flex;align-items:center;gap:1.8rem;height:60px;padding:0 .9rem 0 1.1rem;
  border:1px solid var(--line);border-radius:16px;
  background:rgba(7,8,6,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.brand img{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(191,255,0,.5))}
.nav-links{display:flex;align-items:center;gap:1.35rem;margin-left:auto;font-size:.92rem;font-weight:500}
.nav-links a{color:var(--body);transition:color .16s var(--ease)}
.nav-links a:hover{color:var(--ink)}
/* Bascule de langue : un badge, pas un lien perdu dans la ligne. Mono, comme
   toutes les etiquettes techniques du site. */
/* ══ Zone utilitaire du header (2026-08-22) ══
   Avant : liens de nav, compte, langue et CTA etaient a plat dans la meme
   rangee — aucune hierarchie, et le pave « EN » flottait entre deux elements
   sans rapport. On separe la NAVIGATION (ce que je consulte) de la ZONE
   UTILITAIRE (qui je suis / ce que je fais) par un filet vertical. */
.nav-util{display:flex;align-items:center;gap:.9rem;margin-left:1.3rem;padding-left:1.3rem;
  border-left:1px solid var(--line2)}
/* Compte : BOUTON SECONDAIRE, pas un lien texte orphelin. Colle au CTA, un
   simple libelle se lisait comme un lien de nav egare et faisait trois
   langages visuels d'affilee (pastille, texte nu, bouton plein). Desormais
   une paire lisible : contour discret ici, aplat lime pour l'action primaire
   — la hierarchie passe par la forme et l'espace, pas par la couleur seule. */
.nav-acct{display:inline-flex;align-items:center;gap:.45rem;height:38px;padding:0 .95rem;
  border:1px solid var(--line2);border-radius:999px;color:var(--body);
  font-size:.88rem;font-weight:600;line-height:1;white-space:nowrap;
  transition:color .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease)}
.nav-acct svg{width:15px;height:15px;opacity:.7;transition:opacity .16s var(--ease)}
.nav-acct:hover{color:var(--ink);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
.nav-acct:hover svg{opacity:1}
.nav-acct:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
/* un cran d'air de plus avant l'action primaire : elle doit se detacher
   du bouton secondaire, pas former un bloc avec lui. */
.nav-util>.btn{margin-left:.25rem}
/* Langue : controle segmente. Les deux langues sont visibles, l'active est
   surlignee, le changement se fait en UN clic — pas de menu deroulant pour
   deux entrees. Fond neutre volontaire : le lime reste reserve au CTA. */
.nav-lang{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.nav-lang>*{display:grid;place-items:center;min-width:32px;height:30px;border-radius:9px;
  font:700 .74rem/1 var(--sans);letter-spacing:.02em;color:var(--muted);
  transition:color .16s var(--ease),background .16s var(--ease)}
.nav-lang>a:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.nav-lang>a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.nav-lang .nav-lang-on{color:var(--ink);background:rgba(255,255,255,.11);cursor:default}
/* Mobile : la nav disparait deja, mais compte et CTA restent accessibles —
   avant, le header mobile ne donnait AUCUN acces au compte. */
@media (max-width:760px){.nav-util{margin-left:auto;padding-left:0;border-left:0;gap:.7rem}}
@media (max-width:480px){.nav-lang{display:none}}
.nav .btn{padding:.55em 1.2em;font-size:.9rem}
@media (max-width:760px){.nav-links{display:none}.nav-in{justify-content:space-between}}
/* dropdown "Outils" — hiérarchisé, SVG, clavier (hover + focus-within) */
.nav-dd{position:relative}
/* Pont invisible : sans lui, le trajet souris entre « Outils » et le menu
   traverse une zone sans :hover et le menu se ferme sous le curseur. */
.nav-dd::after{content:'';position:absolute;left:-12px;right:-12px;top:100%;height:18px;display:none}
.nav-dd:hover::after,.nav-dd:focus-within::after{display:block}
.nav-dd-menu{--dd-pad:.5rem}

.nav-dd-top{cursor:pointer;display:inline-flex;align-items:center;gap:.34rem}
/* chevron SVG plutot que le caractere ▾ : il pivote a l'ouverture, et un
   glyphe texte ne s'aligne jamais proprement sur la ligne de base. */
.nav-dd-chev{width:11px;height:11px;flex:none;opacity:.5;transition:transform .22s var(--ease),opacity .22s}
.nav-dd:hover .nav-dd-chev,.nav-dd:focus-within .nav-dd-chev{transform:rotate(180deg);opacity:1}
.nav-dd-menu{
  position:absolute;top:100%;left:50%;
  width:min(438px,calc(100vw - 28px));padding:.9rem .5rem .5rem;
  background:rgba(9,11,8,.975);backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid var(--line2);border-radius:16px;
  box-shadow:0 22px 52px -14px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease),visibility .18s,transform .18s var(--ease);
  transform:translateX(-50%) translateY(-7px);
  z-index:60;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}

/* Outil mis en avant : grille [icone][nom + description]. La description passe
   SOUS le nom — en ligne avec margin-left:auto elle creait un ecart variable
   d'un item a l'autre, et « Sous-titres animes » cassait sur deux lignes. */
.dd-star{
  display:grid;grid-template-columns:34px 1fr;align-items:center;column-gap:.78rem;
  padding:.58rem .65rem;border-radius:12px;color:var(--body);
  transition:background .16s var(--ease),transform .16s var(--ease);
}
.dd-ico{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:9px;color:var(--lime);
  background:rgba(191,255,0,.07);border:1px solid rgba(191,255,0,.14);
  transition:background .16s,border-color .16s;
}
.dd-star b{display:block;font-size:.94rem;font-weight:600;color:var(--ink);line-height:1.25;letter-spacing:-.015em}
.dd-sub{display:block;margin-top:2px;font:400 .78rem/1.35 var(--sans);color:var(--muted);letter-spacing:-.005em}
.dd-star:hover{background:rgba(191,255,0,.06)}
.dd-star:hover .dd-ico{background:rgba(191,255,0,.14);border-color:rgba(191,255,0,.3)}

/* Les dix autres : deux colonnes, poids typographique volontairement inferieur
   aux quatre du dessus — c'est la hierarchie qui manquait, pas des icones. */
.dd-label{padding:.5rem .65rem .35rem;font:500 .72rem/1 var(--sans);color:var(--muted);letter-spacing:-.005em}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px .35rem;margin-bottom:.15rem}
.dd-grid a{
  display:block;padding:.4rem .65rem;border-radius:8px;
  font-size:.83rem;color:var(--body);
  transition:background .14s,color .14s;
}
.dd-grid a:hover{background:rgba(191,255,0,.07);color:var(--ink)}
.nav-dd-sep{height:1px;background:var(--line);margin:.4rem .35rem}
.dd-all{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem;margin-top:.15rem;border-radius:10px;
  font-size:.84rem;font-weight:600;color:var(--lime);
  background:rgba(191,255,0,.055);
  transition:background .16s;
}
.dd-all:hover{background:rgba(191,255,0,.12)}
.dd-all .arr{transition:transform .18s var(--ease)}
.dd-all:hover .arr{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .nav-dd-menu,.nav-dd-chev,.dd-star,.dd-all .arr{transition-duration:.01ms}
  .nav-dd:hover .nav-dd-chev,.nav-dd:focus-within .nav-dd-chev{transform:none}
}
@media (max-width:760px){.nav-dd-menu{display:none}}
@media (max-width:480px){.brand>span{font-size:.86rem}.nav .btn{padding:.5em 1em;font-size:.85rem}}
/* ≤620px (2026-08-29, capture d'Alex) : connecte, le header porte l'avatar ET
   un bouton au libelle long (« Telecharger le plugin », « Continuer mon
   essai ») — la ligne debordait de l'ecran. Le bouton du header disparait :
   le heros affiche deja le meme appel a l'action un pouce plus bas, et le
   menu du compte contient deja « Telecharger le plugin ». */
@media (max-width:620px){
  .nav-in{gap:.6rem}
  /* 2026-09-06 (Alex : « sur téléphone, dans le header il y a juste un truc pour se connecter,
     il faudrait un bouton qui convertisse ») — le bouton reste, compact ; l'icône compte
     s'efface sous 400 px pour lui laisser la place. */
  .nav-util>.btn{display:inline-flex;padding:.5em .85em;font-size:.8rem;white-space:nowrap}
  .nav-util>.btn .arr{display:none}
  /* 2026-09-07 (Alex : « l'icone du compte s'affiche mal, c'est moche ») — le
     `padding:.45em` etait calcule sur `font-size:0`, donc NUL : il restait la
     hauteur de 38px du desktop et la seule largeur de l'icone, soit un ovale
     etroit et vertical. On en fait une vraie pastille ronde 38x38. */
  .nav-acct{font-size:0;gap:0;padding:0;width:38px;height:38px;
    justify-content:center;border-radius:50%;flex:0 0 auto}
  .nav-acct svg{width:18px;height:18px;opacity:.85}
  .brand img{width:26px;height:26px}
}