/* Champ de formulaire partagé : libellé, contrôle, aide, erreur (lié par aria-describedby).
   Bordure ≥ 3:1 (WCAG 1.4.11) - correction d'accessibilité héritée du README de contact. */
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink); }
.form-field__optional { font-weight: 400; color: var(--color-text-muted); }
.form-field__required { color: var(--color-alert); margin-left: 2px; }
.form-field__control {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-size: var(--fs-base); font-family: var(--font-sans); color: var(--color-ink);
  --ff-bg: var(--color-paper);   /* fond du champ selon son état : lu aussi par la règle « remplissage automatique » ci-dessous */
  background: var(--ff-bg); border: 1.5px solid var(--color-border-field); border-radius: var(--r-control);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
textarea.form-field__control { min-height: 140px; resize: vertical; line-height: 1.5; }
/* Liste déroulante : le chevron natif est collé au bord droit, on le remplace par le chevron du site, décalé de 14 px. */
select.form-field__control { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4A34' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
select.form-field__control:disabled { cursor: not-allowed; }
.form-field__control::placeholder { color: var(--color-text-muted); opacity: 0.85; }
.form-field__control:hover { border-color: var(--color-wood); }
.form-field__control:focus-visible { outline: none; border-color: var(--color-forest); box-shadow: 0 0 0 1px var(--color-forest); }
.form-field__control[aria-invalid="true"] { --ff-bg: var(--color-ember-tint); border-color: var(--color-alert); }
.form-field__control[readonly] { --ff-bg: var(--color-surface-dim); }
.form-field__control:disabled { opacity: 0.6; cursor: not-allowed; }

/* Remplissage automatique du navigateur (Chrome, Edge, Safari : :-webkit-autofill ; Firefox : :autofill).
   Le navigateur impose son propre fond (bleu pâle / jaune) et sa couleur de texte, et ignore `background`.
   On le recouvre avec une ombre interne de la couleur réelle du champ (--ff-bg) et on rend la couleur de texte du site.
   :is() est « tolérant » : un navigateur qui ne connaît qu'un des deux pseudo-classes ignore l'autre au lieu d'invalider la règle.
   Transition : sans exclure box-shadow, l'ombre apparaîtrait en fondu et laisserait entrevoir le fond du navigateur. */
.form-field__control:is(:-webkit-autofill, :autofill) {
  -webkit-text-fill-color: var(--color-ink);
  caret-color: var(--color-ink);
  box-shadow: 0 0 0 1000px var(--ff-bg) inset;
  transition: border-color 160ms ease;
}
/* Le halo de focus est aussi un box-shadow : on le recompose avec l'ombre de recouvrement (sinon il disparaîtrait). */
.form-field__control:is(:-webkit-autofill, :autofill):focus-visible {
  box-shadow: 0 0 0 1000px var(--ff-bg) inset, 0 0 0 1px var(--color-forest);
}
.form-field__hint { font-size: var(--fs-xs); color: var(--color-text-muted); }
.form-field__error { font-size: var(--fs-sm); font-weight: 500; color: var(--color-alert); }
.form-summary { padding: 14px 16px; border: 1.5px solid var(--color-alert); background: var(--color-ember-tint); border-radius: var(--r-control); color: var(--color-alert); font-size: var(--fs-sm); }
.form-summary:focus-visible { outline: 2px solid var(--color-alert); outline-offset: 2px; }
.form-summary ul { margin-top: 6px; padding-left: 18px; list-style: disc; }
.form-summary a { text-decoration: underline; }