
/* SBC inscription - bloc original 1 */


*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    min-height:100vh;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    color:#0f172a;
    background:#f8fafc;
}

.auth-layout{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(320px,.9fr) minmax(480px,1.1fr);
}

.auth-side{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:52px;
    color:#fff;
    background:
        linear-gradient(
            145deg,
            #0f172a,
            #172554 48%,
            #1d4ed8
        );
}

.auth-side::before{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    top:-160px;
    right:-160px;
    background:rgba(255,255,255,.07);
}

.auth-side::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    bottom:-120px;
    left:-120px;
    background:rgba(255,255,255,.05);
}

.brand,
.side-content,
.side-bottom{
    position:relative;
    z-index:1;
}

.brand{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    min-width:90px;
    height:54px;
    padding:0 20px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.20);
    background:rgba(255,255,255,.13);
    font-size:25px;
    font-weight:900;
    letter-spacing:.08em;
}

.side-content{
    max-width:500px;
}

.side-content h1{
    margin:0 0 18px;
    font-size:clamp(36px,4.5vw,56px);
    line-height:1.04;
}

.side-content p{
    margin:0;
    color:#dbeafe;
    font-size:17px;
    line-height:1.7;
}

.steps{
    display:grid;
    gap:13px;
    margin-top:32px;
}

.step{
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:#e0f2fe;
    font-size:14px;
    line-height:1.5;
}

.step-number{
    flex:0 0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    width:27px;
    height:27px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    font-weight:800;
}

.side-bottom{
    color:#bfdbfe;
    font-size:13px;
}

.auth-main{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 28px;
    background:
        radial-gradient(
            circle at top right,
            rgba(37,99,235,.09),
            transparent 30%
        ),
        #f8fafc;
}

.auth-card{
    width:min(100%,560px);
    padding:30px;
    border:1px solid #e2e8f0;
    border-radius:24px;
    background:#fff;
    box-shadow:0 24px 65px rgba(15,23,42,.10);
}

.mobile-brand{
    display:none;
    margin-bottom:24px;
    color:#1d4ed8;
    font-size:26px;
    font-weight:900;
    letter-spacing:.08em;
}

.heading{
    margin-bottom:21px;
}

.heading h2{
    margin:0 0 8px;
    font-size:30px;
}

.heading p{
    margin:0;
    color:#64748b;
    font-size:15px;
    line-height:1.6;
}

.messages{
    display:grid;
    gap:10px;
    margin-bottom:20px;
}

.message{
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #fecaca;
    background:#fef2f2;
    color:#991b1b;
    font-size:14px;
}

.message.success{
    border-color:#a7f3d0;
    background:#ecfdf5;
    color:#047857;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.field{
    min-width:0;
}

.field.full{
    grid-column:1/-1;
}

label{
    display:block;
    margin-bottom:7px;
    color:#334155;
    font-size:14px;
    font-weight:750;
}

input{
    width:100%;
    padding:13px 14px;
    border:1px solid #cbd5e1;
    border-radius:12px;
    outline:none;
    background:#fff;
    color:#0f172a;
    font-size:16px;
    transition:.18s ease;
}

input:hover{
    border-color:#94a3b8;
}

input:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.11);
}

input::placeholder{
    color:#94a3b8;
}

.help{
    margin-top:6px;
    color:#64748b;
    font-size:12px;
    line-height:1.45;
}

.primary{
    width:100%;
    margin-top:24px;
    padding:14px 18px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(37,99,235,.20);
}

.primary:hover{
    filter:brightness(.97);
}

.footer{
    margin-top:24px;
    padding-top:22px;
    border-top:1px solid #e2e8f0;
    text-align:center;
    color:#64748b;
    font-size:14px;
}

.footer a{
    color:#2563eb;
    font-weight:800;
    text-decoration:none;
}

.footer a:hover{
    text-decoration:underline;
}

.secure{
    margin-top:16px;
    text-align:center;
    color:#94a3b8;
    font-size:12px;
}

@media(max-width:900px){

    .auth-layout{
        grid-template-columns:1fr;
    }

    .auth-side{
        display:none;
    }

    .auth-main{
        min-height:100vh;
        padding:26px 18px;
    }

    .mobile-brand{
        display:block;
    }
}

@media(max-width:600px){

    .auth-card{
        padding:22px 18px;
        border-radius:20px;
    }

    .heading h2{
        font-size:25px;
    }

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

    .field.full{
        grid-column:auto;
    }
}


/* SBC_AUTH_LOGO_V2 */

.brand{
    width:92px !important;
    height:92px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:16px !important;
    background:#ffffff !important;
    box-shadow:0 10px 28px rgba(15,23,42,.16) !important;
    overflow:hidden !important;
    font-size:0 !important;
}

.brand .sbc-auth-logo{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.38);
    transform-origin:center;
}

.mobile-brand{
    font-size:0 !important;
}

.mobile-brand .sbc-auth-logo{
    display:block;
    width:72px;
    height:72px;
    object-fit:cover;
    transform:scale(1.34);
    transform-origin:center;
    margin:0 auto;
    border-radius:14px;
    background:#ffffff;
    box-shadow:0 8px 20px rgba(15,23,42,.10);
}

@media(max-width:600px){

    .brand{
        width:78px !important;
        height:78px !important;
    }

    .mobile-brand .sbc-auth-logo{
        width:64px;
        height:64px;
    }
}



/* SBC inscription - bloc original 2 */


/* ==========================================================
   SBC_SIGNUP_HARMONISATION_V1
   ========================================================== */

body.sbc-signup-page{
    margin:0 !important;

    min-height:100vh !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    color:#0f172a !important;

    background:#f4f7fb !important;

    -webkit-font-smoothing:
        antialiased;
}


/* ==========================================================
   STRUCTURE GENERALE
   ========================================================== */

body.sbc-signup-page
main{
    min-height:100vh !important;

    padding:36px 24px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;
}


body.sbc-signup-page
main > section{

    width:100% !important;

    max-width:820px !important;

    margin:0 auto !important;

    padding:32px !important;

    background:#ffffff !important;

    border:
        1px solid #e2e8f0 !important;

    border-radius:20px !important;

    box-shadow:
        0 20px 55px
        rgba(15,23,42,.08) !important;
}


/* ==========================================================
   PANNEAU LATERAL SI PRESENT
   ========================================================== */

body.sbc-signup-page
aside{

    color:#ffffff !important;

    background:
        linear-gradient(
            145deg,
            #0f766e,
            #115e59
        ) !important;

    border:0 !important;
}


body.sbc-signup-page
aside h1,

body.sbc-signup-page
aside h2,

body.sbc-signup-page
aside h3,

body.sbc-signup-page
aside strong{

    color:#ffffff !important;
}


body.sbc-signup-page
aside p,

body.sbc-signup-page
aside span{

    color:
        rgba(255,255,255,.84)
        !important;
}


/* ==========================================================
   LOGO
   ========================================================== */

body.sbc-signup-page
.sbc-auth-logo{

    display:block !important;

    width:auto !important;

    max-width:160px !important;

    max-height:70px !important;

    object-fit:contain !important;

    margin:
        0 auto 22px !important;
}


/* ==========================================================
   TITRES
   ========================================================== */

body.sbc-signup-page
h1{

    margin:
        0 0 10px !important;

    color:#0f172a !important;

    font-size:
        clamp(
            27px,
            4vw,
            38px
        ) !important;

    line-height:1.1 !important;

    letter-spacing:
        -.035em !important;
}


body.sbc-signup-page
h2{

    color:#0f172a !important;

    font-weight:800 !important;
}


/* ==========================================================
   GRILLE FORMULAIRE
   ========================================================== */

body.sbc-signup-page
.form-grid{

    display:grid !important;

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

    gap:
        16px 18px !important;
}


body.sbc-signup-page
.field.full{

    grid-column:
        1 / -1 !important;
}


body.sbc-signup-page
.field{

    margin:0 !important;
}


/* ==========================================================
   LABELS
   ========================================================== */

body.sbc-signup-page
label{

    display:block !important;

    margin:
        0 0 7px !important;

    color:#334155 !important;

    font-size:13px !important;

    font-weight:700 !important;
}


/* ==========================================================
   CHAMPS
   ========================================================== */

