/* FORMULAIRE NATIF MULTI-ETAPES REXER - VERSION V3 (portage a l'identique depuis
   Sites en production/rexer-offre1/index.html, formulaire en production le 30/07/2026).
   Aucune modification du parcours, des cles de payload ni de la validation. */
  /* ===== FORMULAIRE NATIF MULTI-ÉTAPES ===== */
  .lf-shell{padding:22px 24px 26px}
  .lf{--pill-h:56px}

  /* Barre de progression */
  .lf-progress{display:flex;align-items:center;gap:12px;margin-bottom:26px}
  .lf-progress__track{flex:1;height:9px;border-radius:999px;background:var(--creme);overflow:hidden}
  .lf-progress__bar{height:100%;width:25%;border-radius:999px;
    background:linear-gradient(90deg,var(--rouge),#ff6a86,var(--rouge));background-size:200% 100%;
    transition:width .45s cubic-bezier(.34,1.3,.64,1);animation:lfShine 2.4s linear infinite}
  @keyframes lfShine{0%{background-position:0% 0}100%{background-position:-200% 0}}
  .lf-progress__bar.is-complete{background:linear-gradient(90deg,#12b76a,#3ddc84,#12b76a);background-size:200% 100%}
  .lf-progress__bar.is-bump{animation:lfShine 2.4s linear infinite,lfBump .45s ease}
  @keyframes lfBump{0%{transform:scaleY(1)}45%{transform:scaleY(1.9)}100%{transform:scaleY(1)}}
  .lf-progress__label{font-size:.8rem;font-weight:700;color:var(--rouge);white-space:nowrap;letter-spacing:.01em;
    transition:color .3s}
  .lf-progress__label.is-complete{color:#12b76a}
  @media(prefers-reduced-motion:reduce){.lf-progress__bar{animation:none}.lf-progress__bar.is-bump{animation:none}}

  /* Étapes */
  .lf-step{display:none}
  .lf-step.is-active{display:block;animation:lfIn .25s cubic-bezier(.22,.61,.36,1)}
  @keyframes lfIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
  .lf-step.is-active.is-back{animation:lfInBack .25s cubic-bezier(.22,.61,.36,1)}
  @keyframes lfInBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.lf-step.is-active,.lf-step.is-active.is-back{animation:none}}
  .lf-q{font-size:1.4rem;font-weight:700;color:var(--navy);text-align:center;margin-bottom:6px;line-height:1.25}
  .lf-sub{font-size:.98rem;color:var(--texte-sec);text-align:center;margin-bottom:22px;max-width:38ch;margin-left:auto;margin-right:auto}

  /* Cartes cliquables, grande icone emoji, survol scale, coche verte au clic */
  .lf-cards{display:grid;gap:14px}
  .lf-cards--2{grid-template-columns:1fr 1fr}
  .lf-cards--4{grid-template-columns:1fr 1fr}
  .lf-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
    padding:26px 14px;border:2px solid var(--ligne);border-radius:16px;background:#fff;cursor:pointer;
    font-family:inherit;font-size:1.02rem;font-weight:600;color:var(--navy);line-height:1.25;min-height:124px;
    transition:border-color .18s,box-shadow .18s,transform .18s;-webkit-tap-highlight-color:transparent}
  .lf-card__emoji{font-size:44px;line-height:1;display:block;transition:transform .18s}
  .lf-card:hover{border-color:var(--bleu);box-shadow:0 16px 30px -18px rgba(1,45,72,.55);transform:scale(1.04)}
  .lf-card:hover .lf-card__emoji{transform:scale(1.08) rotate(-4deg)}
  .lf-card:active{transform:scale(.98)}
  .lf-card:focus-visible{outline:none;border-color:var(--rouge);box-shadow:0 0 0 4px rgba(238,43,73,.2)}
  .lf-card.is-selected{border-color:#12b76a;box-shadow:0 0 0 3px rgba(18,183,106,.2);animation:lfPulse .45s ease}
  @keyframes lfPulse{0%{transform:scale(1)}42%{transform:scale(1.07)}100%{transform:scale(1)}}
  /* Coche verte qui pop */
  .lf-card__check{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
    background:#12b76a;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);
    box-shadow:0 6px 14px -4px rgba(18,183,106,.6)}
  .lf-card__check svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
  .lf-card.is-selected .lf-card__check{animation:lfCheckPop .42s cubic-bezier(.34,1.56,.64,1) forwards}
  @keyframes lfCheckPop{0%{opacity:0;transform:scale(0) rotate(-25deg)}60%{opacity:1;transform:scale(1.28) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
  @media(prefers-reduced-motion:reduce){
    .lf-card,.lf-card__emoji,.lf-card.is-selected{animation:none;transition:none}
    .lf-card.is-selected .lf-card__check{animation:none;opacity:1;transform:scale(1)}
  }

  /* Champs */
  .lf-field{margin-bottom:16px}
  .lf-field label{display:block;font-size:.9rem;font-weight:600;color:var(--navy);margin-bottom:7px}
  .lf-input{width:100%;height:var(--pill-h);border:2px solid var(--ligne);border-radius:14px;padding:0 18px;
    font-family:inherit;font-size:1.05rem;color:var(--texte);background:#fff;transition:border-color .18s,box-shadow .18s}
  .lf-input::placeholder{color:var(--texte-ter)}
  .lf-input:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 4px rgba(14,78,150,.14)}
  .lf-input[aria-invalid="true"]{border-color:var(--rouge);box-shadow:0 0 0 4px rgba(238,43,73,.12)}
  .lf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .lf-hint{font-size:.85rem;color:var(--texte-sec);margin-top:10px;text-align:center;line-height:1.45}
  .lf-hint strong{color:var(--navy);font-weight:600}
  .lf-err{font-size:.85rem;color:var(--rouge);font-weight:600;margin-top:7px;min-height:1.1em}

  /* Boutons */
  .lf-cta{width:100%;height:var(--pill-h);border:0;border-radius:999px;background:var(--rouge);color:#fff;
    font-family:inherit;font-size:1.08rem;font-weight:700;cursor:pointer;letter-spacing:.01em;margin-top:6px;
    box-shadow:0 16px 30px -14px rgba(238,43,73,.6);transition:transform .18s,box-shadow .18s,opacity .18s}
  .lf-cta:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(238,43,73,.7)}
  .lf-cta:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(238,43,73,.32)}
  .lf-cta[disabled]{opacity:.65;cursor:default;transform:none;box-shadow:none}
  .lf-back{display:inline-flex;align-items:center;gap:6px;margin-top:16px;background:none;border:0;padding:8px 4px;
    color:var(--texte-sec);font-family:inherit;font-size:.92rem;font-weight:600;cursor:pointer}
  .lf-back:hover{color:var(--navy)}
  .lf-back:focus-visible{outline:2px solid var(--bleu);outline-offset:2px;border-radius:6px}
  .lf-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .lf-foot{text-align:center;font-size:.82rem;color:var(--texte-ter);margin-top:16px}

  /* Honeypot anti-spam (invisible) */
  .lf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

  /* Burst de confettis CSS (aucune librairie) */
  .lf-confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
  .lf-confetti span{position:absolute;top:40%;left:50%;width:10px;height:14px;opacity:0;will-change:transform,opacity}
  .lf-confetti.is-on span{animation:lfConf 1s cubic-bezier(.2,.7,.4,1) forwards}
  @keyframes lfConf{
    0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}
    100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot))}
  }
  @media(prefers-reduced-motion:reduce){.lf-confetti{display:none}}

  /* Icônes 3D (Fluent Emoji, PNG locaux) : pop d'apparition + fallback emoji natif */
  .lf-card__emoji{display:flex;align-items:center;justify-content:center;min-height:72px}
  .lf-card__emoji img{width:72px;height:72px;display:block;object-fit:contain;
    filter:drop-shadow(0 10px 14px rgba(1,45,72,.18));
    animation:lfEmojiPop .5s cubic-bezier(.34,1.56,.64,1) both}
  @keyframes lfEmojiPop{0%{opacity:0;transform:scale(.4) rotate(-8deg)}70%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
  .lf-card__fallback{display:none;font-size:52px;line-height:1}
  .lf-card__emoji.no3d img{display:none}
  .lf-card__emoji.no3d .lf-card__fallback{display:block}
  @media(prefers-reduced-motion:reduce){.lf-card__emoji img{animation:none}}

  /* Slider facture mensuelle (étape 5) */
  .lf-slider-wrap{padding:6px 4px 2px}
  .lf-slider-val{font-size:46px;font-weight:700;color:var(--navy);text-align:center;line-height:1;margin:10px 0 4px}
  .lf-slider-val small{font-size:20px;font-weight:600;color:var(--texte-sec)}
  .lf-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;border:0;padding:0;cursor:pointer;margin-top:14px;
    background:linear-gradient(to right,var(--rouge) 0%,var(--rouge) var(--pct,24%),var(--creme) var(--pct,24%),var(--creme) 100%)}
  .lf-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;border-radius:50%;
    background:#fff;border:4px solid var(--rouge);cursor:pointer;box-shadow:0 4px 12px rgba(238,43,73,.35)}
  .lf-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--rouge);cursor:pointer;box-shadow:0 4px 12px rgba(238,43,73,.35)}
  .lf-range:focus-visible{outline:3px solid var(--bleu);outline-offset:4px}
  .lf-slider-ticks{display:flex;justify-content:space-between;color:var(--texte-sec);font-size:.8rem;margin-top:10px;font-weight:600}
  .lf-slider-wrap .lf-cta{margin-top:24px}

  @media(max-width:420px){
    .lf-shell{padding:18px 16px 22px}
    .lf-q{font-size:1.22rem}
    .lf-sub{font-size:.94rem;margin-bottom:18px}
    .lf-card{padding:20px 10px;min-height:112px;font-size:.96rem;gap:10px}
    .lf-card__emoji{font-size:40px;min-height:56px}
    .lf-card__emoji img{width:56px;height:56px}
    .lf-card__fallback{font-size:44px}
    .lf-slider-val{font-size:38px}
  }