/* ============================================================
   Lead form — the one multi-step capture component of the site.

   Rendered by templates/lead_forms/_form.html from a FormSpec, and
   embedded on the homepage, article footers, the products index, the
   calculator, the office-hours page and both programme pages. One
   component stylesheet rather than a page one, for the same reason as
   price.css: a shared component's styles have to load wherever it is
   included, and a lead form is included nearly everywhere.

   Three tones share the anatomy and differ only in the frame:
     .lead-form--panel    a full section, its own card
     .lead-form--inline   a narrower column inside existing content
     .lead-form--compact  a sidebar-width version, no card padding

   Every colour is a token, so light and dark follow with no second
   palette. The option button is the load-bearing element — an
   icon-led target that reads as a decision, sized for a thumb and
   showing its selected state in the border, the surface and the mark
   rather than in a radio dot the visitor has to look for.
   ============================================================ */
.lead-form{
  --lf-gap:18px;
  --lf-rule:var(--line);
  --lf-selected:color-mix(in srgb,var(--violet) 42%,transparent);
  display:grid;
  gap:var(--lf-gap);
  container-type:inline-size;
}

.lead-form--panel{
  padding:28px;
  border:1px solid var(--lf-rule);
  border-radius:var(--radius);
  background:linear-gradient(145deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow);
}

.lead-form--inline{
  padding:24px 0 0;
  border-top:1px solid var(--lf-rule);
}

.lead-form--compact{--lf-gap:14px;padding:0}

/* --- Header ------------------------------------------------- */
.lead-form-head{display:grid;gap:8px}
.lead-form-title{
  font-size:clamp(1.5rem,2.6vw,2.2rem);
  line-height:1.14;margin:0;
}
.lead-form--compact .lead-form-title{font-size:1.25rem}
.lead-form-promise{color:var(--silver);margin:0;max-width:64ch}
.lead-form-note{
  margin:0;font-size:.82rem;color:var(--cyan);
}
/* What the visitor gets for answering, said by the page rather than by the
   form. It sits between the header and the first screen because that is where
   the decision to start is actually taken, and it folds away with the rest of
   the header once the walk begins. */
.lead-form-guide{
  margin:0;font-size:.88rem;line-height:1.5;
  color:color-mix(in srgb,var(--paper) 82%,transparent);
  padding:12px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--violet) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--violet) 26%,transparent);
  max-width:70ch;
}
.lead-form--compact .lead-form-guide{font-size:.82rem;padding:10px 12px}

/* --- Progress ----------------------------------------------- */
/* Visible distance to the end. Half the multi-step forms in the wild
   omit it, and it is the cheapest completion gain available. */
.lead-form-progress{display:grid;gap:8px}
.lead-form-progress-meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:.76rem;color:var(--silver);
}
.lead-form-step-name{color:var(--cyan);font-weight:700}
.lead-form-progress-track{
  height:5px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--paper) 10%,transparent);
}
.lead-form-progress-track>span{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  transition:width .32s cubic-bezier(.22,.75,.3,1);
}
@media (prefers-reduced-motion:reduce){
  .lead-form-progress-track>span{transition:none}
}

/* --- Steps -------------------------------------------------- */
.lead-form-body{display:grid;gap:var(--lf-gap)}
.lead-form-step{
  display:grid;gap:16px;
  margin:0;padding:0;border:0;min-width:0;
}
.lead-form-step[hidden]{display:none}

.lead-form-step-head{
  display:flex;gap:12px;align-items:start;
  padding:0;width:100%;
}
.lead-form-step-icon{flex:none;opacity:.9}
.lead-form-step-copy{display:grid;gap:4px}
.lead-form-step-copy strong{
  font-family:var(--font-display);font-size:1.32rem;line-height:1.2;letter-spacing:-.015em;
}
.lead-form-step-copy small{color:var(--silver);font-size:.84rem;line-height:1.45}