body.sbc-signup-page
input,

body.sbc-signup-page
select,

body.sbc-signup-page
textarea{

    width:100% !important;

    min-height:47px !important;

    padding:
        11px 13px !important;

    color:#0f172a !important;

    background:#ffffff !important;

    border:
        1px solid #cbd5e1 !important;

    border-radius:10px !important;

    outline:none !important;

    font-family:inherit !important;

    font-size:14px !important;

    box-shadow:none !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease
        !important;
}


body.sbc-signup-page
textarea{

    min-height:95px !important;

    resize:vertical;
}


body.sbc-signup-page
input::placeholder,

body.sbc-signup-page
textarea::placeholder{

    color:#94a3b8 !important;
}


body.sbc-signup-page
input:focus,

body.sbc-signup-page
select:focus,

body.sbc-signup-page
textarea:focus{

    border-color:
        #0f766e !important;

    box-shadow:
        0 0 0 3px
        rgba(
            15,
            118,
            110,
            .12
        ) !important;
}


/* ==========================================================
   AIDE
   ========================================================== */

body.sbc-signup-page
.help{

    margin-top:5px !important;

    color:#64748b !important;

    font-size:11px !important;

    line-height:1.45 !important;
}


/* ==========================================================
   BOUTON PRINCIPAL
   ========================================================== */

body.sbc-signup-page
button.primary{

    width:100% !important;

    min-height:49px !important;

    margin-top:22px !important;

    padding:
        11px 18px !important;

    color:#ffffff !important;

    background:
        #0f766e !important;

    border:
        1px solid #0f766e
        !important;

    border-radius:
        10px !important;

    font-family:
        inherit !important;

    font-size:
        14px !important;

    font-weight:
        800 !important;

    cursor:
        pointer !important;
}


body.sbc-signup-page
button.primary:hover{

    background:
        #115e59 !important;

    border-color:
        #115e59 !important;

    box-shadow:
        0 9px 22px
        rgba(
            15,
            118,
            110,
            .18
        ) !important;
}


/* ==========================================================
   FLASH
   ========================================================== */

body.sbc-signup-page
:is(
    .flash,
    .alert,
    .message
){

    margin:
        0 0 16px !important;

    padding:
        11px 13px !important;

    color:#9a3412 !important;

    background:#fff7ed !important;

    border:
        1px solid #fed7aa
        !important;

    border-radius:
        10px !important;

    font-size:
        13px !important;
}


/* ==========================================================
   BAS DE FORMULAIRE
   ========================================================== */

body.sbc-signup-page
.footer{

    margin-top:
        20px !important;

    padding:
        14px !important;

    color:#64748b !important;

    background:#f8fafc !important;

    border:
        1px solid #e2e8f0
        !important;

    border-radius:
        11px !important;

    text-align:center !important;

    font-size:
        13px !important;
}


body.sbc-signup-page
.footer a{

    color:
        #0f766e !important;

    font-weight:
        800 !important;

    text-decoration:
        none !important;
}


body.sbc-signup-page
.footer a:hover{

    color:
        #115e59 !important;

    text-decoration:
        underline !important;
}


