/* forms/lead-form.css : brique 5+6 — formulaire collecteur + spinner.
   Volontairement portable : pas de dépendance au styles.css du site, mais
   réutilise les variables CSS quand elles existent. */

.devis-form-section { padding: 3rem 0; background: var(--bg-soft, #f7f8fa); }
.devis-form-inner { max-width: 720px; margin: 0 auto; background: #fff;
  border-radius: var(--radius-lg, 12px); padding: 2rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06); }
.devis-form-header { text-align: center; margin-bottom: 1.5rem; }
.devis-form-header h2 { margin: 0.75rem 0 0.5rem; font-size: 1.5rem; }
.devis-form-header p { color: var(--text-muted, #555); margin: 0; }
.badges-trust { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1rem; }
.badge-trust { font-size: 0.78rem; padding: 0.25rem 0.6rem; background: #eef4ff;
  color: var(--primary, #1a4d8f); border-radius: 999px; font-weight: 600; }

/* VEN-780 : les panneaux togglés via l'attribut `hidden` posent parfois un
   `display` explicite (flex/grid) qui bat la règle UA `[hidden]{display:none}`.
   Sans ce garde, hide(form) laisse le formulaire empilé au-dessus de la
   confirmation après un submit réussi. */
.lead-form[hidden], .lead-spinner[hidden], .lead-confirmation[hidden],
.lead-refused[hidden], .lead-form-error[hidden] { display: none !important; }

.lead-form { display: flex; flex-direction: column; gap: 1rem; position: relative; }
.lead-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.lead-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.92rem; }
.lead-field-wide { grid-column: 1 / -1; }
.lead-field span { font-weight: 600; color: #222; }
.lead-field input, .lead-field select, .lead-field textarea {
  font: inherit; padding: 0.55rem 0.7rem; border: 1px solid #d0d4dc;
  border-radius: 8px; background: #fff; color: #111; transition: border-color 120ms;
}
.lead-field input:focus, .lead-field select:focus, .lead-field textarea:focus {
  outline: 0; border-color: var(--primary, #1a4d8f); box-shadow: 0 0 0 3px rgba(26,77,143,0.15);
}
.lead-submit-btn { font: inherit; font-weight: 700; padding: 0.85rem 1rem;
  background: var(--accent, #e87b00); color: #fff; border: 0; border-radius: 10px;
  cursor: pointer; font-size: 1rem; transition: background 120ms, transform 80ms; }
.lead-submit-btn:hover:not(:disabled) { background: var(--accent-dark, #c96a00); }
.lead-submit-btn:active:not(:disabled) { transform: translateY(1px); }
.lead-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.lead-form-reassurance { font-size: 0.82rem; color: var(--text-muted, #555); text-align: center; margin: 0; }
.lead-form-error { background: #fdecea; color: #b91c1c; padding: 0.7rem 0.9rem;
  border-radius: 8px; font-size: 0.9rem; border: 1px solid #f3b8b3; }

@media (max-width: 600px) {
  .lead-form-grid { grid-template-columns: 1fr; }
  .devis-form-inner { padding: 1.25rem; }
}

/* Spinner */
.lead-spinner { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 0; }
.lead-spinner-ring {
  width: 56px; height: 56px;
  border: 5px solid #e7ecf3;
  border-top-color: var(--primary, #1a4d8f);
  border-radius: 50%;
  animation: hc31-spin 0.9s linear infinite;
}
@keyframes hc31-spin { to { transform: rotate(360deg); } }
.lead-spinner-text { margin: 0; color: var(--text-muted, #555); font-size: 0.95rem; }

/* Confirmation */
.lead-confirmation, .lead-refused {
  text-align: center; padding: 1.5rem; border-radius: 10px;
}
.lead-confirmation { background: #ecfdf3; border: 1px solid #b6e9cb; }
.lead-confirmation-icon {
  width: 56px; height: 56px; line-height: 56px; margin: 0 auto 0.75rem;
  border-radius: 50%; background: #16a34a; color: #fff; font-size: 1.8rem;
}
.lead-confirmation h3 { margin: 0 0 0.5rem; color: #14532d; }
.lead-confirmation p { margin: 0; color: #14532d; }
/* Spinner officiel VUD injecté dans la confirmation (VEN-779) */
.lead-vud-spinner { margin-top: 1.25rem; }
.lead-vud-spinner-hint { margin: 0 0 0.75rem; color: #14532d; font-size: 0.9rem; font-weight: 600; }
.lead-vud-spinner-mount { min-height: 40px; }
.lead-refused { background: #fff7ed; border: 1px solid #fed7aa; }
.lead-refused h3 { margin: 0 0 0.5rem; color: #9a3412; }
.lead-refused p { margin: 0.25rem 0; color: #7c2d12; }