/* ==========================================================================
   GESCOM PRO AFRICA
   CRÉATION D'ENTREPRISE — INTERFACE PREMIUM
   public/assets/css/register.css
   ========================================================================== */


/* ==========================================================================
   1. DESIGN SYSTEM
   ========================================================================== */

:root {

    /* Identité GESCOM */
    --gescom-navy: #061426;
    --gescom-navy-2: #0a213d;
    --gescom-navy-3: #10395e;

    --gescom-blue: #1769ff;
    --gescom-blue-dark: #0e55d8;
    --gescom-blue-soft: #edf4ff;

    --gescom-cyan: #08bad8;
    --gescom-cyan-soft: #e8fbff;

    --gescom-green: #16a05d;
    --gescom-green-soft: #eaf9f1;

    --gescom-orange: #f97316;
    --gescom-orange-soft: #fff2e9;

    --gescom-red: #d92d20;
    --gescom-red-soft: #fff1f0;

    --gescom-purple: #7c3aed;
    --gescom-purple-soft: #f3edff;

    /* Surfaces */
    --page-bg: #f3f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;

    /* Texte */
    --text: #122033;
    --text-2: #33465d;
    --text-soft: #68798f;
    --muted: #93a1b3;

    /* Bordures */
    --border: #dce6f0;
    --border-strong: #c6d5e5;

    /* Ombres */
    --shadow-xs:
        0 4px 14px rgba(6, 20, 38, .04);

    --shadow-sm:
        0 10px 30px rgba(6, 20, 38, .07);

    --shadow-md:
        0 20px 55px rgba(6, 20, 38, .11);

    --shadow-lg:
        0 34px 90px rgba(6, 20, 38, .17);

    /* Rayons */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* Largeur */
    --register-width: 1280px;

    --transition: .18s ease;
}


/* ==========================================================================
   2. RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 5% 0%,
            rgba(23, 105, 255, .08),
            transparent 28%
        ),
        radial-gradient(
            circle at 100% 20%,
            rgba(8, 186, 216, .06),
            transparent 24%
        ),
        var(--page-bg);

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.register-is-loading {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

[hidden] {
    display: none !important;
}


/* ==========================================================================
   3. PAGE / CONTENEUR
   ========================================================================== */

.register-page {
    min-height: 100vh;
}

.register-shell {
    width:
        min(
            calc(100% - 48px),
            var(--register-width)
        );

    margin-inline: auto;
}


/* ==========================================================================
   4. HEADER
   ========================================================================== */

.register-header {
    position: relative;
    z-index: 100;

    background:
        linear-gradient(
            135deg,
            var(--gescom-navy),
            #0b2746
        );

    box-shadow:
        0 10px 32px
        rgba(6, 20, 38, .16);
}

.register-header-inner {
    min-height: 86px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;
}


/* ==========================================================================
   5. MARQUE GESCOM
   ========================================================================== */

.register-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    color: #fff;
}

.register-brand-logo {
    width: 54px;
    height: 54px;

    flex:
        0
        0
        54px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #13c7df,
            var(--gescom-blue)
        );

    color: #fff;

    box-shadow:
        0 12px 30px
        rgba(23, 105, 255, .30);
}

.register-brand-logo strong {
    font-size: 27px;
    font-weight: 950;
}

.register-brand-image {
    height: 54px;
    max-width: 180px;

    display: flex;
    align-items: center;
}

.register-brand-image img {
    max-height: 54px;
    width: auto;

    object-fit: contain;
}

.register-brand-copy {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.register-brand-copy strong {
    color: #fff;

    font-size: 18px;
    font-weight: 950;

    letter-spacing: .7px;
}

.register-brand-copy small {
    margin-top: 6px;

    color: #7dd3fc;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2.2px;
}


/* ==========================================================================
   6. ACTIONS HEADER
   ========================================================================== */

.register-header-actions {
    display: flex;
    align-items: center;

    gap: 12px;
}

.register-header-security {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color:
        rgba(255, 255, 255, .68);

    font-size: 11px;
    font-weight: 750;
}

.register-header-security i {
    color: #5eead4;

    font-size: 16px;
}

.register-login-button {
    min-height: 44px;

    padding:
        10px
        15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border:
        1px solid
        rgba(255, 255, 255, .16);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, .08);

    color: #fff;

    font-size: 12px;
    font-weight: 900;

    transition:
        transform var(--transition),
        background var(--transition);
}

.register-login-button:hover {
    transform: translateY(-1px);

    background:
        rgba(255, 255, 255, .14);
}


/* ==========================================================================
   7. MAIN
   ========================================================================== */

.register-main {
    padding:
        36px
        0
        80px;
}


/* ==========================================================================
   8. HERO
   ========================================================================== */

