.oa-auth-page {

    min-height:100vh;

    height:100vh;

    display:flex;

    padding:0;

}

.oa-auth-layout {

    width:100%;

    min-height:100vh;

    display:flex;

}
.auth-layout {

    width:100%;

    display:flex;

}


/* partie gauche */

.auth-brand {

    width:45%;

    min-height:100vh;

    background:
    linear-gradient(
        135deg,
        var(--oustaoo-orange),
        var(--oustaoo-gold)
    );

    display:flex;

    align-items:start;

    justify-content:center;

    padding:50px;

}

.auth-brand-content {

    color:white;

    max-width:550px;

}

.auth-brand .logo img{
    width: 550px;
}


.auth-brand h2 {

    font-size:39px;

    line-height:1.15;

}


.auth-brand p {

    font-size:18px;

    opacity:.9;

}



/* partie droite */

.auth-form {

    width:50%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:60px 150px;

    background:#fff;

}


.auth-form h1 {

    font-size:34px;

    margin-bottom:35px;

}


.auth-form input {

    width:100%;

    height:52px;

    margin-bottom:18px;

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

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

    padding:0 16px;

}



.auth-form form > button {

    width:100%;

    height:54px;

    margin-top:10px;

    background:var(--oustaoo-blue);

    color:#fff;

    border:none;

    border-radius:12px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.2s ease;

}


.auth-form >button:hover {

    background:#162D49;

}


.oa-auth-error {
    margin-bottom:20px;
    padding:12px 15px;
    border-radius:8px;
    background:#fdf0f0;
    color:#c0392b;
    font-size:14px;
}

/* =========================================================
   OUSTAOO — REGISTER
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Introduction
|--------------------------------------------------------------------------
*/

.auth-intro {
    margin: -8px 0 24px;

    color: #6f756f;

    font-size: 15px;

    line-height: 1.5;
}



/*
|--------------------------------------------------------------------------
| Erreur
|--------------------------------------------------------------------------
*/

.auth-error {

    margin: 0 0 22px;

    padding: 14px 16px;

    border: 1px solid #e3b7a5;

    border-radius: 10px;

    background: #fff4ef;

    color: #a44727;

    font-size: 14px;

    line-height: 1.5;

}



/*
|--------------------------------------------------------------------------
| Type de compte
|--------------------------------------------------------------------------
*/

.account-type {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 24px;

}



/*
|--------------------------------------------------------------------------
| Carte
|--------------------------------------------------------------------------
*/

.account-type-option {

    position: relative;

    display: block;

    padding: 17px 18px;

    border: 1px solid #d8ddd7;

    border-radius: 12px;

    background: #fff;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}



/*
|--------------------------------------------------------------------------
| Radio
|--------------------------------------------------------------------------
*/

.account-type-option input {

    position: absolute;

    opacity: 0;

    width: 1px;

    height: 1px;

}



/*
|--------------------------------------------------------------------------
| Contenu
|--------------------------------------------------------------------------
*/

.account-type-content {

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding-left: 30px;

    position: relative;

}



/*
|--------------------------------------------------------------------------
| Cercle radio
|--------------------------------------------------------------------------
*/

.account-type-content::before {

    content: "";

    position: absolute;

    left: 0;

    top: 2px;

    width: 18px;

    height: 18px;

    border: 2px solid #b9c0b9;

    border-radius: 50%;

    box-sizing: border-box;

}



/*
|--------------------------------------------------------------------------
| Point sélectionné
|--------------------------------------------------------------------------
*/

.account-type-option.selected
.account-type-content::after {

    content: "";

    position: absolute;

    left: 5px;

    top: 7px;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #23483A;

}



/*
|--------------------------------------------------------------------------
| Titres
|--------------------------------------------------------------------------
*/

.account-type-content strong {

    color: #23483A;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.3;

}



/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.account-type-content small {

    color: #6f756f;

    font-size: 13px;

    line-height: 1.4;

}



/*
|--------------------------------------------------------------------------
| Sélection
|--------------------------------------------------------------------------
*/

.account-type-option.selected {

    border-color: #23483A;

    background: #f4f7f3;

    box-shadow:
        0 0 0 1px #23483A;

}



/*
|--------------------------------------------------------------------------
| Hover
|--------------------------------------------------------------------------
*/

.account-type-option:hover {

    border-color: #23483A;

}



/*
|--------------------------------------------------------------------------
| Mot de passe
|--------------------------------------------------------------------------
*/

.password-hint {

    margin: -14px 0 22px;

    color: #7b817b;

    font-size: 12px;

    line-height: 1.5;

}



/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .account-type {

        gap: 10px;

        margin-bottom: 20px;

    }


    .account-type-option {

        padding: 15px;

    }


    .account-type-content strong {

        font-size: 15px;

    }


    .account-type-content small {

        font-size: 12px;

    }

}


.password-error {
    margin: -12px 0 6px;
    color: #a44727;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.password-hint {
    margin: 0 0 22px;
    color: #7b817b;
    font-size: 12px;
    line-height: 1.5;
}



.menu-qr-login-lost-password {
    display: block;
    margin-top: 14px;

    text-align: center;

    color: #23483A;
    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.menu-qr-login-lost-password:hover {
    color: #D86730;
    text-decoration: underline;
}


/* =========================================================
   OUSTAOO — AUTH MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .oa-auth-page,
    .oa-auth-layout,
    .auth-layout {

        min-height: 100vh;
        height: auto;

        display: block;

        width: 100%;
    }


    /* -----------------------------------------------------
       BRAND
       ----------------------------------------------------- */

    .auth-brand {

        width: 100%;
        min-height: auto;

        padding: 30px 25px 25px;

        align-items: center;
        justify-content: center;

        text-align: center;
    }


    .auth-brand-content {

        width: 100%;
        max-width: none;
    }


    .auth-brand .logo img {

        width: min(260px, 80%);
        height: auto;
    }


    .auth-brand h2 {

        font-size: 26px;
        line-height: 1.2;

        margin: 20px 0 10px;
    }


    .auth-brand p {

        font-size: 15px;
        line-height: 1.5;

        margin: 0;
    }


    /* -----------------------------------------------------
       FORMULAIRE
       ----------------------------------------------------- */

    .auth-form {

        width: 100%;
        min-height: auto;

        box-sizing: border-box;

        padding: 35px 22px 45px;

        justify-content: flex-start;
    }


    .auth-form h1 {

        font-size: 28px;

        margin-bottom: 25px;
    }


    .auth-form input {

        box-sizing: border-box;

        width: 100%;
        height: 52px;

        margin-bottom: 16px;
    }


    .auth-form form > button {

        width: 100%;
        height: 54px;
    }


    /* -----------------------------------------------------
       ERREURS
       ----------------------------------------------------- */

    .oa-auth-error,
    .auth-error {

        box-sizing: border-box;

        width: 100%;

        font-size: 13px;
    }


    /* -----------------------------------------------------
       COMPTE
       ----------------------------------------------------- */

    .account-type {

        width: 100%;
    }


    .account-type-option {

        box-sizing: border-box;

        width: 100%;
    }

}