.lead-form-question{display:grid;gap:10px}
.lead-form-label{
  margin:0;font-size:.79rem;font-weight:700;color:var(--silver);
  display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;
}
.lead-form-optional{
  font-style:normal;font-size:.7rem;font-weight:600;
  color:color-mix(in srgb,var(--silver) 80%,transparent);
}
/* Kept in the accessibility tree, taken out of the page: the label of a question
   whose screen heading already asks it. Namespaced to the component rather than
   published as a global `.sr-only`, so a component stylesheet does not quietly
   define a site-wide utility that something else may later redefine. */
.lead-form-label--quiet{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.lead-form-help{margin:0;font-size:.8rem;color:var(--silver)}
/* The page's own fill-in help, under the form's own. Marked by a rule rather
   than by a colour: it is the same kind of sentence as the help above it, said
   by the page instead of by the form, and a second accent colour here would
   make the two compete for the same glance. */
.lead-form-help--page{
  padding-inline-start:10px;
  border-inline-start:2px solid color-mix(in srgb,var(--cyan) 45%,transparent);
  color:color-mix(in srgb,var(--silver) 88%,var(--paper));
}
/* Said out loud, in the accent that means "this came from somewhere else": an
   option is ticked the visitor never clicked, and the sentence is what turns
   that from a presumption into an offer they can decline in one click. */
.lead-form-prefilled{
  margin:0;font-size:.74rem;font-weight:600;color:var(--cyan);
  display:flex;gap:6px;align-items:baseline;
}
.lead-form-prefilled::before{content:"¹3";font-weight:700}

/* --- Options ------------------------------------------------ */
/* Two columns from ~520px of available width, measured on the form
   itself rather than the viewport: the same form is a full section on
   the homepage and a narrow column under an article. */
.lead-form-options{display:grid;gap:10px}
@container (min-width: 520px){
  .lead-form-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.lead-form-option{
  position:relative;display:grid;gap:2px 12px;align-items:center;
  grid-template-columns:1fr auto;
  padding:14px 44px 14px 15px;
  border:1px solid var(--line-strong);border-radius:14px;
  background:color-mix(in srgb,var(--ink) 22%,transparent);
  cursor:pointer;font-size:.9rem;font-weight:600;color:var(--paper);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.lead-form-option.has-icon{grid-template-columns:auto 1fr auto}
.lead-form-option:hover{
  border-color:color-mix(in srgb,var(--violet) 50%,transparent);
  transform:translateY(-1px);
}
.lead-form-option input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}
.lead-form-option-icon{flex:none;opacity:.85}
.lead-form-option-copy{display:grid;gap:3px;min-width:0}
.lead-form-option-copy strong{font-weight:720;line-height:1.25}
.lead-form-option-copy small{
  color:var(--silver);font-size:.78rem;font-weight:500;line-height:1.4;
}

/* The mark is the state, so selection reads without hunting for a dot. */
.lead-form-option-mark{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  border:1px solid var(--line-strong);
}
.lead-form-options.is-multi .lead-form-option-mark{border-radius:7px}
.lead-form-option:has(input:checked){
  border-color:var(--lf-selected);
  background:color-mix(in srgb,var(--violet) 15%,transparent);
}
.lead-form-option:has(input:checked) .lead-form-option-mark{
  border-color:var(--cyan);background:var(--cyan);
}
.lead-form-option:has(input:checked) .lead-form-option-mark:after{
  content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid var(--ink);
  border-width:0 2px 2px 0;transform:rotate(45deg);
}
/* Keyboard focus lands on the visually hidden input, so the ring has to
   be drawn on the label it belongs to. */
.lead-form-option:has(input:focus-visible){
  outline:2px solid color-mix(in srgb,var(--violet) 62%,transparent);
  outline-offset:2px;
}

/* --- Inputs ------------------------------------------------- */
.lead-form-field{display:grid;gap:7px;color:var(--silver);font-size:.79rem;font-weight:700}
.lead-form-field textarea{min-height:104px}

.lead-form-consent{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  padding:14px 15px;border:1px solid var(--line);border-radius:14px;
  background:color-mix(in srgb,var(--ink) 18%,transparent);
  font-size:.82rem;font-weight:500;color:var(--silver);line-height:1.45;
}
.lead-form-consent input{width:19px;height:19px;min-height:0;margin-top:2px}

/* Never rendered to a visitor; kept out of the layout and the tab order. */
.lead-form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Errors ------------------------------------------------- */
/* An error says what to do next, so it sits under the question it
   belongs to and never as one summary far from the field. */
.lead-form-error{
  margin:0;font-size:.79rem;font-weight:640;color:var(--danger);
}
.lead-form-error[hidden]{display:none}
.lead-form-error--global{
  padding:11px 13px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--danger) 32%,transparent);
  background:color-mix(in srgb,var(--danger) 10%,transparent);
}
.lead-form-error-list{margin:0 0 18px;padding-left:20px;color:var(--danger)}