.register-hero {
    position: relative;
    overflow: hidden;

    min-height: 325px;

    padding:
        48px
        50px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    align-items: center;

    gap: 50px;

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            var(--gescom-navy) 0%,
            #0b2949 58%,
            #12617f 100%
        );

    color: #fff;

    box-shadow:
        var(--shadow-lg);
}

.register-hero::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -230px;

    border-radius: 50%;

    background:
        rgba(8, 186, 216, .13);
}

.register-hero::after {
    content: "";

    position: absolute;

    width: 290px;
    height: 290px;

    left: 46%;
    bottom: -240px;

    border-radius: 50%;

    background:
        rgba(23, 105, 255, .16);
}

.register-hero-content,
.register-hero-trial {
    position: relative;
    z-index: 2;
}

.register-kicker {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(255, 255, 255, .13);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .07);

    color: #a5f3fc;

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 1.1px;
}

.register-hero h1 {
    max-width: 780px;

    margin:
        20px
        0
        0;

    color: #fff;

    font-size:
        clamp(
            40px,
            4.2vw,
            62px
        );

    line-height: 1.03;

    letter-spacing: -1.8px;

    font-weight: 950;
}

.register-hero h1 span {
    color: #67e8f9;
}

.register-hero-lead {
    max-width: 760px;

    margin:
        21px
        0
        0;

    color:
        rgba(255, 255, 255, .77);

    font-size: 17px;
    line-height: 1.72;
}

.register-hero-benefits {
    margin-top: 25px;

    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.register-hero-benefits span {
    padding:
        8px
        11px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .07);

    color:
        rgba(255, 255, 255, .78);

    font-size: 10px;
    font-weight: 800;
}

.register-hero-benefits i {
    color: #5eead4;
}


/* ==========================================================================
   9. CARTE ESSAI HERO
   ========================================================================== */

.register-hero-trial {
    padding: 28px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius: 24px;

    background:
        rgba(255, 255, 255, .08);

    backdrop-filter:
        blur(14px);
}

.hero-trial-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 18px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .16),
            rgba(255, 255, 255, .08)
        );

    color: #67e8f9;

    font-size: 26px;
}

.register-hero-trial small {
    color: #7dd3fc;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 1.3px;
}

.register-hero-trial strong {
    display: block;

    margin-top: 7px;

    color: #fff;

    font-size: 27px;
    font-weight: 950;
}

.register-hero-trial p {
    margin:
        9px
        0
        0;

    color:
        rgba(255, 255, 255, .68);

    font-size: 12px;
    line-height: 1.6;
}


/* ==========================================================================
   10. PROGRESSION
   ========================================================================== */

.register-progress {
    margin:
        24px
        0;

    padding:
        16px
        20px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto
        1fr
        auto;

    align-items: center;

    gap: 14px;

    border:
        1px solid
        var(--border);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .88);

    box-shadow:
        var(--shadow-sm);
}

.register-progress-item {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}

.progress-number {
    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    background:
        var(--surface-soft);

    color:
        var(--text-soft);

    font-size: 12px;
    font-weight: 950;
}

.register-progress-item.is-active
.progress-number {
    border-color:
        var(--gescom-blue);

    background:
        linear-gradient(
            145deg,
            var(--gescom-blue),
            #3b7fff
        );

    color: #fff;

    box-shadow:
        0 8px 20px
        rgba(23, 105, 255, .20);
}

.register-progress-item strong {
    display: block;

    color:
        var(--gescom-navy);

    font-size: 12px;
    font-weight: 900;
}

.register-progress-item small {
    display: block;

    margin-top: 2px;

    color:
        var(--muted);

    font-size: 9px;
}

.register-progress-line {
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--border),
            #edf2f7
        );
}


/* ==========================================================================
   11. ALERTES
   ========================================================================== */

.register-alert {
    margin-bottom: 22px;

    padding:
        17px
        18px;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    border-radius: 17px;
}

.register-alert-danger {
    border:
        1px solid
        #ffd2ce;

    background:
        linear-gradient(
            135deg,
            #fff5f4,
            #fff
        );
}

.register-alert-icon {
    width: 42px;
    height: 42px;

    flex:
        0
        0
        42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        var(--gescom-red-soft);

    color:
        var(--gescom-red);

    font-size: 18px;
}

.register-alert strong {
    display: block;

    color:
        #8e241b;

    font-size: 13px;
}

.register-alert p {
    margin:
        5px
        0
        0;

    color:
        #82483f;

    font-size: 12px;
    line-height: 1.6;
}

.register-alert small {
    display: block;

    margin-top: 5px;

    color:
        #a26760;

    font-size: 10px;
}


/* ==========================================================================
   12. FORMULAIRE
   ========================================================================== */

.register-form {
    display: flex;
    flex-direction: column;

    gap: 24px;
}


/* ==========================================================================
   13. CARTE FORMULAIRE
   ========================================================================== */

.register-card {
    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    background: #fff;

    box-shadow:
        var(--shadow-sm);

    transition:
        box-shadow var(--transition),
        border-color var(--transition);
}

.register-card:focus-within {
    border-color:
        #bed4ef;

    box-shadow:
        var(--shadow-md);
}

.register-card-optional {
    border-style: dashed;
}


/* ==========================================================================
   14. HEADER DES SECTIONS
   ========================================================================== */

.register-card-header {
    padding:
        25px
        28px;

    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr)
        auto;

    align-items: flex-start;

    gap: 18px;

    border-bottom:
        1px solid
        var(--border);

    background:
        linear-gradient(
            135deg,
            #fbfdff,
            #f5f9fe
        );
}

.register-card-number {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            var(--gescom-navy),
            var(--gescom-blue)
        );

    color: #fff;

    font-size: 14px;
    font-weight: 950;

    box-shadow:
        0 10px 24px
        rgba(23, 105, 255, .19);
}

.register-card-number.is-optional {
    background:
        linear-gradient(
            145deg,
            #496176,
            #7d91a4
        );
}

.register-card-heading {
    min-width: 0;
}

.register-card-kicker {
    color:
        var(--gescom-blue);

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 1.2px;
}

.register-card-heading h2 {
    margin:
        5px
        0
        0;

    color:
        var(--gescom-navy);

    font-size:
        clamp(
            22px,
            2vw,
            28px
        );

    line-height: 1.15;
}

.register-card-heading p {
    max-width: 760px;

    margin:
        8px
        0
        0;

    color:
        var(--text-soft);

    font-size: 13px;
    line-height: 1.65;
}

.register-required-badge,
.register-secure-badge,
.register-optional-badge {
    padding:
        8px
        11px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 900;

    white-space: nowrap;
}

.register-required-badge {
    background:
        var(--gescom-blue-soft);

    color:
        var(--gescom-blue);
}

.register-secure-badge {
    background:
        var(--gescom-green-soft);

    color:
        var(--gescom-green);
}

.register-optional-badge {
    background:
        #eff3f7;

    color:
        #63788c;
}


/* ==========================================================================
   15. BODY SECTION
   ========================================================================== */

.register-card-body {
    padding:
        30px
        28px
        32px;
}


/* ==========================================================================
   16. GRILLE FORMULAIRE
   ========================================================================== */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        21px
        22px;
}

.form-group {
    min-width: 0;
}

.form-group-full {
    grid-column:
        1 / -1;
}

.form-group label {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-bottom: 8px;

    color:
        var(--text-2);

    font-size: 12px;
    font-weight: 850;
}

.form-group label > span {
    color:
        var(--gescom-red);

    font-weight: 950;
}

.form-group > small {
    display: block;

    margin-top: 7px;

    color:
        var(--muted);

    font-size: 10px;
    line-height: 1.5;
}


/* ==========================================================================
   17. INPUTS
   ========================================================================== */

.form-control-shell {
    position: relative;

    min-height: 54px;

    display: grid;

    grid-template-columns:
        44px
        minmax(0, 1fr);

    align-items: center;

    border:
        1px solid
        var(--border-strong);

    border-radius: 14px;

    background:
        #fff;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.form-control-shell:focus-within {
    border-color:
        var(--gescom-blue);

    background:
        #fff;

    box-shadow:
        0 0 0 4px
        rgba(23, 105, 255, .09);
}

.form-control-shell > i {
    width: 44px;

    display: grid;
    place-items: center;

    color:
        #7890a9;

    font-size: 17px;
}

.form-control-shell > i.is-whatsapp {
    color:
        var(--gescom-green);
}

.form-control-shell input,
.form-control-shell select {
    width: 100%;
    height: 52px;

    min-width: 0;

    padding:
        0
        14px
        0
        0;

    border: 0;
    outline: 0;

    background: transparent;

    color:
        var(--text);

    font-size: 13px;
    font-weight: 650;
}

.form-control-shell input::placeholder {
    color:
        #a6b1bd;

    font-weight: 500;
}

.form-control-shell input:-webkit-autofill,
.form-control-shell input:-webkit-autofill:hover,
.form-control-shell input:-webkit-autofill:focus {
    -webkit-box-shadow:
        0 0 0 1000px #fff inset;

    -webkit-text-fill-color:
        var(--text);
}


/* ==========================================================================
   18. SELECT
   ========================================================================== */

.form-select-shell {
    grid-template-columns:
        44px
        minmax(0, 1fr)
        34px;
}

.form-select-shell select {
    appearance: none;
    cursor: pointer;

    padding-right: 4px;
}

.select-chevron {
    display: grid;
    place-items: center;

    color:
        var(--muted);

    pointer-events: none;
}


/* ==========================================================================
   19. ADMIN NOTICE
   ========================================================================== */

