:root{
  /* ── Design tokens (éditables via le panneau ?design=1) ── */
  --accent:#b59c50;        /* doré charte SmartClub */
  --accent-ink:#ffffff;    /* texte sur accent */
  --ink:#17140d;           /* texte principal */
  --muted:#6f6656;         /* texte secondaire */
  --line:#e6e1d4;          /* bordures */
  --page-bg:#ffffff;       /* fond du volet formulaire */
  --field-bg:#ffffff;      /* fond des champs */
  --btn-bg:#141414;        /* bouton principal (noir) */
  --btn-fg:#ffffff;
  --r-field:10px;
  --r-btn:12px;
  /* Échelle typographique : titre + 4 tailles de texte. */
  --fs-title:30px;
  --fs-lg:17px;     /* titres d'étape */
  --fs-base:16px;   /* corps : champs, bouton, nom du plan */
  --fs-sm:14px;     /* récap, puces */
  --fs-xs:13px;     /* sous-titre, réassurance, labels, consentement, steps */
  --fs-2xs:12px;    /* mentions légales, erreurs */
  --pane-pad:56px;
  --form-max:440px;
  --shadow:0 1px 2px rgba(20,16,8,.05);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--page-bg);font-size:var(--fs-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── Layout split-screen ── */
.split{display:flex;min-height:100dvh}
.pane-form{flex:1 1 50%;display:flex;align-items:center;justify-content:center;padding:var(--pane-pad)}
.pane-media{flex:1 1 50%;background:#d9cbb0 center/cover no-repeat}
.form-inner{width:100%;max-width:var(--form-max)}

/* ── En-tête ── */
.brand img{height:34px;width:auto;display:block}
.title{font-size:var(--fs-title);font-weight:800;letter-spacing:-1px;line-height:1.12;margin:30px 0 40px;text-wrap:balance}

/* ── Stepper ── */
.stepper{position:relative;display:flex;justify-content:space-between;margin-bottom:28px}
.st-line{position:absolute;top:12px;left:13px;right:13px;height:2px;background:#ededea}
.st-line-fill{position:absolute;top:12px;left:13px;width:0;height:2px;background:var(--accent);transition:width .3s}
.st-item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.st-item:first-of-type{align-items:flex-start}
.st-item:last-of-type{align-items:flex-end}
.stepper .dot{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;z-index:1;
  font-size:var(--fs-xs);font-weight:700;background:#ededea;color:#a8a29a;transition:background .25s,color .25s}
.st-item.active .dot,.st-item.done .dot{background:var(--accent);color:var(--accent-ink)}
.st-lbl{font-size:var(--fs-xs);font-weight:600;color:#a8a29a;white-space:nowrap;transition:color .25s}
.st-item.active .st-lbl{color:var(--ink)}
.st-item.done .st-lbl{color:var(--muted)}

/* ── Steps ── */
.step{display:none;animation:in .32s cubic-bezier(.2,.6,.2,1)}
.step.active{display:block}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.step{animation:none}}
.q{font-size:var(--fs-lg);font-weight:700;margin:0 0 14px}
.sub{color:var(--muted);font-size:var(--fs-sm);margin:-10px 0 18px}

/* ── Champs ── */
.field{margin-bottom:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:6px}
.hint{font-size:var(--fs-2xs);color:var(--muted);margin-top:6px}
input{width:100%;font:inherit;font-size:var(--fs-base);padding:13px 14px;color:var(--ink);background:var(--field-bg);
  border:1.5px solid var(--line);border-radius:var(--r-field);transition:border-color .15s,box-shadow .15s}
input::placeholder{color:#b3aa96}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);background:#fff}
input.err{border-color:#d64533;box-shadow:0 0 0 3px rgba(214,69,51,.12)}
.err-msg{color:#c0392b;font-size:var(--fs-2xs);margin-top:6px;display:none}
input.err ~ .err-msg{display:block}
.tel{position:relative}
.tel .flag{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none}
.tel input{padding-left:50px}

/* ── Boutons ── */
.actions{display:flex;gap:10px;margin-top:22px}
.btn{appearance:none;border:none;cursor:pointer;font:inherit;font-weight:700;font-size:var(--fs-base);
  padding:15px 18px;border-radius:var(--r-btn);transition:transform .08s,opacity .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(1px)}
.btn .arr{font-size:1.1em;line-height:1;transition:transform .15s}
.btn-primary:hover .arr{transform:translateX(3px)}
.btn-primary{flex:1;background:var(--btn-bg);color:var(--btn-fg)}
.btn-primary:hover{opacity:.88}
.btn-ghost{background:transparent;color:var(--muted);padding-left:6px;padding-right:14px}
.btn-ghost:hover{color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Récap (étape 3) ── */
.recap{border:1px solid var(--line);border-radius:var(--r-field);overflow:hidden;margin:4px 0 16px}
.recap-row{display:flex;justify-content:space-between;align-items:baseline;padding:12px 15px;font-size:var(--fs-sm)}
.recap-row+.recap-row{border-top:1px solid var(--line)}
.recap-row .k{color:var(--muted)}
.recap-row .v{font-weight:700;font-variant-numeric:tabular-nums}
.recap-row .v .strike{color:var(--muted);font-weight:400;text-decoration:line-through}
.recap-row .v .free{color:var(--accent);font-weight:700}
.recap-row .v.soft{font-weight:400;color:var(--muted)}
.recap-row.main{background:color-mix(in srgb,var(--accent) 12%,#fff);align-items:flex-start;font-size:15px}
.recap-row.main .k{color:var(--ink);font-weight:700}
.recap-row.main .v{color:var(--ink)}
.recap-row.main .km{display:flex;flex-direction:column;gap:3px}
.recap-row.main .vm{display:flex;flex-direction:column;gap:3px;align-items:flex-end;text-align:right}
.recap-row .feat{display:inline-flex;align-items:center;font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
.recap-row .feat .fck{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;
  border-radius:50%;background:#141414;color:#fff;font-size:9px;font-weight:800;margin-right:5px}
.perks{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.perks li{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-sm)}
.perks .ck{flex:none;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,#fff);
  color:var(--accent);display:grid;place-items:center;font-size:10px;font-weight:800;margin-top:1px}
.fineprint{font-size:var(--fs-xs);color:var(--muted);margin-top:14px;line-height:1.45}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-xs);color:var(--muted);line-height:1.5;margin:2px 0 6px;cursor:pointer}
.consent input{width:16px;height:16px;flex:none;margin:0;align-self:flex-start;transform:translateY(2px);accent-color:var(--accent);cursor:pointer}
.consent a{color:var(--ink);text-decoration:underline}
.consent.err span{color:#c0392b}
.consent.err + .err-msg{display:block}

/* ── Écran paiement ── */
.pay{text-align:center;padding:24px 8px}
.spin{width:34px;height:34px;border:3px solid color-mix(in srgb,var(--accent) 20%,#fff);border-top-color:var(--accent);
  border-radius:50%;margin:0 auto 16px;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.pay h2{font-size:var(--fs-base);margin:0 0 6px;font-weight:800}
.pay p{color:var(--muted);font-size:var(--fs-sm);margin:0}

/* ── Responsive : image en bandeau haut ── */
@media (max-width:860px){
  .split{flex-direction:column}
  .pane-media{flex:none;height:34vh;min-height:220px}
  .pane-form{padding:32px 22px 40px}
}