/* ==========================================================================
   Sign-up — une question par écran, centrée sur une page blanche.
   Tout passe par les tokens du site ; le seul blanc en dur est celui posé
   sur un aplat d'accent ou de validation, comme ailleurs sur le site.
   ========================================================================== */

.su [hidden] { display: none !important; }

.su {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
}

/* ---------- barre du haut ---------- */
.su-top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  padding: 0 clamp(18px, 4vw, 40px);
  background: var(--bg-page);
}
.su-brand { justify-self: start; display: inline-flex; color: var(--ink); border-radius: var(--r-xs); }
.su-exit {
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.su-exit:hover { background: var(--surface-2); color: var(--ink); }
.su-exit svg { width: 14px; height: 14px; }
.su-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-hair); }
.su-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}

/* ---------- la scène ---------- */
.su-stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(32px, 7vh, 88px) clamp(18px, 5vw, 40px) clamp(48px, 10vh, 120px);
}
.su-step { display: none; width: min(100%, 560px); }
.su-step.is-current { display: block; animation: su-in var(--dur-slow) var(--ease-out) both; }
.su-step--wide { width: min(100%, 760px); }
/* L'entrée part d'un état déjà lisible : jamais d'écran à opacité nulle. */
@keyframes su-in {
  from { transform: translateY(14px); }
  to   { transform: none; }
}
.su-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.4vw + 18px, 46px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  color: var(--ink);
  text-wrap: balance;
}
.su-title:focus { outline: none; }
.su-help {
  margin: 14px 0 0;
  max-width: 54ch;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- champs (même langage que .field__box du contact) ---------- */
.su-field { margin-top: 28px; }
.su-field + .su-field { margin-top: 16px; }
.su-field > label {
  display: block;
  margin-bottom: 9px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink);
}
.su-field input {
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  letter-spacing: -.012em;
  outline: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.su-field input::placeholder { color: var(--ink-faint); }
.su-field input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.su-field input[aria-invalid="true"] { border-color: var(--risk-line); box-shadow: 0 0 0 4px var(--risk-soft); }
.su-pass-wrap { position: relative; }
.su-pass-wrap input { padding-right: 84px; }
.su-show {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font: inherit;
  font-size: var(--fs-2xs);
  color: var(--ink-muted);
  cursor: pointer;
}
.su-show:hover { background: var(--surface-2); color: var(--ink); }

.su-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.su-error { min-height: 20px; margin: 10px 0 0; font-size: var(--fs-xs); color: var(--risk); }

/* ---------- actions ---------- */
.su-actions { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.su-actions--center { justify-content: center; }

/* ---------- pastilles de choix ---------- */
.su-chips { margin: 28px 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.su-chip { position: relative; }
.su-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.su-chip span {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: var(--fs-sm);
  color: var(--ink);
  pointer-events: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.su-chip:hover span { border-color: var(--line-soft); background: var(--surface-1); }
.su-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.su-chip input:focus-visible + span { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* ---------- la clause ---------- */
.su-opts { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.su-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-1);
}
.su-seg__label {
  padding: 0 10px 0 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.su-seg label { position: relative; display: inline-flex; }
.su-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.su-seg input + span {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  pointer-events: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.su-seg input:checked + span { background: var(--bg); color: var(--ink); font-weight: 500; box-shadow: var(--sh-sm), 0 0 0 1px var(--line); }
.su-seg input:focus-visible + span { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.su-note { margin: 0; font-size: var(--fs-xs); color: var(--ink-muted); }

.su-clause {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--sh-md);
}
.su-clause__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px 9px 18px;
  border-bottom: 1px solid var(--line-hair);
  background: var(--surface-1);
}
.su-clause__head > span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Le libellé au seuil WCAG AA (4,5:1 sur --surface-1), pour les deux paragraphes que sert app.werefund.com
   (WR-F012) ; la maquette garde son gris (D140). */
.su-clause--lisible .su-clause__head > span { color: var(--ink-muted); }
.su-clause__text {
  margin: 0;
  max-height: 300px;
  overflow: auto;
  padding: 20px 22px 22px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink-soft);
}
.su-clause__text b { color: var(--ink); font-weight: 600; }
.su-clause__text mark { padding: 1px 4px; border-radius: 4px; background: var(--accent-soft); color: var(--ink); }
/* Un texte montré tel quel, octet pour octet : les conditions acceptées à l'étape 09 de app.werefund.com (WR-F014),
   dont l'empreinte est celle du fichier. Ses sauts de ligne et ses blancs sont gardés, rien n'est réécrit. */
.su-clause__text--source { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }

.su-check { margin-top: 18px; display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.su-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* ---------- la vérification ---------- */
.su-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.su-checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  transition: color var(--dur) var(--ease);
}
.su-checks li::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
}
.su-checks li.is-run { color: var(--ink-soft); }
.su-checks li.is-run::before { border: 2px solid var(--accent-line); border-top-color: var(--accent); animation: su-spin .8s linear infinite; }
.su-checks li.is-ok { color: var(--ink); }
.su-checks li.is-ok::before {
  border-color: var(--ok);
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@keyframes su-spin { to { transform: rotate(360deg); } }
.su-passed {
  margin: 18px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--ok-line);
  border-radius: var(--r-md);
  background: var(--ok-soft);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.su-passed svg { flex: none; width: 18px; height: 18px; color: var(--ok); }

/* ---------- ce qui bloque (app, WR-F011 ; D50) ----------
   La maquette ne montre que la réussite. Dans l'app, une lecture qui échoue dit ce qui bloque, un point par
   ligne, suivi du texte du marchand cité tel quel. La croix est dessinée par deux dégradés : ses couleurs
   suivent les jetons, thème sombre compris (un SVG en data: ne lit pas les variables). */
.su-verdict { margin: 18px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--risk); }
.su-blocks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.su-blocks li { display: grid; gap: 6px; }
.su-blocks__point { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--ink); }
.su-blocks__point::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--risk);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 44%, var(--risk) 44% 56%, transparent 56%) center / 10px 10px no-repeat,
    linear-gradient(-45deg, transparent 44%, var(--risk) 44% 56%, transparent 56%) center / 10px 10px no-repeat,
    var(--risk-soft);
}
.su-blocks__cite {
  margin: 0 0 0 32px;
  padding: 8px 12px;
  border-left: 3px solid var(--risk-line);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-inset);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* ---------- les formules ---------- */
