/*
 * Le débrief d'appel (ECL-67). Il n'ajoute que ce que le design system n'a
 * pas : la pile d'un débrief, la ligne de pastilles d'une objection, la
 * citation, la saisie de contestation.
 *
 * Aucune couleur de marque ici : le jaune de la marque reste au [AI] du logo. Les
 * pastilles viennent des `.badge-*` du socle et disent un ÉTAT — verdict de
 * l'appel, objection traitée ou non, faute majeure. Jamais une décoration.
 *
 * À 390 px, tout se replie : la ligne de pastilles passe à la ligne, les
 * boutons s'étirent, rien ne déborde.
 */

.vdebrief {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

.vdebrief-title { margin: 0; font-size: 1.05rem; }

.vdebrief-head p { margin: 0; }

.vdebrief-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.vdebrief-score { font-variant-numeric: tabular-nums; }

.vdebrief-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.vdebrief-block h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.vdebrief-block p { margin: 0; }

.vdebrief-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vdebrief-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.vdebrief-item p { margin: 0; }

.vdebrief-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.vdebrief-quote {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--border);
  color: var(--text-muted);
  font-style: italic;
}

.vdebrief-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--text-muted);
}

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

.vdebrief-label { font-weight: 600; }

.vdebrief-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vdebrief-error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
}

@media (max-width: 480px) {
  .vdebrief-actions .btn { flex: 1 1 100%; }
}