/* --- Actions ------------------------------------------------ */
.lead-form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lead-form-actions-spacer{flex:1 1 auto}
.lead-form-actions button[hidden]{display:none}
.is-sending .lead-form-actions{opacity:.62;pointer-events:none}

.lead-form-privacy{
  margin:0;font-size:.75rem;color:var(--silver);
}

/* --- Result ------------------------------------------------- */
/* The confirmation is one line; the offers are the substance. A
   thank-you screen that only thanks wastes the one moment a visitor is
   most willing to act. */
.lead-form-result[hidden]{display:none}
.lead-form-result:focus{outline:none}
.lead-form-outcome{display:grid;gap:22px}

.lead-form-outcome-head{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:16px 18px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--success) 30%,transparent);
  background:color-mix(in srgb,var(--success) 9%,transparent);
}
.lead-form-outcome-mark{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--cyan);color:var(--ink);font-weight:820;
}
.lead-form-outcome-head h3{margin:0 0 5px;font-size:1.16rem}
.lead-form-outcome-head p{margin:0;color:var(--silver);font-size:.88rem;line-height:1.5}

/* The reading, on the one form that promises a diagnosis rather than a match.
   It sits above the offers and is styled as a finding, not as a card to buy:
   a left rule and the cyan accent, no border box, so it does not read as a
   third product in a list of products. */
.lead-form-reading{
  display:grid;gap:10px;
  padding:16px 18px 16px 20px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent);
  border-left:3px solid var(--cyan);
  background:color-mix(in srgb,var(--cyan) 7%,transparent);
}
.lead-form-reading-line{
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
  margin:0;font-size:.86rem;color:var(--silver);
}
.lead-form-reading-line strong{color:var(--paper);font-size:.96rem}
/* The gap between what the visitor named and what they described. It is the
   part of the reading they could not have produced themselves, so it is the
   part that is allowed to interrupt the eye. */
.lead-form-reading-shift{
  margin:0;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--ink) 26%,transparent);
  color:var(--paper);font-size:.85rem;line-height:1.5;
}
.lead-form-reading-why{margin:0;color:var(--silver);font-size:.85rem;line-height:1.5}
.lead-form-reading-link{font-size:.78rem;color:var(--cyan);justify-self:start}

/* The composed reading: the same frame as above, since it is the same promise,
   but its content is a set of scored axes rather than two named catalogue rows.
   The score is the visitor's own answers placed on the scales this reading
   declares — it is never a portfolio figure, and none reaches this stylesheet. */
.lead-form-reading-lede{margin:0;color:var(--silver);font-size:.85rem;line-height:1.5}
.lead-form-reading-score{
  display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin:0;
  color:var(--silver);font-size:.78rem;
}
.lead-form-reading-score b{color:var(--cyan);font-size:1.35rem;line-height:1}
.lead-form-reading-axes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lead-form-reading-axis{
  display:grid;gap:2px;padding:8px 10px;border-radius:12px;
  background:color-mix(in srgb,var(--ink) 22%,transparent);
}
/* An axis the visitor said nothing about is kept and dimmed rather than
   dropped: the gap in the reading is part of the reading. */
