/* ============================================================
   JARVIS : voix en HUD (Claude Code, 27/09/2026) : égaliseur et sous-titres quand JARVIS parle.
   Panneau à droite sur ordinateur, en bas sur téléphone, au-dessus de la cinématique et de la pastille musique.
   Couleurs de Broadcast : blanc grisé, gris, orange #ff8a2c. Module : assets/voix-hud.js.
   ============================================================ */
.vhud { position: fixed; right: 24px; top: 50%; z-index: 10030; width: min(340px, calc(100vw - 32px)); margin: 0; padding: 14px 18px 12px;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace); color: #eef2f5; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 12, 14, .82), rgba(6, 7, 9, .7)); border: 1px solid rgba(238, 242, 245, .14);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translate(14px, -50%);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s; }
.vhud.is-on { opacity: 1; visibility: visible; transform: translate(0, -50%);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
/* Coins du cadre HUD */
.vhud::before, .vhud::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid #ff8a2c; }
.vhud::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.vhud::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.vhud__tete { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(238, 242, 245, .72); }
.vhud__tete b { font-weight: 500; color: #ff8a2c; }
.vhud__eq { display: flex; align-items: center; gap: 3px; height: 36px; margin: 10px 0 12px; }
.vhud__eq i { flex: 1; height: 100%; border-radius: 1px; background: linear-gradient(180deg, #ffd2a8, #ff8a2c 55%, #eef2f5); opacity: .9; transform: scaleY(.06); transform-origin: 50% 50%; }
.vhud__texte { margin: 0; font-family: var(--font-ui, system-ui, sans-serif); font-size: 15px; line-height: 1.5; color: rgba(238, 242, 245, .38); text-wrap: pretty; }
.vhud__texte span { transition: color .15s ease; }
.vhud__texte .dit { color: #eef2f5; }
.vhud__texte .courant { color: #fff; box-shadow: inset 0 -2px 0 #ff8a2c; text-shadow: 0 0 10px rgba(255, 138, 44, .7); }
.vhud__etat { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(238, 242, 245, .62); }
.vhud__etat i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #ff8a2c; box-shadow: 0 0 8px #ff8a2c; animation: vhudPouls 1s ease-in-out infinite; }
@keyframes vhudPouls { 50% { opacity: .25; } }
.vhud.is-bloque .vhud__etat { color: #ffd2a8; }
.vhud.is-bloque .vhud__etat i { animation: none; background: rgba(238, 242, 245, .5); box-shadow: none; }

/* Téléphone : en bas, sur toute la largeur ; l'accueil de Broadcast (doublon du sous-titre) s'efface pendant la parole */
@media (max-width: 760px) {
  .vhud { left: 16px; right: 16px; top: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: auto; transform: translateY(14px); }
  .vhud.is-on { transform: none; }
  .vhud__eq { height: 26px; margin: 8px 0 10px; }
  .vhud__texte { font-size: 14px; }
  body.voix-active .cb__lower { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vhud, .vhud.is-on { transition: none; } .vhud__etat i { animation: none; } }
html.no-motion .vhud, html.no-motion .vhud.is-on { transition: none; }
html.no-motion .vhud__etat i { animation: none; }