/* ============================================================================
   form.css  ·  EcoMutuelle v3 — multi-step quote form (.multi-form)
   Embedded in the 25vw right column on desktop, in flow on mobile.
   Spec: docs/FORM_MULTISTEP_SPEC.md
   ========================================================================== */

/* ── Container ──────────────────────────────────────────────────────────── */
.multi-form {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(226, 232, 240, .85);
  border-radius: var(--r-4);
  padding: var(--sp-5);
  box-shadow: var(--sh-glass);
  display: flex; flex-direction: column; gap: var(--sp-4);
  position: relative;
}

/* Soft top gradient line — adds polish without weight */
.multi-form::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--r-4) var(--r-4) 0 0;
  background: linear-gradient(90deg, var(--primary-500), var(--secondary-500));
}

/* ── Header (eyebrow + title + progress) ────────────────────────────────── */
.form-head {
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 0 var(--sp-4); border-bottom: 1px solid var(--border-100);
}
.form-eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary-600);
}
.form-title {
  font-size: var(--fs-xl); font-weight: 800; color: var(--ink-900);
  line-height: var(--lh-tight); letter-spacing: -.01em; margin: 0;
}
.form-sub { font-size: var(--fs-sm); color: var(--ink-500); }

/* ── Progress bar ───────────────────────────────────────────────────────── */
.progress {
  position: relative; height: 8px; background: var(--paper-200);
  border-radius: var(--r-pill); margin-top: var(--sp-4); overflow: hidden;
}
.progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--primary-500), var(--secondary-500));
  transition: width var(--dur-base) var(--ease);
  border-radius: var(--r-pill);
}
.progress-label {
  position: absolute; right: 0; top: -22px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-500);
}

/* ── Steps stack (one visible at a time) ────────────────────────────────── */
.form-steps { display: block; }
.form-step {
  display: none; flex-direction: column; gap: var(--sp-4);
  animation: stepIn var(--dur-base) var(--ease);
}
.form-step.is-active { display: flex; }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-head { display: flex; flex-direction: column; gap: 4px; }
.step-num {
  font-size: var(--fs-xs); font-weight: 700; color: var(--primary-600);
  letter-spacing: .12em; text-transform: uppercase;
}
.step-title {
  font-size: var(--fs-md); font-weight: 700; color: var(--ink-900);
  line-height: var(--lh-snug); margin: 0;
}
.step-helper { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.5; }

/* ── Field primitives ───────────────────────────────────────────────────── */
.field-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-700);
  letter-spacing: .02em; text-transform: uppercase;
}
.field-radio legend {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700);
  margin-bottom: 6px;
}

/* Date / number / text input refinements (extends .input from design-system) */
.field input[type="date"].input,
.field input[type="number"].input,
.field input[type="email"].input,
.field input[type="tel"].input,
.field input[type="text"].input,
.field select.input {
  width: 100%;
  font-size: var(--fs-sm);
  padding: 12px 14px;
  background: var(--paper-0);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input[type="date"].input::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .7; filter: invert(.2);
}
.field input[type="date"].input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ── Radio-card grid (steps 1 & 2) ──────────────────────────────────────── */
/* Base styles live in design-system.css. Here we add narrow-column tweaks. */
.radio-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.radio-card {
  position: relative;
  padding: 14px 12px;
  min-height: 88px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  user-select: none;
}
.radio-card:focus-within {
  outline: 2px solid var(--primary-400); outline-offset: 2px;
}

/* ── Radio pill row (oui/non, civilité) ─────────────────────────────────── */
.radio-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-pill {
  position: relative; display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border-100); background: var(--paper-0);
  cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.radio-pill:hover { border-color: var(--primary-300); }
.radio-pill:focus-within { outline: 2px solid var(--primary-400); outline-offset: 2px; }

/* ── Sliders (step 6 — priorités de remboursement) ──────────────────────── */
.slider-stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.slider-row { display: flex; flex-direction: column; gap: 8px; }
.slider-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.slider-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-800); }
.slider-val {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 26px; padding: 0 8px;
  background: var(--primary-500); color: #fff;
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700;
  box-shadow: 0 2px 6px rgba(124, 58, 237, .25);
}
.slider-ticks {
  display: grid; grid-template-columns: repeat(4, 1fr);
  font-size: 10px; color: var(--ink-400); text-align: center;
  margin-top: 2px;
}
.slider-ticks span:first-child { text-align: left; }
.slider-ticks span:last-child  { text-align: right; }

/* Range slider — custom thumb & track */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: linear-gradient(90deg, var(--primary-200), var(--primary-500));
  border-radius: var(--r-pill); outline: none;
  cursor: pointer;
}
.slider:focus { box-shadow: 0 0 0 4px var(--primary-100); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper-0);
  border: 3px solid var(--primary-500);
  box-shadow: var(--sh-2);
  cursor: grab;
  transition: transform var(--dur-fast) var(--ease);
}
.slider::-webkit-slider-thumb:active { transform: scale(1.1); cursor: grabbing; }
.slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper-0);
  border: 3px solid var(--primary-500);
  box-shadow: var(--sh-2);
  cursor: grab;
}