.lead-form-reading-axis.is-unanswered{opacity:.62}
.lead-form-axis-label{color:var(--silver);font-size:.74rem;letter-spacing:.02em}
.lead-form-axis-level{color:var(--paper);font-size:.9rem}
.lead-form-axis-detail{color:var(--silver);font-size:.8rem;line-height:1.45}
.lead-form-reading-insights{
  list-style:none;margin:0;padding:0;display:grid;gap:6px;
  color:var(--paper);font-size:.85rem;line-height:1.5;
}
.lead-form-reading-insights li{padding-left:14px;position:relative}
.lead-form-reading-insights li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--cyan);
}
.lead-form-reading-next{display:grid;gap:6px}
.lead-form-reading-next ul{
  list-style:decimal;margin:0;padding-left:18px;display:grid;gap:4px;
  color:var(--silver);font-size:.83rem;line-height:1.5;
}
.lead-form-reading-cta{margin:0;color:var(--paper);font-size:.85rem;line-height:1.5}

.lead-form-offers{display:grid;gap:12px}
.lead-form-offer-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}

.lead-form-offer{
  display:grid;gap:14px 20px;align-items:center;
  grid-template-columns:minmax(0,1fr) max-content max-content;
  padding:16px 18px;
  border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--ink) 20%,transparent);
}
/* The first offer is the recommendation; the others are alternatives.
   The difference is stated in the border, not only in the button. */
.lead-form-offer.is-primary{
  border-color:color-mix(in srgb,var(--cyan) 38%,transparent);
  background:color-mix(in srgb,var(--cyan) 6%,transparent);
}
.lead-form-offer-copy{min-width:0}
.lead-form-offer-copy h4{margin:0 0 5px;font-size:1.02rem;line-height:1.25}
.lead-form-offer-reason{margin:0;font-size:.83rem;color:var(--silver);line-height:1.45}
.lead-form-offer-price{white-space:nowrap}
.lead-form-offer-price .price{padding:0;border:0;background:none;box-shadow:none}
.lead-form-offer-price .price-amount{margin:0;font-size:1.05rem}
/* The editorial note on a price row ("résiliable à la fin de chaque période…")
   is written for the product page, where there is a column to read it in. Here
   it wraps over four lines and doubles the row, burying the three offers it was
   meant to clarify — so the offer shows the amount, its period and its
   instalment split, and the note stays one click away where it belongs. */
.lead-form-offer-price .price-note,
.lead-form-offer-price .price-equivalent{display:none}
.lead-form-offer-price .price-label{font-size:.72rem}
.lead-form-offer-pending{display:block;margin-top:4px;color:var(--warning);font-size:.74rem}
.lead-form-offer-cta{white-space:nowrap}
.lead-form-offers-note{margin:0;font-size:.74rem;color:var(--silver)}

@container (max-width: 640px){
  .lead-form-offer{grid-template-columns:1fr;align-items:start}
  .lead-form-offer-cta{width:100%}
}

@media (max-width:720px){
  .lead-form--panel{padding:20px}
  .lead-form-offer{grid-template-columns:1fr}
  .lead-form-offer-cta{width:100%}
  .lead-form-actions .button{flex:1 1 auto}
}

/* ============================================================
   Hero tone — the qualifier as the opening move of the page.

   Used by one slot (solutions-index) and deliberately not more: a
   page with two heroes has none. It is the panel card with a
   tighter rhythm, because it sits beside a heading rather than
   under a section, and a form taller than the copy it is paired
   with turns the split into two stacked pages.
   ============================================================ */
.lead-form--hero{
  --lf-gap:15px;
  padding:24px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:linear-gradient(145deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow);
}
.lead-form--hero .lead-form-title{font-size:clamp(1.2rem,1.9vw,1.5rem)}
.lead-form--hero .lead-form-promise{font-size:.85rem;max-width:none}
.lead-form--hero .lead-form-step-head strong{font-size:.98rem}

