.titre-connexion {
  font-size: clamp(32px, 6vw, 44px);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.sous-titre { color: var(--encre-tenue); font-size: var(--t-texte); }

.formulaire { display: grid; gap: var(--e4); margin-top: var(--e3); }

.champ { display: grid; gap: var(--e2); }

.champ-libelle {
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.champ-saisie {
  width: 100%;
  padding: 12px 14px;
  background: var(--fond);
  border: 1px solid var(--trait-fort);
  /* 16 px minimum : en dessous, iOS zoome sur le champ au premier appui et la
   * page se met à défiler latéralement. */
  font-size: max(16px, var(--t-base));
}

.champ-saisie:focus { border-color: var(--accent); background: var(--surface); }

.aide { font-size: var(--t-petit); color: var(--encre-tenue); }