/* Module Dons — espace association : le tableau de bord du client. */

.md-espace {
  --md-accent: #1d5b78;
  --md-accent-2: #5b8ba3;
  --md-accent-soft: rgba(29, 91, 120, 0.08);
  --md-degrade: linear-gradient(135deg, var(--md-accent-2), var(--md-accent));
  --md-ink: #1c2530;
  --md-ink-2: #55616c;
  --md-ink-3: #8a949c;
  --md-rule: #dde2df;
  --md-surface: #ffffff;
  --md-fond: #f6f8f7;
  --md-ok: #2f6b4f;
  --md-ok-soft: #e2efe7;
  --md-warn: #7a6626;
  --md-warn-soft: #f3ecd4;
  --md-err: #a24328;
  --md-err-soft: #f6e3da;
  --md-gold: #7a6626;
  --md-gold-soft: #f0e9d2;

  max-width: 920px;
  margin: 0 auto;
  color: var(--md-ink);
  font-size: 15.5px;
  line-height: 1.55;
}

/* ---------- Porte d'entrée ---------- */
.md-espace__porte {
  text-align: center;
  padding: 56px 24px;
  background: var(--md-surface);
  border: 1px solid var(--md-rule);
  border-radius: 14px;
}
.md-espace__porte h2 { margin: 4px 0 10px; font-size: 26px; }

.md-espace__sur {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-accent);
  font-weight: 700;
}

/* ---------- En-tête ---------- */
.md-espace__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--md-ink);
}
.md-espace__entete h2 { margin: 2px 0 0; font-size: 26px; letter-spacing: -0.01em; }
.md-espace__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.md-espace__lien { font-size: 13.5px; color: var(--md-ink-2); text-decoration: none; }
.md-espace__lien:hover { color: var(--md-ink); text-decoration: underline; }

.md-espace__bouton {
  display: inline-block;
  background: var(--md-degrade);
  color: #fff !important;
  text-decoration: none;
  font-weight: 650;
  font-size: 14.5px;
  padding: 10px 20px;
  border-radius: 9px;
  transition: filter .12s;
}
.md-espace__bouton:hover { filter: brightness(1.08); }
.md-espace__bouton--second {
  background: var(--md-surface);
  color: var(--md-accent) !important;
  border: 1.5px solid var(--md-accent);
}

/* ---------- KPI ---------- */
.md-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}
.md-kpi {
  background: var(--md-surface);
  border: 1px solid var(--md-rule);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.md-kpi--fort {
  background: var(--md-degrade);
  border-color: var(--md-accent);
}
.md-kpi--fort .md-kpi__valeur { color: #fff; }
.md-kpi--fort .md-kpi__label { color: rgba(255, 255, 255, 0.75); }
.md-kpi__valeur {
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.md-kpi__label { font-size: 12.5px; color: var(--md-ink-2); }

.md-canaux-resume { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.md-jeton {
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--md-surface);
  border: 1px solid var(--md-rule);
  color: var(--md-ink-2);
}
.md-jeton strong { color: var(--md-ink); font-variant-numeric: tabular-nums; }
.md-jeton--avec { border-color: var(--md-accent); background: var(--md-accent-soft); }

/* ---------- Sections ---------- */
.md-espace h3 { margin: 30px 0 10px; font-size: 17px; letter-spacing: -0.005em; }

/* ---------- Tableaux ---------- */
.md-tableau-cadre {
  overflow-x: auto;
  border: 1px solid var(--md-rule);
  border-radius: 12px;
  background: var(--md-surface);
}
.md-tableau { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.md-tableau th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--md-ink-3);
  font-weight: 650;
  padding: 11px 14px;
  border-bottom: 1px solid var(--md-rule);
  background: var(--md-fond);
}
.md-tableau td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--md-rule);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.md-tableau tr:last-child td { border-bottom: none; }
.md-tableau tbody tr:hover td { background: var(--md-fond); }
.md-tab-date { color: var(--md-ink-2); white-space: nowrap; }
.md-tab-montant { font-weight: 700; white-space: nowrap; }
.md-tab-vide { color: var(--md-ink-3); }

/* ---------- Badges ---------- */
.md-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.md-badge--ok { background: var(--md-ok-soft); color: var(--md-ok); }
.md-badge--attente { background: var(--md-warn-soft); color: var(--md-warn); }
.md-badge--err { background: var(--md-err-soft); color: var(--md-err); }
.md-badge--gris { background: #eef0ee; color: var(--md-ink-2); }
.md-badge--info { background: var(--md-accent-soft); color: var(--md-accent); }
.md-badge--avec { background: var(--md-accent-soft); color: var(--md-accent); }
.md-badge--sans { background: #eef0ee; color: var(--md-ink-2); }

/* ---------- Jauge des engagements ---------- */
.md-jauge {
  display: block;
  height: 5px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--md-rule);
  overflow: hidden;
  min-width: 90px;
}
.md-jauge span { display: block; height: 100%; background: var(--md-accent); border-radius: 999px; }

/* ---------- Liens de reçus ---------- */
.md-recu-lien {
  font-size: 13px;
  font-weight: 650;
  color: var(--md-accent);
  text-decoration: none;
  white-space: nowrap;
}
.md-recu-lien:hover { text-decoration: underline; }

.md-espace__pied {
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--md-ink-3);
  text-align: center;
}

/* ---------- Porte donateur : la demande de lien magique ---------- */
.md-espace__demande {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.md-espace__demande input[type="email"] {
  padding: 11px 14px;
  border: 1.5px solid var(--md-rule);
  border-radius: 9px;
  font-size: 15px;
  min-width: 260px;
}
.md-espace__demande input[type="email"]:focus { border-color: var(--md-accent); outline: none; }
.md-espace__demande .md-espace__bouton { border: none; cursor: pointer; font-size: 14.5px; }