/* Inscription (essai gratuit) et bienvenue — écran partagé, aplats, couleurs du thème (clair / sombre). */
.su-body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); }
.su-shell { display: grid; grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); min-height: 100vh; }

/* Présentation (gauche) */
.su-aside { position: sticky; top: 0; height: 100vh; overflow: auto; background: var(--surface); border-right: 1px solid var(--border); }
.su-aside-inner { display: flex; flex-direction: column; gap: 28px; min-height: 100%; padding: 36px 40px; box-sizing: border-box; }
.su-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
.su-brand .logo { width: 40px; height: 40px; border-radius: 13px; }
.su-pitch { display: grid; gap: 12px; }
.su-pill { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 650; }
.su-pitch h1 { margin: 4px 0 0; font-size: 31px; line-height: 1.12; font-weight: 750; letter-spacing: -0.035em; color: var(--text); }
.su-pitch p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--soft); }
.su-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.su-benefits li { display: flex; gap: 14px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.su-benefits strong { display: block; font-size: 14.5px; font-weight: 650; color: var(--text); margin-bottom: 1px; }
.su-benefit-ic { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; }
.su-benefit-ic.tone-lavender { background: var(--lav-bg); color: var(--lav-tx); }
.su-benefit-ic.tone-mint { background: var(--mint-bg); color: var(--mint-tx); }
.su-benefit-ic.tone-peach { background: var(--peach-bg); color: var(--peach-tx); }
.su-benefit-ic.tone-sky { background: var(--sky-bg); color: var(--sky-tx); }
.su-guarantees { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hair); }
.su-guarantees span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--soft); }

/* Formulaire (droite) */
.su-main { display: flex; flex-direction: column; align-items: center; padding: 26px 32px 48px; min-width: 0; }
.su-topbar { width: 100%; max-width: 720px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 40px; margin-bottom: 18px; }
.su-brand-compact { display: none; margin-right: auto; }
.su-topbar-login { margin: 0; font-size: 14px; color: var(--muted); }
.su-topbar-login a, .su-link { font: inherit; font-weight: 600; color: var(--accent-text); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.su-topbar-login a:hover, .su-link:hover { text-decoration: underline; }
.su-card { width: 100%; max-width: 720px; box-sizing: border-box; padding: 30px 32px 26px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border-card); box-shadow: 0 20px 60px rgba(26, 26, 31, .06); }
.su-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.su-head { display: grid; gap: 14px; margin-bottom: 22px; }
.su-eyebrow { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); }
.su-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.su-step { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.su-step-n { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--soft); font-size: 12.5px; }
.su-step-n .icon { display: none; }
.su-step.is-current { color: var(--text); }
.su-step.is-current .su-step-n { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 4px var(--accent-soft); }
.su-step.is-done .su-step-n { background: var(--ok-bg); color: var(--ok-tx); }
.su-step.is-done .su-step-n > span { display: none; }
.su-step.is-done .su-step-n .icon { display: block; }
.su-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-progress { height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.su-progress span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--primary); transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.su-panel { border: 0; margin: 0; padding: 0; min-width: 0; }
.su-panel[hidden] { display: none; }
.su-panel-title { padding: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.su-panel-sub { margin: 6px 0 20px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.su-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; }
.su-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.su-field.is-full { grid-column: 1 / -1; }
.su-field[hidden] { display: none; }
.su-field > label, .su-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.su-optional { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.su-input { position: relative; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); transition: border-color .15s, box-shadow .15s, background .15s; }
.su-input:focus-within { border-color: var(--lilac); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.su-input > .icon { flex-shrink: 0; }
.su-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); }
.su-input input::placeholder { color: var(--muted); opacity: .75; }
.su-input-select { padding-right: 4px; }
.su-input-select .ui-select, .su-input-select select { flex: 1; min-width: 0; height: 44px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 0; }
.su-field.has-error .su-input { border-color: var(--danger-bd); background: var(--danger-bg); }
.su-error { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--danger-tx); }
.su-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.su-eye { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.su-eye:hover { background: var(--surface-3); color: var(--text); }
.su-copy-row { margin-top: -4px; }
.su-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.su-strength span { height: 5px; border-radius: 99px; background: var(--surface-3); transition: background .2s; }
.su-strength[data-level="1"] span:nth-child(-n+1) { background: var(--alarm); }
.su-strength[data-level="2"] span:nth-child(-n+2) { background: var(--warn-tx); }
.su-strength[data-level="3"] span:nth-child(-n+3) { background: var(--ok-dot); }
.su-strength[data-level="4"] span { background: var(--ok-tx); }
.su-country-note { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--sky-bg); color: var(--sky-tx); font-size: 13px; }

