/*
 * HUA — barre de navigation commune du site public.
 * Design repris de la barre de la page d'accueil (« Langage HUA Protocol ») :
 * capsule noire translucide, logo HUA, libellés en capitales espacées, accent #00f2ff.
 */
.hua-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 24px; font-family: 'Inter', system-ui, sans-serif; }
.hua-bar--static { position: relative; flex-shrink: 0; padding: 14px 24px; background: #000; border-bottom: 1px solid rgba(255,255,255,.06); }
.hua-bar__inner { position: relative; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,.05); background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hua-bar__brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; flex-shrink: 0; }
.hua-bar__logo { width: 32px; height: 32px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.hua-bar__logo span { width: 16px; height: 16px; background: #000; border-radius: 2px; transform: rotate(45deg); }
.hua-bar__name { font-size: 20px; font-weight: 700; letter-spacing: -0.05em; }

.hua-bar__menus { display: flex; align-items: center; gap: 6px; }
.hua-menu { position: relative; }
.hua-menu__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; background: none; cursor: pointer; border-radius: 999px;
  color: #94a3b8; font: 500 12px/1 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; transition: color .2s, background .2s; }
.hua-menu__trigger:hover, .hua-menu.is-open .hua-menu__trigger, .hua-menu:focus-within .hua-menu__trigger { color: #fff; }
.hua-menu__trigger[data-active] { color: #fff; }
.hua-menu__trigger[data-active]::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #00f2ff; margin-left: 2px; }
.hua-menu__chevron { width: 12px; height: 12px; transition: transform .2s; }
.hua-menu.is-open .hua-menu__chevron { transform: rotate(180deg); }

/* Le panneau commence sous le bouton ; la marge haute est une zone de survol continue. */
.hua-menu__panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 14px; display: none; z-index: 61; }
.hua-menu.is-open .hua-menu__panel { display: block; }
@media (hover: hover) and (min-width: 1024px) { .hua-menu:hover .hua-menu__panel { display: block; } }
.hua-menu__list { min-width: 240px; padding: 8px; border-radius: 20px; background: rgba(10,10,10,.97); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 60px rgba(0,0,0,.6); display: grid; gap: 2px; }

.hua-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: rgba(255,255,255,.82); text-decoration: none;
  font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.hua-item:hover, .hua-item:focus-visible { background: rgba(255,255,255,.05); color: #fff; outline: none; }
.hua-item[aria-current] { color: #00f2ff; }
.hua-item__icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.hua-item__icon svg, .hua-item__icon i { width: 15px; height: 15px; }

.hua-bar__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hua-bar .lang-switch { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; padding: 6px 12px; border-radius: 50px;
  font: 700 11px/1.4 'Inter', system-ui, sans-serif; cursor: pointer; transition: background .2s, border-color .2s; }
.hua-bar .lang-switch:hover { background: rgba(255,255,255,.1); border-color: #00f2ff; }
.hua-bar__login { color: #94a3b8; text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 8px 10px; white-space: nowrap; }
.hua-bar__login:hover, .hua-bar__login[aria-current] { color: #fff; }
.hua-bar__signup { background: #fff; color: #000; text-decoration: none; padding: 10px 20px; border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: transform .2s; }
.hua-bar__signup:hover { transform: scale(1.04); }

.hua-bar__toggle { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.hua-bar__toggle svg { width: 18px; height: 18px; }

/* Panneau mobile : les mêmes catégories, dépliées. */
.hua-bar__mobile { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; max-height: calc(100vh - 120px); overflow-y: auto;
  padding: 18px; border-radius: 24px; background: rgba(10,10,10,.98); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px rgba(0,0,0,.7); z-index: 61; }
.hua-bar.is-mobile-open .hua-bar__mobile { display: block; }
.hua-bar__group + .hua-bar__group { margin-top: 16px; }
.hua-bar__group-title { margin: 0 0 6px 12px; color: #00f2ff; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hua-bar__group-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; }
.hua-bar__mobile-account { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.hua-bar__mobile-account a { flex: 1; text-align: center; }
.hua-bar__mobile-account .hua-bar__login { border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 10px 16px; }

/* « HUA Omni », plus long que « HUA » (7 octobre 2026) : vers 1 024 px, « À propos » passait sur deux lignes. Un intitulé de menu
   reste sur une ligne, et l'espace se resserre entre 1 024 et 1 279 px. */
.hua-menu__trigger { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .hua-menu__trigger { padding: 10px 10px; letter-spacing: .08em; }
  .hua-bar__menus { gap: 2px; }
}
/* Grands écrans (7 octobre 2026, constat du propriétaire sur 1 900 px : la barre flottait au milieu du noir) : elle s'élargit. */
@media (min-width: 1600px) {
  .hua-bar__inner, .hua-flowbar__inner { max-width: 1520px; }
}
@media (max-width: 1023px) {
  .hua-bar__menus, .hua-bar__actions .hua-bar__login, .hua-bar__actions .hua-bar__signup { display: none; }
  .hua-bar__toggle { display: inline-flex; }
}
@media (max-width: 640px) {
  .hua-bar { padding: 14px 16px; }
  .hua-bar--static { padding: 10px 16px; }
  .hua-bar__inner { padding: 10px 14px 10px 18px; }
}

/*
 * En-tête commun des écrans de parcours (Talk, Voice, Trace, Mail, compte, identité biométrique) :
 * Retour à gauche, logo HUA au centre (retour à l'accueil), actions de l'écran et langue à droite.
 */
.hua-flowbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 64px; font-family: 'Inter', system-ui, sans-serif;
  background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.06); }
.hua-flowbar--static { position: relative; flex-shrink: 0; pointer-events: auto; }
.hua-flowbar-spacer { height: 64px; flex-shrink: 0; }
.hua-flowbar__inner { max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.hua-flowbar__back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #cbd5e1; text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
.hua-flowbar__back:hover, .hua-flowbar__back:focus-visible { color: #fff; border-color: rgba(0,242,255,.5); background: rgba(0,242,255,.06); outline: none; }
.hua-flowbar__back svg { width: 16px; height: 16px; transition: transform .2s; }
.hua-flowbar__back:hover svg { transform: translateX(-2px); }
.hua-flowbar__brand { justify-self: center; display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.hua-flowbar__brand .hua-bar__logo { width: 28px; height: 28px; border-radius: 7px; }
.hua-flowbar__brand .hua-bar__logo span { width: 13px; height: 13px; }
.hua-flowbar__name { font-size: 17px; font-weight: 700; letter-spacing: -0.05em; }
.hua-flowbar__section { color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.hua-flowbar__section::before { content: '·'; margin-right: 10px; color: #334155; }
.hua-flowbar__actions { justify-self: end; display: flex; align-items: center; gap: 14px; min-width: 0; }
.hua-flowbar__action { color: #94a3b8; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.hua-flowbar__action:hover { color: #fff; }
.hua-flowbar__actions > a:not(.hua-flowbar__action) { white-space: nowrap; }
.hua-flowbar .lang-switch { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; padding: 6px 12px; border-radius: 50px;
  font: 700 11px/1.4 'Inter', system-ui, sans-serif; cursor: pointer; transition: background .2s, border-color .2s; }
.hua-flowbar .lang-switch:hover { background: rgba(255,255,255,.1); border-color: #00f2ff; }
@media (max-width: 720px) {
  .hua-flowbar__section { display: none; }
  .hua-flowbar__inner { padding: 0 14px; gap: 8px; }
  .hua-flowbar__actions > :not(.lang-switch) { display: none; }
}
@media (max-width: 420px) {
  .hua-flowbar__back-label { display: none; }
  .hua-flowbar__back { padding: 8px 10px; }
}

/* Focus au clavier (audit N16, 17 septembre 2026) : contour à l'accent, pour le clavier seulement. */
.hua-item:focus-visible { outline: 2px solid #00f2ff; outline-offset: -2px; }
.hua-bar__brand:focus-visible, .hua-menu__trigger:focus-visible, .hua-bar__login:focus-visible, .hua-bar__signup:focus-visible,
.hua-bar__dash:focus-visible, .hua-bar__toggle:focus-visible, .hua-bar .lang-switch:focus-visible,
.hua-flowbar__back:focus-visible, .hua-flowbar__brand:focus-visible, .hua-flowbar__action:focus-visible,
.hua-flowbar .lang-switch:focus-visible { outline: 2px solid #00f2ff; outline-offset: 2px; }

/* En session, les pages publiques (Documentation, Technologie…) ramènent au tableau de bord. */
.hua-bar__dash { display: none; background: #fff; color: #000; text-decoration: none; padding: 10px 20px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: transform .2s; }
.hua-bar__dash:hover { transform: scale(1.04); }
html.hua-session .hua-bar__login, html.hua-session .hua-bar__signup { display: none; }
html.hua-session .hua-bar__actions .hua-bar__dash { display: inline-block; }
@media (max-width: 1023px) { html.hua-session .hua-bar__actions .hua-bar__dash { display: none; } }
html.hua-session .hua-bar__mobile-account .hua-bar__dash { display: inline-block; flex: 1; text-align: center; }