/* ============================================================
   BLOC FORMULAIRE DEVIS/LEAD (structure neutre)
   Contenu : titre + sous-titre + formulaire (4 champs + honeypot
   invisible + CSRF token). Validation native HTML5.
   Zéro couleur, zéro police nominale, zéro valeur de style.
   ============================================================ */

.bloc-formulaire {
  background: var(--surface-alt);
  padding-block: var(--sp-9);
}

.formulaire-entete {
  text-align: center;
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-bottom: var(--sp-7);
}

.formulaire-titre {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: var(--tt-display);
  text-wrap: balance;
  color: var(--ink);
}

.formulaire-soustitre {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--ink-muted);
}

/* Formulaire */
.formulaire-corps {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

/* Honeypot : complètement invisible */
.form-hp {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Grille des champs : 2 colonnes, message en pleine largeur */
.form-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.form-champ--full {
  grid-column: 1 / -1;
}

/* Label */
.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--w-strong);
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

.form-label [aria-hidden] {
  color: var(--danger);
}

/* Input / Textarea */
.form-input {
  display: block;
  width: 100%;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--surface-raised);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-field);
}

@media (prefers-reduced-motion: no-preference) {
  .form-input { transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.form-input:user-invalid {
  border-color: var(--danger);
}

.form-input::placeholder {
  color: var(--ink-muted);
  opacity: 0.6;
}

textarea.form-input {
  resize: vertical;
  min-height: 6rem;
}

/* Message d'erreur */
.form-erreur {
  display: block;
  font-size: var(--fs-xs);
  color: var(--danger);
  margin-top: var(--sp-1);
  min-height: 1.2em;
}

.form-erreur:empty { display: none; }

/* Actions */
.form-actions {
  margin-top: var(--sp-5);
  text-align: center;
}

.form-submit {
  min-width: 14rem;
}

.form-rgpd {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.form-rgpd a {
  text-decoration: underline;
  color: var(--ink);
}

/* Erreur réseau */
.form-erreur-reseau {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--danger);
}

/* Message de succès */
.form-succes {
  text-align: center;
  padding-block: var(--sp-7);
}

.form-succes-texte {
  font-size: var(--fs-lg);
  color: var(--success);
}

/* Mobile : une seule colonne */
@media (max-width: 640px) {
  .bloc-formulaire { padding-block: var(--sp-7); }
  .form-champs { grid-template-columns: 1fr; }
  .formulaire-entete { margin-bottom: var(--sp-5); }
}