/*
 * Field
 *   <div class="field"><label class="label">Email</label><input class="input"></div>
 *   .field-row      deux champs côte à côte
 *   .input-group    champ + bouton sur une ligne
 *   .checkbox-field label enveloppant une case à cocher (.checkbox)
 *   .field-hint / .field-message(.is-success|.is-error) / .alert-success
 */

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

.label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 0.5px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  color: var(--color-on-surface);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.input::placeholder,
.textarea::placeholder { color: var(--color-on-surface-muted); }
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  border-color: var(--color-primary-dark);
  background: var(--color-white);
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.textarea { resize: vertical; min-height: 120px; }
.select option { background: var(--color-white); color: var(--color-on-surface); }

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-on-surface-variant);
  cursor: pointer;
}
.checkbox { margin-top: 2px; flex-shrink: 0; accent-color: var(--color-primary-dark); }

.input-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.input-group .input { flex: 1; width: auto; min-width: 200px; }

.field-hint { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-on-surface-muted); }
.field-message { font-family: var(--font-sans); font-size: var(--text-sm); }
.field-message.is-success { color: var(--color-status-live); }
.field-message.is-error   { color: var(--color-status-error); }

.alert-success {
  padding: 1.2rem 1.5rem;
  background: rgba(var(--color-accent-rgb), 0.10);
  border-left: 2px solid var(--color-accent-text);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-style: italic;
}

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
}