.su-plans { margin: 28px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.su-plan { position: relative; display: block; cursor: pointer; }
.su-plan input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.su-plan__body {
  position: relative;
  display: block;
  height: 100%;
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.su-plan__body::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  transition: border var(--dur) var(--ease);
}
.su-plan:hover .su-plan__body { border-color: var(--line-soft); }
.su-plan input:checked + .su-plan__body { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.su-plan input:checked + .su-plan__body::after { border: 5px solid var(--accent); }
.su-plan input:focus-visible + .su-plan__body { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.su-plan__name { display: block; padding-right: 28px; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.018em; color: var(--ink); }
.su-plan__lede { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-muted); }
.su-plan__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.su-plan__item { display: block; position: relative; padding-left: 22px; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-soft); }
.su-plan__item::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 14px;
  height: 14px;
  background: var(--accent-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- l'arrivée ---------- */
.su-step--done { text-align: center; }
.su-step--done .su-help { margin-inline: auto; }
.su-done-mark {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--ok-line);
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
}
.su-done-mark svg { width: 22px; height: 22px; }
.su-step--done .su-title { margin-top: 20px; }
.su-summary {
  max-width: 500px;
  margin: 26px auto 0;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.su-summary div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-hair); }
.su-summary div:first-child { border-top: 0; }
.su-summary dt {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.su-summary dd { margin: 0; font-size: var(--fs-xs); color: var(--ink); overflow-wrap: anywhere; }
.su-step--done .su-actions { margin-top: 26px; }

.su a:focus-visible,
.su button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* ---------- petits écrans ---------- */
@media (max-width: 640px) {
  .su-top { height: 56px; }
  .su-plans { grid-template-columns: 1fr; }
  .su-summary div { grid-template-columns: 1fr; gap: 2px; }
  .su-actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .su-step.is-current { animation: none; }
  .su-progress i { transition: none; }
  .su-checks li.is-run::before { animation: none; }
}

/* ---------- D17 : formules, moyens de paiement, étiquette ---------- */
.su-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.su-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Une carte indisponible (D139 : l'acheteur « Coming soon » de /sign-up) : visible, grisée, jamais cochée. */
.su-plan:has(input:disabled) { cursor: not-allowed; }
.su-plan:has(input:disabled):hover .su-plan__body { border-color: var(--line); }
.su-plan input:disabled + .su-plan__body { opacity: .55; }
.su-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  vertical-align: 2px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.su-note--after { margin-top: 16px; }
@media (max-width: 640px) {
  .su-plans--3, .su-plans--2 { grid-template-columns: 1fr; }
}

/* ---------- connexion et tableaux de bord de démo (Rico, 16/09) ---------- */
.su-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.su-note a:hover { color: var(--accent-ink); }
.su-login__status:empty { display: none; }
.su-login__status { margin-top: 14px; color: var(--ink-soft); }
.su-demo {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line-hair);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.su-demo .btn { width: 100%; padding-inline: 18px; justify-content: space-between; }
.su-stage--dash { place-items: start center; }
@media (max-width: 640px) {
  .su-demo { grid-template-columns: 1fr; }
}
.su-login__mark,
.su-login__mark > svg { display: block; width: 96px; height: 96px; }
.su-login__mark { margin: 0 0 22px; }
@media (max-width: 640px) {
  .su-login__mark,
  .su-login__mark > svg { width: 80px; height: 80px; }
}

/* ---------- second facteur (WR-F017) : le QR de l'enrôlement, son secret, les codes de récupération ----------
   Le QR est un SVG du serveur sans taille (un viewBox seul) : c'est cette feuille qui le dimensionne. */
.su-qr {
  display: block;
  width: 208px;
  height: 208px;
  margin-top: 24px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}
.su-qr > svg { display: block; width: 100%; height: 100%; }
.su-secret {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.su-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  margin: 24px 0 0;
  padding: 16px 18px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink);
}