/* Type d'établissement (cartes) */
.su-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; margin: 8px 0 22px; }
.su-type { position: relative; }
.su-type input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.su-type-box { position: relative; display: grid; gap: 4px; justify-items: start; height: 100%; box-sizing: border-box; padding: 14px 14px 13px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); transition: border-color .15s, background .15s, transform .15s; }
.su-type:hover .su-type-box { border-color: var(--lilac); transform: translateY(-1px); }
.su-type-ic { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 4px; border-radius: 12px; background: var(--surface-2); color: var(--soft); }
.su-type-name { font-size: 14.5px; font-weight: 650; color: var(--text); }
.su-type-hint { font-size: 12px; line-height: 1.35; color: var(--muted); }
.su-type-check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--on-primary); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.su-type input:checked + .su-type-box { border-color: var(--primary); background: var(--accent-soft); }
.su-type input:checked + .su-type-box .su-type-ic { background: var(--primary); color: var(--on-primary); }
.su-type input:checked + .su-type-box .su-type-check { opacity: 1; transform: none; }
.su-type input:focus-visible + .su-type-box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Nombre d'hébergements */
.su-count { display: grid; gap: 10px; }
.su-count-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.su-stepper { display: inline-flex; align-items: center; height: 50px; border-radius: 15px; border: 1px solid var(--border); background: var(--surface-2); overflow: hidden; }
.su-stepper button { display: grid; place-items: center; width: 48px; height: 100%; border: 0; background: transparent; color: var(--soft); cursor: pointer; }
.su-stepper button:hover { background: var(--surface-3); color: var(--text); }
.su-stepper input { width: 72px; height: 100%; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface); text-align: center; font: inherit; font-size: 19px; font-weight: 700; color: var(--text); -moz-appearance: textfield; }
.su-stepper input::-webkit-outer-spin-button, .su-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.su-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.su-chip { height: 34px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.su-chip:hover { border-color: var(--lilac); color: var(--text); }
.su-chip.is-on { border-color: var(--primary); background: var(--accent-soft); color: var(--accent-text); }
.su-preview { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; color: var(--muted); }
.su-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 18px; }
.su-price > div { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.su-price > div:first-child { background: var(--mint-bg); border-color: var(--mint-bd); }
.su-price-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.su-price > div:first-child .su-price-label, .su-price > div:first-child small { color: var(--mint-tx); }
.su-price strong { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.su-price > div:first-child strong { color: var(--mint-num); }
.su-price small { font-size: 12.5px; color: var(--muted); }

/* Conditions */
.su-terms { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; line-height: 1.45; color: var(--soft); cursor: pointer; }
.su-terms input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.su-terms-box { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--border); background: var(--surface); color: transparent; transition: background .15s, border-color .15s; }
.su-terms input:checked + .su-terms-box { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.su-terms input:focus-visible + .su-terms-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.su-terms.has-error { border-color: var(--danger-bd); background: var(--danger-bg); }

/* Boutons */
.su-actions { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hair); }
.su-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 99px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 650; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.su-btn[hidden] { display: none; }
.su-btn.is-ghost { background: transparent; border-color: var(--border); color: var(--soft); }
.su-btn.is-ghost:hover { border-color: var(--lilac); color: var(--text); }
.su-btn.is-primary { margin-left: auto; background: var(--primary); color: var(--on-primary); }
.su-btn.is-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(91, 79, 229, .28); color: var(--on-primary); }
.su-btn.is-go { background: var(--go); }
.su-btn.is-go:hover { background: var(--go-hover); box-shadow: 0 10px 24px rgba(31, 138, 76, .25); }
.su-btn.is-block { width: 100%; margin-left: 0; box-sizing: border-box; }
.su-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.su-reassure { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.su-reassure .icon { flex-shrink: 0; margin-top: 1px; }
.su-notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.su-notice .icon { flex-shrink: 0; margin-top: 1px; }
.su-notice.is-error { background: var(--danger-bg); color: var(--danger-tx); }
.su-notice.is-ok { background: var(--ok-bg); color: var(--ok-tx); }
.su-notice.is-warn { background: var(--warn-bg); color: var(--warn-tx); }

/* Bienvenue */
.su-done { display: grid; gap: 18px; text-align: center; }
.su-done-badge { justify-self: center; width: 84px; height: 84px; }
.su-done-badge svg { width: 100%; height: 100%; }
.su-done-badge circle { fill: var(--ok-bg); stroke: var(--ok-tx); stroke-width: 2; }
.su-done-badge path { fill: none; stroke: var(--ok-tx); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: sudraw .6s .2s ease forwards; }
@keyframes sudraw { to { stroke-dashoffset: 0; } }
.su-done h2 { margin: 0; font-size: 28px; font-weight: 750; letter-spacing: -0.03em; color: var(--text); }
.su-done-lead { margin: -6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--soft); }
.su-done-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.su-done-facts > div { display: grid; gap: 2px; padding: 14px 10px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.su-done-facts b { font-size: 26px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
.su-done-facts span { font-size: 12.5px; color: var(--muted); }
.su-done .su-notice { margin: 0; text-align: left; }
.su-secure { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--accent-soft); border: 1px solid var(--lav-bd); text-align: left; }
.su-secure strong { font-size: 15px; color: var(--text); }
.su-secure p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.su-secure-ic { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary); color: var(--on-primary); }
.su-next { text-align: left; padding-top: 6px; border-top: 1px solid var(--hair); }
.su-next h3 { margin: 14px 0 10px; font-size: 15px; color: var(--text); }
.su-next ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.su-next li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.su-next li strong { display: block; font-size: 14.5px; color: var(--text); }
.su-next-n { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--soft); font-size: 13px; font-weight: 700; }
.su-mono { font-family: var(--mono); font-size: 12.5px; color: var(--accent-text); overflow-wrap: anywhere; }

