/*
 * La page « Parler » (ECL-12). Elle n'ajoute que ce que le design system n'a
 * pas : la ligne d'un agent, la liste des fautes du débrief, la citation.
 *
 * Aucune couleur de marque ici : le jaune de la marque reste au [AI] du logo, et les
 * couleurs sémantiques viennent des `.badge-*` du socle — elles disent un ÉTAT
 * (score, faute, plafond), jamais une décoration.
 */

.voice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.voice-agent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.voice-agent-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.voice-debrief h3 {
  margin-top: var(--space-4);
  font-size: 1rem;
}

.voice-faults,
.voice-bullets {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.voice-faults { list-style: none; padding-left: 0; }

.voice-fault {
  padding: var(--space-3);
  border-left: 3px solid var(--danger);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.voice-fault p { margin: var(--space-2) 0 0; }

/* La citation EST la preuve : elle se lit comme telle, pas comme du décor. */
.voice-quote {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .voice-agent { flex-direction: column; align-items: stretch; }
}

/* --- ECL-43 : ce qu'on dit en décrochant, et ce que l'appel ouvre ---------
 *
 * L'exemple avant la page blanche, version parlée : une première phrase
 * réelle par famille d'interlocuteur. Aucune couleur nouvelle.
 */

.voice-say {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  line-height: 1.55;
}

.voice-say-label { font-weight: 600; }

.voice-gain {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.voice-gain p { margin: 0; }

/* --- ECL-66 : le bloc de synchronisation, posé dans l'administration -------
 *
 * Les classes vivent ICI, avec le domaine qu'elles servent (`voice.css`), et
 * pas dans `admin.css` : c'est le ticket de la voix qui pose ce bloc, et un
 * autre ticket ne doit pas avoir à relire la feuille de l'administration pour
 * comprendre d'où il sort. Aucune couleur nouvelle, aucun `!important`.
 */

.voice-sync {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.voice-sync h4 { margin: 0; font-size: 1rem; }
.voice-sync p { margin: 0; }

.voice-sync-report {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  width: 100%;
}

/* --- ECL-66 : les trois blocs, et la carte d'un prospect ------------------
 *
 * Une persona n'est pas une ligne de liste : elle annonce QUI decroche, ce
 * qu'il va sortir, ce que ca cache, et par quoi il commence. La carte tient
 * ces quatre lignes, et le bouton en bas. Aucune couleur nouvelle.
 */

.voice-personas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.voice-persona {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.voice-persona p { margin: 0; }

.voice-persona-head {
  display: grid;
  gap: var(--space-1);
}

/* L'objection ANNONCEE : c'est elle qu'on lit en premier sur la carte. */
.voice-persona-objection {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  line-height: 1.5;
}

.voice-others {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.voice-others h3 { margin: var(--space-2) 0 0; font-size: 1rem; }
.voice-others p { margin: 0; }

@media (max-width: 640px) {
  .voice-personas { grid-template-columns: 1fr; }
}