/* Simulateur A.C.E. - NestMe Partners
   Tokens de marque repris a l'identique de la page de reference. */

:root {
  --violet: #8f14d6;
  --violet-2: #7a19d1;
  --bleu: #3730c4;
  --bleu-2: #2c2ba8;
  --ink: #1a1230;
  --ink-soft: #5b5470;
  --line: #ece8f4;
  --bg: #faf9fd;
  --card: #ffffff;
  --grad: linear-gradient(100deg, var(--violet) 0%, var(--bleu) 100%);
  --grad-soft: linear-gradient(100deg, rgba(143, 20, 214, .08), rgba(55, 48, 196, .08));
  --shadow: 0 20px 60px -24px rgba(55, 48, 196, .28);
  --shadow-sm: 0 8px 24px -12px rgba(55, 48, 196, .22);
  --r: 20px;
  --r-sm: 14px;
  --ok: #12a150;
  --warn: #d97706;
  --bad: #dc2626;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Sans cette regle, tout element porteur d'un `display` explicite (les
   .explain__item sont en grid) reste visible malgre l'attribut hidden. Le
   parcours non qualifie s'appuie sur hidden pour retirer le cle en main : la
   regle n'est pas cosmetique. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-display { font-family: Sora, Inter, system-ui, sans-serif; letter-spacing: -.02em; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- Vues ---------- */

.view { display: none; }
.view.is-active { display: block; }

/* La LP et le quiz occupent exactement la hauteur visible, jamais plus.
   100svh (small viewport height) : la barre d'URL mobile ne fait plus deborder. */
.view--fullscreen.is-active {
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
}

/* ---------- Fond ---------- */

.halo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60vw 40vh at 12% -8%, rgba(143, 20, 214, .13), transparent 62%),
    radial-gradient(55vw 38vh at 92% 4%, rgba(55, 48, 196, .12), transparent 60%);
}

/* ---------- LP ---------- */

/* Trois blocs, un seul rythme.
   L'espace au-dessus du logo, celui entre le logo et le titre, et celui entre
   le titre et le CTA valent tous --rythme. Les espacements INTERNES a chaque
   bloc sont volontairement plus serres, sinon les trois blocs ne se lisent plus
   comme trois blocs. Le vide restant tombe sous le CTA.

   Le rythme arbitre entre deux exigences opposees : plus il est large, plus la
   page respire et moins il reste de vide en bas, mais plus le CTA descend.
   Mesure sur 6 viewports : 4vh donne un CTA a 55-65 % et 22-36 % de vide,
   6,2vh donne 62-72 % et 16-30 %. 4,6vh est le point d'equilibre retenu. */
.lp {
  --rythme: clamp(20px, 4.6vh, 52px);
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--rythme);
  padding: var(--rythme) 20px clamp(16px, 2.6vh, 28px);
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.lp__logo { flex: 0 0 auto; }
.lp__logo img { height: clamp(30px, 5vh, 46px); width: auto; display: block; margin: 0 auto; }

/* Bloc 2 : accroche. Espacements internes plus serres que --rythme. */
.lp__body {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(8px, 1.3vh, 14px);
}

.lp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--grad-soft);
  border: 1px solid rgba(143, 20, 214, .16);
  font-size: clamp(11px, 1.5vh, 13px);
  font-weight: 600;
  color: var(--violet-2);
}

.lp__eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 0 rgba(143, 20, 214, .5);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(143, 20, 214, .45); }
  70%  { box-shadow: 0 0 0 9px rgba(143, 20, 214, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 20, 214, 0); }
}

.lp h1 {
  font-size: clamp(27px, 5.2vh, 52px);
  line-height: 1.08;
  font-weight: 800;
}

.lp h1 .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp__sub {
  font-size: clamp(14px, 2.1vh, 18px);
  color: var(--ink-soft);
  max-width: 30em;
  margin: 0 auto;
}

/* Bloc 3 : le CTA. Il ne se centre plus dans l'espace restant, il se pose a
   --rythme du bloc 2 comme les deux autres. Le vide tombe donc sous lui, ce qui
   le maintient dans la moitie haute de l'ecran tout en gardant les trois
   ecarts identiques. Aucune hauteur fixe : le zero-scroll tient. */
.lp__foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.7vh, 18px);
}
.lp__foot .btn { width: 100%; }

.reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 2vw, 20px);
  font-size: clamp(11px, 1.5vh, 13px);
  color: var(--ink-soft);
}

.reassure span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.reassure svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--violet); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(14px, 2.1vh, 19px) clamp(20px, 4vw, 34px);
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  font-size: clamp(14px, 1.9vh, 17px);
  font-family: Sora, Inter, sans-serif;
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  text-decoration: none;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.25;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 26px 64px -22px rgba(55, 48, 196, .42); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn--ghost {
  background: none;
  color: var(--ink-soft);
  box-shadow: none;
  font-weight: 600;
  padding: 10px 16px;
  width: auto;
  font-size: 14px;
}
.btn--ghost:hover { transform: none; color: var(--ink); }

/* ---------- Quiz ---------- */

.quiz {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(12px, 2vh, 22px) 20px clamp(16px, 2.4vh, 26px);
  min-height: 0;
}

.quiz__top { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }

.quiz__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.quiz__count { font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.quiz__count b { color: var(--violet-2); }

.progress { display: flex; gap: 5px; flex: 1 1 auto; }

.progress__seg {
  flex: 1 1 0;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.progress__seg i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--grad);
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

.progress__seg.is-done i, .progress__seg.is-current i { width: 100%; }
.progress__seg.is-current i { background: var(--grad); }

/* Le corps de la question absorbe la place restante et scrolle en interne
   sur les tres petits ecrans, sans jamais faire scroller la page. */
.quiz__body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(8px, 1.6vh, 18px) 2px;
}

.quiz__foot { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: clamp(8px, 1.4vh, 14px); }

.step { display: none; animation: slideIn .38s cubic-bezier(.16, 1, .3, 1); }
.step.is-active { display: block; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}

.step__q {
  font-size: clamp(21px, 3.4vh, 30px);
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 8px;
}

.step__hint { font-size: clamp(13px, 1.8vh, 15px); color: var(--ink-soft); margin-bottom: clamp(14px, 2.4vh, 26px); }

/* ---------- Champ montant ---------- */

.amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: clamp(10px, 1.8vh, 18px) 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}

.amount input {
  border: 0;
  outline: 0;
  background: none;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(28px, 5vh, 44px);
  font-weight: 800;
  text-align: right;
  width: 100%;
  max-width: 6.5em;
  letter-spacing: -.02em;
  color: var(--ink);
  -moz-appearance: textfield;
}
.amount input::-webkit-outer-spin-button,
.amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.amount .unit { font-family: Sora, Inter, sans-serif; font-size: clamp(20px, 3.4vh, 30px); font-weight: 700; color: var(--ink-soft); }

.slider { width: 100%; margin: 4px 0 14px; }

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  outline: 0;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--violet);
  box-shadow: 0 4px 14px -4px rgba(55, 48, 196, .55);
  cursor: grab;
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--violet);
  cursor: grab;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.chip {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: all .16s ease;
}
.chip:hover { border-color: rgba(143, 20, 214, .4); color: var(--violet-2); }
.chip.is-on { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------- Grande valeur : objectif de revenu mensuel ---------- */

.big-val {
  text-align: center;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(34px, 6vh, 56px);
  font-weight: 800;
  letter-spacing: -.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}

.big-val__sub {
  text-align: center;
  font-size: clamp(12px, 1.7vh, 14px);
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: clamp(8px, 1.6vh, 16px);
}

/* ---------- Cartes de choix ---------- */

.cards { display: grid; gap: 9px; }

.card-opt {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: clamp(12px, 1.9vh, 17px) 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: var(--card);
  text-align: left;
  transition: all .16s ease;
  width: 100%;
}
.card-opt:hover { border-color: rgba(143, 20, 214, .45); transform: translateX(3px); }
.card-opt.is-on { border-color: var(--violet); background: var(--grad-soft); }

.card-opt__mark {
  flex: 0 0 auto;
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  transition: all .16s ease;
}
.card-opt.is-on .card-opt__mark { border-color: var(--violet); background: var(--violet); }
.card-opt__mark::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .16s; }
.card-opt.is-on .card-opt__mark::after { opacity: 1; }

.card-opt__txt b { display: block; font-size: clamp(14px, 1.9vh, 15.5px); font-weight: 700; }
.card-opt__txt span { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- Formulaire ---------- */

.fields { display: grid; gap: 10px; }
.fields .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }

