:root {
  --fond: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #f0ede6;
  --bord: #ddd8cc;
  --texte: #1f2328;
  --texte-2: #5f6670;
  --accent: #b5452b;      /* rouge brique de la fête */
  --accent-texte: #ffffff;
  --ok: #2f7d4f;
  --alerte: #b26b00;
  --danger: #b42318;
  --ombre: 0 6px 24px rgba(30, 25, 15, 0.14);
  --rayon: 10px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fond);
  color: var(--texte);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--bord); background: var(--surface); white-space: nowrap;
}
.bouton:hover { background: var(--surface-2); }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.bouton.principal:hover { filter: brightness(1.07); }
.bouton.danger { color: var(--danger); }
.bouton:disabled { opacity: .5; cursor: default; }
.bouton svg { width: 18px; height: 18px; flex: none; }
input[type=text], input[type=password], input[type=tel], input[type=email], input[type=number], select, textarea {
  width: 100%; height: 36px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--bord); background: var(--surface);
}
textarea { height: auto; padding: 8px 10px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
label.champ { display: block; margin-bottom: 12px; }
label.champ > span { display: block; font-size: 12px; color: var(--texte-2); margin-bottom: 4px; font-weight: 600; }