/* =========================================================
   Formulaire de demande en 3 étapes (contact-form.php)
   Reprend les couleurs du site : --primary, --ink, --muted, --card-edge, --bg
   ========================================================= */

.lead-wizard {
  --lw-text: #efe4cf;
  --lw-field: #1f1e1c; /* opaque : sert aussi à masquer le fond du remplissage automatique */
  --lw-error: #ff8a80;
  position: relative;
  padding: 40px;
}

/* En-tête */
.lw-head { margin-bottom: 30px; }

.lw-kicker {
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primary);
}

.lw-title {
  margin: 0 0 14px;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.01em;
  text-align: left;
  color: var(--lw-text);
}

.lw-title em {
  font-family: 'Gambetta', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
}

.lw-proof {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.lw-stars { margin-right: 6px; color: var(--primary); letter-spacing: .08em; }
.lw-dot { margin: 0 6px; opacity: .5; }

.lw-progress {
  display: none;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
}

.lead-wizard.is-wizard .lw-progress { display: flex; }

.lw-bar {
  flex: 1;
  height: 2px;
  background: var(--card-edge);
  overflow: hidden;
}

.lw-bar span {
  display: block;
  height: 100%;
  width: 33.34%;
  background: linear-gradient(90deg, #8a6c45, var(--primary));
  transition: width .35s ease;
}

.lw-count {
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Étapes */
.lw-step {
  min-width: 0;
  margin: 0 0 36px;
  padding: 0;
  border: 0;
}

.lw-step-title {
  margin: 0 0 20px;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--lw-text);
}

.lead-wizard.is-wizard .lw-step { display: none; margin-bottom: 0; }
.lead-wizard.is-wizard .lw-step.is-active { display: block; animation: lw-in .3s ease; }

@keyframes lw-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Champs */
.lead-wizard .form-group { margin-bottom: 20px; }
.lead-wizard .form-row { margin-bottom: 0; }

.lead-wizard .form-group > label:not(.lw-check),
.lw-label {
  margin: 0 0 10px;
  padding: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
}

.lw-optional {
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--muted);
}

.lead-wizard .form-group input:not([type="checkbox"]),
.lead-wizard .form-group textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  background: var(--lw-field);
  color: var(--lw-text);
  font: inherit;
  font-size: 1.05rem; /* 16 px minimum : évite le zoom automatique sur iPhone */
}

.lead-wizard .form-group input::placeholder,
.lead-wizard .form-group textarea::placeholder { color: var(--muted); opacity: .6; }

.lead-wizard .form-group input:not([type="checkbox"]):focus,
.lead-wizard .form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(218, 197, 167, .12);
}

/* Remplissage automatique (Chrome, Safari) : sans ça, fond bleu clair sous un texte beige illisible.
   L'ombre intérieure recouvre le fond imposé par le navigateur, la transition retarde son apparition. */
.lead-wizard .form-group input:-webkit-autofill,
.lead-wizard .form-group input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--lw-text);
  caret-color: var(--lw-text);
  -webkit-box-shadow: 0 0 0 1000px var(--lw-field) inset;
  box-shadow: 0 0 0 1000px var(--lw-field) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}

.lead-wizard .form-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lw-text);
  -webkit-box-shadow: 0 0 0 1000px var(--lw-field) inset, 0 0 0 3px rgba(218, 197, 167, .12);
  box-shadow: 0 0 0 1000px var(--lw-field) inset, 0 0 0 3px rgba(218, 197, 167, .12);
  border-color: var(--primary);
}

.lead-wizard .form-group input:autofill { /* Firefox */
  box-shadow: 0 0 0 1000px var(--lw-field) inset;
  color: var(--lw-text);
}

.lead-wizard input[type="date"] { color-scheme: dark; min-height: 56px; }
.lead-wizard input[type="date"]:disabled { opacity: .45; }
.lead-wizard [aria-invalid="true"] input,
.lead-wizard input[aria-invalid="true"] { border-color: var(--lw-error); }

.lw-error {
  margin: 8px 0 0;
  font-size: .92rem;
  color: var(--lw-error);
}

/* Champ « 100 invités » */
.lw-suffix { position: relative; }
.lw-suffix input { padding-right: 90px; }
.lw-suffix span {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

/* Choix en pastilles (boutons radio) */
.lw-field {
  min-width: 0;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.lw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lw-chip { position: relative; }

.lw-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.lw-chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--card-edge);
  border-radius: 999px;
  background: var(--lw-field);
  color: var(--lw-text);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.lw-chip span:hover { border-color: var(--primary); }

/* Sélection : seulement des couleurs, pour que la pastille garde exactement sa taille */
.lw-chip input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
  color: #14110c;
}

.lw-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Case « Date pas encore fixée » */
.lw-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--lw-text);
  font-size: 1rem;
  cursor: pointer;
}

.lw-check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
}

/* Navigation */
.lw-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}

.lw-nav .lw-next,
.lw-nav .lw-submit { margin-left: auto; }

.lw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 28px;
  border: 1px solid var(--primary);
  border-radius: 14px;
  background: var(--primary);
  color: #14110c;
  font: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.lw-btn:hover { background: transparent; color: var(--primary); }
.lw-btn:disabled { opacity: .6; cursor: wait; }

.lw-back {
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 1.02rem;
  cursor: pointer;
}

.lw-back:hover { color: var(--primary); }

/* Sans JavaScript, tout s'affiche à la suite : pas de « Continuer » ni de « Retour » */
.lead-wizard:not(.is-wizard) .lw-next,
.lead-wizard:not(.is-wizard) .lw-back { display: none; }

.lw-privacy {
  margin: 22px 0 0;
  font-size: .92rem;
  color: var(--muted);
}

.lw-call {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--card-edge);
  color: var(--muted);
  text-align: center;
}

.lw-call a { color: var(--primary); white-space: nowrap; }

/* Champ piège anti-robots */
.lw-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Remerciement */
.lw-success { text-align: left; }
.lw-success-text { margin: 0 0 26px; font-size: 1.15rem; line-height: 1.55; color: var(--lw-text); }
.lw-success-text a { color: var(--primary); white-space: nowrap; }
.lw-hint { margin: 10px 0 24px; color: var(--muted); }
.lw-back-link { color: var(--muted); }

@media (max-width: 780px) {
  .lead-wizard { padding: 26px 20px; }
  .lw-head { margin-bottom: 24px; }
  .lw-btn { padding: 16px 22px; }
  .lw-chip span { padding: 11px 16px; }
}