/* Petits écrans */
@media (max-width: 980px) {
  .su-shell { grid-template-columns: 1fr; }
  .su-aside { display: none; }
  .su-brand-compact { display: inline-flex; }
}
@media (max-width: 640px) {
  .su-main { padding: 16px 12px 32px; }
  .su-card { padding: 22px 18px 20px; border-radius: 22px; }
  .su-grid { grid-template-columns: 1fr; }
  .su-step-label { display: none; }
  .su-step.is-current .su-step-label { display: inline; }
  .su-steps { grid-template-columns: auto auto auto auto; justify-content: start; gap: 10px; }
  .su-price, .su-done-facts { grid-template-columns: 1fr; }
  .su-actions { flex-wrap: wrap; }
  .su-btn.is-primary { flex: 1; }
  .su-topbar-login { font-size: 13px; }
}

/* ── Version 2 : vitrine en aplat de couleur + garanties mises en avant ───────────── */
.su-aside { background: var(--primary); border-right: 0; color: var(--on-primary); }
.su-aside-inner { gap: 26px; padding: 34px 38px; }
.su-aside .su-brand { color: var(--on-primary); }
.su-aside .su-brand .logo { background: var(--on-primary); color: var(--primary); }
.su-aside .su-pill { background: color-mix(in srgb, var(--on-primary) 16%, transparent); color: var(--on-primary); }
.su-aside .su-pitch h1 { font-size: 34px; color: var(--on-primary); }
.su-aside .su-pitch p { color: color-mix(in srgb, var(--on-primary) 82%, transparent); }
.su-aside .su-benefits { gap: 10px; }
.su-aside .su-benefits li { align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--on-primary) 90%, transparent); }
.su-aside .su-benefits .icon { flex-shrink: 0; padding: 7px; border-radius: 10px; background: color-mix(in srgb, var(--on-primary) 14%, transparent); }
.su-guarantees { display: none; }

