/* ============================================================ INSCRIPTION — SMS BOOST Design System Tokens : css/ds-tokens.css | composants partages (boutons, champs, alertes) : css/ds-components.css. Les deux sont scopes sur .sb-ds, classe portee par le formulaire. La police Plus Jakarta Sans (--font-sans) est definie globalement dans css/design-system.css et chargee dans le par include/theme.php. ============================================================ */ .sb-signup { font-family: var(--font-sans); color: var(--text-body); padding: 40px 0 72px; } .sb-signup a:not(.sb-btn) { color: var(--text-link); text-decoration: none; } .sb-signup a:not(.sb-btn):hover { color: var(--blue-700); text-decoration: underline; } /* ============================================================ Layout ============================================================ */ .sb-signup__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; } .sb-signup__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* ============================================================ Intro ============================================================ */ .sb-intro { display: flex; flex-direction: column; gap: 8px; } .sb-eyebrow { display: flex; align-items: center; gap: 9px; font: var(--font-label); text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); } .sb-title { margin: 0; font: var(--font-display-md); color: var(--text-strong); letter-spacing: -.02em; text-wrap: pretty; } .sb-lede { margin: 0; font: var(--font-body-lg); color: var(--text-body); max-width: 56ch; text-wrap: pretty; } /* ============================================================ Barre de progression ============================================================ */ .sb-progress { display: flex; align-items: center; gap: 14px; } .sb-progress__track { flex: 1; height: 6px; border-radius: 999px; background: var(--slate-200); overflow: hidden; } .sb-progress__bar { height: 100%; border-radius: 999px; background: var(--color-primary); transition: var(--transition-base); width: 30%; } .sb-progress__label { font: var(--font-caption); color: var(--sb-text-muted); white-space: nowrap; } /* ============================================================ Choix du profil (radio-cards) ============================================================ */ .sb-profile { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; } .sb-profile__legend { float: none; width: auto; padding: 0; margin: 0; font: var(--font-label); color: var(--text-strong); } .sb-profile__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .sb-profile__card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--white); cursor: pointer; text-align: left; border-radius: var(--radius-lg); border: 1px solid var(--sb-border); box-shadow: var(--shadow-sm); transition: var(--transition-base); margin: 0; } .sb-profile__card input { position: absolute; opacity: 0; width: 0; height: 0; } .sb-profile__card > i { font-size: 18px; color: var(--color-primary); flex: none; } .sb-profile__card span { display: flex; flex-direction: column; gap: 2px; } .sb-profile__name { font: var(--font-body); font-weight: var(--weight-semibold); color: var(--text-strong); } .sb-profile__desc { font: var(--font-caption); color: var(--sb-text-muted); } .sb-profile__card:hover { border-color: var(--blue-300); } .sb-profile__card:has(input:checked) { border-color: var(--color-primary); box-shadow: var(--ring-focus); } .sb-profile__card:has(input:focus-visible) { box-shadow: var(--ring-focus); } /* ============================================================ Carte formulaire ============================================================ */ .sb-card { background: var(--surface-card); border: 1px solid var(--sb-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; } .sb-section { padding: 26px 32px; border-bottom: 1px solid var(--sb-border); display: flex; flex-direction: column; gap: 18px; } .sb-section:last-child { border-bottom: 0; } .sb-section__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; } .sb-section__head h2 { margin: 0; font: var(--font-h3); color: var(--text-strong); } .sb-section__note { font: var(--font-caption); color: var(--sb-text-muted); } .sb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .sb-grid-city { display: grid; grid-template-columns: 160px minmax(0, 1fr) 200px; gap: 18px; } /* ============================================================ Autocompletion Sirene ============================================================ */ .sb-autocomplete { position: relative; } .sb-autocomplete__row { display: flex; gap: 10px; } .sb-autocomplete__row > .sb-field__box:first-child { flex: 1; min-width: 0; } .sb-autocomplete__city { width: 140px; flex: none; } .sb-sirene-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1000; max-height: 280px; overflow-y: auto; border: 1px solid var(--sb-border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-md); } .sb-sirene-dropdown__msg { padding: 14px; text-align: center; font: var(--font-caption); color: var(--sb-text-muted); } .sb-sirene-dropdown__msg--error { color: var(--color-danger-text); } .sirene-result-item { padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--slate-100); transition: var(--transition-base); } .sirene-result-item:last-child { border-bottom: 0; } .sirene-result-item:hover { background: var(--blue-50); } .sirene-result-item strong { display: block; font: var(--font-label); color: var(--text-strong); } .sirene-result-item .sb-sirene-addr { font: var(--font-caption); color: var(--sb-text-muted); } .sirene-result-item .sb-sirene-siret { font: var(--font-caption); color: var(--color-primary); } /* ============================================================ Mot de passe + jauge ============================================================ */ .sb-password { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; align-items: start; } .sb-meter { display: flex; flex-direction: column; gap: 8px; padding-top: 30px; } .sb-meter__track { height: 6px; border-radius: 999px; background: var(--slate-200); overflow: hidden; } .sb-meter__bar { height: 100%; width: 0; border-radius: 999px; background: var(--slate-300); transition: var(--transition-base); } .sb-meter__label { font: var(--font-caption); color: var(--sb-text-muted); } /* ============================================================ Validation + CTA ============================================================ */ .sb-submit { display: flex; flex-direction: column; gap: 16px; } .sb-login-hint { text-align: center; font: var(--font-caption); color: var(--sb-text-muted); } /* ============================================================ Colonne laterale ============================================================ */ .sb-aside { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; } .sb-panel { border-radius: var(--radius-2xl); padding: 28px; background: var(--gradient-hero); color: var(--white); box-shadow: var(--shadow-md); } .sb-panel__eyebrow { display: block; font: var(--font-label); text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent-soft); } .sb-panel__list { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; } .sb-benefit { display: flex; gap: 12px; align-items: flex-start; } .sb-benefit > i { color: var(--color-accent-soft); margin-top: 3px; flex: none; } .sb-benefit span { display: flex; flex-direction: column; gap: 2px; } .sb-benefit__title { font: var(--font-body); font-weight: var(--weight-semibold); color: #fff; } .sb-benefit__desc { font: var(--font-caption); color: rgba(255, 255, 255, .72); } .sb-panel__price { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; align-items: baseline; gap: 10px; } .sb-panel__price strong { font: var(--font-display-md); color: #fff; white-space: nowrap; flex: none; } .sb-panel__price span { font: var(--font-caption); color: rgba(255, 255, 255, .72); } .sb-stats { background: var(--surface-card); border: 1px solid var(--sb-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .sb-stat { display: flex; flex-direction: column; gap: 2px; } .sb-stat strong { font: var(--font-h3); color: var(--text-strong); } .sb-stat span { font: var(--font-caption); color: var(--sb-text-muted); } .sb-help { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius-lg); background: var(--color-info-bg); border: 1px solid var(--blue-200); } .sb-help i { color: var(--color-primary); margin-top: 2px; flex: none; } .sb-help span { font: var(--font-caption); color: var(--blue-700); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 991.98px) { .sb-signup__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .sb-aside { position: static; } .sb-title { font-size: 30px; } } @media (max-width: 767.98px) { .sb-signup { padding: 24px 0 48px; } .sb-section { padding: 22px 20px; } .sb-grid-2, .sb-grid-city, .sb-password, .sb-profile__grid { grid-template-columns: minmax(0, 1fr); } .sb-meter { padding-top: 0; } .sb-title { font-size: 26px; } .sb-lede { font-size: 16px; } .sb-autocomplete__row { flex-wrap: wrap; } .sb-autocomplete__city { width: 100%; } }