/*
  Studio 36 — Formulaires & champs (design.md §5.4).
  Label toujours visible au-dessus du champ, validation au blur (comportement
  gere par le JS de formulaire, pas par CSS), erreur = cause + correction.
*/

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--text-label-tracking);
  color: var(--text-primary);
}

.field__label .field__optional {
  /* --text-muted sur --bg-base est proche du seuil AA pour du texte courant
     (design.md §3, ~4.3:1) : reserve aux metadonnees purement decoratives,
     jamais a une information necessaire a la comprehension du champ. */
  color: var(--text-secondary);
  font-weight: 400;
}

.field__control {
  width: 100%;
  min-height: 48px;
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--duration-micro) var(--ease-out), box-shadow var(--duration-micro) var(--ease-out);
}

textarea.field__control {
  min-height: 120px;
  resize: vertical;
}

.field__control::placeholder {
  color: var(--text-secondary);
}

.field__control:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.field__control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.field__helper {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--text-secondary);
}

.field__error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--error);
}

.field__error svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---------- Etat erreur ---------- */

.field--error .field__control {
  border-color: var(--error);
}

.field--error .field__error {
  display: flex;
}

/* ---------- Resume d'erreurs (design.md §5.4, formulaires longs) ---------- */

.form-error-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--error-soft);
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.form-error-summary__title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-primary);
}

.form-error-summary a {
  color: var(--error);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Checkbox / radio (reset visuel) ---------- */

.checkbox,
.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.checkbox input,
.radio input {
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: border-color var(--duration-micro) var(--ease-out), background-color var(--duration-micro) var(--ease-out);
}

.checkbox input {
  border-radius: var(--radius-xs);
}

.radio input {
  border-radius: var(--radius-pill);
}

.checkbox input:checked,
.radio input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.checkbox input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B0B0C' stroke-width='2'%3E%3Cpath d='M3 8l3 3 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.radio input:checked {
  box-shadow: inset 0 0 0 4px var(--bg-base);
}

.checkbox input:focus-visible,
.radio input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.checkbox__label,
.radio__label {
  font-size: var(--text-body-size);
  color: var(--text-secondary);
}