/* =====================================================================
   VISION PME — L'écran des communications

   Un inventaire, pas un tableau de bord. Ce qu'on y cherche est « quel
   texte part, quand, et est-ce que ça marche ? » — donc du texte lisible
   et des chiffres alignés, pas des graphiques.

   Les corps de messages sont dans des `<details>` fermés : douze textes
   dépliés font une page de six écrans où l'on ne trouve plus rien.
   ===================================================================== */

/* ⚠️ Même piège qu'au tableau des appels et à l'agenda : `#page-content`
   est une grille CSS, et un enfant de grille a `min-width: auto`. Les
   tableaux ci-dessous pousseraient la page entière de côté. */
#cm-zone { min-width: 0; }

.cm-titre {
  margin: var(--s-6) 0 4px;
  display: flex; align-items: center; gap: 8px;
  font: 700 var(--fs-h3) / 1.25 var(--font-display);
}
.cm-titre .icon { width: 18px; height: 18px; color: var(--green); }
.cm-sous { margin: 0 0 var(--s-3); font-size: var(--fs-xs); }

/* ── Les pastilles de chiffres ────────────────────────────────────── */
.cm-resume { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.cm-puce {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  font: 500 var(--fs-xs)/1.6 var(--font-body);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cm-puce b { color: var(--text); font-weight: 700; }
.cm-puce.est-gris { opacity: .7; }
.cm-puce.est-cher {
  border-color: var(--danger); background: var(--danger-soft); color: var(--danger);
}
.cm-puce.est-cher b { color: var(--danger); }

/* ── Une séquence ─────────────────────────────────────────────────── */
.cm-sequence {
  margin-bottom: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  background: var(--surface-1);
  overflow: hidden;
}
.cm-sequence > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.cm-sequence h3 { margin: 0; font: 700 var(--fs-sm)/1.3 var(--font-body); }
.cm-chiffres { display: flex; flex-wrap: wrap; gap: 6px; }

.cm-declencheur {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 0; padding: 10px 14px;
  font: 400 var(--fs-xs)/1.5 var(--font-body);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.cm-declencheur .icon { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--green); }

/* ── Les tableaux ─────────────────────────────────────────────────── */
/* Ils défilent chez eux : le corps de la page ne part jamais de côté. */
.cm-table {
  width: 100%; border-collapse: collapse;
  display: block; overflow-x: auto;
  font: 400 var(--fs-xs)/1.5 var(--font-body);
}
.cm-table th, .cm-table td {
  padding: 8px 14px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.cm-table th {
  font-weight: 650; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: .04em; font-size: .68rem;
}
.cm-table tr:last-child td { border-bottom: 0; }
.cm-n { font-variant-numeric: tabular-nums; text-align: right; }

.cm-mode {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font: 600 .72rem/1.6 var(--font-body);
}
.cm-mode .icon { width: 12px; height: 12px; }
/* Automatique et suggestion ne se distinguent pas que par la couleur :
   le mot est écrit en toutes lettres. */
.cm-mode.est-auto { background: var(--ok-soft, #e8fbf3); color: var(--green); }
.cm-mode.est-suggestion { background: var(--warn-soft); color: var(--warn); }
.cm-mode.est-cher { background: var(--danger-soft); color: var(--danger); }

/* ── Un gabarit ───────────────────────────────────────────────────── */
.cm-gabarit {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  background: var(--surface-1);
  margin-bottom: 6px;
}
.cm-gabarit.est-inactif { opacity: .6; }
.cm-gabarit > summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px; cursor: pointer;
  font: 400 var(--fs-xs)/1.5 var(--font-body);
}
.cm-gabarit > summary b { font-weight: 650; color: var(--text); }
.cm-gabarit[open] > summary { border-bottom: 1px solid var(--border); }

.cm-canal {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font: 600 .7rem/1.6 var(--font-body);
  text-transform: uppercase; letter-spacing: .04em;
}
.cm-canal .icon { width: 12px; height: 12px; }
.cm-canal.est-courriel { background: var(--surface-2); color: var(--text-muted); }
.cm-canal.est-texto { background: var(--ok-soft, #e8fbf3); color: var(--green); }

.cm-cle {
  margin: 10px 14px 0;
  font: 500 .72rem/1.5 var(--font-mono, ui-monospace, monospace);
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}
.cm-corps {
  margin: 8px 14px 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 8px;
  font: 400 .8rem/1.6 var(--font-mono, ui-monospace, monospace);
  /* Le texte d'un courriel se lit tel qu'il part : sauts de ligne
     conservés, mais replié plutôt que défilant. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── Les lignes téléphoniques ─────────────────────────────────────── */
.cm-lignes { display: grid; gap: 6px; margin-bottom: var(--s-3); }
.cm-ligne {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md, 10px);
  background: var(--surface-1);
  font: 400 var(--fs-xs)/1.5 var(--font-body);
}
.cm-num {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
}

.cm-twilio {
  padding: 14px;
  border: 1px solid var(--border); border-radius: var(--r-md, 10px);
  background: var(--surface-2);
}
.cm-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.cm-attendu {
  margin: 0 0 10px;
  font: 400 var(--fs-xs)/1.6 var(--font-body); color: var(--text-muted);
  overflow-wrap: anywhere;
}
.cm-attendu code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .78rem;
}
.cm-erreur {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 0; padding: 10px 12px; border-radius: 8px;
  background: var(--danger-soft); color: var(--danger);
  font: 500 var(--fs-xs)/1.5 var(--font-body);
}
.cm-erreur .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }