/* ==========================================================================
   AZALPLUS - Vocal transverse (lecture des KPI + pilotage a la voix)
   Variables CSS uniquement (AZA-CSS-001) : aucune couleur ni taille en dur.
   Consomme par assets/js/azal-vocal.js
   ========================================================================== */

/* --- Bouton haut-parleur pose sur chaque carte KPI --------------------- */
.kpi-card {
  position: relative;
}

.azal-vocal-lire {
  position: absolute;
  top: var(--azalplus-space-2, 8px);
  right: var(--azalplus-space-2, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--azalplus-radius, 8px);
  background: transparent;
  color: var(--azalplus-gray-400);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

/* Revele au survol de la carte, mais TOUJOURS visible au clavier :
   masquer un controle au focus le rendrait inatteignable sans souris. */
.kpi-card:hover .azal-vocal-lire,
.azal-vocal-lire:focus-visible,
.azal-vocal-lire.azal-vocal-actif {
  opacity: 1;
}

.azal-vocal-lire:hover {
  color: var(--azalplus-primary);
  background: var(--azalplus-gray-100);
}

.azal-vocal-lire:focus-visible {
  outline: none;
  box-shadow: var(--azalplus-focus-ring-primary);
  border-color: var(--azalplus-primary);
}

.azal-vocal-lire.azal-vocal-actif {
  color: var(--azalplus-primary);
}

/* --- Bouton « lire tous les indicateurs », en tete de la grille -------- */
.azal-vocal-tout {
  display: inline-flex;
  align-items: center;
  gap: var(--azalplus-space-2, 8px);
  margin-bottom: var(--azalplus-space-3, 12px);
  padding: var(--azalplus-space-2, 8px) var(--azalplus-space-3, 12px);
  border: 1px solid var(--azalplus-border);
  border-radius: var(--azalplus-radius, 8px);
  background: transparent;
  color: var(--azalplus-gray-700);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.azal-vocal-tout:hover {
  color: var(--azalplus-primary);
  border-color: var(--azalplus-primary);
}

.azal-vocal-tout:focus-visible {
  outline: none;
  box-shadow: var(--azalplus-focus-ring-primary);
}

/* --- Bouton micro global (pilotage a la voix) -------------------------- */
.azal-vocal-micro {
  position: fixed;
  right: var(--azalplus-space-4, 16px);
  bottom: calc(var(--azalplus-space-4, 16px) + 140px);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--azalplus-border);
  border-radius: 50%;
  background: var(--azalplus-white, #fff);
  color: var(--azalplus-gray-600);
  box-shadow: var(--azalplus-shadow-md);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.azal-vocal-micro:hover {
  color: var(--azalplus-primary);
  border-color: var(--azalplus-primary);
}

.azal-vocal-micro:focus-visible {
  outline: none;
  box-shadow: var(--azalplus-focus-ring-primary);
}

/* Etat « j'ecoute » : le pouls signale l'enregistrement en cours, sinon
   rien ne distingue un micro ouvert d'un micro ferme. */
.azal-vocal-micro.azal-vocal-ecoute {
  color: var(--azalplus-error);
  border-color: var(--azalplus-error);
  animation: azal-vocal-pouls 1.2s ease-in-out infinite;
}

@keyframes azal-vocal-pouls {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .azal-vocal-micro.azal-vocal-ecoute { animation: none; }
  .azal-vocal-lire,
  .azal-vocal-tout,
  .azal-vocal-micro { transition: none; }
}

/* Sur mobile la barre d'action du bas prend la place : on remonte. */
@media (max-width: 768px) {
  .azal-vocal-micro {
    bottom: calc(var(--azalplus-space-4, 16px) + 190px);
  }
}