/* ═══ MARCEL — LES GABARITS DE CARTE (Lot 4, audit du 22/08/2026) ═══
   Quatre formes, et rien d'autre. G1 : la carte à trancher (canal, fil).
   G2 : la ligne de liste. G3 : l'encart imbriqué — il ne porte JAMAIS
   ses propres actions, elles vivent au pied de la carte qui le contient.
   G4 : le bandeau d'alerte, trois tons seulement.
   Les classes historiques (.ch-act, .action-card, .tdv-row…) sont
   alignées sur ces valeurs dans leurs feuilles : on change ce qu'elles
   valent, pas comment elles s'appellent. */

/* ── G1 — Carte à trancher ── */
.card {
  width: 100%; box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow);
  padding: var(--sp-4, 16px);
  font-size: var(--fs-body, 14.5px);
}
/* Modificateur, un seul usage dans le produit : la barre d'accent. */
.card--accent { border-left: 3px solid var(--accent); }

/* ── G2 — Ligne de liste ── */
.row-item {
  display: flex; align-items: center; gap: var(--sp-2, 8px);
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  font-size: var(--fs-ui, 13px);
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.row-item:hover { background: var(--surface2); }
.row-item.is-selected {
  background: var(--accent-light);
  box-shadow: inset 3px 0 0 var(--accent);
}
.row-item .row-title { flex: 1; min-width: 0; }
.row-item .row-meta { color: var(--text-muted); font-size: var(--fs-meta, 11.5px); }

/* ── G3 — Encart imbriqué (sans actions propres) ── */
.inset {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: var(--sp-3, 12px);
  font-size: var(--fs-sm, 12.5px);
}
.inset--ok { background: var(--success-light); border-color: var(--success-light); }
.inset--warn { background: var(--yellow-light); border-color: var(--yellow-light); }

/* ── G4 — Bandeau d'alerte (3 tons) ── */
.banner {
  display: flex; align-items: center; gap: var(--sp-2, 8px);
  width: 100%; box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius, 12px);
  background: var(--accent-light);
  font-size: var(--fs-ui, 13px);
}
.banner .banner-text { flex: 1; min-width: 0; }
.banner--danger { border-color: var(--danger); background: var(--danger-light, #fee2e2); }
.banner--warn { border-color: var(--yellow); background: var(--yellow-light); }
.banner--info { border-color: var(--accent); background: var(--accent-light); }