.field input {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: var(--card);
  outline: 0;
  font-size: 15px;
  transition: border-color .16s ease;
  width: 100%;
}
.field input:focus { border-color: var(--violet); }
.field input[aria-invalid="true"] { border-color: var(--bad); }

.field__err { font-size: 11.5px; color: var(--bad); min-height: 0; }

.phone-wrap { display: grid; grid-template-columns: auto 1fr; gap: 8px; }

.phone-wrap select {
  padding: 12px 8px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: var(--card);
  outline: 0;
  font: inherit;
  font-size: 14px;
  max-width: 118px;
}

.consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--grad-soft);
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 2px;
}
.consent svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--violet); margin-top: 1px; }

/* ---------- Ecran de calcul ---------- */

.computing { text-align: center; padding: 14vh 20px; }
.computing__ring {
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 4px solid var(--line);
  border-top-color: var(--violet);
  animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.computing__line { font-size: 15px; color: var(--ink-soft); min-height: 1.6em; }

/* ---------- Resultat ---------- */

.res { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 22px 18px 90px; }

.res__head { text-align: center; margin-bottom: 26px; }
.res__logo { height: 34px; margin: 0 auto 20px; display: block; }

.badge-verdict {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--grad-soft);
  border: 1px solid rgba(143, 20, 214, .18);
  font-size: 12px;
  font-weight: 700;
  color: var(--violet-2);
  margin-bottom: 12px;
}

.res__head h1 { font-size: clamp(25px, 5.6vw, 38px); line-height: 1.14; font-weight: 800; margin-bottom: 12px; }
.res__head h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.res__head p { color: var(--ink-soft); font-size: 15.5px; max-width: 34em; margin: 0 auto; }

/* Récapitulatif des réponses : le prospect doit voir d'un coup d'oeil que le
   diagnostic reprend exactement ce qu'il vient de saisir. */
.recap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 22px;
  text-align: left;
}

.recap__it {
  padding: 13px 14px;
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.recap__it span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: 4px;
  line-height: 1.3;
}
.recap__it b {
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(15px, 3.8vw, 20px);
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.recap__it--goal { background: var(--grad-soft); border-color: rgba(143, 20, 214, .22); }
.recap__it--goal b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Bloc pédagogique : sous-location professionnelle et clé en main */
.explain { display: grid; gap: 20px; text-align: left; }
.explain__item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.explain__n {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  display: grid; place-items: center;
  font-family: Sora, sans-serif; font-size: 14px; font-weight: 800;
  flex: 0 0 auto;
}
.explain__item b { display: block; font-size: 16px; margin-bottom: 5px; font-family: Sora, Inter, sans-serif; }
.explain__item p { font-size: 14.2px; color: var(--ink-soft); line-height: 1.62; }
.explain__item strong { color: var(--ink); font-weight: 700; }

/* CTA intermédiaire qui renvoie vers la réservation en bas de page */
.cta-mid { text-align: center; }

/* La preuve la plus forte tient lieu de titre : elle remplace les cinq puces
   qui coupaient la lecture juste avant le bouton. */
.cta-mid__title { margin-bottom: 20px; }

/* La gratuite et la duree font une partie du travail de conversion : elles
   etaient en 12,5 px gris clair, autant dire invisibles. */
.cta-mid__sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.section { margin: 40px 0; }
.section__title { font-size: clamp(19px, 4.4vw, 25px); font-weight: 800; margin-bottom: 7px; }
.section__sub { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 20px; }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

/* Classement */
.rank { display: grid; gap: 11px; }

.rk {
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  animation: rise .5s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

.rk--win { border-color: transparent; box-shadow: var(--shadow); position: relative; }
.rk--win::before {
  content: '';
  position: absolute; inset: 0;
  padding: 2px;
  border-radius: var(--r);
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.rk__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 15px 17px;
  width: 100%;
  text-align: left;
}

.rk__pos {
  width: 27px; height: 27px;
  border-radius: 8px;
  background: var(--bg);
  display: grid; place-items: center;
  font-family: Sora, sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--ink-soft);
  flex: 0 0 auto;
}
.rk--win .rk__pos { background: var(--grad); color: #fff; }

.rk__name { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rk__euros { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.rk__euros b { color: var(--ink); }
.rk__euros .latent { color: var(--warn); font-weight: 600; }

.rk__score { text-align: right; flex: 0 0 auto; }
.rk__score b { font-family: Sora, sans-serif; font-size: 19px; font-weight: 800; display: block; line-height: 1; }
.rk--win .rk__score b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rk__score span { font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }

.rk__body { display: none; padding: 0 17px 16px; border-top: 1px solid var(--line); }
.rk.is-open .rk__body { display: block; padding-top: 14px; }
.rk__body h4 { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; color: var(--bad); }
.rk--win .rk__body h4 { color: var(--ok); }
.rk__body p { font-size: 13.8px; color: var(--ink-soft); line-height: 1.6; }
/* Liste de bénéfices de la carte A.C.E. */
.benef { list-style: none; display: grid; gap: 9px; }
.benef li {
  position: relative;
  padding-left: 25px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.benef li::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--grad);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),
    var(--grad);
  background-size: 10px 10px, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.benef li b { color: var(--ink); font-weight: 700; }

.btn-plus {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1.5px solid rgba(143, 20, 214, .3);
  background: var(--grad-soft);
  color: var(--violet-2);
  font-size: 13.5px;
  font-weight: 700;
  font-family: Sora, Inter, sans-serif;
  transition: all .16s ease;
}
.btn-plus:hover { border-color: var(--violet); transform: translateY(-1px); }
.btn-plus svg { width: 14px; height: 14px; }

.rk__src { font-size: 11px; color: var(--ink-soft); opacity: .8; margin-top: 9px; }
.rk__src a { color: var(--violet-2); }

.tag-win {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
}

/* Le badge de comparaison, a la suite du montant du gagnant. La marge gauche
   n'est pas cosmetique : le badge est desormais court et se retrouve sur la
   meme ligne que le montant, colle au dernier mot sans elle. */
.rk__mult {
  display: inline-block;
  margin-top: 6px;
  margin-left: 9px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--grad-soft);
  border: 1px solid rgba(143, 20, 214, .18);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--violet-2);
  line-height: 1.35;
}

/* Les 4 sous-scores, chacun sur son propre poids. Leur somme fait exactement
   le score affiche en tete de carte : c'est verifiable a l'oeil. */
.axes { display: grid; gap: 7px; margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line); }