/* ── Dynamic list (enfants, step 5) ─────────────────────────────────────── */
.dyn-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.dyn-list-items { display: flex; flex-direction: column; gap: var(--sp-3); }
.dyn-list-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end;
  padding: 10px;
  background: var(--paper-100);
  border-radius: var(--r-2);
  border: 1px solid var(--border-100);
  animation: stepIn var(--dur-fast) var(--ease);
}
.dyn-list-remove {
  background: var(--danger-50); color: var(--danger-500);
  padding: 8px 12px; border-radius: var(--r-2);
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease);
}
.dyn-list-remove:hover { background: var(--danger-500); color: #fff; }
.dyn-list [data-dyn-add] { align-self: flex-start; }
.dyn-list [data-dyn-add][disabled] { opacity: .5; cursor: not-allowed; }

/* ── Consents (step 9) ──────────────────────────────────────────────────── */
.consent-stack {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--paper-100);
  border-radius: var(--r-2);
  border: 1px solid var(--border-100);
}
.consent-row {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: flex-start;
  padding: 8px;
  border-radius: var(--r-1);
  transition: background var(--dur-fast) var(--ease);
}
.consent-row:hover { background: var(--paper-0); }
.consent-row input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--primary-500);
  cursor: pointer;
}
.consent-text {
  font-size: 13px; color: var(--ink-700); line-height: 1.5;
}
.consent-text a { color: var(--primary-600); text-decoration: underline; }
.consent-row.has-error { background: var(--danger-50); border: 1px solid var(--danger-500); }

/* ── Footer (navigation buttons) ────────────────────────────────────────── */
.form-foot {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-100);
}
.form-foot [data-form-next],
.form-foot [data-form-submit] { justify-self: end; }
.form-foot [data-form-back][hidden],
.form-foot [data-form-next][hidden],
.form-foot [data-form-submit][hidden] { display: none; }
.form-foot [data-form-submit] {
  /* Final CTA — green, larger */
  background: var(--secondary-500); color: #fff;
  padding: 12px 22px; font-size: var(--fs-sm); font-weight: 700;
  box-shadow: 0 6px 18px rgba(16, 185, 129, .25);
}
.form-foot [data-form-submit]:hover { background: var(--secondary-600); }
.form-foot [data-form-submit]:disabled {
  opacity: .7; cursor: not-allowed; transform: none;
}

.form-legal {
  font-size: 11px; color: var(--ink-400); line-height: 1.5;
}
.form-legal a { color: var(--ink-600); text-decoration: underline; }

/* ── Validation hints ───────────────────────────────────────────────────── */
.field.has-error .input,
.field.has-error input,
.field.has-error select {
  border-color: var(--danger-500);
  box-shadow: 0 0 0 4px var(--danger-50);
}
.field-hint-error {
  font-size: var(--fs-xs); color: var(--danger-500); margin-top: 4px;
  display: none; line-height: 1.3;
}
.field.has-error .field-hint-error,
.consent-row.has-error .field-hint-error,
fieldset.has-error .field-hint-error,
.form-step.has-error > .field-hint-error { display: block; }

/* ── ARIA live region (off-screen) ──────────────────────────────────────── */
.sr-only,
.form-aria-live {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── Anchor pulse when jumping from CTA #quote-form ─────────────────────── */
#quote-form:target { animation: pulseRing 1.2s var(--ease) 1; }
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, .35), var(--sh-glass); }
  100% { box-shadow: 0 0 0 18px rgba(124, 58, 237, 0),  var(--sh-glass); }
}

/* ── Honeypot field (always hidden, never disabled — bots fill it) ──────── */
.hp-trap {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; opacity: 0;
  pointer-events: none;
}

/* ── Compact mode: only one column inside the 25 vw sidebar ─────────────── */
@media (min-width: 1024px) and (max-width: 1199px) {
  .radio-card-grid { grid-template-columns: 1fr; }
  .multi-form { padding: var(--sp-4); }
}

/* ── Mobile / tablet (≤1023px) ─────────────────────────────────────────── */
@media (max-width: 1023px) {
  .multi-form {
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--r-3);
    /* Slight extra bottom margin to clear the floating CTA. */
    margin-bottom: var(--sp-7);
  }
  .radio-card-grid { grid-template-columns: 1fr; }
  .form-foot {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    margin: 0 calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5));
    padding: var(--sp-4);
    border-top: 1px solid var(--border-100);
    z-index: 10;
  }
  .form-foot [data-form-back] { justify-self: start; }
  .form-foot [data-form-next],
  .form-foot [data-form-submit] {
    width: 100%; justify-self: stretch; text-align: center;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .form-step { animation: none; }
  .progress-fill { transition: none; }
  #quote-form:target { animation: none; }
}

/* ── Print: hide the form entirely ──────────────────────────────────────── */
@media print {
  .multi-form, .page-form, .mobile-cta-floating { display: none !important; }
}