/* VOKX — Simulateur */

.sim { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem); min-height: 72vh; }

.sim__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap;
  padding-bottom: 2rem;
}
.sim__head h1 { font-size: var(--t-h2); max-width: 18ch; }
.sim__head .lead { margin-top: .9rem; max-width: 52ch; font-size: 1.02rem; }

.sim__progress {
  height: 3px; background: var(--paper-2); border-radius: 2px; overflow: hidden;
}
.sim__progress span {
  display: block; height: 100%; width: 0;
  background: var(--grad-vokx);
  transition: width .65s var(--ease-out);
}
.sim__count {
  font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft); margin: .7rem 0 0;
}

.sim__stage { padding-block: clamp(1.8rem, 4vw, 3rem); max-width: 760px; }
.sim__stage.is-swapping { opacity: 0; transform: translateY(12px); }
.sim__stage { transition: opacity .3s var(--ease), transform .38s var(--ease-out); }

.sim__nav { display: flex; gap: .8rem; align-items: center; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.sim__nav .btn--ghost[hidden] { display: none; }

/* Résultat */
.results { max-width: none; }
.res-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  margin-top: 2rem;
}
.res {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
.res:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(11,37,69,.1); }
.res.is-best { border-color: var(--current); }
.res__flag {
  font-family: var(--meter); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); background: var(--ink); border-radius: 99px;
  padding: .22rem .6rem; align-self: flex-start; margin-bottom: .9rem;
}
.res.is-best .res__flag { background: var(--current); }
.res h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.res__tag { font-size: .88rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.res__price {
  font-family: var(--display); font-weight: 500; letter-spacing: -.045em;
  font-size: 2.5rem; line-height: 1;
}
.res__per { font-family: var(--meter); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: .45rem; }
.res__year { font-family: var(--meter); font-size: .92rem; color: var(--ink-soft); margin-top: .9rem; }
.res__split { list-style: none; margin: 1.2rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); }
.res__split li { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--meter); font-size: .8rem; padding: .32rem 0; color: var(--ink-soft); }
.res__split li b { color: var(--ink); font-weight: 500; }
.res .btn { margin-top: 1.4rem; width: 100%; justify-content: center; }

.res-note {
  margin-top: 2rem; padding: 1.3rem 1.5rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.res-note h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.res-note p { font-size: .95rem; color: var(--ink-soft); }

.toggle-row { display: inline-flex; background: var(--paper-2); border-radius: 99px; padding: .25rem; gap: .2rem; margin-top: 1.5rem; }
.toggle-row button {
  border: none; background: none; border-radius: 99px; padding: .5rem 1.1rem;
  font-family: var(--body); font-size: .92rem; color: var(--ink-soft); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.toggle-row button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 2px 8px rgba(11,37,69,.08); }

.sim-cols { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }