/*
 * Champs de formulaire. Un seul style de base, réutilisé par les futurs
 * formulaires de qualification (phase 5), de contact (FormPage) et
 * d'authentification (phase 3).
 */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375em;
  margin-bottom: 1.25em;
}

.field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink);
}

.field-hint {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.field-error {
  font-size: var(--fs-small);
  color: var(--c-error);
}

/*
 * Champ honeypot (phase 9, section 10) : présent dans le DOM (contrairement
 * à un simple type="hidden", que certains bots évitent déjà) mais
 * invisible et inaccessible au clavier pour un humain — technique standard
 * de masquage accessible, jamais `display:none` (que certains lecteurs
 * d'écran ignorent différemment de ce qui est attendu ici).
 */
.hp-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.7em 0.9em;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--fs-body);
}

.textarea {
  resize: vertical;
  min-height: 8em;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--c-muted);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--c-muted);
}

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select {
  border-color: var(--c-error);
  background: var(--c-error-bg);
}

.checkbox-field,
.radio-field {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: var(--fs-body);
  color: var(--c-body);
}

.checkbox-field input,
.radio-field input {
  margin-top: 0.2em;
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--c-blue-600);
}

/* Formulaire compact d'inscription à la newsletter (footer) : champ
   arrondi + bouton d'envoi carré, comme sur la maquette. */

.newsletter-form {
  display: flex;
  gap: 0.5em;
}

.newsletter-form .input {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--c-white);
}

.newsletter-form .input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter-form .btn-submit {
  flex-shrink: 0;
  width: 2.75em;
  height: 2.75em;
  border-radius: var(--radius-sm);
  background: var(--c-blue-600);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.newsletter-form .btn-submit:hover {
  background: var(--c-blue-700);
}