body.sbc-signup-page
.secure{

    margin-top:
        14px !important;

    color:#64748b !important;

    font-size:
        11px !important;

    font-weight:
        600 !important;

    text-align:center !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px){

    body.sbc-signup-page
    aside{

        display:none !important;
    }


    body.sbc-signup-page
    main{

        min-height:100vh !important;

        padding:
            18px 12px !important;
    }


    body.sbc-signup-page
    main > section{

        max-width:
            520px !important;

        padding:
            22px 18px !important;

        border-radius:
            16px !important;
    }


    body.sbc-signup-page
    .form-grid{

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


    body.sbc-signup-page
    .field.full{

        grid-column:
            auto !important;
    }

}



/* SBC inscription - bloc original 3 */


.sbc-cgu-consent{

    margin-top:18px;

    padding:14px;

    background:#f8fafc;

    border:
        1px solid #e2e8f0;

    border-radius:11px;
}


.sbc-cgu-check{

    display:flex !important;

    align-items:flex-start !important;

    gap:10px !important;

    margin:0 !important;

    color:#334155 !important;

    font-size:12px !important;

    font-weight:600 !important;

    line-height:1.5 !important;

    cursor:pointer;
}


.sbc-cgu-check input{

    width:17px !important;

    height:17px !important;

    min-height:17px !important;

    margin:
        2px 0 0 !important;

    padding:0 !important;

    flex:
        0 0 auto !important;

    accent-color:#0f766e;
}


.sbc-cgu-check a{

    color:#0f766e !important;

    font-weight:800 !important;

    text-decoration:underline !important;

    text-underline-offset:2px;
}


.sbc-cgu-note{

    margin:
        8px 0 0 27px;

    color:#64748b;

    font-size:10px;

    line-height:1.4;
}



/* SBC inscription - bloc original 4 */


.sbc-privacy-note{

    margin:
        10px 0 0 27px;

    color:#64748b;

    font-size:10px;

    line-height:1.45;
}



/* SBC inscription - bloc original 5 */


.sbc-signup-commercial{
    margin:24px 0;
    padding:20px;
    border:1px solid rgba(148,163,184,.30);
    border-radius:18px;
    background:#fff;
}

.sbc-signup-commercial-head{
    margin-bottom:16px;
}

.sbc-signup-commercial-head h3{
    margin:5px 0 6px;
    font-size:20px;
}

.sbc-signup-commercial-head p{
    margin:0;
    opacity:.72;
    line-height:1.5;
}

.sbc-signup-step{
    display:inline-flex;
    padding:5px 10px;
    border-radius:999px;
    background:#eef2ff;
    font-size:12px;
    font-weight:700;
}

.sbc-signup-offres{
    display:grid;
    grid-template-columns:repeat(
        3,
        minmax(0,1fr)
    );
    gap:12px;
}

.sbc-signup-offre-card{
    position:relative;
    display:block;
    padding:16px;
    border:2px solid #e5e7eb;
    border-radius:16px;
    cursor:pointer;
    transition:.18s ease;
}

.sbc-signup-offre-card:hover{
    border-color:#94a3b8;
    transform:translateY(-1px);
}

.sbc-signup-offre-card:has(input:checked){
    border-color:#2563eb;
    box-shadow:
        0 0 0 3px rgba(37,99,235,.10);
}

.sbc-signup-offre-card input{
    position:absolute;
    top:14px;
    right:14px;
}

.sbc-signup-offre-main{
    display:flex;
    flex-direction:column;
    gap:7px;
    padding-right:25px;
}

.sbc-signup-offre-main strong{
    font-size:15px;
}

.sbc-signup-offre-price{
    font-size:20px;
    font-weight:800;
}

.sbc-signup-offre-main small{
    opacity:.65;
}

.sbc-signup-payment-zone{
    margin-top:18px;
    padding:18px;
    border-radius:16px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.sbc-signup-payment-zone label{
    display:block;
    margin-bottom:8px;
    font-weight:700;
}

.sbc-signup-payment-zone select{
    width:100%;
    min-height:48px;
    padding:10px 12px;
    border:1px solid #cbd5e1;
    border-radius:12px;
    background:#fff;
}

.sbc-signup-payment-info,
.sbc-signup-payment-warning{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-top:12px;
    padding:12px;
    border-radius:12px;
}

.sbc-signup-payment-info{
    background:#ecfdf5;
}

.sbc-signup-payment-warning{
    background:#fff7ed;
}

.sbc-signup-payment-security{
    display:block;
    margin-top:12px;
    line-height:1.45;
    opacity:.68;
}

@media (max-width:760px){

    .sbc-signup-offres{
        grid-template-columns:1fr;
    }

    .sbc-signup-commercial{
        padding:15px;
    }
}



/* SBC inscription - bloc original 6 */


/* ============================================================
   OFFRES INSCRIPTION - VERSION ADAPTEE A LA COLONNE ETROITE
   ============================================================ */

.sbc-signup-commercial{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:18px !important;
    overflow:hidden !important;
}


/* Une offre par ligne pour eviter tout chevauchement */

.sbc-signup-offres{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
}


/* Carte */

.sbc-signup-offre-card{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;

    width:100% !important;
    min-width:0 !important;

    padding:14px 15px !important;

    box-sizing:border-box !important;

    border:2px solid #e2e8f0 !important;
    border-radius:14px !important;

    cursor:pointer !important;
}


/* ============================================================
   RADIO
   Important : neutralise les styles globaux des input
   ============================================================ */

.sbc-signup-offre-card
input[type="radio"]{

    position:static !important;

    display:block !important;

    width:18px !important;
    height:18px !important;

    min-width:18px !important;
    max-width:18px !important;

    min-height:18px !important;
    max-height:18px !important;

    margin:0 !important;
    padding:0 !important;

    flex:0 0 18px !important;

    appearance:auto !important;
    -webkit-appearance:radio !important;

    box-shadow:none !important;
    transform:none !important;
}


/* Contenu de l'offre */

.sbc-signup-offre-main{
    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        auto !important;

    grid-template-areas:
        "nom prix"
        "duree prix" !important;

    align-items:center !important;

    width:100% !important;
    min-width:0 !important;

    gap:3px 12px !important;

    padding:0 !important;
}


.sbc-signup-offre-main strong{
    grid-area:nom !important;

    display:block !important;

    min-width:0 !important;

    font-size:14px !important;
    line-height:1.25 !important;

    overflow-wrap:anywhere !important;
}


.sbc-signup-offre-price{
    grid-area:prix !important;

    display:block !important;

    white-space:nowrap !important;

    font-size:17px !important;
    line-height:1.2 !important;
    font-weight:800 !important;

    text-align:right !important;
}


.sbc-signup-offre-main small{
    grid-area:duree !important;

    font-size:12px !important;
    line-height:1.2 !important;

    opacity:.65 !important;
}


/* Carte selectionnee */

.sbc-signup-offre-card:has(
    input[type="radio"]:checked
){
    border-color:#2563eb !important;

    background:#f8fbff !important;

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.10)
        !important;
}


/* ============================================================
   PAIEMENT
   ============================================================ */

.sbc-signup-payment-zone{
    width:100% !important;
    max-width:100% !important;

    box-sizing:border-box !important;

    padding:16px !important;

    overflow:hidden !important;
}


.sbc-signup-payment-zone select{
    display:block !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;

    font-size:14px !important;
}


/* Texte securite et information */

.sbc-signup-payment-info,
.sbc-signup-payment-warning,
.sbc-signup-payment-security{
    width:100% !important;
    max-width:100% !important;

    box-sizing:border-box !important;

    overflow-wrap:anywhere !important;
}


/* ============================================================
   PETITS ECRANS
   ============================================================ */

@media (max-width:520px){

    .sbc-signup-commercial{
        padding:14px !important;
    }

    .sbc-signup-offre-card{
        padding:13px !important;
    }

    .sbc-signup-offre-main{
        grid-template-columns:
            minmax(0,1fr)
            auto !important;
    }

    .sbc-signup-offre-price{
        font-size:16px !important;
    }
}



/* SBC inscription - bloc original 7 */


/* ============================================================
   CASE CGU - neutralisation des styles generaux des INPUT
   ============================================================ */

body.sbc-signup-page
input[type="checkbox"][name="accept_cgu"]{

    appearance:auto !important;
    -webkit-appearance:checkbox !important;

    display:inline-block !important;

    position:static !important;

    width:18px !important;
    height:18px !important;

    min-width:18px !important;
    max-width:18px !important;

    min-height:18px !important;
    max-height:18px !important;

    margin:0 9px 0 0 !important;
    padding:0 !important;

    vertical-align:middle !important;

    border:auto !important;
    border-radius:3px !important;

    box-shadow:none !important;

    transform:none !important;

    flex:0 0 18px !important;
}


/* Le conteneur du consentement ne doit jamais
   transformer la checkbox en champ pleine largeur */

body.sbc-signup-page
input[type="checkbox"][name="accept_cgu"]
+ *{
    vertical-align:middle !important;
}


/* Securite petits ecrans */

@media (max-width:520px){

    body.sbc-signup-page
    input[type="checkbox"][name="accept_cgu"]{

        width:18px !important;
        height:18px !important;

        min-width:18px !important;
        min-height:18px !important;
    }
}
