/* ============================================================================
   simulateur.css : fenêtre interactive « Combien moUve vous rapporte »
   Composant scopé (classes préfixées fs-) : aucun conflit avec le reste du site.
   Piloté par data-mode="reeduc" | "ortho" sur .fs-sim (voir simulateur.js).
   ============================================================================ */
.fs-sim{
  --patient:#5B9BF5; --patient2:#8FBEFF;
  --mouve:#F2727E;  --mouve2:#FF96A0;
  --keep:#3FC982;   --keep2:#74E3A6;
  --fs-ink:#EEF2FB; --fs-soft:rgba(238,242,251,.62); --fs-dim:rgba(238,242,251,.42);
  --fs-line:rgba(255,255,255,.11); --fs-card:rgba(255,255,255,.04);
  width:100%; max-width:520px; margin:0 auto; border-radius:24px; padding:28px 26px;
  position:relative; overflow:hidden; text-align:center; color:var(--fs-ink);
  font-variant-numeric:tabular-nums; line-height:1.5;
  background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid var(--fs-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 28px 70px -24px rgba(0,0,0,.55);
}
.fs-sim *{box-sizing:border-box}
.fs-sim .fs-lab{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fs-soft)}
.fs-sim .fs-h2{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin:6px 0 0;line-height:1.2;color:#fff}

.fs-sim .fs-dots{display:flex;gap:6px;justify-content:center;margin:20px 0 15px}
.fs-sim .fs-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16);transition:all .35s ease}
.fs-sim .fs-dots span.on{background:var(--fs-soft);width:20px;border-radius:5px}

.fs-sim .fs-narr{font-size:.98rem;line-height:1.5;font-weight:500;color:var(--fs-soft);min-height:46px;max-width:400px;margin:0 auto 15px}
.fs-sim .fs-narr b{font-weight:700}
.fs-sim .fs-narr.fs-anim{animation:fsNarrIn .42s cubic-bezier(.22,1,.36,1)}
@keyframes fsNarrIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.fs-sim .fs-narr .c-pat{color:var(--patient2)} .fs-sim .fs-narr .c-mv{color:var(--mouve2)} .fs-sim .fs-narr .c-kp{color:var(--keep2)}

.fs-sim .fs-ledger{display:flex;flex-direction:column;gap:8px;margin:0 auto;max-width:410px;text-align:left}
.fs-sim .fs-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;background:var(--fs-card);border:1px solid var(--fs-line);
  opacity:0;transform:translateY(9px);transition:opacity .42s cubic-bezier(.34,1.1,.64,1),transform .42s cubic-bezier(.34,1.1,.64,1)}
.fs-sim .fs-row.show{opacity:1;transform:none}
.fs-sim .fs-tag{width:9px;height:36px;border-radius:5px;flex-shrink:0}
.fs-sim .fs-row .fs-lbl{flex:1;font-size:.86rem;font-weight:600;color:var(--fs-ink)}
.fs-sim .fs-row .fs-lbl b{display:block;font-size:.69rem;font-weight:500;color:var(--fs-dim);margin-top:2px}
.fs-sim .fs-row .fs-amt{font-size:1.28rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.fs-sim .fs-row .fs-amt small{font-size:.68rem;font-weight:600;color:var(--fs-dim);margin-left:3px}
.fs-sim .fs-row--pat .fs-tag{background:linear-gradient(180deg,var(--patient2),var(--patient))} .fs-sim .fs-row--pat .fs-amt{color:var(--patient2)}
.fs-sim .fs-row--mv  .fs-tag{background:linear-gradient(180deg,var(--mouve2),var(--mouve))}   .fs-sim .fs-row--mv  .fs-amt{color:var(--mouve2)}
.fs-sim .fs-row--kp  .fs-tag{background:linear-gradient(180deg,var(--keep2),var(--keep))}     .fs-sim .fs-row--kp  .fs-amt{color:var(--keep2)}

.fs-sim .fs-nav{display:flex;gap:10px;margin-top:20px}
.fs-sim .fs-btn{flex:1;padding:14px;border:none;border-radius:100px;font-family:inherit;font-size:.9rem;font-weight:700;color:#fff;cursor:pointer;
  background:linear-gradient(135deg, rgb(var(--page-accent-rgb, 91,145,255)), rgba(var(--page-accent-rgb, 91,145,255),.8));box-shadow:0 10px 26px rgba(var(--page-accent-rgb, 91,145,255),.36);
  transition:transform .22s cubic-bezier(.34,1.3,.64,1),box-shadow .22s}
.fs-sim .fs-btn:hover{transform:translateY(-2px)}
.fs-sim .fs-btn:active{transform:translateY(1px) scale(.985)}
.fs-sim .fs-btn.ghost{flex:0 0 auto;padding:14px 22px;background:none;border:1px solid var(--fs-line);color:var(--fs-soft);box-shadow:none}
.fs-sim .fs-btn.ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28);color:var(--fs-ink);transform:translateY(-1px)}
.fs-sim .fs-btn.ghost:active{transform:translateY(1px) scale(.98)}

