/* Formulaire d'admission — Clinique Churchill.
   Aucune ressource externe : pas de CDN, pas de police distante, pas de
   requête tierce. Une page qui collecte des données de santé ne doit
   solliciter personne d'autre que son propre domaine (PROJECT.md §10). */

/* `hidden` doit l'emporter sur toute règle d'affichage.
   Sans cette ligne, `.connexion { display: grid }` — un sélecteur de classe,
   feuille auteur — écrasait `[hidden] { display: none }` de la feuille du
   navigateur : l'écran « Chargement… » restait affiché par-dessus
   l'application, qui tournait pourtant derrière. */
[hidden] { display: none !important; }

:root {
  --encre:      #221E18;
  --encre-doux: #6B635A;
  --creme:      #FAFAF8;
  --or:         #A9834B;
  --or-fonce:   #8A6535;
  --trait:      #E3DED5;
  --erreur:     #A8402C;
  --r:          12px;
}

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

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--creme);
  color: var(--encre);
  font: 400 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

header, main, footer { max-width: 46rem; margin-inline: auto; }

/* ── En-tête ─────────────────────────────────────────────────────────── */

.entete { padding: 3rem 0 2rem; }

.marque {
  margin: 0 0 1.5rem;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or-fonce);
}

h1 { margin: 0 0 .75rem; font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 600; }
h1 span { color: var(--encre-doux); font-weight: 400; }

.chapo { margin: 0; color: var(--encre-doux); max-width: 38rem; }
.chapo span { display: block; margin-top: .35rem; font-size: .9rem; }

.reprise {
  margin: 1.5rem 0 0;
  padding: .75rem 1rem;
  border-left: 3px solid var(--or);
  background: #fff;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .9rem;
  color: var(--encre-doux);
}

/* ── Sections ────────────────────────────────────────────────────────── */

fieldset {
  margin: 0 0 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  background: #fff;
}

legend {
  padding: 0 .5rem;
  margin-inline-start: -.5rem;
  font-weight: 600;
  font-size: 1.05rem;
}
legend span { color: var(--encre-doux); font-weight: 400; }

/* ── Champs ──────────────────────────────────────────────────────────── */

.champ { margin-bottom: 1.1rem; }
.champ:last-child { margin-bottom: 0; }

.grille { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.grille.trois { grid-template-columns: minmax(6rem, .6fr) 1.4fr 1fr; }

@media (max-width: 34rem) {
  .grille, .grille.trois { grid-template-columns: 1fr; }
}

label {
  display: block;
  margin-bottom: .35rem;
  font-size: .92rem;
  font-weight: 500;
}

label .en {
  display: block;
  font-weight: 400;
  font-size: .8rem;
  color: var(--encre-doux);
}

abbr[title] { color: var(--or-fonce); text-decoration: none; }

input, select {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  /* 16px minimum : en dessous, iOS zoome au focus. */
  font-size: max(1rem, 16px);
}

select { appearance: none; background-image: none; padding-right: .8rem; }

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

input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--erreur); }

.aide { margin: .35rem 0 0; font-size: .82rem; color: var(--encre-doux); }

.erreur { margin: .35rem 0 0; font-size: .85rem; color: var(--erreur); }
.erreur:empty { display: none; }

.erreur.globale {
  padding: .85rem 1rem;
  border: 1px solid var(--erreur);
  border-radius: var(--r);
  background: #fff;
}

/* ── Mention RGPD, envoi ─────────────────────────────────────────────── */

.rgpd {
  margin: 1.75rem 0;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--encre-doux);
}
.rgpd a { color: var(--or-fonce); }

button {
  width: 100%;
  padding: .95rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--encre);
  color: var(--creme);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}

button:hover:not(:disabled) { background: var(--or-fonce); }
button:disabled { opacity: .55; cursor: progress; }

.etat {
  margin: .75rem 0 0;
  min-height: 1.4em;
  font-size: .85rem;
  color: var(--encre-doux);
  text-align: center;
}

footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--trait);
  font-size: .8rem;
  color: var(--encre-doux);
  text-align: center;
}

/* Piège à robots : hors flux et hors champ, sans `display:none`
   — certains automates ignorent les champs franchement masqués. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sans-marge { margin: 0; }