/* ============================================================
   Formulaire de candidature — étape 4.
   Complète legal.css, qui porte déjà .consentement et le
   bandeau. Aucune couleur, aucune police littérale : tout
   passe par les jetons de tokens.css.

   LIGNE ROUGE : esthétique de terminal, ergonomie de bouton.
   Aucun champ libre ne déclenche d'action, aucune syntaxe
   n'est attendue, aucun message d'erreur brut n'est affiché.
   ============================================================ */

.champ{margin:0 0 22px}

.champ label{
  font-family:var(--f-term); font-size:20px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--texte-faible);
  display:block; margin-bottom:6px;
}

/* Ce que le champ attend, en français, AVANT la saisie et non
   après l'erreur. Un formulaire qui n'explique qu'en rouge a
   déjà échoué. */
.champ .aide{
  display:block; font-size:13.5px; color:var(--texte-faible);
  margin:0 0 8px; max-width:60ch;
}

.champ input[type="email"],
.champ textarea{
  width:100%; min-height:44px;          /* cible autonome, plancher DA §6 */
  padding:11px 13px;
  background:var(--fond-2); color:var(--texte);
  border:1px solid var(--filet);
  font-family:var(--f-data); font-size:16.5px; line-height:1.5;
}
.champ textarea{min-height:132px; resize:vertical}

.champ input[type="email"]:focus-visible,
.champ textarea:focus-visible{
  outline:2px solid var(--phos); outline-offset:2px;
  border-color:var(--phos-sourd);
}

/* Le compteur de caractères est une VALEUR : Space Grotesk. */
.champ .compte{font-size:13.5px; color:var(--texte-faible); font-variant-numeric:tabular-nums}

/* ---------- engagements à cocher ----------
   Même bloc que .consentement (legal.css) : jamais pré-coché,
   cible d'au moins 44 px, libellé entièrement cliquable. */
.engagements{border:0; padding:0; margin:0 0 8px}
.engagements legend{
  font-family:var(--f-term); font-size:20px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--texte-faible);
  padding:0; margin-bottom:2px;
}

/* ---------- honeypot ----------
   Piège à robots. Masqué à l'œil ET au lecteur d'écran, jamais
   par `display:none` seul : certains robots le détectent. */
.leurre{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden;
}

/* ---------- envoi ---------- */
.envoi{margin-top:26px}
.envoi .gratuit{
  font-size:13.5px; color:var(--texte-faible); margin:10px 0 0; max-width:60ch;
}

@media(max-width:420px){
  .champ input[type="email"], .champ textarea{font-size:16px}
}