/* Page provisoire du POC. Couleurs de design-system/tokens.json (D-014). */
:root {
  --nuit: #0e324a;
  --ciel: #cdebf6;
  --azur: #1f6ba8;
  --ardoise: #4a5a68;
  --fond: #f4f7f9;
  --erreur: #b3261e;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--nuit);
  font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { max-width: 32rem; margin: 0 auto; padding: 3rem 1rem; }
h1 { font: 600 2rem/1.2 Outfit, Inter, system-ui, sans-serif; margin: 0; }
h2 { font: 600 1.25rem/1.3 Outfit, Inter, system-ui, sans-serif; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.sous-titre { color: var(--ardoise); margin: 0.25rem 0 2rem; }
section { background: #fff; border-radius: 12px; padding: 1.5rem; }
label { display: block; font-weight: 600; margin: 1rem 0 0.25rem; }
input, select {
  width: 100%; padding: 0.625rem 0.75rem; font: inherit; color: inherit;
  border: 1px solid #c5ced6; border-radius: 8px; background: #fff;
}
input:focus, select:focus { outline: 2px solid var(--azur); outline-offset: 1px; }
button {
  margin-top: 1rem; padding: 0.625rem 1.25rem; font: 600 1rem/1.5 inherit;
  color: #fff; background: var(--nuit); border: 0; border-radius: 8px; cursor: pointer;
}
button.secondaire { background: transparent; color: var(--nuit); border: 1px solid var(--nuit); }
button:disabled { opacity: 0.6; cursor: wait; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; }
dt { color: var(--ardoise); }
dd { margin: 0; overflow-wrap: anywhere; }
.message { min-height: 1.5rem; color: var(--ardoise); margin: 1rem 0 0; }
.message.erreur { color: var(--erreur); }
.cle {
  font: 0.9375rem/1.5 ui-monospace, "SF Mono", Menlo, monospace; background: var(--ciel);
  padding: 0.5rem 0.75rem; border-radius: 8px; overflow-wrap: anywhere;
}