.register-admin-notice {
    margin-bottom: 25px;

    padding:
        17px
        18px;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    border:
        1px solid
        #d5e5fb;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            var(--gescom-blue-soft),
            #f9fcff
        );
}

.register-admin-notice > span {
    width: 43px;
    height: 43px;

    flex:
        0
        0
        43px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #fff;

    color:
        var(--gescom-blue);

    font-size: 20px;

    box-shadow:
        var(--shadow-xs);
}

.register-admin-notice strong {
    display: block;

    color:
        var(--gescom-navy);

    font-size: 12px;
}

.register-admin-notice p {
    margin:
        5px
        0
        0;

    color:
        var(--text-soft);

    font-size: 11px;
    line-height: 1.55;
}


/* ==========================================================================
   20. PASSWORD
   ========================================================================== */

.password-shell {
    grid-template-columns:
        44px
        minmax(0, 1fr)
        44px;
}

.password-toggle {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color:
        var(--muted);

    font-size: 16px;

    transition:
        background var(--transition),
        color var(--transition);
}

.password-toggle:hover {
    background:
        var(--gescom-blue-soft);

    color:
        var(--gescom-blue);
}

.password-strength {
    margin-top: 8px;
}

.password-strength-track {
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background:
        #e8edf3;
}

.password-strength-track span {
    width: 0;
    height: 100%;

    display: block;

    border-radius: inherit;

    background:
        var(--gescom-red);

    transition:
        width .22s ease,
        background .22s ease;
}

.password-strength small,
.password-match-message {
    display: block;

    margin-top: 6px;

    color:
        var(--muted);

    font-size: 9px;
}

.password-match-message.is-valid {
    color:
        var(--gescom-green);
}

.password-match-message.is-invalid {
    color:
        var(--gescom-red);
}


/* ==========================================================================
   21. UPLOAD LOGO ENTREPRISE
   ========================================================================== */

.company-logo-uploader {
    position: relative;

    padding: 22px;

    display: grid;

    grid-template-columns:
        115px
        minmax(0, 1fr);

    align-items: center;

    gap: 22px;

    border:
        2px dashed
        #c7d7e8;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #f3f9ff
        );

    transition:
        border-color var(--transition),
        background var(--transition);
}

.company-logo-uploader:hover {
    border-color:
        var(--gescom-blue);

    background:
        var(--gescom-blue-soft);
}

.company-logo-preview {
    width: 115px;
    height: 115px;

    overflow: hidden;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--border);

    border-radius: 22px;

    background: #fff;

    color:
        #8ba1b7;

    font-size: 37px;

    box-shadow:
        var(--shadow-sm);
}

.company-logo-preview img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.company-logo-info strong {
    display: block;

    color:
        var(--gescom-navy);

    font-size: 17px;
}

.company-logo-info p {
    max-width: 650px;

    margin:
        6px
        0
        0;

    color:
        var(--text-soft);

    font-size: 12px;
    line-height: 1.6;
}

.company-logo-actions {
    margin-top: 14px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}

.company-logo-select {
    min-height: 42px;

    margin: 0 !important;

    padding:
        10px
        13px;

    display: inline-flex !important;
    align-items: center;

    gap: 7px;

    border-radius: 12px;

    background:
        var(--gescom-navy);

    color: #fff !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    cursor: pointer;

    transition:
        transform var(--transition),
        background var(--transition);
}

.company-logo-select:hover {
    transform: translateY(-1px);

    background:
        var(--gescom-blue);
}

.company-logo-actions > span {
    color:
        var(--text-soft);

    font-size: 10px;
    font-weight: 700;
}

.company-logo-info > small {
    display: block;

    margin-top: 10px;

    color:
        var(--muted);

    font-size: 9px;
}

.company-logo-input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;
}


/* ==========================================================================
   22. TEXTAREA
   ========================================================================== */

.textarea-shell {
    position: relative;
}

.textarea-shell textarea {
    width: 100%;
    min-height: 135px;

    resize: vertical;

    padding:
        15px
        16px
        32px;

    border:
        1px solid
        var(--border-strong);

    border-radius: 15px;

    outline: none;

    background: #fff;

    color:
        var(--text);

    font-size: 13px;
    line-height: 1.65;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.textarea-shell textarea:focus {
    border-color:
        var(--gescom-blue);

    box-shadow:
        0 0 0 4px
        rgba(23, 105, 255, .09);
}

.textarea-shell textarea::placeholder {
    color:
        #a6b1bd;
}

.textarea-counter {
    position: absolute;

    right: 12px;
    bottom: 10px;

    padding:
        4px
        7px;

    border-radius: 999px;

    background:
        var(--surface-soft);

    color:
        var(--muted);

    font-size: 9px;
    font-weight: 750;
}


/* ==========================================================================
   23. FINALISATION
   ========================================================================== */

.register-final {
    position: relative;
    overflow: hidden;

    padding:
        35px;

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            var(--gescom-navy) 0%,
            #0b2b4d 58%,
            #125d7b 100%
        );

    color: #fff;

    box-shadow:
        var(--shadow-lg);
}

.register-final::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -180px;
    top: -190px;

    border-radius: 50%;

    background:
        rgba(8, 186, 216, .13);
}

.register-final-top,
.register-final-points,
.register-submit,
.register-final-login {
    position: relative;
    z-index: 2;
}

.register-final-top {
    display: flex;
    align-items: flex-start;

    gap: 18px;
}

.register-final-icon {
    width: 62px;
    height: 62px;

    flex:
        0
        0
        62px;

    display: grid;
    place-items: center;

    border-radius: 19px;

    background:
        rgba(255, 255, 255, .10);

    color:
        #67e8f9;

    font-size: 27px;
}

.register-final-kicker {
    color:
        #7dd3fc;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 1.2px;
}

.register-final h2 {
    margin:
        6px
        0
        0;

    color: #fff;

    font-size:
        clamp(
            25px,
            2.4vw,
            34px
        );

    line-height: 1.12;
}

.register-final-top p {
    max-width: 850px;

    margin:
        10px
        0
        0;

    color:
        rgba(255, 255, 255, .72);

    font-size: 13px;
    line-height: 1.7;
}

.register-final-top p strong {
    color:
        #a7f3d0;
}


/* ==========================================================================
   24. GARANTIES
   ========================================================================== */

.register-final-points {
    margin-top: 23px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.register-final-points span {
    padding:
        8px
        11px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .06);

    color:
        rgba(255, 255, 255, .74);

    font-size: 10px;
    font-weight: 750;
}

.register-final-points i {
    color: #5eead4;
}


/* ==========================================================================
   25. LE BOUTON CRÉER MON ENTREPRISE
   ========================================================================== */

.register-submit {
    width: 100%;
    min-height: 86px;

    margin-top: 27px;

    padding:
        13px
        17px;

    display: grid;

    grid-template-columns:
        54px
        minmax(0, 1fr)
        46px;

    align-items: center;

    gap: 14px;

    border:
        1px solid
        rgba(255, 255, 255, .28);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f0fbff 100%
        );

    color:
        var(--gescom-navy);

    text-align: left;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .18);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.register-submit:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 25px 58px
        rgba(0, 0, 0, .25);

    background:
        linear-gradient(
            135deg,
            #fff,
            #e4f8ff
        );
}

.register-submit:active {
    transform:
        translateY(0);
}

.register-submit:disabled {
    cursor:
        wait;

    opacity: .78;
}

.register-submit-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            var(--gescom-blue),
            var(--gescom-cyan)
        );

    color: #fff;

    font-size: 23px;

    box-shadow:
        0 10px 25px
        rgba(23, 105, 255, .25);
}

.register-submit-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.register-submit-text strong {
    color:
        var(--gescom-navy);

    font-size:
        clamp(
            17px,
            1.8vw,
            22px
        );

    font-weight: 950;
}

.register-submit-text small {
    margin-top: 5px;

    color:
        var(--gescom-blue);

    font-size: 10px;
    font-weight: 850;
}

.register-submit-arrow {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background:
        var(--gescom-navy);

    color: #fff;

    font-size: 18px;

    transition:
        transform var(--transition),
        background var(--transition);
}

.register-submit:hover
.register-submit-arrow {
    transform:
        translateX(3px);

    background:
        var(--gescom-blue);
}


/* ==========================================================================
   26. LOGIN FINAL
   ========================================================================== */

.register-final-login {
    margin:
        18px
        0
        0;

    text-align: center;

    color:
        rgba(255, 255, 255, .58);

    font-size: 10px;
}

.register-final-login a {
    margin-left: 5px;

    color:
        #a5f3fc;

    font-weight: 900;
}

.register-final-login a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   27. FOOTER
   ========================================================================== */

.register-footer {
    padding:
        0
        0
        38px;
}

.register-footer-inner {
    padding-top: 25px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        auto;

    align-items: center;

    gap: 25px;

    border-top:
        1px solid
        var(--border);
}

.register-footer-brand {
    display: flex;
    align-items: center;

    gap: 10px;
}

.register-footer-brand > span {
    width: 40px;
    height: 40px;

    flex:
        0
        0
        40px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        var(--gescom-navy);

    color: #fff;

    font-size: 18px;
    font-weight: 950;
}

.register-footer-brand img {
    max-width: 135px;
    max-height: 42px;

    object-fit: contain;
}

.register-footer-brand strong {
    display: block;

    color:
        var(--gescom-navy);

    font-size: 11px;
}

.register-footer-brand small {
    display: block;

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 9px;
}

.register-footer-links {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;
}

.register-footer-links span {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color:
        var(--text-soft);

    font-size: 9px;
    font-weight: 750;
}

.register-footer-links i {
    color:
        var(--gescom-green);
}

.register-footer-inner > p {
    margin: 0;

    color:
        var(--muted);

    font-size: 9px;
}


/* ==========================================================================
   28. ÉCRAN SUCCÈS
   ========================================================================== */

.registration-success {
    width:
        min(
            100%,
            880px
        );

    margin:
        18px
        auto
        0;

    padding:
        48px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-xl);

    background: #fff;

    box-shadow:
        var(--shadow-lg);
}

.success-visual {
    text-align: center;
}

.success-icon {
    width: 88px;
    height: 88px;

    margin:
        0
        auto
        19px;

    display: grid;
    place-items: center;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            var(--gescom-green),
            #22c675
        );

    color: #fff;

    font-size: 42px;

    box-shadow:
        0 18px 42px
        rgba(22, 160, 93, .24);
}

.success-badge {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding:
        8px
        11px;

    border-radius: 999px;

    background:
        var(--gescom-green-soft);

    color:
        var(--gescom-green);

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 1px;
}

.success-visual h1 {
    margin:
        14px
        0
        0;

    color:
        var(--gescom-navy);

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height: 1.05;
}

.success-lead {
    margin:
        14px
        0
        0;

    color:
        var(--gescom-green);

    font-size: 15px;
    font-weight: 850;
}

.success-description {
    max-width: 690px;

    margin:
        14px
        auto
        0;

    color:
        var(--text-soft);

    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================================================
   29. ESSAI SUCCÈS
   ========================================================================== */

.success-trial {
    margin-top: 30px;

    padding:
        20px;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    border:
        1px solid
        #cbead9;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            var(--gescom-green-soft),
            #fbfffd
        );
}

.success-trial-icon {
    width: 52px;
    height: 52px;

    flex:
        0
        0
        52px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background:
        var(--gescom-green);

    color: #fff;

    font-size: 23px;
}

.success-trial small {
    color:
        var(--gescom-green);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 1px;
}

.success-trial strong {
    display: block;

    margin-top: 4px;

    color:
        #095f38;

    font-size: 16px;
}

.success-trial p {
    margin:
        6px
        0
        0;

    color:
        #4d7661;

    font-size: 11px;
    line-height: 1.6;
}


/* ==========================================================================
   30. STATUTS SUCCÈS
   ========================================================================== */

.success-status-grid {
    margin-top: 21px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;
}

.success-status-grid article {
    padding:
        15px;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    border:
        1px solid
        var(--border);

    border-radius: 15px;

    background:
        var(--surface-soft);
}

.success-status-grid article > i {
    color:
        var(--gescom-green);

    font-size: 19px;
}

.success-status-grid strong {
    display: block;

    color:
        var(--gescom-navy);

    font-size: 11px;
}

.success-status-grid span {
    display: block;

    margin-top: 3px;

    color:
        var(--text-soft);

    font-size: 9px;
    line-height: 1.4;
}


/* ==========================================================================
   31. ACTION SUCCÈS
   ========================================================================== */

.success-action-zone {
    margin-top: 28px;

    text-align: center;
}

.success-action-zone > p {
    margin:
        0
        0
        14px;

    color:
        var(--text-soft);

    font-size: 11px;
}

.success-primary-button {
    width: 100%;
    min-height: 82px;

    padding:
        12px
        16px;

    display: grid;

    grid-template-columns:
        50px
        minmax(0, 1fr)
        40px;

    align-items: center;

    gap: 13px;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            var(--gescom-navy),
            #0d3761
        );

    color: #fff;

    text-align: left;

    box-shadow:
        0 18px 42px
        rgba(6, 20, 38, .17);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.success-primary-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 24px 55px
        rgba(6, 20, 38, .23);
}

.success-primary-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--gescom-blue),
            var(--gescom-cyan)
        );

    font-size: 22px;
}

.success-primary-copy {
    display: flex;
    flex-direction: column;
}

.success-primary-copy strong {
    color: #fff;

    font-size: 17px;
}

.success-primary-copy small {
    margin-top: 4px;

    color:
        rgba(255, 255, 255, .64);

    font-size: 9px;
}


/* ==========================================================================
   32. OVERLAY DE CRÉATION
   ========================================================================== */

.register-loading-overlay {
    position: fixed;
    inset: 0;

    z-index: 5000;

    padding: 20px;

    display: grid;
    place-items: center;

    background:
        rgba(4, 14, 28, .82);

    backdrop-filter:
        blur(12px);
}

.register-loading-card {
    width:
        min(
            100%,
            440px
        );

    padding:
        36px
        30px;

    text-align: center;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f4f9ff
        );

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, .35);
}