/* Aperçu du logiciel */
.su-mock { display: grid; gap: 6px; padding: 14px 14px 12px; border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 24px 60px rgba(20, 16, 70, .35); transform: rotate(-1.2deg); }
.su-mock-head { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.su-mock-head > span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.su-mock-head b { margin-left: 8px; font-size: 12px; font-weight: 650; color: var(--soft); }
.su-mock-days, .su-mock-track { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.su-mock-days { margin-left: 32px; }
.su-mock-days span { font-size: 9.5px; font-weight: 600; text-align: center; color: var(--muted); }
.su-mock-row { display: flex; align-items: center; gap: 6px; }
.su-mock-unit { width: 26px; flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--muted); }
.su-mock-track { flex: 1; min-width: 0; height: 22px; padding: 0; border-radius: 7px; background: var(--surface-2); }
.su-mock-stay { grid-row: 1; display: flex; align-items: center; padding: 0 6px; border-radius: 6px; font-size: 9.5px; font-weight: 650; white-space: nowrap; overflow: hidden; }
.su-mock-stay.tone-lav { background: var(--lav-bg); color: var(--lav-tx); }
.su-mock-stay.tone-mint { background: var(--mint-bg); color: var(--mint-tx); }
.su-mock-stay.tone-peach { background: var(--peach-bg); color: var(--peach-tx); }
.su-mock-stay.tone-sky { background: var(--sky-bg); color: var(--sky-tx); }
.s-0 { grid-column-start: 1; } .s-1 { grid-column-start: 2; } .s-2 { grid-column-start: 3; } .s-3 { grid-column-start: 4; } .s-4 { grid-column-start: 5; }
.s-5 { grid-column-start: 6; } .s-6 { grid-column-start: 7; } .s-7 { grid-column-start: 8; } .s-8 { grid-column-start: 9; } .s-9 { grid-column-start: 10; }
.e-1 { grid-column-end: 3; } .e-2 { grid-column-end: 4; } .e-3 { grid-column-end: 5; } .e-4 { grid-column-end: 6; } .e-5 { grid-column-end: 7; }
.e-6 { grid-column-end: 8; } .e-7 { grid-column-end: 9; } .e-8 { grid-column-end: 10; } .e-9 { grid-column-end: 11; }
.su-mock-foot { display: flex; gap: 6px; margin-top: 6px; }
.su-mock-foot span { flex: 1; padding: 6px 8px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--hair); font-size: 10.5px; color: var(--muted); }
.su-mock-foot b { display: block; font-size: 14px; color: var(--text); }

/* Promesse + garanties au-dessus du formulaire */
.su-promise { width: 100%; max-width: 720px; margin-bottom: 18px; }
.su-promise-title { margin: 0 0 14px; font-size: 28px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; color: var(--text); }
.su-promise-title span { color: var(--primary); }
.su-guar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.su-guar li { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border-card); }
.su-guar strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.su-guar span:not(.su-guar-ic) { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.su-guar-ic { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; }
.su-guar-ic.tone-mint { background: var(--mint-bg); color: var(--mint-tx); }
.su-guar-ic.tone-lavender { background: var(--lav-bg); color: var(--lav-tx); }
.su-guar-ic.tone-sky { background: var(--sky-bg); color: var(--sky-tx); }
.su-card { border-radius: 30px; box-shadow: 0 1px 2px rgba(26, 26, 31, .04), 0 24px 70px rgba(26, 26, 31, .08); }
.su-step.is-current .su-step-n { box-shadow: 0 0 0 5px var(--accent-soft); }
@media (max-width: 980px) {
  .su-promise-title { font-size: 24px; }
}
@media (max-width: 640px) {
  .su-guar { grid-template-columns: 1fr; gap: 8px; }
  .su-guar li { padding: 11px 12px; }
  .su-guar-ic { width: 38px; height: 38px; border-radius: 12px; }
  .su-promise-title { font-size: 22px; }
}
.su-aside .su-benefits .icon { padding: 0; background: none; border-radius: 0; }
.su-b-ic { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--on-primary) 14%, transparent); }

