:root {
  --fond: #F3F5F8;
  --carte: #FFFFFF;
  --encre: #2B2B2B;
  --encre-douce: #555C66;
  --trait: #C4CCD4;
  --accent: #0057D9;
  --accent-texte: #FFFFFF;
  --erreur: #E3000F;
  --focus: #F2A900;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14171C;
    --carte: #1C2027;
    --encre: #E8EBEE;
    --encre-douce: #A9B1BB;
    --trait: #3A424C;
    --accent: #5B9BFF;
    --accent-texte: #0B1220;
    --erreur: #FF5A5F;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--encre);
  font: 400 1rem/1.6 var(--police);
}

.page {
  flex: 1;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 4rem 1rem 2rem;
}

.domaine {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  line-height: 1.2;
  text-wrap: balance;
}

.intro {
  margin: 0 0 2rem;
  color: var(--encre-douce);
}

.formulaire {
  display: grid;
  gap: 1.1rem;
  padding: 1.5rem;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 8px;
}

.champ { display: grid; gap: 0.35rem; }

label { font-weight: 600; font-size: 0.9375rem; }

input, textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: var(--encre);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 6px;
}

textarea { resize: vertical; min-height: 8rem; }

input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

button {
  justify-self: start;
  padding: 0.7rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--accent-texte);
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

button[disabled] { opacity: 0.6; cursor: progress; }

.piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.etat { margin: 0; min-height: 1.6em; font-weight: 600; }
.etat-ok { color: var(--accent); }
.etat-erreur { color: var(--erreur); }

.rgpd { margin: 0; font-size: 0.8125rem; color: var(--encre-douce); }

.pied {
  padding: 1.5rem 1rem 2rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--encre-douce);
}

.pied p { margin: 0.2rem 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}