/* ==========================================================================
   Thirdslot — tunnel d'inscription (inscription.html, /signup/)
   Maquette « 2026-11-03 Thirdslot-audit-payment » (écrans 1, 2, 3 à 1920 px).
   Chargé APRÈS css/site.css et css/auth.css (champs, boutons, notices).
   Classes d'état posées par js/inscription.js : .step.on  .stp.on/.done
   .plan2.sel  .field.showerr  .cgv-row.showerr  .formerr/.payerr.on  [hidden]
   ========================================================================== */

.auth-signup {
  --sg-ink: #1a1a2e;
  --sg-text: #4f4f4f;
  --sg-muted: #69697a;
  --sg-label: #565672;
  --sg-line: #e1e1e5;
  --sg-soft: #f6f6fb;
  --sg-card-line: #ededef;
  background: var(--white);
  color: var(--sg-text);
  /* La maquette utilise la coupe statique opsz 14 de Bricolage : sans ce réglage,
     les titres sortent plus étroits que la maquette. */
  font-variation-settings: "opsz" 14;
}
.auth-signup .mono { font-family: var(--font-head); font-variant-numeric: tabular-nums; }

/* Fond : dégradés de la maquette, fondu blanc en bas déjà inclus dans l'image */
.auth-bg { position: absolute; left: 0; right: 0; top: 0; height: 1155px; z-index: 0; pointer-events: none; overflow: hidden; }
.auth-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---------- En-tête + stepper ---------- */
.auth-signup .site-header { position: relative; z-index: 30; background: none; border: 0; }
.auth-signup .site-header .in {
  position: relative; max-width: 1440px; margin: 0 auto; height: 136px;
  display: flex; align-items: flex-start;
}
.auth-signup .auth-logo { margin-top: 19px; }
.auth-signup .auth-logo img { height: 39px; width: auto; }

