/* Codes graphiques repris des visuels : aplat saturé, capitales grasses, jaune sur bleu. */
:root {
  --bleu: #1b6fe8;
  --bleu-fonce: #12488f;
  --jaune: #ffe01b;
  --rouge: #e5271b;
  --blanc: #fffdf5;
  --ombre: 4px 4px 0 rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bleu);
  color: var(--blanc);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

.page { max-width: 620px; margin: 0 auto; padding: 24px 18px 64px; }

.hero { width: 100%; border: 5px solid var(--jaune); border-radius: 6px; display: block; }

h1 {
  font-family: "Anton", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--jaune);
  font-size: clamp(34px, 9vw, 58px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 26px 0 6px;
  text-shadow: var(--ombre);
}

h2 {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
  color: var(--jaune);
  font-size: 24px;
  letter-spacing: 0.02em;
  margin: 34px 0 12px;
}

.infos {
  background: var(--blanc);
  color: #16233a;
  border-radius: 8px;
  padding: 18px 20px;
  margin: 22px 0;
  box-shadow: var(--ombre);
}
.infos strong { font-size: 20px; }
.infos .ligne { margin: 4px 0; }

form { margin-top: 10px; }

fieldset { border: none; padding: 0; margin: 0 0 20px; }
legend { font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14px; padding-bottom: 6px; }

.choix { display: grid; gap: 10px; }
.choix label {
  display: block;
  background: var(--blanc);
  color: #16233a;
  border: 3px solid transparent;
  border-radius: 8px;
  padding: 13px 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--ombre);
}
.choix input { margin-right: 10px; accent-color: var(--rouge); }
.choix label:has(input:checked) { border-color: var(--rouge); background: var(--jaune); }

.duo { display: flex; gap: 14px; }
.duo > div { flex: 1; }

label.champ { display: block; font-weight: bold; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }

input[type="text"], input[type="email"], input[type="number"], textarea {
  width: 100%;
  font: inherit;
  padding: 11px 13px;
  border: 3px solid var(--bleu-fonce);
  border-radius: 8px;
  background: var(--blanc);
  color: #16233a;
}
textarea { min-height: 88px; resize: vertical; }

button {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 0.03em;
  background: var(--rouge);
  color: var(--blanc);
  border: none;
  border-radius: 10px;
  padding: 16px 24px;
  width: 100%;
  cursor: pointer;
  box-shadow: var(--ombre);
}
button:hover { background: #ff3a2c; }

.frites { font-size: 26px; letter-spacing: 4px; text-align: center; margin: 26px 0 0; }
.note { font-size: 14px; opacity: 0.85; }

/* Récapitulatif privé */
table { width: 100%; border-collapse: collapse; background: var(--blanc); color: #16233a; border-radius: 8px; overflow: hidden; font-size: 14px; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #dfd9c8; }
th { background: var(--bleu-fonce); color: var(--jaune); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }
.tableau { overflow-x: auto; }
.oui { color: #1a7f37; font-weight: bold; }
.non { color: var(--rouge); font-weight: bold; }
.attente { color: #8a6d3b; font-style: italic; }
.compteurs { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.compteur { background: var(--blanc); color: #16233a; border-radius: 8px; padding: 10px 14px; box-shadow: var(--ombre); }
.compteur b { display: block; font-size: 26px; font-family: "Anton", Impact, sans-serif; }
a { color: var(--jaune); }