/**
 * rythme.css — Indicateur de rythme de dépense
 *
 * Composant : "À ce rythme, votre budget tiendra — vous avez 7 jours d'avance."
 * Affiché dans : S1 (card plan) et S4 (sous la jauge)
 *
 * Trois statuts : ok (vert) | tight (orange) | danger (rouge)
 */

.rythme-indicator {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-m);
  font-size: 13px;
  line-height: 1.5;
}

/* Icône statut */
.rythme-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Texte principal */
.rythme-text {
  flex: 1;
  color: inherit;
  font-weight: 500;
}

.rythme-text strong {
  font-weight: 700;
}

/* Sous-label : rythme actuel en €/j */
.rythme-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  margin-top: 2px;
  opacity: 0.75;
}

/* ── Statuts ──────────────────────────────────────────────────────────────── */

.rythme-ok {
  background: var(--c-green-0);
  color: var(--c-green-text);
}

.rythme-tight {
  background: #FEF3C7;   /* jaune doux */
  color: #92400E;
}

.rythme-danger {
  background: var(--c-red-0);
  color: var(--c-red-text);
}

/* ── Placement dans S1 (card plan) ─────────────────────────────────────────── */

.plan-card .rythme-indicator {
  margin-top: var(--s-1);
}

/* ── Placement dans S4 (sous la jauge) ─────────────────────────────────────── */

.rythme-s4 {
  margin: 0 var(--s-4) var(--s-2);
}

/* ── Intégration dans Chiffres clés (S3) ──────────────────────────────────── */

.chiffres-rythme {
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}

.chiffres-sub-titre {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-ink-3);
  margin-bottom: var(--s-3);
}

/* Stat qui prend toute la largeur de la grille */
.stat-item-full {
  grid-column: 1 / -1;
}