/* ══════════════════════════════════════════════════════════════
   Adhésion en ligne UA70 — charte unifiée (Lora titres / Inter UI)
   ══════════════════════════════════════════════════════════════ */
:root {
  --vert: #2d6a2d;
  --vert-clair: #4a9e4a;
  --vert-fonce: #1a4a1a;
  --or: #f5a623;
  --or-fonce: #b87b17;
  --gris-bg: #f4f6f8;
  --gris-border: #dee2e6;
  --danger: #dc3545;
  --blanc: #ffffff;
  --texte: #1a2a1a;
  --ua-cream: #f4f1e6;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(0,0,0,0.07);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[v-cloak] { display: none; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--gris-bg);
  color: var(--texte);
  line-height: 1.5;
}
h1, h2, h3 { font-family: 'Lora', Georgia, serif; color: var(--vert-fonce); }
a { color: var(--vert); }

/* En-tête */
.topbar {
  background: linear-gradient(135deg, var(--vert-fonce), var(--vert));
  color: #fff; padding: 18px 16px; display: flex; align-items: center; gap: 14px;
}
.topbar img { height: 46px; }
.topbar .t { font-family: 'Lora', serif; font-size: 1.25rem; font-weight: 700; }
.topbar .s { font-size: .82rem; opacity: .85; }

.wrap { max-width: 760px; margin: 0 auto; padding: 18px 14px 60px; }

/* Bandeau campagne */
.banner {
  background: var(--ua-cream); border: 1px solid var(--gris-border);
  border-left: 5px solid var(--or); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 18px;
}
.banner.closed { border-left-color: var(--danger); }

/* Stepper */
.steps { display: flex; gap: 8px; margin-bottom: 18px; }
.steps .step {
  flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px;
  background: #fff; border: 1px solid var(--gris-border); font-size: .82rem; color: #888;
}
.steps .step.active { background: var(--vert); color: #fff; border-color: var(--vert); font-weight: 600; }
.steps .step.done { background: var(--vert-clair); color: #fff; border-color: var(--vert-clair); }

/* Cartes */
.card {
  background: #fff; border: 1px solid var(--gris-border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px;
}
.card h2 { font-size: 1.1rem; margin-bottom: 4px; }
.card .aide { color: #777; font-size: .85rem; margin-bottom: 12px; }

/* Champs */
.field { margin-bottom: 12px; }
.field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 4px; }
.field input, .field select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--gris-border);
  border-radius: 9px; font-size: 1rem; font-family: inherit;
}
.field input:focus, .field select:focus { outline: 2px solid var(--vert-clair); border-color: var(--vert); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row .field { flex: 1; min-width: 140px; }
.toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.toggle button {
  flex: 1; padding: 12px; border: 2px solid var(--gris-border); background: #fff;
  border-radius: 10px; font-size: .95rem; cursor: pointer; font-family: inherit;
}
.toggle button.on { border-color: var(--vert); background: var(--ua-cream); font-weight: 600; color: var(--vert-fonce); }

/* Recherche fiche (renouvellement) */
.search-box { position: relative; }
.search-results {
  border: 1px solid var(--gris-border); border-radius: 9px; margin-top: 4px;
  overflow: hidden; box-shadow: var(--shadow);
}
.search-item {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 12px;
  cursor: pointer; border-bottom: 1px solid #eee;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--ua-cream); }

/* Lignes produit */
.opt {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid #eee;
}
.opt:last-child { border-bottom: none; }
.opt .lbl { flex: 1; }
.opt .lbl .d { font-weight: 500; }
.opt .lbl .u { font-size: .78rem; color: #888; }
.opt .amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--vert-fonce); white-space: nowrap; }
.opt input[type=checkbox], .opt input[type=radio] { width: 20px; height: 20px; accent-color: var(--vert); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 30px; height: 30px; border: 1px solid var(--gris-border); background: #fff; border-radius: 7px; font-size: 1.1rem; cursor: pointer; }
.stepper span { min-width: 24px; text-align: center; font-weight: 600; }
.locked { opacity: .75; }

/* Total flottant */
.total-bar {
  position: sticky; bottom: 0; background: #fff; border-top: 2px solid var(--vert);
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 -3px 12px rgba(0,0,0,.08); border-radius: 0 0 var(--radius) var(--radius);
}
.total-bar .lbl { font-size: .85rem; color: #777; }
.total-bar .val { font-family: 'Lora', serif; font-size: 1.6rem; font-weight: 700; color: var(--vert-fonce); }

/* Récap */
.recap-line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed #eee; }
.recap-total { display: flex; justify-content: space-between; padding-top: 12px; font-weight: 700; font-size: 1.2rem; }

/* Boutons */
.btn {
  display: inline-block; padding: 13px 22px; border: none; border-radius: 10px;
  font-size: 1rem; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none;
}
.btn-primary { background: var(--vert); color: #fff; }
.btn-primary:hover { background: var(--vert-fonce); }
.btn-primary:disabled { background: #aaa; cursor: not-allowed; }
.btn-ghost { background: #fff; border: 1px solid var(--gris-border); color: var(--texte); }
.btn-gold { background: var(--or); color: #3a2a00; }
.actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; }

.err { color: var(--danger); font-size: .88rem; margin-top: 8px; }
.muted { color: #888; font-size: .85rem; }

/* Confirmation */
.confirm { text-align: center; padding: 30px 18px; }
.confirm .ref { font-family: 'Lora', serif; font-size: 1.4rem; color: var(--vert-fonce); margin: 10px 0; }
.confirm .tick { font-size: 3rem; }
.info-box { background: var(--ua-cream); border-radius: 10px; padding: 14px; margin: 16px 0; text-align: left; }

/* Admin */
.admin-login { max-width: 320px; margin: 60px auto; text-align: center; }
table.adm { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.adm th, table.adm td { padding: 8px 6px; border-bottom: 1px solid #eee; text-align: left; }
table.adm th { color: #777; font-weight: 600; }
.tag { font-size: .72rem; padding: 2px 7px; border-radius: 20px; background: #eee; }
.tag.new { background: #fde9c8; color: #8a5a00; }