/* =============================================================
   REGLEMENTS.CSS — Styles spécifiques Règlements
   Dépend de variables.css
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   SUMMARY CARD RÈGLEMENTS
   ───────────────────────────────────────────────────────────── */
.reglement-summary {
  background: linear-gradient(135deg, var(--color-gray-650) 0%, var(--color-gray-800) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  color: var(--color-white);
  margin-bottom: var(--space-5);
}

/* ─────────────────────────────────────────────────────────────
   CARDS RÈGLEMENT
   ───────────────────────────────────────────────────────────── */
.reglement-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.reglement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.reglement-mois {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

/* Badge source */
.reglement-source {
  font-size: 11px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  font-weight: var(--font-weight-semibold);
}

.reglement-source.free      { background: var(--color-free-light); color: var(--color-free); }
.reglement-source.mint      { background: var(--color-mint-light);  color: var(--color-mint); }
.reglement-source.protected { background: var(--color-primary-light); color: var(--color-primary); }

/* Badge CC */
.reglement-cc {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-550);
  background: var(--color-gray-150);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.reglement-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reglement-montant {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

.reglement-statut {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.reglement-statut.paye    { color: var(--color-primary); }
.reglement-statut.attente { color: var(--color-gray-450); }
.reglement-statut.partiel { color: var(--color-gray-550); }

.reglement-date {
  font-size: 11px;
  color: var(--color-gray-500);
  margin-top: var(--space-1);
}