.register-loading-brand {
    width: 62px;
    height: 62px;

    margin:
        0
        auto
        18px;

    display: grid;
    place-items: center;

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            var(--gescom-blue),
            var(--gescom-cyan)
        );

    color: #fff;

    font-size: 28px;
    font-weight: 950;
}

.register-loading-spinner {
    width: 32px;
    height: 32px;

    margin:
        0
        auto
        17px;

    display: block;

    border:
        3px solid
        #dfe8f2;

    border-top-color:
        var(--gescom-blue);

    border-radius: 50%;

    animation:
        registerSpin
        .75s
        linear
        infinite;
}

@keyframes registerSpin {

    to {
        transform: rotate(360deg);
    }
}

.register-loading-card strong {
    display: block;

    color:
        var(--gescom-navy);

    font-size: 17px;
}

.register-loading-card p {
    margin:
        8px
        0
        0;

    color:
        var(--text-soft);

    font-size: 11px;
    line-height: 1.6;
}

.register-loading-progress {
    height: 6px;

    margin-top: 20px;

    overflow: hidden;

    border-radius: 999px;

    background:
        #e6edf5;
}

.register-loading-progress span {
    width: 45%;
    height: 100%;

    display: block;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--gescom-blue),
            var(--gescom-cyan)
        );

    animation:
        registerLoadingProgress
        1.2s
        ease-in-out
        infinite;
}

@keyframes registerLoadingProgress {

    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(250%);
    }
}


/* ==========================================================================
   33. TABLETTE
   ========================================================================== */

@media (max-width: 980px) {

    .register-shell {
        width:
            calc(100% - 32px);
    }

    .register-hero {
        grid-template-columns: 1fr;

        gap: 26px;

        padding:
            40px;
    }

    .register-hero-trial {
        max-width: 600px;

        flex-direction: row;
    }

    .hero-trial-icon {
        flex:
            0
            0
            58px;
    }

    .register-progress {
        overflow-x: auto;
    }

    .register-card-header {
        grid-template-columns:
            52px
            minmax(0, 1fr);

        gap: 15px;
    }

    .register-card-number {
        width: 52px;
        height: 52px;
    }

    .register-required-badge,
    .register-secure-badge,
    .register-optional-badge {
        grid-column: 2;

        justify-self: start;
    }

    .register-footer-inner {
        grid-template-columns:
            1fr
            auto;
    }

    .register-footer-inner > p {
        grid-column:
            1 / -1;
    }
}


/* ==========================================================================
   34. GSM
   ========================================================================== */

