:root {
  --bleu: #1d4ed8; --vert: #15803d; --orange: #b45309; --rouge: #b91c1c;
  --gris: #f3f4f6; --texte: #111827;
  font-size: 17px;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, sans-serif; color: var(--texte);
  background: #fff; padding-bottom: 5rem;
}
.bandeau {
  position: sticky; top: 0; z-index: 10; padding: .8rem 1rem;
  background: var(--gris); font-weight: 600; text-align: center;
}
.bandeau.ok { background: #dcfce7; color: var(--vert); }
.bandeau.attente { background: #fef3c7; color: var(--orange); }
main { padding: 1rem; max-width: 30rem; margin: 0 auto; }
label { display: block; font-weight: 600; margin: .9rem 0 .25rem; }
input {
  width: 100%; padding: .9rem; font-size: 1.1rem;
  border: 2px solid #d1d5db; border-radius: .6rem;
}
input:focus { outline: 3px solid var(--bleu); border-color: var(--bleu); }
fieldset.deja-client { border: none; padding: 0; margin: 1.2rem 0 0; }
legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.boutons-oui-non { display: flex; gap: .8rem; }
.boutons-oui-non button {
  flex: 1; padding: 1rem; font-size: 1.2rem; font-weight: 700;
  border: 2px solid #d1d5db; border-radius: .6rem; background: #fff;
}
.boutons-oui-non button.choisi { border-color: var(--bleu); background: #dbeafe; }
button.principal {
  width: 100%; margin-top: 1.4rem; padding: 1.1rem; font-size: 1.25rem;
  font-weight: 700; color: #fff; background: var(--bleu);
  border: none; border-radius: .8rem;
}
.erreur { color: var(--rouge); font-weight: 600; }
.confirmation { color: var(--vert); font-weight: 700; text-align: center; font-size: 1.1rem; }
.pied { position: fixed; bottom: 0; right: 0; padding: .6rem; }
#menu-bouton { font-size: 1.6rem; background: var(--gris); border: none; border-radius: 50%; width: 3rem; height: 3rem; }
.menu { position: absolute; bottom: 3.6rem; right: .6rem; background: #fff;
  border: 1px solid #d1d5db; border-radius: .6rem; box-shadow: 0 4px 14px rgb(0 0 0 / .15); }
.menu button { display: block; width: 100%; padding: .9rem 1.1rem; background: none; border: none; text-align: left; font-size: 1rem; }
.overlay { position: fixed; inset: 0; background: rgb(0 0 0 / .5); display: grid; place-items: center; padding: 1rem; z-index: 20; }
/* display:grid écraserait le display:none de l'attribut hidden sans cette règle. */
.overlay[hidden] { display: none; }
.carte { background: #fff; border-radius: 1rem; padding: 1.4rem; max-width: 26rem; }
.carte h1 { margin-top: 0; font-size: 1.3rem; }
.carte button { margin-top: .8rem; }
#fermer-installation { width: 100%; padding: .8rem; background: var(--gris); border: none; border-radius: .6rem; }