/* Encart « sans rien investir » — apparaît dans la scène une fois la simulation lancée */
.fs-sim .fs-note{display:none;margin-top:18px;padding:14px 16px;border-radius:14px;
  background:rgba(63,201,130,.07);border:1px solid rgba(63,201,130,.22)}
.fs-sim.simu-on .fs-note{display:block;animation:fsNoteIn .45s cubic-bezier(.22,1,.36,1)}
.fs-sim .fs-note-t{display:flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:800;color:var(--keep2);margin-bottom:.3rem;letter-spacing:-.01em}
.fs-sim .fs-note-t::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--keep);flex-shrink:0;box-shadow:0 0 8px rgba(63,201,130,.6)}
.fs-sim .fs-note-d{font-size:.76rem;line-height:1.6;color:rgba(255,255,255,.6)}
@keyframes fsNoteIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.fs-sim .fs-simu{margin-top:22px;padding-top:22px;border-top:1px solid var(--fs-line);display:none}
.fs-sim .fs-simu.show{display:block;animation:fsFade .45s ease both}
@keyframes fsFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.fs-sim .fs-ctrl{margin-bottom:18px;text-align:left}
.fs-sim .fs-ctrl .fs-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.fs-sim .fs-ctrl .fs-nm{font-size:.82rem;font-weight:600;color:var(--fs-soft)}
.fs-sim .fs-ctrl .fs-vl{font-size:1.02rem;font-weight:800}
.fs-sim .fs-ctrl.c-pat .fs-vl{color:var(--patient2)} .fs-sim .fs-ctrl.c-pat input{--col:var(--patient)}
.fs-sim .fs-ctrl.c-mv .fs-vl{color:var(--mouve2)}    .fs-sim .fs-ctrl.c-mv input{--col:var(--mouve)}
.fs-sim input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:5px;outline:none;margin:0;
  background:linear-gradient(90deg,var(--col,#888) var(--p,30%),rgba(255,255,255,.12) var(--p,30%))}
.fs-sim input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;border:3px solid #0b0e18;cursor:pointer;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.fs-sim input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:3px solid #0b0e18;cursor:pointer;background:#fff}
.fs-sim .fs-hint{font-size:.72rem;color:var(--fs-dim);margin-top:7px}

.fs-sim .fs-splitwrap{margin:18px 0;text-align:left}
.fs-sim .fs-splitbar{display:flex;height:30px;border-radius:9px;overflow:hidden;border:1px solid var(--fs-line)}
.fs-sim .fs-seg{display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:#0a0d16;white-space:nowrap;transition:width .35s cubic-bezier(.34,1.1,.64,1)}
.fs-sim .fs-seg.keep{background:linear-gradient(135deg,var(--keep2),var(--keep))}
.fs-sim .fs-seg.mv{background:linear-gradient(135deg,var(--mouve2),var(--mouve))}
.fs-sim .fs-splitleg{display:flex;justify-content:space-between;margin-top:8px;font-size:.72rem;font-weight:600}
.fs-sim .fs-splitleg .lk{color:var(--keep2)} .fs-sim .fs-splitleg .lm{color:var(--mouve2)}

.fs-sim .fs-results{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px}
.fs-sim .fs-res{padding:14px 15px;border-radius:14px;background:var(--fs-card);border:1px solid var(--fs-line);text-align:left}
.fs-sim .fs-res .fs-rl{font-size:.63rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fs-dim)}
.fs-sim .fs-res .fs-rv{font-size:1.32rem;font-weight:800;letter-spacing:-.01em;margin-top:5px}
.fs-sim .fs-res .fs-rv small{font-size:.69rem;font-weight:600;color:var(--fs-dim);margin-left:2px}
.fs-sim .fs-res--mv .fs-rv{color:var(--mouve2)} .fs-sim .fs-res--kp .fs-rv{color:var(--keep2)}
.fs-sim .fs-res.big{grid-column:1/3;text-align:center;padding:20px;background:radial-gradient(ellipse 90% 130% at 50% 0%,rgba(63,201,130,.14),transparent 62%),var(--fs-card);border-color:rgba(63,201,130,.3)}
.fs-sim .fs-res.big .fs-rl{color:var(--keep2)}
.fs-sim .fs-rvline{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.fs-sim .fs-res.big .fs-rv{font-size:2.4rem;margin:0;background:linear-gradient(135deg,var(--keep2),var(--keep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fs-sim .fs-per{font-size:1rem;font-weight:700;color:var(--keep2)}
.fs-sim .fs-rsub{font-size:.8rem;color:var(--fs-soft);margin-top:8px;font-weight:500}

/* ── Repères sous la jauge de prix (conseillé + seuil 0 gain) ── */
.fs-sim .fs-marks{position:relative;height:30px;margin-top:5px;margin-bottom:2px}
.fs-sim .fs-mark{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;transition:left .25s ease}
.fs-sim .fs-mark i{width:1.5px;height:7px;border-radius:2px;display:block}
.fs-sim .fs-mark b{font-size:.6rem;font-weight:700;letter-spacing:.01em;margin-top:3px}
.fs-sim .fs-mark-reco i{background:var(--keep2)} .fs-sim .fs-mark-reco b{color:var(--keep2)}
.fs-sim .fs-mark-zero i{background:#FF7A7F} .fs-sim .fs-mark-zero b{color:#FF8A8E}

/* ── États « perte » : quand le prix passe sous le seuil, ça coûte au praticien ── */
.fs-sim .fs-res--kp.neg .fs-rl{color:#FF8A8E}
.fs-sim .fs-res--kp.neg .fs-rv{color:#FF8A8E}
.fs-sim .fs-res.big.neg{background:radial-gradient(ellipse 90% 130% at 50% 0%,rgba(229,72,77,.16),transparent 62%),var(--fs-card);border-color:rgba(229,72,77,.42)}
.fs-sim .fs-res.big.neg .fs-rl{color:#FF8A8E}
.fs-sim .fs-res.big.neg .fs-rv{background:linear-gradient(135deg,#FFB0B3,#E5484D);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fs-sim .fs-res.big.neg .fs-per{color:#FF8A8E}
.fs-sim .fs-splitwrap.neg .fs-segkeep{background:linear-gradient(135deg,#FF8A8E,#E5484D);color:#fff}
.fs-sim .fs-splitwrap.neg .lk{color:#FF8A8E}

@media (max-width:540px){ .fs-sim{padding:24px 18px} .fs-sim .fs-res.big .fs-rv{font-size:2rem} }

/* ── Grand écran ──
   Avant lancement : carte compacte et bien centrée.
   Au lancement : la fenêtre s'ouvre vers la droite (scène à gauche, simulateur
   à droite), tout reste visible d'un coup d'œil. ── */
@media (min-width:820px){
  /* État compact (avant lancement) : tout est centré, rien n'est décalé */
  .fs-sim:not(.simu-on){max-width:540px;padding:30px 32px}

  /* État ouvert (simulation lancée) : disposition paysage */
  .fs-sim.simu-on{max-width:960px;display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:0;padding:30px 34px}
  .fs-sim.simu-on .fs-lab,.fs-sim.simu-on .fs-h2{flex:0 0 100%}
  .fs-sim.simu-on .fs-scene{flex:1 1 320px;margin-top:20px;padding-right:34px}
  .fs-sim.simu-on .fs-scene .fs-narr,.fs-sim.simu-on .fs-scene .fs-ledger{margin-left:0;margin-right:0}
  .fs-sim.simu-on .fs-simu{flex:1 1 360px;margin-top:20px;padding-top:0;padding-left:34px;border-top:none;border-left:1px solid var(--fs-line)}
  .fs-sim.simu-on .fs-simu.show{display:block;animation:fsSlideR .55s cubic-bezier(.22,1,.36,1) .1s both}
}
@keyframes fsSlideR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}