/* Volet gauche plus sobre : anthracite (le violet seulement en touches) */
.su-aside { background: var(--ink); }
.su-aside .su-brand .logo { background: var(--primary); color: var(--on-primary); }
.su-aside .su-pill { background: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--on-primary); }
.su-aside .su-pitch p { color: var(--ink-label); }
.su-aside .su-benefits li { color: color-mix(in srgb, var(--on-primary) 86%, transparent); }
.su-b-ic { background: var(--ink-bar); color: var(--lilac); }
.su-mock { box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }

/* Connexion et pages liées (au-*) : carte centrée, champs à icône, essai gratuit mis en avant */
.au-main { justify-content: center; }
.au-main .su-topbar { position: absolute; top: 26px; right: 32px; width: auto; max-width: none; margin: 0; }
.au-main .su-brand-compact { position: fixed; left: 16px; top: 16px; }
.su-main.au-main { position: relative; min-height: 100vh; box-sizing: border-box; padding-top: 80px; }
.au-card { max-width: 460px; padding: 34px 34px 28px; }
.au-card.guest-wide { max-width: 640px; }
.au-head { display: grid; gap: 8px; margin-bottom: 22px; }
.au-head-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-text); }
.au-head h1 { margin: 0; font-size: 28px; font-weight: 750; letter-spacing: -0.03em; color: var(--text); }
.au-head p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.au-form { display: grid; gap: 16px; }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.au-check { position: relative; display: inline-flex; align-items: center; gap: 9px; color: var(--soft); cursor: pointer; }
.au-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.au-check input:checked + .su-terms-box { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.au-check input:focus-visible + .su-terms-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.su-btn.is-busy { opacity: .7; cursor: wait; }
.au-trial { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.au-trial:hover { border-color: var(--lilac); transform: translateY(-1px); color: var(--text); }
.au-trial > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.au-trial strong { font-size: 14.5px; }
.au-trial small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.au-trial-ic { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--mint-bg); color: var(--mint-tx); }
.au-trial > .icon { color: var(--muted); }
.au-back { margin: 18px 0 0; text-align: center; font-size: 14px; }
.au-back .su-link { display: inline-flex; align-items: center; gap: 6px; }
.au-otp { width: 100%; box-sizing: border-box; height: 64px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); text-align: center; font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: .25em; color: var(--text); }
.au-otp:focus { outline: 0; border-color: var(--lilac); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.su-field.has-error .au-otp { border-color: var(--danger-bd); background: var(--danger-bg); }
.au-recovery { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.au-recovery summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--accent-text); list-style: none; }
.au-recovery summary::-webkit-details-marker { display: none; }
.au-recovery[open] summary { margin-bottom: 14px; }
.au-foot { display: flex; align-items: center; gap: 7px; margin: 18px 0 0; font-size: 12.5px; color: var(--muted); }
.au-card .flash, .au-card .alert { margin-bottom: 16px; }
@media (max-width: 980px) {
  .au-main .su-brand-compact { position: static; }
  .au-main .su-topbar { position: static; width: 100%; max-width: 460px; justify-content: space-between; margin-bottom: 18px; }
  .su-main.au-main { padding-top: 16px; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .au-card { padding: 24px 18px 20px; }
  .au-head h1 { font-size: 24px; }
}
.au-trial small, .au-trial strong { white-space: normal; overflow: visible; text-overflow: clip; }