/**
 * LOGIMAT Préfab — tunnel de devis en 6 étapes.
 * Reprend les jetons de conversion.css ; le joint rouge marque l'étape en cours.
 */

.quote-funnel {
  border: 1px solid var(--lp-line, #e2e5e4);
  border-radius: 3px;
  padding: clamp(24px, 3vw, 40px);
  background: #fff;
}

/* ---------- Fil de progression ---------- */

.funnel-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  list-style: none;
  margin: 0 0 clamp(26px, 3vw, 38px);
  padding: 0 0 20px;
  border-bottom: 1px solid var(--lp-line, #e2e5e4);
  counter-reset: none;
}

.funnel-progress li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  font-size: .78rem;
  font-weight: 600;
  color: #9aa5a9;
  white-space: nowrap;
}

.funnel-progress li span {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: .76rem;
  font-weight: 750;
}

.funnel-progress li.is-current { color: var(--lp-brand, #bc3656); }

.funnel-progress li.is-current span {
  background: var(--lp-brand, #bc3656);
  border-color: var(--lp-brand, #bc3656);
  color: #fff;
}

.funnel-progress li.is-done { color: var(--lp-ink, #14212a); cursor: pointer; }

.funnel-progress li.is-done span {
  background: var(--lp-ink, #14212a);
  border-color: var(--lp-ink, #14212a);
  color: #fff;
}

/* ---------- Étape ---------- */

.funnel-step { border: 0; padding: 0; margin: 0; min-width: 0; }

.funnel-step > legend {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--lp-ink, #14212a);
  margin-bottom: 22px;
  padding: 0;
  outline: none;
}

.funnel-step-num {
  display: block;
  font-size: .69rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lp-brand, #bc3656);
  margin-bottom: 7px;
}

.funnel-help {
  font-size: .88rem;
  line-height: 1.65;
  color: var(--lp-muted, #5c6a70);
  margin: 0 0 20px;
}

/* ---------- Champs ---------- */

.field { margin-bottom: 18px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field--narrow { max-width: 180px; }

.field label,
.checkbox-group > legend {
  display: block;
  font-size: .86rem;
  font-weight: 650;
  color: var(--lp-ink, #14212a);
  margin-bottom: 7px;
}

.quote-funnel input[type="text"],
.quote-funnel input[type="email"],
.quote-funnel input[type="tel"],
.quote-funnel input[type="number"],
.quote-funnel input[type="file"],
.quote-funnel select,
.quote-funnel textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--lp-line, #e2e5e4);
  border-radius: 3px;
  font: inherit;
  font-size: .94rem;
  color: var(--lp-ink, #14212a);
  background: #fff;
}

.quote-funnel textarea { min-height: 130px; resize: vertical; }

.quote-funnel input:focus-visible,
.quote-funnel select:focus-visible,
.quote-funnel textarea:focus-visible {
  outline: 3px solid rgba(188, 54, 86, .35);
  outline-offset: 1px;
  border-color: var(--lp-brand, #bc3656);
}

/* ---------- Cartes de choix ---------- */

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.choice-stack { display: grid; gap: 12px; margin-bottom: 24px; }

.choice-card { position: relative; display: block; cursor: pointer; }

/* Le bouton radio reste accessible au clavier : déplacé, jamais masqué. */
.choice-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choice-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  padding: 18px 16px;
  border: 1px solid var(--lp-line, #e2e5e4);
  border-radius: 3px;
  transition: border-color .15s ease, background-color .15s ease;
}

.choice-card--row .choice-body { flex-direction: row; align-items: baseline; gap: 14px; }

.choice-body i { font-size: 1.3rem; color: var(--lp-brand, #bc3656); }
.choice-body strong { font-size: .94rem; color: var(--lp-ink, #14212a); line-height: 1.35; }
.choice-body small { font-size: .8rem; color: var(--lp-muted, #5c6a70); line-height: 1.5; }

.choice-card:hover .choice-body { border-color: #cfd5d4; }

.choice-card input:checked + .choice-body {
  border-color: var(--lp-brand, #bc3656);
  border-left: 3px solid var(--lp-brand, #bc3656);
  background: #fdf5f7;
}

.choice-card input:focus-visible + .choice-body {
  outline: 3px solid rgba(188, 54, 86, .35);
  outline-offset: 2px;
}

/* ---------- Cases à cocher ---------- */

.checkbox-group { border: 0; padding: 0; margin: 0 0 18px; }
.checkbox-group > legend { padding: 0; }

.checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--lp-ink, #14212a);
  margin-bottom: 9px;
  cursor: pointer;
}

.checkbox-line input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--lp-brand, #bc3656); }
.checkbox-line--consent { margin-top: 18px; font-size: .88rem; color: var(--lp-muted, #5c6a70); }
.checkbox-line a { color: var(--lp-brand-deep, #8e2440); text-decoration: underline; }

/* ---------- Pièces jointes ---------- */

.file-list { list-style: none; padding: 0; margin: 12px 0 0; }

.file-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .86rem;
  color: var(--lp-ink, #14212a);
  padding: 9px 12px;
  background: var(--lp-paper, #f7f6f3);
  border-radius: 3px;
  margin-bottom: 7px;
}

.file-list i { color: var(--lp-brand, #bc3656); }
.file-list span { margin-left: auto; color: var(--lp-muted, #5c6a70); font-size: .8rem; }

/* ---------- Récapitulatif ---------- */

.funnel-recap { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--lp-line, #e2e5e4); }
.funnel-recap h3 { font-size: 1rem; margin: 0 0 16px; color: var(--lp-ink, #14212a); }

.recap-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; margin: 0 0 18px; }
.recap-list div { display: flex; gap: 10px; font-size: .87rem; min-width: 0; }
.recap-list dt { color: var(--lp-muted, #5c6a70); flex-shrink: 0; }
.recap-list dd { margin: 0; font-weight: 650; color: var(--lp-ink, #14212a); word-break: break-word; }

/* ---------- Navigation et fin ---------- */

.funnel-nav {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--lp-line, #e2e5e4);
}

.funnel-nav button { flex: 0 0 auto; }
.funnel-nav [data-funnel-next],
.funnel-nav [data-funnel-submit] { margin-left: auto; }

/* Calé sur le bouton principal, aligné à droite sous la navigation. */
.form-alt-contact { margin: 14px 0 0; text-align: right; font-size: .9rem; }

.funnel-done { text-align: center; padding: 20px 0; }
.funnel-done i { font-size: 2.6rem; color: #2e7d32; }
.funnel-done h3 { font-size: 1.4rem; margin: 14px 0 10px; color: var(--lp-ink, #14212a); }
.funnel-done p { color: var(--lp-muted, #5c6a70); line-height: 1.7; margin: 0 auto 10px; max-width: 48ch; }
.funnel-done .btn-outline-modern { margin-top: 18px; }

@media (max-width: 767px) {
  .choice-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field--narrow { max-width: none; }
  .recap-list { grid-template-columns: 1fr; }
  .funnel-progress li { font-size: 0; gap: 0; flex: 1; justify-content: center; }
  .funnel-progress li span { font-size: .76rem; }
  .funnel-nav { flex-direction: column-reverse; }
  .funnel-nav button { width: 100%; justify-content: center; }
  .funnel-nav [data-funnel-next],
  .funnel-nav [data-funnel-submit] { margin-left: 0; }
  .form-alt-contact { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .choice-body { transition: none; }
}