.axe { display: grid; grid-template-columns: minmax(0, 1fr) 88px auto; gap: 10px; align-items: center; }
.axe__l { font-size: 12.5px; color: var(--ink-soft); }
.axe__bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.axe__bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.axe__n { font-family: Sora, sans-serif; font-size: 13px; font-weight: 700; white-space: nowrap; }
.axe__n small { font-weight: 600; color: var(--ink-soft); font-size: 11px; }

/* Duel graphique */
.chart-wrap { position: relative; height: 290px; }

.duel-note { font-size: 13.5px; color: var(--ink-soft); margin-top: 16px; line-height: 1.6; }

/* Quand le placement passe devant sur l'horizon, cette mise en garde porte tout
   l'argument : elle ne peut pas se lire comme une note de bas de cadre. Alerte
   assumee, avec un pictogramme qui accroche l'oeil qui scanne. */
.duel-note--warn {
  position: relative;
  margin-top: 20px;
  padding: 16px 18px 16px 48px;
  border-radius: var(--r-sm);
  background: #fff6f5;
  border: 1px solid #f2bcb6;
  border-left: 4px solid #d92d20;
  color: #7a271a;
  font-size: 13.8px;
  line-height: 1.62;
}
.duel-note--warn::before {
  content: '!';
  position: absolute;
  left: 17px;
  top: 16px;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: #d92d20;
  color: #fff;
  display: grid;
  place-items: center;
  font-family: Sora, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.duel-note--warn b { color: #b42318; font-weight: 700; }

/* Le capital de depart, en tete du cadre du duel */
.duel-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 16px;
  margin-bottom: 18px;
  border-radius: var(--r-sm);
  background: var(--grad-soft);
  border: 1px solid rgba(143, 20, 214, .2);
}
.duel-cap__lab {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.duel-cap__val {
  font-family: Sora, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.duel-legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 14px; font-size: 13px; }
.duel-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); }
.duel-legend i { width: 12px; height: 12px; border-radius: 4px; display: block; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 11px; margin-top: 18px; }
.kpi { padding: 14px 15px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); }
.kpi b { display: block; font-family: Sora, sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.kpi span { font-size: 11.5px; color: var(--ink-soft); }
.kpi--hl { background: var(--grad-soft); border-color: rgba(143, 20, 214, .2); }
.kpi--hl b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Curseur d'objectif, en tete du cadre du duel.
   Il pilote le graphique juste en dessous : le trait de separation dit que les
   deux se lisent ensemble, pas comme deux blocs empiles. */
.goal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.goal__lab {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.goal__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.goal__val {
  font-family: Sora, sans-serif;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.goal__apts { font-size: 14px; color: var(--ink-soft); }
.goal__apts b { color: var(--violet-2); font-size: 17px; }
.goal__note { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }

/* Matrice */
.matrix { position: relative; height: 320px; }

/* Piliers A.C.E. */
.pillars { display: grid; gap: 11px; }
.pillar { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); }
.pillar__l {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
  display: grid; place-items: center;
  font-family: Sora, sans-serif; font-size: 19px; font-weight: 800;
  flex: 0 0 auto;
}
.pillar b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.pillar p { font-size: 13.6px; color: var(--ink-soft); line-height: 1.55; }

/* Teasing du live, funnel webinaire uniquement.
   Il arrive juste apres la charge operationnelle qu'on vient d'admettre : il
   doit se lire comme une reponse, donc trancher visuellement avec le reste de
   la page plutot que ressembler a une section de plus. */
.teasing {
  margin-top: 26px;
  padding: 26px 26px 28px;
  border-radius: var(--r);
  background: var(--grad-soft);
  border: 1px solid rgba(143, 20, 214, .24);
}
.teasing__flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.teasing__flag .dot { width: 7px; height: 7px; border-radius: 999px; background: #fff; display: block; }
.teasing__flag b { font-weight: 800; }
.teasing h3 {
  font-family: Sora, sans-serif;
  font-size: clamp(19px, 4vw, 25px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 15px 0 10px;
}
.teasing > p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; }
.teasing__liste { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.teasing__liste li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.teasing__liste li b { color: var(--ink); }
.teasing__liste li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--grad);
}

/* CTA final */
.cta-final { text-align: center; padding: 30px 0 0; }
.scarcity {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(217, 119, 6, .09);
  border: 1px solid rgba(217, 119, 6, .22);
  color: var(--warn);
  font-size: 12.5px; font-weight: 700;
  margin-bottom: 14px;
}

#calendly-embed { min-width: 320px; height: 760px; margin-top: 18px; border-radius: var(--r); overflow: hidden; }

.booked {
  display: none;
  text-align: center;
  padding: 40px 24px;
  background: var(--card);
  border: 1.5px solid var(--ok);
  border-radius: var(--r);
  margin-top: 18px;
}
.booked.is-on { display: block; }
.booked__ic { width: 54px; height: 54px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; margin: 0 auto 16px; }
.booked h3 { font-size: 21px; margin-bottom: 8px; }
.booked p { color: var(--ink-soft); font-size: 14.5px; }

/* Footer */
.foot { text-align: center; font-size: 11.5px; color: var(--ink-soft); padding: 34px 20px 0; line-height: 1.7; }
.foot a { color: var(--violet-2); }

/* Mention legale : on compare une activite commerciale a des produits
   financiers reglementes, la distinction doit etre lisible, pas planquee. */
.foot--legal {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  opacity: .85;
  text-align: left;
  max-width: 62em;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 560px) {
  .fields .row { grid-template-columns: 1fr; }
  .recap { grid-template-columns: repeat(2, 1fr); }
  .axe { grid-template-columns: minmax(0, 1fr) 60px auto; gap: 8px; }
  .duel-cap { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cta-mid__title { font-size: clamp(20px, 5.4vw, 25px); }
  .axe__l { font-size: 12px; }

  /* Sur un ecran etroit, le titre passait a six lignes et repoussait le CTA
     aux trois quarts de la hauteur. On le calibre pour qu'il tienne en quatre
     lignes : le bouton remonte au centre sans perdre l'impact de l'accroche. */
  .lp h1 { font-size: clamp(24px, 4.3vh, 33px); line-height: 1.12; }
  .lp__sub { font-size: clamp(13px, 1.85vh, 15px); }
  .rk__head { grid-template-columns: auto 1fr auto; gap: 10px; padding: 13px 14px; }
  .rk__name { font-size: 14.5px; }
  .chart-wrap { height: 250px; }
  .matrix { height: 290px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rk { opacity: 1; transform: none; }
}