/* ============================================================
       LOGIN MODAL - COMPACT / CENTRE
       ============================================================ */

    #modal-login .modal-dialog {
        max-width: 460px;
    }

    #modal-login .modal-content {
        border: 0;
        border-radius: 16px;
        overflow: hidden;
        background: var(--bg, #fff);
        box-shadow: 0 20px 55px rgba(0, 0, 0, .18);
    }

    #modal-login .login-layout {
        display: grid;
        grid-template-columns: 34% 66%;
        padding: 0;
        margin: 0;
    }

    /* ============================================================
       LEFT SIDE - OPTIONNEL
       ============================================================ */

    #modal-login .left-side {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 390px;
        padding: 24px;
        background: rgba(119, 146, 219, .07);
        border-right: 1px solid rgba(0, 0, 0, .06);
    }

    #modal-login .left-side .img-content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #modal-login .left-side .img-content img,
    #modal-login .left-side .img-content svg {
        display: block;
        width: 100%;
        max-width: 190px;
        max-height: 250px;
        object-fit: contain;
    }

    /* ============================================================
       RIGHT SIDE
       ============================================================ */

    #modal-login .right-side {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        width: 100%;
        padding: 36px 38px 34px;
        background: var(--bg, #fff);
    }

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

    #modal-login .login-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        margin-bottom: 18px;
    }

    #modal-login .login-logo img,
    #modal-login .login-logo svg {
        display: block;
        width: auto;
        max-width: 200px;
        max-height: 58px;
        object-fit: contain;
    }

    #modal-login .brand-text {
        display: none;
        text-align: center;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        color: rgb(103, 126, 194);
    }

    #modal-login .title {
        margin: 0 0 26px;
        text-align: center;
        font-size: 22px;
        line-height: 1.3;
        font-weight: 600;
        color: var(--text, #222);
    }

    /* ============================================================
       STEPS
       ============================================================ */

    #modal-login .body {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    #modal-login .right-side[data-step="init"] .body.init,
    #modal-login .right-side[data-step="authpassword"] .body.authpassword,
    #modal-login .right-side[data-step="authguest"] .body.authguest,
    #modal-login .right-side[data-step="inscription"] .body.inscription {
        display: flex;
    }

    #modal-login .user-identity {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        margin: -4px auto 20px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .045);
        font-size: 12px;
        color: var(--muted, #666);
    }

    #modal-login .mail-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #modal-login .code-info {
        margin: -4px 0 20px;
        text-align: center;
        font-size: 13px;
        line-height: 1.5;
        color: var(--muted, #666);
    }

    #modal-login .btn-return { align-self: flex-start; margin-bottom: 16px; }

    /* ============================================================
       FORM
       ============================================================ */

    #modal-login .form-group {
        width: 100%;
        margin: 0 0 16px;
        padding: 0;
    }

    #modal-login .form-control {
        min-height: 44px;
        border-radius: 8px;
        box-shadow: none !important;
    }

    #modal-login .form-group-btn {
        display: block;
        width: 100%;
        margin-top: 6px;
    }

    #modal-login .btn-login {
        width: 100%;
        min-height: 42px;
        border-radius: 8px;
        font-weight: 600;
        box-shadow: none !important;
    }

    #modal-login .form-group-btn.has-cancel,
    #modal-login .form-group-btn.has-return {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #modal-login .form-group-btn.has-cancel .btn,
    #modal-login .form-group-btn.has-return .btn {
        flex: 1 1 0;
        width: 0;
    }

    #modal-login .btn-cancel,
    #modal-login .form-group-btn .btn-return {
        min-height: 42px;
        border-radius: 8px;
        box-shadow: none !important;
    }

    #modal-login .form-group-btn .btn-return {
        align-self: auto;
        margin: 0;
        padding: .25rem .5rem;
        border: 1px solid;
        font-size: .875rem;
    }


    #modal-login .text-danger {
        display: block;
        margin: 5px 0 0 3px;
        font-size: 12px;
    }

    /* ============================================================
       NO LEFT SIDE
       ============================================================ */

    #modal-login .login-layout.login-no-left {
        display: block;
    }

    #modal-login .login-no-left .left-side {
        display: none;
    }

    #modal-login .login-no-left .right-side {
        width: 100%;
        min-height: 0;
        padding: 36px 40px 34px;
    }

    /* ============================================================
       WITH LEFT SIDE
       ============================================================ */

    #modal-login.has-left .modal-dialog {
        max-width: 760px;
    }

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

    @media (max-width: 576px) {

        #modal-login .modal-dialog {
            margin: 0;
            width: 100%;
            max-width: 100%;
            min-height: 100vh;
        }

        #modal-login .modal-content {
            min-height: 100vh;
            border-radius: 0;
            box-shadow: none;
        }

        #modal-login .login-layout {
            display: block;
            min-height: 100vh;
        }

        #modal-login .left-side {
            display: none;
        }

        #modal-login .right-side,
        #modal-login .login-no-left .right-side {
            justify-content: flex-start;
            width: 100%;
            min-height: 100vh;
            padding: 54px 24px 30px;
        }

        #modal-login .login-logo {
            margin-bottom: 20px;
        }

        #modal-login .login-logo img,
        #modal-login .login-logo svg {
            max-width: 210px;
            max-height: 62px;
        }

        #modal-login .title {
            font-size: 23px;
            margin-bottom: 28px;
        }
    }