@media (max-width: 680px) {

    .register-shell {
        width:
            calc(100% - 20px);
    }


    /* HEADER */

    .register-header-inner {
        min-height: 70px;
    }

    .register-brand-logo {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        border-radius: 14px;
    }

    .register-brand-logo strong {
        font-size: 22px;
    }

    .register-brand-copy strong {
        font-size: 14px;
    }

    .register-brand-copy small {
        margin-top: 4px;

        font-size: 8px;
    }

    .register-header-security {
        display: none;
    }

    .register-login-button {
        width: 43px;
        height: 43px;

        min-height: 43px;

        padding: 0;
    }

    .register-login-button span {
        display: none;
    }


    /* MAIN */

    .register-main {
        padding:
            14px
            0
            48px;
    }


    /* HERO */

    .register-hero {
        min-height: 0;

        padding:
            29px
            21px;

        gap: 23px;

        border-radius: 22px;
    }

    .register-kicker {
        padding:
            7px
            10px;

        font-size: 8px;
    }

    .register-hero h1 {
        margin-top: 16px;

        font-size: 34px;

        line-height: 1.04;

        letter-spacing: -.9px;
    }

    .register-hero-lead {
        margin-top: 16px;

        font-size: 14px;
        line-height: 1.65;
    }

    .register-hero-benefits {
        gap: 6px;
    }

    .register-hero-benefits span {
        font-size: 8px;
    }

    .register-hero-trial {
        padding: 18px;

        flex-direction: row;

        gap: 12px;

        border-radius: 18px;
    }

    .hero-trial-icon {
        width: 47px;
        height: 47px;

        flex-basis: 47px;

        margin: 0;

        border-radius: 14px;

        font-size: 21px;
    }

    .register-hero-trial strong {
        font-size: 20px;
    }

    .register-hero-trial p {
        font-size: 10px;
    }


    /* PROGRESSION */

    .register-progress {
        margin:
            13px
            0
            18px;

        padding:
            10px;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

        gap: 5px;

        border-radius: 16px;
    }

    .register-progress-line {
        display: none;
    }

    .register-progress-item {
        min-width: 0;

        flex-direction: column;
        align-items: center;

        text-align: center;

        gap: 5px;
    }

    .progress-number {
        width: 33px;
        height: 33px;

        flex-basis: 33px;

        border-radius: 10px;

        font-size: 10px;
    }

    .register-progress-item strong {
        font-size: 9px;
    }

    .register-progress-item small {
        display: none;
    }


    /* CARTES */

    .register-form {
        gap: 14px;
    }

    .register-card {
        border-radius: 19px;
    }

    .register-card-header {
        padding:
            19px
            17px;

        grid-template-columns:
            45px
            minmax(0, 1fr);

        gap: 12px;
    }

    .register-card-number {
        width: 45px;
        height: 45px;

        border-radius: 13px;

        font-size: 11px;
    }

    .register-card-kicker {
        font-size: 8px;
    }

    .register-card-heading h2 {
        font-size: 21px;
    }

    .register-card-heading p {
        margin-top: 6px;

        font-size: 11px;
        line-height: 1.55;
    }

    .register-required-badge,
    .register-secure-badge,
    .register-optional-badge {
        padding:
            6px
            8px;

        font-size: 8px;
    }

    .register-card-body {
        padding:
            20px
            17px
            22px;
    }


    /* FORMULAIRE */

    .form-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .form-group-full {
        grid-column: auto;
    }

    .form-group label {
        font-size: 11px;
    }

    .form-control-shell {
        min-height: 53px;

        border-radius: 13px;
    }

    .form-control-shell input,
    .form-control-shell select {
        height: 51px;

        font-size: 13px;
    }

    .form-group > small {
        font-size: 9px;
    }


    /* ADMIN */

    .register-admin-notice {
        padding: 14px;

        border-radius: 14px;
    }

    .register-admin-notice p {
        font-size: 10px;
    }


    /* LOGO */

    .company-logo-uploader {
        padding: 17px;

        grid-template-columns: 1fr;

        gap: 16px;

        text-align: center;
    }

    .company-logo-preview {
        width: 105px;
        height: 105px;

        margin-inline: auto;
    }

    .company-logo-actions {
        justify-content: center;

        flex-direction: column;
    }

    .company-logo-select {
        width: 100%;

        min-height: 44px;

        justify-content: center;
    }


    /* FINAL */

    .register-final {
        padding:
            25px
            18px;

        border-radius: 20px;
    }

    .register-final-top {
        gap: 13px;
    }

    .register-final-icon {
        width: 49px;
        height: 49px;

        flex-basis: 49px;

        border-radius: 14px;

        font-size: 21px;
    }

    .register-final h2 {
        font-size: 23px;
    }

    .register-final-top p {
        font-size: 11px;
    }

    .register-final-points {
        display: grid;

        grid-template-columns:
            1fr
            1fr;
    }

    .register-final-points span {
        justify-content: center;

        text-align: center;

        font-size: 8px;
    }


    /* GROS BOUTON */

    .register-submit {
        min-height: 78px;

        padding:
            11px
            12px;

        grid-template-columns:
            48px
            minmax(0, 1fr)
            39px;

        gap: 10px;

        border-radius: 17px;
    }

    .register-submit-icon {
        width: 48px;
        height: 48px;

        border-radius: 14px;

        font-size: 20px;
    }

    .register-submit-text strong {
        font-size: 16px;
    }

    .register-submit-text small {
        font-size: 8px;
    }

    .register-submit-arrow {
        width: 39px;
        height: 39px;

        border-radius: 12px;
    }


    /* FOOTER */

    .register-footer {
        padding-bottom: 24px;
    }

    .register-footer-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 14px;
    }


    /* SUCCÈS */

    .registration-success {
        margin-top: 0;

        padding:
            30px
            18px;

        border-radius: 22px;
    }

    .success-icon {
        width: 73px;
        height: 73px;

        border-radius: 22px;

        font-size: 34px;
    }

    .success-visual h1 {
        font-size: 34px;
    }

    .success-description {
        font-size: 12px;
    }

    .success-trial {
        padding: 16px;
    }

    .success-status-grid {
        grid-template-columns: 1fr;
    }

    .success-primary-button {
        grid-template-columns:
            45px
            minmax(0, 1fr)
            32px;

        min-height: 75px;
    }

    .success-primary-icon {
        width: 45px;
        height: 45px;
    }

}


/* ==========================================================================
   35. PETITS GSM
   ========================================================================== */

@media (max-width: 390px) {

    .register-brand-copy small {
        display: none;
    }

    .register-hero h1 {
        font-size: 31px;
    }

    .register-final-points {
        grid-template-columns: 1fr;
    }

    .register-submit {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            34px;
    }

    .register-submit-icon {
        width: 44px;
        height: 44px;
    }

}


/* ==========================================================================
   36. ACCESSIBILITÉ
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        rgba(23, 105, 255, .35);

    outline-offset: 3px;
}


/* ==========================================================================
   37. ANIMATIONS RÉDUITES
   ========================================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}