/*
 * HUA — colonne commune de l'espace connecté (Dashboard, Wallet, Passport, Vault, Monitor,
 * Mesh Explorer, Mesh Map, Mail Inbox). Design repris de la colonne du tableau de bord
 * (« Sovereign Dashboard ») : 280 px, éléments de menu arrondis, accent #00f2ff.
 */
.hua-side { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 70; display: flex; flex-direction: column; padding: 32px 32px 28px;
  background: #030303; border-right: 1px solid rgba(255,255,255,.05); font-family: 'Inter', system-ui, sans-serif; color: #fff; }
body.hua-has-side { margin-left: 280px; }
.hua-side__brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; margin-bottom: 24px; }
.hua-side__logo { width: 32px; height: 32px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; transform: rotate(3deg); }
.hua-side__logo span { width: 14px; height: 14px; background: #000; transform: rotate(45deg); }
.hua-side__name { font-size: 20px; font-weight: 700; letter-spacing: -0.05em; }
.hua-side__back { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-bottom: 20px; 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; transition: color .2s, border-color .2s, background .2s; }
.hua-side__back:hover, .hua-side__back:focus-visible { color: #fff; border-color: rgba(0,242,255,.5); background: rgba(0,242,255,.06); outline: none; }
.hua-side__back svg { width: 16px; height: 16px; }
.hua-side__nav { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; }
.hua-side__label { margin: 26px 0 10px; padding: 0 20px; font-size: 10px; font-weight: 700; color: #475569; letter-spacing: .1em; text-transform: uppercase; }
.hua-side__item { display: flex; align-items: center; gap: 16px; padding: 12px 20px; margin-bottom: 4px; border-radius: 16px; border: 1px solid transparent;
  color: rgba(255,255,255,.4); text-decoration: none; font-size: 13.6px; font-weight: 600;
  /* Pas « all » : la visibilité héritée du tiroir s'animerait aussi, et l'entrée resterait cachée au moment
     où le tiroir lui donne le focus. */
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, outline-color .3s ease; }
.hua-side__item:hover, .hua-side__item:focus-visible { background: rgba(255,255,255,.05); color: #fff; outline: none; }
.hua-side__item[aria-current] { background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.1); box-shadow: 0 4px 20px rgba(0,0,0,.5); }
.hua-side__item[aria-current] i, .hua-side__item[aria-current] svg { color: #00f2ff; }
.hua-side__item i, .hua-side__item svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Focus au clavier (audit N16, 17 septembre 2026) : un fond à 5 % ne se voyait pas, et rien ne
   changeait sur la page en cours. Contour à l'accent, pour le clavier seulement ; vers l'intérieur
   dans la liste, qui défile et rognerait un contour extérieur. */
.hua-side__item:focus-visible { outline: 2px solid #00f2ff; outline-offset: -2px; }
.hua-side__back:focus-visible, .hua-side__brand:focus-visible, .hua-side__purge:focus-visible,
.hua-side .lang-switch:focus-visible, .hua-apptop__menu:focus-visible, .hua-flowbar__menu:focus-visible { outline: 2px solid #00f2ff; outline-offset: 2px; }
.hua-side__profile { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.05); }
.hua-side__user { display: flex; align-items: center; gap: 16px; }
.hua-side__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(to top right, #22d3ee, #a855f7); display: flex; align-items: center; justify-content: center; color: #000; }
.hua-side__avatar i, .hua-side__avatar svg { width: 20px; height: 20px; }
.hua-side__who { font-size: 12px; font-weight: 700; }
.hua-side__role { font-size: 9px; font-weight: 700; color: #64748b; letter-spacing: .1em; text-transform: uppercase; }
.hua-side__purge { margin-top: 18px; display: flex; align-items: center; gap: 8px; color: rgba(248,113,113,.6); text-decoration: none;
  font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; transition: color .2s; }
.hua-side__purge:hover { color: #f87171; }
.hua-side__purge i, .hua-side__purge svg { width: 12px; height: 12px; }
/* Sélecteur de langue de la colonne (écrans dont la maquette n'en portait pas) : même dessin que
   celui des barres communes. */
.hua-side .lang-switch { display: inline-flex; margin-bottom: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: #fff; padding: 6px 12px; border-radius: 50px; font-size: 10px; font-weight: 800; letter-spacing: .15em; cursor: pointer; }
.hua-side .lang-switch:hover { background: rgba(255,255,255,.1); border-color: #00f2ff; }

/* Téléphone et tablette : la colonne devient un tiroir ouvert par ☰ ; une barre fine garde Retour visible. */
.hua-apptop, .hua-side-scrim { display: none; }
@media (max-width: 1023px) {
  body.hua-has-side { margin-left: 0; margin-top: 56px; }
  body.hua-has-side.hua-side-full { height: calc(100vh - 56px) !important; }
  /* Tiroir fermé : caché aussi au clavier et aux lecteurs d'écran (visibility), pas seulement poussé hors
     de l'écran — sinon ses liens restaient atteignables par Tab, invisibles (audit N16, 17 septembre 2026).
     La visibilité tombe à la fin du glissement, et revient dès l'ouverture. */
  .hua-side { transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; box-shadow: 30px 0 60px rgba(0,0,0,.6); }
  .hua-side.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
  .hua-side-scrim { position: fixed; inset: 0; z-index: 69; background: rgba(0,0,0,.55); }
  .hua-side.is-open + .hua-side-scrim { display: block; }
  .hua-apptop { position: fixed; top: 0; left: 0; right: 0; z-index: 68; height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 0 14px; background: rgba(0,0,0,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.06); font-family: 'Inter', system-ui, sans-serif; }
  .hua-apptop .hua-side__back { margin: 0; justify-self: start; }
  .hua-apptop .hua-side__brand { margin: 0; justify-self: center; }
  .hua-apptop .hua-side__logo { width: 28px; height: 28px; }
  .hua-apptop__menu { justify-self: end; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
    color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .hua-apptop__menu svg { width: 18px; height: 18px; }
}
@media (max-width: 420px) { .hua-apptop .hua-side__back-label { display: none; } .hua-apptop .hua-side__back { padding: 8px 10px; } }

/*
 * Modules ouverts depuis l'espace connecté : la colonne reste affichée et l'en-tête de parcours
 * se réduit à ses actions. Hors session, ces écrans gardent leur en-tête public et aucune colonne.
 */
.hua-side--session, .hua-side--session + .hua-side-scrim { display: none; }
html.hua-session .hua-side--session { display: flex; }
html.hua-session .hua-side--session.is-open + .hua-side-scrim { display: block; }
.hua-flowbar__menu { display: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color: #fff; align-items: center; justify-content: center; cursor: pointer; }
.hua-flowbar__menu svg { width: 18px; height: 18px; }
/* Les modules plein écran (cartes Trace) positionnent leur calque sur le corps de page. */
html.hua-session body.hua-has-side--session { position: relative; width: auto; }
@media (min-width: 1024px) {
  html.hua-session body.hua-has-side--session { margin-left: 280px; }
  html.hua-session body.hua-has-side--session .hua-flowbar:not(.hua-flowbar--static) { left: 280px; }
  html.hua-session body.hua-has-side--session .hua-flowbar__brand,
  html.hua-session body.hua-has-side--session .hua-flowbar__back { display: none; }
}
@media (max-width: 1023px) {
  /* Une seule barre sur mobile : l'en-tête de parcours ouvre le tiroir de la colonne. */
  html.hua-session body.hua-has-side--session .hua-flowbar__back { display: none; }
  html.hua-session body.hua-has-side--session .hua-flowbar__menu { display: inline-flex; }
}