/* ============================================================
   The reading, part 1 — the urgency verdict.

   The index is the loud element and the signals under it are the
   arithmetic that produced it. That ordering is the point: a score
   a visitor cannot take apart is a score they can only accept or
   reject, and this one is meant to be argued with line by line.

   The band tints the card rather than recolouring the number, so a
   calm verdict does not read as a failed one. The instruction band
   is deliberately the neutral surface: "you have time" is good news.
   ============================================================ */
.lead-form-verdict{
  --lf-band:var(--silver);
  display:grid;gap:16px;
  padding:20px;
  border:1px solid color-mix(in srgb,var(--lf-band) 34%,transparent);
  border-left:3px solid var(--lf-band);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--lf-band) 6%,transparent);
}
.lead-form-verdict--etablie{--lf-band:var(--warning,#e2a019)}
.lead-form-verdict--elevee{--lf-band:var(--lavender)}
.lead-form-verdict--mesuree{--lf-band:var(--cyan)}
.lead-form-verdict--instruction{--lf-band:var(--silver)}

.lead-form-verdict-head{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
}
.lead-form-verdict-index{
  margin:0;display:grid;gap:2px;justify-items:center;
  padding:10px 14px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--lf-band) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--lf-band) 26%,transparent);
}
.lead-form-verdict-index b{
  font-family:var(--font-display);font-size:2.1rem;line-height:1;
  color:var(--lf-band);
}
.lead-form-verdict-index b span{font-size:.9rem;color:var(--silver);font-weight:400}
.lead-form-verdict-band{
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--lf-band);font-weight:700;text-align:center;
}
.lead-form-verdict-copy{display:grid;gap:7px}
.lead-form-verdict-copy p{margin:0;color:var(--paper);font-size:.9rem;line-height:1.55}
.lead-form-verdict-coverage{font-size:.78rem;color:var(--silver)}
.lead-form-verdict-coverage strong{color:var(--paper)}

