/* CareFlow — accent teal */
:root { --accent: #1a9a72; --accent-light: #e8f7f2; --accent-dark: #0f6e52; }

/* ── Mock tableau de bord ── */
.cf-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.cf-kpi { background: var(--d360-gray-50); border-radius: 8px; padding: 10px 8px; text-align: center; }
.cf-kpi strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--d360-teal-dark); }
.cf-kpi span { font-size: .62rem; font-weight: 600; color: var(--d360-gray-600); }
.cf-warn { background: var(--d360-coral-light); }
.cf-rows { display: flex; flex-direction: column; gap: 6px; }
.cf-row { font-size: .68rem; font-weight: 600; background: var(--d360-gray-100);
    border-radius: 6px; padding: 8px 10px; display: flex; justify-content: space-between; gap: 8px; }
.cf-row em { font-style: normal; font-size: .62rem; font-weight: 700; white-space: nowrap; }
.cf-ok  { color: var(--d360-teal-dark); }
.cf-due { color: var(--d360-coral-dark); }

/* ── Cas d'usage : variantes ── */
.uc-card.uc-wide { grid-column: 1 / -1; }
@media (max-width: 850px) { .uc-card.uc-wide { grid-column: auto; } }
.uc-teal  { background: var(--d360-teal-light); }
.uc-blue  { background: var(--d360-blue-light); }
.uc-coral { background: var(--d360-coral-light); }
.uc-gray  { background: var(--d360-gray-100); }
.uc-scenario { border-left-color: var(--d360-teal); }
.uc-feats li::before { color: var(--d360-teal); }
.uc-outcome { color: var(--d360-teal-dark); background: var(--d360-teal-light); }