.stepper {
  position: absolute; left: 50%; top: 37.4px; translate: -50% 0;
  display: flex; gap: 24.8px; margin: 0; padding: 0; list-style: none;
}
.stepper li { position: relative; width: 188.8px; }
/* ligne de progression : fond lavande, remplissage violet */
.stepper li::before, .stepper li::after {
  content: ""; position: absolute; left: 0; top: 51.1px; height: 4px; border-radius: 2px;
}
.stepper li::before { right: 0; background: #e2e2f2; }
.stepper li::after { width: 0; background: var(--primary); transition: width 0.9s cubic-bezier(0.45, 0, 0.25, 1) 0.25s; }
.stepper li:has(.stp.on)::after { width: 64%; }
.stepper li:has(.stp.done)::after { width: 100%; }
.stp {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 0; background: none; border: 0; cursor: default;
  font-family: var(--font-head); font-weight: 500; font-size: 18px; line-height: 21px; color: #7a7a87;
}
.stp.on, .stp.done { color: var(--sg-ink); }
.stp .b {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 500; font-size: 16px; line-height: 1;
  background: var(--white); box-shadow: inset 0 0 0 2px #e2e2f2; color: #7e7e8e;
  transition: background-color 0.3s ease 0.6s, color 0.3s ease 0.6s, box-shadow 0.3s ease 0.6s;
}
.stp.on .b, .stp.done .b { background: var(--primary); box-shadow: none; color: #fff; }
.stp.done .b {
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.stp.done:not([disabled]) { cursor: pointer; }
.stp.done:not([disabled]):hover .lbl { color: var(--primary); }
.stp[disabled] { opacity: 1; }
.stp:focus-visible { outline: none; }
.stp:focus-visible .b { outline: 3px solid rgba(74, 70, 211, 0.45); outline-offset: 3px; }
.stp-rocket {
  position: absolute; left: 0; top: 0; width: 123px; height: 123px; z-index: 2;
  pointer-events: none; opacity: 0;
  filter: drop-shadow(0 15px 15px rgba(121, 121, 188, 0.25));
}
.stepper-mobile { display: none; margin-left: auto; font-weight: 600; font-size: 13.5px; color: var(--primary); white-space: nowrap; }
.auth-signup .secure {
  margin-left: auto; margin-top: 28px; display: flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 19px; color: #585662; white-space: nowrap;
}
.auth-signup .secure img { width: 20px; height: 22px; margin-top: -1px; }

/* Barre récapitulative compacte (sous 1100 px) */
.recap-bar { display: none; }

/* ---------- Grille ---------- */
.auth-signup .wrap {
  position: relative; z-index: 1;
  max-width: 1440px; margin: 0 auto; padding: 0 0 110px;
  display: grid; grid-template-columns: minmax(0, 834.4px) 476.1px; justify-content: space-between; align-items: start;
}
.auth-signup main { min-width: 0; padding-top: 44.6px; }

/* ---------- Étapes ---------- */
.auth-signup .step { position: static; width: auto; transform: none; text-align: left; display: none; grid-template-columns: none; }
.auth-signup .step.on { display: block; animation: authIn 0.28s ease-out; }
.auth-signup .step p { margin-top: 0; }
/* site.css masque `.step p` de 901 à 1024 px (frise de l'accueil) : pas dans le tunnel */
@media (max-width: 1024px) {
  .auth-signup .step p { display: block; }
  .auth-signup .step p.zone-hint, .auth-signup .step p.secure-line { display: flex; }
  .auth-signup .donehero p.dh-sub { display: inline-flex; }
  .auth-signup .step p[hidden] { display: none; }
}
.auth-signup .step h1 {
  font-family: var(--font-head); font-weight: 500; font-size: 38px; line-height: 45px; letter-spacing: 0; color: var(--sg-ink);
}
.auth-signup .step h1:focus { outline: none; }
.auth-signup .step .lead {
  margin: 14px 0 0; max-width: 700px;
  font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--sg-text);
}
.auth-signup .step .lead b { color: var(--sg-ink); font-weight: 600; }

/* Formulaire : posé sur le fond, sans carte */
.formcard, .cardbox { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
#form-account { margin-top: 23px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }

.auth-signup .field { margin-bottom: 0; }
.auth-signup .field + .field, .auth-signup .f2 + .field, .auth-signup .field + .f2, .auth-signup .f2 + .f2 { margin-top: 22px; }
.auth-signup .zone-hint + .field { margin-top: 33px; }
.auth-signup .f2 > .field + .field { margin-top: 0; }
.auth-signup .field label {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px;
  font-family: var(--font-head); font-weight: 400; font-size: 16px; line-height: 19px; color: var(--sg-ink);
}
.auth-signup .field label .opt { font-weight: 400; color: #9292a0; }
.auth-signup .field input, .auth-signup .field select {
  width: 100%; height: 50px; padding: 0 20px;
  border-radius: 9px; border: 1px solid var(--sg-line); background: var(--white);
  font-family: var(--font-head); font-size: 16px; color: var(--sg-ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-signup .field input::placeholder { color: #8a8a94; opacity: 1; }
.auth-signup .field input:hover { border-color: #cfcfd8; }
.auth-signup .field input:focus, .auth-signup .field select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.auth-signup .field input.err { border-color: var(--red); box-shadow: var(--ring-err); }
.auth-signup .field input[readonly] { background: var(--sg-soft); color: var(--sg-ink); border-color: var(--sg-line); }
.auth-signup .inwrap input { padding-right: 52px; }
.auth-signup .lockic { right: 14px; color: var(--sg-ink); }
.auth-signup .lockic img { width: 22px; height: 24px; display: block; }
.auth-signup .field .errmsg { margin-top: 6px; font-size: 13.5px; }

/* Bandeaux de l'étape 1 (pré-rempli, session, compte créé) */
.prefill {
  display: flex; gap: 11px; align-items: center;
  min-height: 44px; padding: 8px 16px 8px 13px; margin: 0 0 41px; border-radius: 9px;
  background: var(--sg-soft); box-shadow: inset 0 0 0 1px var(--primary);
  font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--sg-text);
}
/* Recette 04/11 n4 : seulement après un bandeau visible (sinon « Logged in as »
   remontait sur le texte d'introduction, le bandeau pré-rempli étant masqué). */
.prefill:not([hidden]) + .prefill { margin-top: -29px; }
.prefill .pf-ic { width: 27px; height: 27px; flex: none; }
.prefill > svg { width: 24px !important; height: 24px !important; padding: 5px; flex: none; border-radius: 50%; background: var(--primary); stroke: #fff; }
.prefill .pf-text { flex: 1; }
.prefill .pf-text a { margin-left: 2px; white-space: nowrap; }
.auth-signup .prefill b { color: var(--sg-ink); }

.zone-hint {
  display: flex; align-items: flex-start; gap: 4px; margin-top: 12px !important;
  font-family: var(--font-body); font-size: 16px; line-height: 20px; color: var(--sg-muted);
}
.zone-hint img { width: 20px; height: 20px; flex: none; margin-left: -3px; }

.cgv-row { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: 15px; color: var(--sg-text); line-height: 1.5; cursor: pointer; }
.cgv-row input { margin-top: 3px !important; }
.cgv-row.showerr { color: var(--err-ink); }
.cgv-row .errmsg { display: none; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--err-ink); }
.cgv-row.showerr .errmsg { display: block; }
.auth-signup .formerr { margin: 18px 0 0; }
.auth-signup .payerr { margin: 18px 0 0; }

#inline-login {
  margin-top: 20px; padding: 18px; border-radius: 14px;
  background: var(--sg-soft); box-shadow: inset 0 0 0 1px var(--lavender-4);
}
#inline-login .il-text { font-size: 15px; margin: 0 0 12px; color: var(--sg-text); }
#inline-login .field { margin: 0; }
#inline-login .btn { width: 100%; margin-top: 14px; }

/* ---------- Boutons ---------- */
.btnrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 46px; }
.btnrow .btn-primary { margin-left: auto; }
.auth-signup .btn-primary {
  height: 52px; padding: 0 28px; border-radius: 10px;
}
.auth-signup .btn-go { padding-right: 24px; }
.auth-signup .btn-primary {
  font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 52px; color: #fff;
  background: linear-gradient(180deg, #6663e2 0%, #4a46d3 100%); box-shadow: 0 10px 24px rgba(74, 70, 211, 0.32);
}
.auth-signup .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(74, 70, 211, 0.4); }
/* Flèche des boutons d'action (le texte est réécrit par le JS, d'où le pseudo-élément) */
.btn-go::after {
  content: ""; display: inline-block; width: 22px; height: 20px; margin-left: 9px; vertical-align: -4px;
  background: url("/assets/signup/arrow-w.svg") center / contain no-repeat;
}
.btn-go:has(.spin)::after, .btn-go[disabled]::after { display: none; }
/* Libellés avec des <span> : flux de texte, pas des éléments flex */
#payBtn, #step2-cta, #stBtn, #step1-cta { display: inline-block; text-align: center; white-space: nowrap; }
#payBtn .spin, #stBtn .spin, #step1-cta .spin { margin-right: 8px; }
.btn-line {
  height: 50px; padding: 0 25px; border-radius: 9px;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; box-shadow: inset 0 0 0 1px rgba(74, 70, 211, 0.5);
  font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--sg-text) !important;
  text-decoration: none !important; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease;
}
.btn-line:hover { background: rgba(74, 70, 211, 0.06); color: var(--primary) !important; }
.btn-line:focus-visible { outline: 3px solid rgba(74, 70, 211, 0.45); outline-offset: 2px; }
.btn-line img { width: 22px; height: 20px; flex: none; }
.btn-line img:first-child { width: 24px; height: 22px; margin-left: -1px; margin-right: -3.5px; }
.btnrow.is-center { justify-content: center; }
.btnrow.is-center .btn { margin-left: 0; }
.after-note {
  margin-top: 32px !important; padding-top: 22px; border-top: 1px solid rgba(182, 182, 221, 0.4);
  font-family: var(--font-head); font-size: 16px; line-height: 19px; color: var(--sg-text);
}

/* ---------- Étape 2 : formules ---------- */
#form-plan { margin-top: 23px; }
.best-step, .next-box {
  position: relative; border-radius: 17px;
  background:
    linear-gradient(180deg, #fff 0%, #f6f6fb 100%) padding-box,
    radial-gradient(closest-side at 50% 50%, rgba(135, 135, 244, 0.43), rgba(135, 135, 244, 0.38) 8%, rgba(135, 135, 244, 0.09) 53%, rgba(135, 135, 244, 0.43)) border-box;
  border: 2px solid transparent;
}
.best-step { display: flex; gap: 18px; align-items: flex-start; min-height: 108px; padding: 15px 30px 15px 25px; }
.best-step .bs-ill { width: 66px; height: 74px; flex: none; margin: 0 0 0 0; }
.bs-title { margin-top: 1px; font-family: var(--font-head); font-weight: 500; font-size: 18px; line-height: 22px; color: var(--sg-ink); }
.best-step p { margin-top: 4px; font-family: var(--font-body); font-size: 16px; line-height: 25px; color: var(--sg-text); }
.best-step p b { color: var(--sg-ink); font-weight: 600; }
.bs-plan {
  display: inline-flex; align-items: center; gap: 7px; padding: 0; margin-right: 3px; border: 0; background: none; cursor: pointer;
  font: 600 16px/25px var(--font-body); color: var(--primary); vertical-align: bottom;
}
.bs-plan img { width: 17px; height: 17px; }
.bs-plan:hover { text-decoration: underline; text-underline-offset: 3px; }
.plan-locked {
  display: block; padding: 14px 18px; margin-top: 16px; border-radius: 14px;
  font-size: 15px; line-height: 1.55; background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); font-weight: 500;
}

#form-plan .billing-toggle {
  display: inline-flex; align-items: center; gap: 0; margin: 33px 0 18px; padding: 4px;
  height: 50px; border-radius: 25px; background: var(--white); border: 1px solid var(--sg-line); box-shadow: none;
}
#form-plan .billing-toggle button {
  justify-content: center; height: 40px; padding: 0 19px; border-radius: 20px; gap: 12px;
  font-family: var(--font-head); font-weight: 600; font-size: 14px; color: #5d5d5d;
}
#form-plan .billing-toggle button[aria-checked="true"] { background: var(--primary); color: #fff; }
#form-plan .billing-toggle button:first-child { width: 94.2px; padding: 0; }
#form-plan .billing-toggle .save {
  height: 24.5px; padding: 0 7px; border-radius: 12px; display: inline-flex; align-items: center;
  background: #e1e0f8; color: var(--primary); font: 600 14px var(--font-head);
}

.plans2 { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; align-items: stretch; }
.plan2 {
  position: relative; display: flex; flex-direction: column; min-height: 385.7px;
  padding: 24.6px 21.5px 24.5px; border-radius: 20px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--sg-line);
  cursor: pointer; transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.plan2:hover { transform: translateY(-2px); }
.plan2.sel { box-shadow: inset 0 0 0 2px var(--primary), 0 24px 50px rgba(74, 70, 211, 0.12); }
/* Traits d'éclat au coin de la formule choisie */
.plan2.sel::after {
  content: ""; position: absolute; right: -38px; top: -14px; width: 38px; height: 40px; pointer-events: none;
  background: url("/assets/signup/sparkle.svg") center / contain no-repeat;
}
.plan2:focus-within { outline: 3px solid rgba(74, 70, 211, 0.45); outline-offset: 3px; }
.plan2 input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; top: 16px; left: 16px; margin: 0; }
.plan2 .flag {
  position: absolute; top: 0; right: 0;
  height: 28.8px; padding: 0 13px; border-radius: 0 20px 0 12px;
  background: var(--primary); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.plan2 .plan-head { display: flex; align-items: center; gap: 10px; }
.plan2 .plan-icon {
  width: 55.2px; height: 35.7px; border-radius: 18px; flex: none;
  display: grid; place-items: center; background: var(--white); box-shadow: inset 0 0 0 1px #e2e2e2;
}
.plan2 .plan-icon img { width: 21px; height: 21px; }
.plan2 .pn { font-family: var(--font-body); font-weight: 500; font-size: 17px; color: var(--sg-ink); }
.plan2 .price { display: flex; align-items: baseline; gap: 5px; margin-top: 18.3px; }
.plan2 .price .amount { font-family: var(--font-head); font-weight: 600; font-size: 28px; line-height: 33px; color: var(--sg-ink); }
.plan2 .price .per { font-family: var(--font-body); font-size: 14px; color: #565656; }
.plan2 .billed { display: block; margin-top: 16.6px; font-family: var(--font-body); font-size: 14px; line-height: 17px; color: var(--sg-text); min-height: 17px; }
.billing-annual .plan2 .billed { color: var(--primary); font-weight: 500; }
.plan2 .sep { display: block; border-top: 1px solid var(--sg-line); margin: 13px 0 11px; }
.plan2 .incl { display: block; font-family: var(--font-body); font-size: 14px; line-height: 17px; color: var(--sg-ink); margin-bottom: 4px; }
.plan2 ul { display: flex; flex-direction: column; gap: 9px; margin: 0 0 24px; padding: 0; list-style: none; }
.plan2 .incl + ul { margin-top: 10px; }
.plan2 .sep + ul { margin-top: 2.4px; }
.plan2 ul li { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-body); font-size: 14px; line-height: 16px; color: #303030; }
.plan2 ul li i {
  flex: none; width: 16px; height: 16px; margin-top: 0;
  background: url("/assets/signup/check-li.svg") center / 24px no-repeat;
}
.plan-cta {
  margin-top: auto; height: 42px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #e7e7f2; color: var(--sg-ink); font-family: var(--font-body); font-weight: 600; font-size: 16px;
  transition: background-color 0.18s ease;
}
.plan-cta .pc-on { display: none; }
.plan2:hover .plan-cta { background: #dcdcf0; }
.plan2.sel .plan-cta { background: linear-gradient(180deg, #6663e2 0%, #4a46d3 100%); color: #fff; }
.plan2.sel .plan-cta::before { content: ""; width: 18px; height: 18px; background: url("/assets/signup/check-sel.svg") center / 24px no-repeat, #fff; border-radius: 50%; }
.plan2.sel .pc-on { display: inline; }
.plan2.sel .pc-off { display: none; }

.guarantee2 {
  position: relative; display: block; margin-top: 44px; padding: 0 0 0 95px;
  font-family: var(--font-body); font-size: 15px; line-height: 20px; color: var(--sg-text);
}
.guarantee2 b { display: block; margin-bottom: 6px; font-family: var(--font-head); font-weight: 500; font-size: 18px; line-height: 22px; color: var(--sg-ink); }
.guarantee2 .gi { position: absolute; left: -21px; top: -10px; width: 108px; height: 81px; }
#form-plan .btnrow { margin-top: 67px; }

/* ---------- Étape 3 : paiement ---------- */
.paygrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 46px; }
.payhead { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.pay-title { font-family: var(--font-head); font-weight: 500; font-size: 24px; line-height: 29px; color: var(--sg-ink); }
.cardlogos { margin-left: auto; display: flex; gap: 7.4px; }
.cardlogos span {
  height: 28.3px; padding: 0 9px; border-radius: 6px; display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #4a4a68; background: #e7e7f2;
}
.card-row { align-items: end; }
.card-row .brands { width: 330px; height: 50px; justify-self: end; margin-right: -6px; }
.secure-line {
  display: flex; align-items: center; gap: 6px; margin-top: 22px !important;
  font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 19px; color: var(--sg-muted);
}
.secure-line img { width: 24px; height: 24px; margin-left: 0; }
.next-box { margin-top: 29px; min-height: 149.4px; padding: 19px 230px 22px 24.6px; }
.next-box h3 { margin-top: 0; font-family: var(--font-head); font-weight: 500; font-size: 18px; line-height: 22px; color: var(--sg-ink); }
.next-box ul { margin: 11px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.next-box li { position: relative; padding-left: 26px; font-family: var(--font-body); font-size: 16px; line-height: 19px; color: var(--sg-text); }
.next-box li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; background: url("/assets/signup/check-li.svg") center / 27px no-repeat; }
.next-box li b { color: var(--sg-ink); font-weight: 600; }
.next-box .nb-ill { position: absolute; right: 14px; top: 9px; width: 164px; height: 134px; }
#form-pay .btnrow, #stripeBox .btnrow, #transferBox .btnrow { margin-top: 80px; }
.st-text { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--sg-text); max-width: 760px; }
.st-text b { color: var(--sg-ink); }
.brands-st { display: block; width: 330px; height: 50px; margin: 14px 0 0 -10px; }
/* Boutons PayPal (version en ligne, js/inscription.js renderPaypalButtons) */
#paypal-button-container { margin-top: 29px; max-width: 460px; min-height: 48px; }
#paypal-button-container:empty { display: none; }
.trial-note {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; padding: 13px 16px; border-radius: 12px;
  background: var(--sg-soft); font-size: 15px; line-height: 1.55; color: var(--sg-text);
}
.trial-note img { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.trial-note b { color: var(--sg-ink); }

/* Choix carte / virement (annuel) */
.paymethod { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px; height: 50px; border-radius: 25px; background: var(--white); border: 1px solid var(--sg-line); justify-self: start; }
.paymethod button { height: 40px; padding: 0 20px; border: 0; border-radius: 20px; background: transparent; font: 600 14px var(--font-head); color: #5d5d5d; cursor: pointer; }
.paymethod button:hover { color: var(--sg-ink); }
.paymethod button[aria-checked="true"] { background: var(--primary); color: #fff; }
.paymethod button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.auth-signup .field select { padding: 0 14px; }
.tf-sum { display: grid; gap: 10px; padding: 16px 18px; border-radius: 12px; background: var(--sg-soft); box-shadow: inset 0 0 0 1px var(--lavender-4); margin-bottom: 16px; }
.tf-sum div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tf-sum span { font-size: 14px; color: var(--sg-label); flex: 1 1 12rem; }
.tf-sum b { font-size: 18px; color: var(--sg-ink); }
.tf-list { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0; margin: 0 0 14px; }
.tf-list dt, .tf-list dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--sg-line); font-size: 15px; }
.tf-list dt { color: var(--sg-label); padding-right: 14px; }
.tf-list dd { display: flex; align-items: center; gap: 10px; color: var(--sg-ink); word-break: break-word; }
.tf-list dd .tf-copy { margin-left: auto; flex: none; }
.tf-list dd.mono { font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0.02em; }
.tf-copy {
  align-self: center; margin-left: 10px; height: 28px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--sg-line); background: var(--white); font-size: 12.5px; font-weight: 600; color: var(--primary); cursor: pointer;
}
.tf-copy:hover { border-color: var(--primary); }
.tf-instr { font-size: 15px; line-height: 1.55; color: var(--sg-text); margin: 0 0 14px; white-space: pre-line; }
@media print {
  .auth-signup header, .recap, .stepper, #payMethod, .paynote, #tfDetails .btnrow, .tf-copy, .auth-bg { display: none !important; }
}
.skeleton { display: flex; flex-direction: column; gap: 12px; }
.skeleton i {
  display: block; height: 50px; border-radius: 9px;
  background: linear-gradient(90deg, var(--lavender-3) 25%, #f7f7fc 50%, var(--lavender-3) 75%);
  background-size: 200% 100%; animation: authShine 1.2s linear infinite;
}
.skeleton i.short { width: 55%; }
@keyframes authShine { to { background-position: -200% 0; } }
.cfgerr {
  padding: 18px 20px; border-radius: 14px;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: var(--warn-ink); font-size: 15px; font-weight: 500; line-height: 1.55;
}
.cfgerr .btn { display: flex; margin-top: 12px; height: 44px; }
.auth-signup .step p.paynote { display: block; }

/* ---------- Étape 4 : démarrage (maquette 4-3.svg, 2026-11-04) ---------- */
/* Pleine largeur : la colonne récapitulative disparaît (body.is-done, js/inscription.js) */
.auth-signup.is-done .wrap { grid-template-columns: minmax(0, 1fr); }
.auth-signup.is-done .recap { display: none; }
.donehero { text-align: center; }
.dh-rocket { position: relative; width: 270px; height: 270px; margin: -44.6px auto -13px; }
.dh-ring { position: absolute; }
.dh-ring-out { inset: 0; width: 270px; height: 270px; }
.dh-ring-in { left: 33px; top: 34px; width: 203px; height: 203px; }
.dh-ship { position: absolute; left: 6.5px; top: 9.3px; width: 227.5px; height: 227.5px; filter: drop-shadow(0 15px 15px rgba(121, 121, 188, 0.25)); }
.anim .step.on .dh-ship { animation: dhLaunch 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both, dhFloat 4s 0.9s ease-in-out infinite; }
.anim .step.on .dh-ring { animation: dhRing 0.8s 0.15s ease-out both; }
@keyframes dhLaunch { from { opacity: 0; transform: translate(-46px, 46px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes dhFloat { 50% { transform: translate(4px, -6px); } }
@keyframes dhRing { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
.auth-signup .donehero p { margin: 16px auto 0; max-width: 545px; font-size: 16px; line-height: 24px; color: var(--sg-text); }
.auth-signup .donehero .dh-sub {
  display: inline-flex; align-items: flex-end; gap: 6px; max-width: none; margin-top: 32.6px;
  font-family: var(--font-head); font-weight: 500; font-size: 22px; line-height: 26px; color: var(--sg-ink);
}
.dh-sub img { width: 40px; height: 52px; margin: -26px 0 -10px -6px; }
.onb { margin-top: 51.6px; display: flex; flex-direction: column; gap: 28.5px; }
.onb-card {
  display: grid; grid-template-columns: 152.7px 346px minmax(0, 1fr); align-items: start;
  padding: 42px 40px 47px; border-radius: 17px; background: #f0f0fc;
}
.onb-card.onb-c { padding-bottom: 31.5px; background: #dcecf4; }
.onb-card.onb-e { align-items: center; padding-top: 24.5px; padding-bottom: 24.5px; min-height: 159px; background: #f7f1e2; }
.onb-ill { width: auto; margin: -23px 0 0; }
.onb-c .onb-ill { margin-top: -18px; }
.onb-e .onb-ill { margin-top: 0; }
.auth-signup .onb-card .onb-title {
  max-width: 7.2em; margin: 0; padding-top: 1px;
  font-family: var(--font-head); font-weight: 500; font-size: 28px; line-height: 33.6px; letter-spacing: 0; color: var(--sg-ink);
}
.onb-body { min-width: 0; }
#onb-q-intro, #onb-competitors > p:first-child { padding-top: 2.5px; }
.auth-signup .onb-card p { margin: 0; font-size: 16px; line-height: 24px; color: var(--sg-text); }
.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; }
.onb-foot[hidden] { display: none; }
.onb-q .onb-foot { margin-top: 24px; align-items: flex-start; }
.onb-c .onb-foot { margin-top: 26.7px; }
.onb-card .oact {
  flex: none; display: inline-flex; align-items: center; gap: 13px; height: 52px; padding: 0 29px; border-radius: 10px;
  background: #fff; border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; color: #524fd6;
  transition: box-shadow 0.15s, transform 0.15s;
}
.onb-card .oact::after { content: ""; width: 13px; height: 10px; background: url(/assets/signup/onb/arrow.svg) center / 22px 20px no-repeat; }
.onb-card .oact:hover { box-shadow: 0 6px 16px rgba(82, 79, 214, 0.16); transform: translateY(-1px); }
.onb-card .oact[hidden] { display: none; }
/* Questions : carte blanche, pastilles numérotées */
.qlist {
  margin-top: 18px; padding: 26px 27.5px 25px; border-radius: 16px; background: #fff;
  display: flex; flex-direction: column; gap: 16.6px; counter-reset: q;
}
.qlist[hidden] { display: none; }
.qlist li {
  position: relative; padding-left: 34.5px; counter-increment: q;
  font-family: var(--font-head); font-weight: 500; font-size: 16px; line-height: 21.4px; letter-spacing: 0.03em; color: var(--sg-ink);
}
.qlist li::before {
  content: counter(q); position: absolute; left: 0; top: 0; width: 21.4px; height: 21.4px; border-radius: 50%;
  display: grid; place-items: center; background: #4a46d3; color: #fff; font-size: 14px; letter-spacing: 0;
}
.qlist li:nth-child(n+10)::before { font-size: 11px; }
.qlist .q-teaser { margin-top: -2.3px; }
.qlist .q-teaser span { display: block; width: min(440px, 100%); height: 14px; margin-top: 3.7px; border-radius: 7px; background: #e2e2f2; }
.auth-signup #onb-q-more { font-size: 16px; line-height: 24px; }
#onb-q-more b { font-weight: 600; font-size: 20px; color: var(--sg-ink); }
#onb-q-more strong { font-family: var(--font-head); font-weight: 500; color: var(--sg-ink); }
/* Concurrents : une ligne blanche par concurrent, barre de citations */
.onb-rows { margin-top: 14.5px; display: flex; flex-direction: column; gap: 8.1px; }
.onb-rows li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 0 14px;
  min-height: 78px; padding: 13.8px 24px 18px 23.4px; border-radius: 15px; background: #fff;
}
.onb-rows .r-n { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: #524fd6; }
.onb-rows .r-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-rows .r-name b { font-family: var(--font-head); font-weight: 500; font-size: 18px; color: var(--sg-ink); }
.auth-signup .onb-rows .r-name a { margin-left: 4px; font-weight: 500; font-size: 16px; color: #8a8a96; text-decoration: none; }
.auth-signup .onb-rows .r-name a:hover { color: var(--primary); text-decoration: underline; }
.onb-rows .r-sc { font-family: var(--font-head); white-space: nowrap; }
.onb-rows .r-sc b { font-weight: 600; font-size: 20px; color: var(--sg-ink); }
.onb-rows .r-sc small { margin-left: 2px; font-weight: 500; font-size: 15px; color: #aaaab5; }
.onb-rows .r-bar { grid-column: 1 / -1; position: relative; height: 7px; margin: 8.1px 3.4px 0 4.8px; border-radius: 4px; background: #f0f0f4; overflow: hidden; }
.onb-rows .r-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #7a7aa0; }
.anim .step.on .onb-rows .r-bar i { animation: rBar 0.9s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rBar { from { transform: scaleX(0); transform-origin: left; } to { transform: none; transform-origin: left; } }
.onb-e .onb-foot p { flex: 1; }
/* Pied : trois coches */
#step-4 .btnrow { margin-top: 59.3px; }
.done-foot {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 93px; padding-right: 28px;
  margin-top: 32.6px; padding-top: 21.5px; border-top: 1px solid rgba(182, 182, 221, 0.4);
  font-family: var(--font-head); font-size: 16px; line-height: 19px; color: var(--sg-text);
}
.done-foot li { display: flex; align-items: center; gap: 8.5px; }
.done-foot li::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: #4a46d3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 10.1l2.1 2.1 3.9-4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
/* Recette n76 : concurrents modifiables sur la page */
.onb-ce[hidden] { display: none; }
.onb-comps { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--sg-text); }
.onb-comps li { position: relative; padding-left: 18px; line-height: 1.5; }
.onb-comps li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.onb-ce .onb-comps li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.onb-ce-rm { margin-left: 4px; width: 26px; height: 26px; border-radius: 6px; color: var(--sg-muted); }
.onb-ce-rm:hover { background: var(--sg-soft); color: var(--sg-ink); }
.onb-ce-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.onb-ce-add input { flex: 1 1 160px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--sg-card-line); font: inherit; font-size: 14.5px; }
.onb-ce-add .oact, .onb-ce-done { margin-left: 0 !important; }
.onb-ce .oact { height: 42px; padding: 0 20px; background: #fff; box-shadow: none; }
.onb-ce .oact::after { display: none; }
.onb-ce-done { margin-top: 10px; }
.auth-signup .onb-card p.onb-ce-err { margin-top: 6px; font-size: 13.5px; color: #b4232a; }
.auth-signup .onb-card p.onb-ce-err:empty { display: none; }
.btn-lg { height: 56px !important; line-height: 56px !important; padding: 0 30px !important; font-size: 16.5px !important; }

/* ---------- Récapitulatif (colonne droite) ---------- */
.recap { position: sticky; top: 24px; margin-top: 29px; }
.recap-card, .order { position: relative; background: var(--white); border-radius: 20px; }
.recap-card {
  padding: 25px 29px 27px 27px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(150deg, #4a46d3 2%, #d085c2 31%, rgba(240, 148, 99, 0.3) 50%, rgba(208, 133, 194, 0.9) 69%, #4a46d3 98%) border-box;
  border: 2px solid transparent;
}
.rc-title, .or-title { font-family: var(--font-head); font-weight: 500; font-size: 22px; line-height: 27px; color: var(--sg-ink); letter-spacing: -0.01em; }
.rc-score { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 15px; }
.rc-lbl { display: flex; flex-direction: column; }
.rc-pre { font-family: var(--font-head); font-size: 14px; line-height: 17px; color: var(--sg-label); }
.rc-main { margin-top: 5px; font-family: var(--font-head); font-weight: 500; font-size: 24px; line-height: 29px; color: var(--sg-ink); letter-spacing: -0.01em; }
.rc-score .n { font-family: var(--font-head); font-weight: 600; font-size: 40px; line-height: 40px; color: var(--sg-ink); margin-bottom: -7.3px; }
.rc-score .n small { margin-left: 8px; font-weight: 500; font-size: 20px; color: #aaaabc; }
.segmini { display: flex; gap: 4.27px; margin: 12px 0 0; }
.segmini i { flex: 1; height: 9.4px; border-radius: 2.2px; background: #e2e2ef; }
.segmini i.on { background: var(--primary); }
.rc-site { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--sg-card-line); }
.rc-site img { width: 17px; height: 17px; margin-left: -1.5px; }
.rc-site .site { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 17px; color: var(--sg-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-date { margin-left: 4px; font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 17px; color: var(--primary); }
.rivalline { margin-top: 12px; }
.rv-h { font-family: var(--font-head); font-weight: 500; font-size: 16px; line-height: 19px; color: var(--sg-ink); }
.rv-row { display: flex; align-items: center; gap: 15px; margin-top: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--sg-card-line); }
.rv-ic { width: 45px; height: 45px; border-radius: 9.5px; flex: none; display: grid; place-items: center; background: var(--sg-soft); }
.rv-ic img { width: 22px; height: 24px; }
.rv-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-name b { font-family: var(--font-head); font-weight: 500; font-size: 18px; line-height: 21px; color: var(--sg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-name a { font-family: var(--font-body); font-size: 13px; line-height: 16px; color: #808096 !important; text-decoration: none; font-weight: 400 !important; }
.rv-name a:hover { color: var(--primary) !important; text-decoration: underline; }
.rv-n { font-family: var(--font-head); font-weight: 600; font-size: 22px; line-height: 26px; color: var(--sg-ink); white-space: nowrap; }
.rv-n small { margin-left: 5px; font-weight: 500; font-size: 15px; color: #aaaab5; }
.rv-wait, .rv-none { margin-top: 10px; font-family: var(--font-body); font-size: 14px; line-height: 17px; color: var(--sg-muted); }
.goalline { display: flex; gap: 17px; align-items: flex-start; margin-top: 13px; padding: 13px 20px 13px 14px; border-radius: 9.5px; background: var(--sg-soft); }
.gl-ic { width: 44px; height: 44px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--white); box-shadow: inset 0 0 0 1px var(--sg-card-line); }
.gl-ic img { width: 24px; height: 24px; }
.goalline b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 16px; line-height: 19px; color: var(--sg-ink); }
.goalline #recap-goal { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 16px; line-height: 19px; color: var(--sg-text); }

.order { margin-top: 14px; padding: 24px 29px 25px 27px; box-shadow: inset 0 0 0 1px var(--sg-card-line), 0 7.85px 15.7px rgba(209, 209, 232, 0.25); }
.or-plan {
  position: relative; margin-top: 33px; padding: 26px 16px 11px; border-radius: 14px; text-align: center;
  background: linear-gradient(160deg, #fff 18%, #ecebfa 100%);
  box-shadow: inset 0 0 0 1px #ececf3;
}
.or-ic {
  position: absolute; left: 50%; top: -18px; translate: -50% 0;
  width: 54px; height: 35px; border-radius: 17.5px; display: grid; place-items: center;
  background: var(--white); box-shadow: inset 0 0 0 1px #e2e2e2;
}
.or-ic img { width: 20px; height: 20px; }
.or-name { display: block; font-family: var(--font-head); font-weight: 500; font-size: 14px; line-height: 17px; color: #303047; }
.or-name small { margin-left: 2px; font-weight: 400; font-size: 13px; color: var(--sg-muted); }
.or-price { display: block; margin-top: 3px; font-family: var(--font-head); font-weight: 600; font-size: 22px; line-height: 27px; color: var(--sg-ink); }
.or-price small { margin-left: 4px; font-weight: 500; font-size: 15px; color: #9393aa; }
.order .ol { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; font-family: var(--font-head); font-size: 16px; line-height: 19px; color: var(--sg-label); }
.order .or-plan + .ol { margin-top: 23px; }
.order .ol .mono { text-align: right; color: var(--sg-ink); font-weight: 500; font-variant-numeric: normal; }
.order .ol-ok { display: inline-flex; align-items: center; gap: 4px; }
.order .ol-ok img { width: 21px; height: 21px; }
.order .ol.total { margin-top: 22px; padding-top: 21px; border-top: 1px solid #f3f3f7; color: #303047; }
.order .ol.total .mono { font-weight: 600; font-size: 24px; line-height: 29px; }
.order .ol-note { margin-top: 23px; font-family: var(--font-body); font-size: 15px; line-height: 19px; color: var(--sg-muted); }
.order .ol-offer {
  margin-top: 14px; padding: 10px 12px 10px 40px; border-radius: 10px; position: relative;
  background: #fdf8e4; box-shadow: inset 0 0 0 1px rgba(246, 211, 86, 0.6); font-size: 14px; line-height: 1.45; color: var(--sg-ink);
}
.order .ol-offer::before {
  content: ""; position: absolute; left: 10px; top: 9px; width: 22px; height: 22px;
  background: url("/assets/gift.svg") center / contain no-repeat;
}
.order .ol-offer b { font-weight: 600; }
.trustrow { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; padding: 0 0 4px 2px; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 22px; color: var(--sg-muted); }
.trustrow > span { display: flex; gap: 5px; align-items: center; }
.trustrow img { width: 26px; height: 28px; flex: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
  .auth-signup .site-header .in, .auth-signup .wrap { padding-left: 40px; padding-right: 40px; }
  .auth-signup .wrap { grid-template-columns: minmax(0, 834.4px) minmax(0, 420px); gap: 48px; }
  .recap-card, .order { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1280px) {
  .stepper { gap: 14px; }
  .stepper li { width: 150px; }
  .plans2 { gap: 14px; }
  .plan2 { padding-left: 18px; padding-right: 18px; }
  .card-row .brands { width: 260px; height: 40px; }
}
@media (max-width: 1100px) {
  .stepper, .auth-signup .secure { display: none; }
  .stepper-mobile { display: block; margin-top: 30px; }
  .auth-signup .site-header .in { height: 92px; }
  .recap-bar {
    display: flex; position: sticky; top: 0; z-index: 25;
    background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sg-line); padding: 10px 40px; font-size: 14px;
  }
  .recap-bar .in { max-width: 1440px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
  .recap-bar b { font-family: var(--font-head); font-weight: 500; }
  .recap-bar .mono { margin-left: auto; font-weight: 600; color: var(--primary); }
  .auth-signup .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .auth-signup main { padding-top: 24px; }
  .recap { position: relative; top: auto; margin-top: 0; max-width: 560px; }
  .plans2 { grid-template-columns: 1fr; }
  .plan2 { min-height: 0; }
  .plan2 .plan-cta { margin-top: 4px; }
  .plan2.sel::after { right: -10px; top: -30px; }
  .onb-card { grid-template-columns: 116px minmax(0, 1fr); gap: 24px 28px; align-items: center; }
  .onb-card .onb-body { grid-column: 1 / -1; }
  .onb-ill { margin: 0 !important; }
  .auth-signup .onb-card .onb-title { max-width: none; }
  .done-foot { gap: 10px 40px; }
}
@media (max-width: 760px) {
  .auth-signup .site-header .in, .auth-signup .wrap { padding-left: 16px; padding-right: 16px; }
  .recap-bar { padding: 10px 16px; }
  .auth-signup .site-header .in { height: 76px; }
  .auth-signup .auth-logo { margin-top: 18px; }
  .auth-signup .auth-logo img { height: 32px; }
  .stepper-mobile { margin-top: 25px; }
  .auth-signup .step h1 { font-size: 30px; line-height: 36px; }
  .f2 { grid-template-columns: minmax(0, 1fr); }
  .f2 > .field + .field { margin-top: 22px; }
  .card-row .brands { justify-self: start; margin: 14px 0 0 -8px; width: 260px; height: 40px; }
  .best-step { padding: 16px 18px; gap: 12px; }
  .best-step .bs-ill { width: 46px; height: 52px; }
  .next-box { padding: 18px 18px 20px; }
  .next-box .nb-ill { display: none; }
  .guarantee2 { padding-left: 80px; }
  .guarantee2 .gi { left: -12px; width: 88px; height: 66px; }
  .btnrow { flex-direction: column-reverse; align-items: stretch; margin-top: 36px !important; }
  .btnrow .btn, .btnrow .btn-line { width: 100%; margin-left: 0 !important; justify-content: center; }
  .btnrow .btn { white-space: normal; height: auto; min-height: 52px; padding: 14px 18px; line-height: 1.3; }
  .payhead .cardlogos { margin-left: 0; width: 100%; }
  .onb-card, .onb-card.onb-c, .onb-card.onb-e { grid-template-columns: 72px minmax(0, 1fr); gap: 18px 14px; padding: 24px 18px; }
  .onb-ill { width: 72px; height: auto; margin: 0 !important; }
  .auth-signup .onb-card .onb-title { max-width: none; font-size: 22px; line-height: 27px; }
  .onb-foot, .onb-q .onb-foot { flex-direction: column; align-items: stretch; }
  .onb-card .oact { justify-content: center; }
  .qlist { padding: 18px 16px; gap: 14px; }
  .onb-rows li { padding: 14px 16px; min-height: 0; }
  .onb-rows .r-name a { display: none; }
  .auth-signup .donehero .dh-sub { font-size: 19px; }
  .dh-rocket { transform: scale(0.8); margin-top: -40px; margin-bottom: -40px; }
  .done-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .recap-card, .order { padding-left: 20px; padding-right: 20px; }
}