/* ── LA DICTÉE (TVNI-72, 2026-09-21) ──────────────────────────────────────────
   Le bouton micro que `static/js/dictee.js` pose à côté de chaque zone de texte
   libre. Une feuille À PART plutôt qu'un bloc de `charte.css` : elle ne sert
   qu'à ce composant, et la vitrine a la sienne (dans `landing/chat.css`, aux
   couleurs de la bulle).

   ⚠️ Toutes les classes commencent par `dictee-` : vérifié, aucune n'existe
   dans `charte.css` (un nom déjà pris y gagne par sa seule position). */

.dictee-place {
  position: relative; display: inline-flex; flex: none; align-items: center;
}
/* Dans une barre de gestes (bulle d'aide), le micro ouvre la rangée. */
.dictee-place--barre { order: -1; }
/* Posé dans le coin HAUT droit du champ (consignes, formulaires) : le coin bas
   droit est celui de la poignée qui agrandit la zone, et les deux se gênaient. */
.dictee-cadre { position: relative; display: block; }
.dictee-cadre--en-ligne { display: inline-block; }
.dictee-place--coin { position: absolute; right: 5px; top: 5px; }
.dictee-place--milieu { top: 50%; transform: translateY(-50%); }

.dictee-micro {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin: 0;
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: none; color: var(--muted-foreground); cursor: pointer;
  font: inherit;
  transition: background var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out);
}
.dictee-micro:hover { background: rgba(255,255,255,0.06); color: var(--foreground); }
.dictee-micro:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* L'ÉCOUTE SE VOIT : fond d'erreur doux, icône rouge, et un anneau qui pulse.
   Rouge et non violet : c'est le code universel du « ça enregistre ». */
.dictee-micro[aria-pressed="true"] {
  color: var(--error); background: rgba(248,113,113,0.14);
  border-color: rgba(248,113,113,0.45);
  animation: dictee-pulse 1.4s var(--ease-in-out) infinite;
}
@keyframes dictee-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(248,113,113,0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(248,113,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
}
@media (prefers-reduced-motion: reduce) {
  .dictee-micro[aria-pressed="true"] { animation: none; }
}

/* Le message court (micro refusé, rien entendu), au-dessus du bouton. */
.dictee-avis {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30;
  width: max-content; max-width: 240px;
  padding: 7px 10px; border-radius: var(--radius-md);
  background: var(--card); color: var(--foreground);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
  font-size: var(--text-xs); line-height: 1.4; white-space: normal;
  pointer-events: none;
}
.dictee-avis[hidden] { display: none; }
/* En tête d'une barre de gestes, le micro est à GAUCHE : le message s'ouvre
   vers la droite, sinon il sort du panneau qui le porte (bulle d'aide). */
.dictee-place--barre .dictee-avis { right: auto; left: 0; }