/* ==========================================================================
   Estimation : formulaire en étapes à logique conditionnelle
   Sans JS : toutes les étapes s'affichent à la suite, le formulaire reste
   utilisable. Avec JS : une étape à la fois, progression, récapitulatif.
   ========================================================================== */

.wz-section {
  padding-top: var(--space-7);
}

.wz-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 64em) {
  .wz-layout { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-7); }
  .wz-aside { position: sticky; top: 6.5rem; }
}

.wz-card {
  padding: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  scroll-margin-top: 6rem;
}

/* ------------------------------------------------------------ Progression */
.wz-top {
  margin-bottom: var(--space-6);
}

.wz-progress {
  display: none;
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-4);
}

.wz-progress li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--slate);
}

.wz-progress li + li::before {
  content: "";
  flex: 0 0 1.25rem;
  height: 2px;
  margin-right: var(--space-1);
  background: var(--line);
}

.wz-progress__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  color: var(--slate);
  background: var(--white);
}

.wz-progress__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wz-progress li.is-done .wz-progress__num { border-color: var(--teal); background: var(--teal); color: var(--navy); }
.wz-progress li.is-done::before { background: var(--teal); }
.wz-progress li.is-current { color: var(--navy); }
.wz-progress li.is-current .wz-progress__num { border-color: var(--navy); background: var(--navy); color: var(--white); }

@media (min-width: 72em) {
  .wz-progress { display: flex; }
}

.wz-count {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--teal-ink);
}

.wz-bar {
  height: 6px;
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--teal-tint);
  overflow: hidden;
}

.wz-bar span {
  display: block;
  height: 100%;
  width: var(--wz-progress, 0%);
  border-radius: inherit;
  background: var(--teal);
  transition: width var(--dur-slow) var(--ease-out);
}

@media (min-width: 72em) {
  .wz-count, .wz-bar { display: none; }
}

/* ----------------------------------------------------------------- Étapes */
.js .wz-step:not(.is-current) { display: none; }

html:not(.js) .wz-step + .wz-step {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}

@media (prefers-reduced-motion: no-preference) {
  .js .wz-step.is-current { animation: wz-in var(--dur-slow) var(--ease-out); }
}

@keyframes wz-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

.wz-step__title {
  font-size: var(--fs-h3);
  outline: none;
}

.wz-step__intro {
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
  color: var(--slate);
  max-width: var(--measure);
}

.wz-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-field);
  background: var(--teal-tint);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.wz-resume .icon { color: var(--teal-ink); }

.wz-link {
  font-weight: 700;
  color: var(--teal-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------ Navigation */
.wz-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.wz-nav [data-wz-next],
.wz-nav [data-wz-submit] { margin-left: auto; }

.wz-nav .btn--ghost .icon { width: 1rem; height: 1rem; }

.wz-nav .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

@media (max-width: 29.99em) {
  .wz-nav { flex-direction: column-reverse; align-items: stretch; }
  .wz-nav [data-wz-next], .wz-nav [data-wz-submit] { margin-left: 0; }
}

/* ---------------------------------------------------------- Récapitulatif */
.wz-summary {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.wz-summary__group {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-field);
  border: 1px solid var(--line);
}

.wz-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.wz-summary__head h3 { font-size: var(--fs-h4); }

.wz-summary dl {
  display: grid;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}

.wz-summary dt { color: var(--slate); }

.wz-summary dd { margin: 0; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }

@media (min-width: 40em) {
  .wz-summary dl { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

.wz-consent { margin-top: var(--space-2); }

/* ------------------------------------------------------------------ Aside */
.wz-aside {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--teal-tint);
}

.wz-aside h2 { font-size: var(--fs-h4); }

.wz-why {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  font-size: var(--fs-sm);
}

.wz-why li { display: flex; gap: var(--space-2); align-items: flex-start; }

.wz-why .icon { color: var(--teal-ink); margin-top: 0.1rem; flex: none; }

.wz-trust {
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgb(24 56 88 / 0.12);
}

.wz-privacy { font-size: var(--fs-sm); color: var(--slate); }

/* Progression compacte : numéros seuls, titre de l'étape en cours uniquement */
.wz-progress li { flex: 0 0 auto; }
.wz-progress li + li::before { flex: 0 0 2rem; }
.wz-progress li:not(.is-current) .wz-progress__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wz-progress li.is-current { flex: 1 1 auto; }
.wz-progress__label { overflow: visible; }

/* Traits de liaison extensibles : répartition régulière */
.wz-progress li, .wz-progress li.is-current { flex: 1 1 auto; }
.wz-progress li:first-child { flex: 0 0 auto; }
.wz-progress li + li::before { flex: 1 1 1rem; min-width: 1rem; margin-right: var(--space-2); }