@font-face { font-family: "Raleway"; src: url("fonts/Raleway-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("fonts/Raleway-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root {
  --magenta: #c10067; --bleu: #0075ba; --orange: #d57b1b;
  --encre: #1d1d1b; --gris: #5f5f5f; --fond: #ffffff; --fond-doux: #f4f4f4; --trait: #c8c8c8;
  --danger: #b00020;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: "Raleway", system-ui, sans-serif; color: var(--encre); background: var(--fond); line-height: 1.35; }
button { font: inherit; cursor: pointer; }
.bouton { border: 2px solid var(--encre); background: var(--fond); color: var(--encre); border-radius: 12px; padding: .4em 1em; min-height: 48px; }
.bouton.principal { background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 700; }
.bouton.danger { border-color: var(--danger); color: var(--danger); }
.bouton:disabled { opacity: .4; cursor: not-allowed; }
.hors-ligne { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--danger); color: #fff; text-align: center; padding: .4em; font-weight: 700; }
.erreur { color: var(--danger); font-weight: 700; }
.formulaire { max-width: 420px; margin: 10vh auto; padding: 0 16px; display: grid; gap: .8em; }
.formulaire label { display: grid; gap: .3em; }
.formulaire input { font: inherit; padding: .5em; border: 2px solid var(--trait); border-radius: 8px; }