/* --- The signals, and their arithmetic ---------------------- */
.lead-form-signals{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.lead-form-signal{display:grid;gap:5px}
.lead-form-signal-head{
  display:flex;gap:12px;align-items:baseline;justify-content:space-between;
}
.lead-form-signal-label{color:var(--paper);font-size:.83rem}
.lead-form-signal-figures{display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.lead-form-signal-figures b{font-size:.92rem;color:var(--paper);font-variant-numeric:tabular-nums}
.lead-form-signal-weight{font-size:.7rem;color:var(--silver)}
.lead-form-signal-track{
  display:block;height:5px;border-radius:999px;
  background:color-mix(in srgb,var(--paper) 10%,transparent);overflow:hidden;
}
.lead-form-signal-track>span{
  display:block;height:100%;border-radius:999px;background:var(--silver);
}
.lead-form-signal.is-driver .lead-form-signal-track>span{background:var(--lf-band)}
.lead-form-signal.is-brake .lead-form-signal-track>span{
  background:color-mix(in srgb,var(--silver) 60%,transparent);
}
.lead-form-signal-why{margin:0;font-size:.78rem;color:var(--silver);line-height:1.5}

/* ============================================================
   The reading, part 3 — engagement readiness.

   Twelve axes is too many for the single column the generic
   reading uses, so this variant grids them. The bar is what makes
   the twelve comparable at a glance; the level name underneath is
   what makes any one of them arguable.
   ============================================================ */
.lead-form-reading-axes--grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.lead-form-axis-track{
  display:block;height:4px;margin:5px 0 2px;border-radius:999px;
  background:color-mix(in srgb,var(--paper) 10%,transparent);overflow:hidden;
}
.lead-form-axis-track>span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
}
.lead-form-reading--engagement .lead-form-reading-axis{gap:2px}

/* ============================================================
   The reading, part 4 — the ranked training paths.

   A ranking, not an offer panel: five entries, numbered, each
   carrying the fit that placed it and the reasons that earned the
   fit. The bar is absolute — measured against the ceiling of the
   path itself — so a list whose top entry is short is telling the
   visitor something true rather than looking broken.
   ============================================================ */
.lead-form-paths{display:grid;gap:14px}
.lead-form-paths-lede{margin:0;font-size:.8rem;color:var(--silver);line-height:1.55;max-width:78ch}
.lead-form-path-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lead-form-path{
  display:grid;gap:10px;padding:16px;
  border:1px solid var(--lf-rule);border-radius:var(--radius);
  background:color-mix(in srgb,var(--paper) 3%,transparent);
}
.lead-form-path.is-primary{
  border-color:color-mix(in srgb,var(--cyan) 40%,transparent);
  background:color-mix(in srgb,var(--cyan) 6%,transparent);
}
.lead-form-path-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
}
.lead-form-path-rank{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:color-mix(in srgb,var(--violet) 22%,transparent);
  color:var(--paper);font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.lead-form-path.is-primary .lead-form-path-rank{
  background:var(--cyan);color:var(--ink);
}
.lead-form-path-title{display:grid;gap:3px;min-width:0}
.lead-form-path-title h4{margin:0;font-size:1rem;line-height:1.25}
.lead-form-path-meta{
  margin:0;display:flex;flex-wrap:wrap;gap:8px;font-size:.74rem;color:var(--silver);
}
.lead-form-path-format{
  color:var(--cyan);border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent);
  border-radius:999px;padding:1px 8px;
}
.lead-form-path-fit{display:grid;justify-items:end;gap:1px;white-space:nowrap}
.lead-form-path-fit b{
  font-family:var(--font-display);font-size:1.2rem;line-height:1;color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.lead-form-path-fit>span:last-child{font-size:.68rem;color:var(--silver)}
.lead-form-path-track{
  display:block;height:4px;border-radius:999px;
  background:color-mix(in srgb,var(--paper) 10%,transparent);overflow:hidden;
}
.lead-form-path-track>span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
}
.lead-form-path-promise{margin:0;font-size:.84rem;color:var(--silver);line-height:1.55}
.lead-form-path-why{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.lead-form-path-why li{
  position:relative;padding-left:16px;font-size:.79rem;color:var(--paper);line-height:1.5;
}
.lead-form-path-why li:before{
  content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
}
.lead-form-path-facts{
  margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:.76rem;
}
.lead-form-path-facts dt{color:var(--silver);white-space:nowrap}
.lead-form-path-facts dd{margin:0;color:var(--paper)}
.lead-form-path-outcomes{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.lead-form-path-outcomes li{
  position:relative;padding-left:16px;font-size:.77rem;color:var(--silver);line-height:1.45;
}
.lead-form-path-outcomes li:before{
  content:"\2192";position:absolute;left:0;color:var(--lavender);
}
.lead-form-path-foot{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--lf-rule);
}
.lead-form-path-foot .price{padding:0;border:0;background:none;box-shadow:none}
.lead-form-path-foot .price-amount{margin:0;font-size:1rem}
.lead-form-path-foot .price-note,
.lead-form-path-foot .price-equivalent{display:none}
.lead-form-path-quote{margin:0;font-size:.76rem;color:var(--silver)}
.lead-form-path-link{font-size:.76rem;white-space:nowrap}

@container (max-width: 560px){
  .lead-form-verdict-head{grid-template-columns:1fr}
  .lead-form-path-head{grid-template-columns:auto 1fr}
  .lead-form-path-fit{grid-column:2;justify-items:start}
}

@media (max-width:720px){
  .lead-form--hero{padding:18px}
  .lead-form-verdict{padding:16px}
  .lead-form-path-facts{grid-template-columns:1fr}
  .lead-form-path-facts dt{margin-top:4px}
}

/* ============================================================
   The phase rail — what makes a one-question-per-screen form
   legible rather than merely measurable.

   Asking one question per screen buys a click per answer and
   pays for it in screen count. "Screen 14 of 26" is a number a
   visitor can only endure; "Le cadre contractuel, 2/8" is one
   they can plan around. The rail is therefore not decoration:
   it is the thing that makes the trade worth making.

   Rendered only when the spec declares phases, so the seven
   other forms in the panel are untouched.
   ============================================================ */
.lead-form-rail{
  list-style:none;margin:0 0 4px;padding:0;
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;
}
.lead-form-rail-step{
  display:flex;align-items:center;gap:6px;
  font-size:.7rem;letter-spacing:.01em;color:var(--silver);
  opacity:.55;transition:opacity .2s ease,color .2s ease;
}
.lead-form-rail-mark{
  width:7px;height:7px;border-radius:50%;flex:none;
  border:1px solid var(--line-strong);
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.lead-form-rail-step.is-done{opacity:.85}
.lead-form-rail-step.is-done .lead-form-rail-mark{
  background:var(--lavender);border-color:var(--lavender);
}
.lead-form-rail-step.is-current{opacity:1;color:var(--paper);font-weight:700}
.lead-form-rail-step.is-current .lead-form-rail-mark{
  background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 22%,transparent);
}
/* The position inside the current stage, written by the controller. It is the
   half of the meter that actually answers "how much of this part is left". */
.lead-form-rail-step.is-current[data-rail-position]:after{
  content:attr(data-rail-position);
  font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--cyan);font-size:.66rem;
}
/* A stage this visitor's branch never reaches. Dimmed rather than removed: a
   rail that loses an entry between two screens reads as a rendering fault. */
