/* Champs, erreurs de champ et résumé d'erreurs (PRD, sections 27.3 et 28). */

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label {
  font-weight: var(--weight-strong);
}

.field__optional {
  font-weight: 400;
  color: var(--color-ink-soft);
}

.field__input {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-control);
  border-radius: var(--radius-none);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--fs-md);
  line-height: 1.4;
}

.field__input::placeholder {
  color: var(--color-ink-soft);
  opacity: 1;
}

.field__input:focus-visible {
  box-shadow: var(--focus-ring);
}

.field__input:disabled {
  border-color: var(--color-line);
  color: var(--color-ink-soft);
  cursor: not-allowed;
}

textarea.field__input {
  min-height: 140px;
  resize: vertical;
}

select.field__input {
  appearance: none;
  padding-right: var(--space-7);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-ink) 50%),
    linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.field__help {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-beurre);
  color: var(--color-on-accent);
  font-size: var(--fs-sm);
  font-weight: var(--weight-strong);
}

.field__error-icon {
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  font-size: var(--fs-xs);
  line-height: 1;
}

.field--error .field__input {
  border-width: 3px;
}

.error-summary {
  padding: var(--space-5);
  border: var(--border-control);
  border-left-width: var(--space-2);
  background: var(--color-surface);
}

.error-summary:focus-visible {
  box-shadow: var(--focus-ring);
}

.error-summary__title {
  font-size: var(--fs-subtitle);
  margin-bottom: var(--space-3);
}

.error-summary ul {
  margin: 0;
  padding-left: var(--space-5);
}

.form {
  display: grid;
  gap: var(--space-5);
  max-width: 36em;
}

/* Formulaire « form stack--lg » : un seul écart entre les champs, 32 px, y compris dans une grille à deux
   colonnes repliée sur téléphone. L'écart de la grille (24 px) et la marge de stack--lg (32 px) s'ajoutaient :
   56 px entre deux champs, 24 px entre Prénom et Nom (revue UX du 8 novembre 2026). */
.form.stack--lg {
  gap: var(--space-6);
}

.form.stack--lg > * + * {
  margin-top: 0;
}

.form.stack--lg .grid {
  gap: var(--space-6);
}