/* ============================================================
   DamUp — Design system (maquettes)
   Couleurs : aubergine #2A1120 · champagne #E7CFA8 · ivoire #F4E8D6
   Titres : Bodoni Moda (serif) · Textes : Jost (sans)
   ============================================================ */
:root {
  --aubergine: #2A1120;
  --aubergine-2: #3B1830;
  --aubergine-3: #4E223F;
  --champagne: #E7CFA8;
  --champagne-2: #D9BC8C;
  --ivoire: #F4E8D6;
  --ivoire-2: #FBF5EA;
  --encre: #2A1120;
  --gris: #7A6A72;
  --blanc: #FFFFFF;
  --danger: #C0392B;
  --ok: #2E7D32;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 40px rgba(42, 17, 32, .16);
  --font-titre: 'Bodoni Moda', 'Noto Serif SC', 'Songti SC', Georgia, serif;
  --font-texte: 'Jost', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-texte);
  color: var(--encre);
  background: var(--ivoire-2);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
/* Les titres et adresses des cartes peuvent se replier proprement */
h3, h4, .lieu, .meta { overflow-wrap: anywhere; }
img { display: block; }

h1, h2, h3, .serif {
  font-family: var(--font-titre);
  font-weight: 600;
  letter-spacing: .2px;
}

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; font-family: var(--font-texte);
  font-size: 15px; font-weight: 500; cursor: pointer; border: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primaire { background: var(--aubergine); color: var(--ivoire); box-shadow: 0 8px 22px rgba(42,17,32,.28); }
.btn-primaire:hover { background: var(--aubergine-2); }
.btn-champagne { background: var(--champagne); color: var(--aubergine); }
.btn-champagne:hover { background: var(--champagne-2); }
.btn-ghost { background: transparent; color: var(--ivoire); border: 1px solid rgba(244,232,214,.45); }
.btn-ghost:hover { background: rgba(244,232,214,.08); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- cartes ---------- */
.card {
  background: var(--blanc); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px;
}

/* ---------- champ ---------- */
.field { display: block; width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid #E6DCCB; background: var(--blanc); font-family: var(--font-texte);
  font-size: 15px; color: var(--encre); }
.field:focus { outline: none; border-color: var(--champagne-2); box-shadow: 0 0 0 3px rgba(231,207,168,.35); }
.label { font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 6px; display: block; }
.champ { margin-bottom: 12px; }

/* ---------- badge ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-aubergine { background: var(--aubergine); color: var(--ivoire); }
.badge-champagne { background: var(--champagne); color: var(--aubergine); }
.badge-vert { background: #E3F2E0; color: var(--ok); }
.badge-rouge { background: #FBE4E1; color: var(--danger); }