.lead-form-rail-step.is-skipped{opacity:.3}

/* Below this the labels stop fitting on two lines, so only the marks stay —
   the rail still shows how many stages there are and where the visitor is,
   which is the part that carries the meaning. */
@container (max-width: 460px){
  .lead-form-rail{gap:4px 7px}
  .lead-form-rail-label{display:none}
  .lead-form-rail-step.is-current .lead-form-rail-label{display:inline}
}

/* ============================================================
   Icon-led options.

   The icon is what makes an option a button rather than a radio:
   an icon-led choice is picked faster and reads as a decision
   about the visitor's own situation, not as a field to fill. With
   one question per screen there is room to let it breathe, so the
   icon gets its own well and the copy keeps the whole remaining
   column.
   ============================================================ */
.lead-form-option.has-icon{
  grid-template-columns:auto 1fr;
  gap:2px 13px;
  padding-left:13px;
}
.lead-form-option-icon{
  width:34px;height:34px;padding:5px;border-radius:10px;
  background:color-mix(in srgb,var(--violet) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--violet) 22%,transparent);
  opacity:.92;
  transition:background .18s ease,border-color .18s ease,opacity .18s ease;
}
.lead-form-option:hover .lead-form-option-icon{opacity:1}
.lead-form-option:has(input:checked) .lead-form-option-icon{
  background:color-mix(in srgb,var(--cyan) 18%,transparent);
  border-color:color-mix(in srgb,var(--cyan) 40%,transparent);
  opacity:1;
}

/* --- The header, once the walk has started ------------------ */
/* On a twenty-six screen form the promise is read once and then costs the
   question its place above the fold on every screen after it. So it folds, and
   the title shrinks to a label: the card stays identifiable without spending
   half its height saying what the visitor already agreed to. */
.lead-form.is-walking .lead-form-promise,
.lead-form.is-walking .lead-form-note,
.lead-form.is-walking .lead-form-guide{
  display:none;
}
.lead-form.is-walking .lead-form-head{gap:2px}
.lead-form.is-walking .lead-form-title{
  font-size:.94rem;font-family:inherit;font-weight:700;
  color:var(--silver);line-height:1.3;
}
.lead-form--hero.is-walking .lead-form-title{font-size:.9rem}