:root{
    --mup-orange: #ff7900;
    --mup-orange-soft: #fff3e6;
    --mup-black: #050505;
    --mup-dark: #111827;
    --mup-muted: #6b7280;
    --mup-line: #e5e7eb;
    --mup-bg: #f6f7fb;
    --mup-white: #ffffff;
    --mup-card-bg: #ffffff;
    --mup-radius: 22px;
    --mup-shadow: 0 22px 60px rgba(15,23,42,.08);
    --mup-login-bg-overlay: linear-gradient(120deg, rgba(5,5,5,.58), rgba(5,5,5,.20));
    --mup-login-left-overlay: linear-gradient(180deg, rgba(5,5,5,.05), rgba(5,5,5,.76));
}

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
    overflow-x:hidden;
    overflow-y:auto;
    font-family:"Open Sans", Arial, sans-serif;
    background:var(--mup-bg);
}

.login-container{
    min-height:100vh;
    width:100%;
    padding:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        var(--mup-login-bg-overlay),
        url(".././images_users/597/MNC_20251108121241_667_317_717.jpg") center center / cover no-repeat fixed;
    box-sizing:border-box;
}

.login-box{
    width:min(1040px, 94vw) !important;
    max-height:none !important;
    min-height:600px !important;
    display:grid !important;
    grid-template-columns:42% 58% !important;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.6);
    border-radius:30px;
    box-shadow:0 28px 80px rgba(0,0,0,.22);
    overflow:visible !important;
    position:relative;
}

.login-box:before{
    content:"Bienvenue";
    grid-column:1;
    grid-row:1 / 5;
    min-height:600px;
    display:flex;
    align-items:flex-end;
    padding:38px;
    background:
        var(--mup-login-left-overlay),
        url(".././images_users/597/MNC_20251108121241_667_317_717.jpg") center center / cover no-repeat;
    color:#fff;
    font-size:52px;
    line-height:1;
    font-weight:950;
    border-radius:30px 0 0 30px;
    box-sizing:border-box;
}

.login-box > h2,
.login-box > .nav,
.login-box > .tab-content,
.login-box > .login-footer{
    grid-column:2;
    width:100%;
    box-sizing:border-box;
}

.login-box > h2{
    margin:0;
    padding:24px 42px 8px !important;
    text-align:center;
}

.login-box > h2 img{
    display:block;
    max-width:92px !important;
    max-height:58px !important;
    object-fit:contain;
    margin:0 auto 8px !important;
}

.login-box > h2 span{
    display:block;
    color:var(--mup-dark) !important;
    font-size:13px !important;
    line-height:1.2;
    font-weight:900;
    text-align:center;
}

.login-box > .nav{
    padding:0 42px !important;
}

.login-box .nav-tabs{
    border:0;
    display:flex;
    gap:10px;
    background:transparent;
    justify-content:center;
}

.login-box .nav-tabs > li{
    flex:1;
    max-width:210px;
    margin:0;
}

.login-box .nav-tabs > li > a{
    border:0 !important;
    border-radius:999px;
    text-align:center;
    color:var(--mup-muted);
    font-weight:950;
    padding:12px 16px;
    background:transparent;
}

.login-box .nav-tabs > li.active > a,
.login-box .nav-tabs > li.active > a:hover,
.login-box .nav-tabs > li.active > a:focus{
    background:var(--mup-black) !important;
    color:var(--mup-orange) !important;
    box-shadow:0 14px 30px rgba(0,0,0,.14);
}

.tab-content{
    padding:14px 42px 24px !important;
}

.login-body{
    background:transparent !important;
    padding:0 !important;
    color:var(--mup-dark);
}

.login-title{
    color:var(--mup-dark) !important;
    font-size:38px !important;
    line-height:1.08 !important;
    font-weight:400 !important;
    margin:16px 0 28px !important;
}

.login-title strong{
    font-weight:950 !important;
}

.form-group{
    margin-bottom:14px !important;
}

.login-box label{
    color:var(--mup-dark);
    font-size:13px;
    font-weight:900;
    margin-bottom:7px;
}

.login-box .form-control{
    width:100% !important;
    height:48px !important;
    border:1px solid #dbe3ef !important;
    border-radius:18px !important;
    background:#fff !important;
    color:var(--mup-dark) !important;
    padding:0 16px !important;
    font-size:15px !important;
    box-shadow:0 10px 26px rgba(17,24,39,.05) !important;
    box-sizing:border-box !important;
}

.login-box textarea.form-control{
    height:auto !important;
    min-height:86px;
    padding-top:12px !important;
}

.login-box .form-control:focus{
    border-color:var(--mup-orange) !important;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--mup-orange) 14%, transparent) !important;
}

.login-box .row{
    margin-left:-8px !important;
    margin-right:-8px !important;
}

.login-box .row [class^="col-"],
.login-box .row [class*=" col-"]{
    padding-left:8px !important;
    padding-right:8px !important;
}

.login-box .btn{
    border-radius:999px !important;
    min-height:48px !important;
    font-size:14px !important;
    font-weight:950 !important;
    border:0 !important;
}

.login-box .btn-info,
.login-box .btn-primary{
    background:var(--mup-black) !important;
    color:var(--mup-orange) !important;
    box-shadow:0 14px 32px rgba(0,0,0,.16);
}

.login-box .btn-info:hover,
.login-box .btn-primary:hover{
    background:var(--mup-orange) !important;
    color:var(--mup-black) !important;
}

.login-box .btn-link{
    color:var(--mup-orange) !important;
    font-weight:850;
    text-decoration:none !important;
}

#btn_envoi_codeinscription,
#btn_insript{
    width:100%;
    margin-top:8px;
}

.intl-tel-input,
.iti,
.iti--allow-dropdown{
    width:100% !important;
    display:block !important;
    position:relative !important;
}

.intl-tel-input .form-control,
.iti .form-control,
.iti input{
    width:100% !important;
    max-width:100% !important;
}

.country-list,
.iti__country-list{
    max-width:340px !important;
    z-index:99999 !important;
}

#password,
#confirm_password,
input[type="password"]{
    max-width:100% !important;
    position:relative !important;
    z-index:1 !important;
}

.login-footer{
    padding:0 42px 22px !important;
    color:var(--mup-muted);
    font-size:12px;
    font-weight:800;
}

.login-footer a{
    color:var(--mup-orange);
    font-weight:950;
}

.divcontainer_login{
    background:transparent !important;
    padding:0 !important;
    border-radius:0 !important;
}

.divcontainer_color1,
.divcontainer_color2{
    background:#fff1f1;
    color:#b91c1c;
    border:1px solid #fecaca;
    padding:10px 12px;
    border-radius:14px;
    font-weight:800;
}

span[id^="msg_"]{
    display:block;
    margin-top:5px;
    font-size:12px;
    font-weight:800;
}

.modal-content{
    border-radius:24px;
    border:0;
    box-shadow:0 30px 90px rgba(0,0,0,.25);
}

.modal-header{
    background:var(--mup-black);
    color:var(--mup-orange);
    border-radius:24px 24px 0 0;
    border:0;
}

.progress{
    height:14px;
    border-radius:999px;
    overflow:hidden;
}

.progress-bar-info{
    background:var(--mup-orange);
}

.login-box .intl-tel-input input,
.login-box .iti input,
.login-box input[type="tel"]{
    padding-left:72px !important;
}

.login-box .intl-tel-input .selected-flag,
.login-box .iti__selected-flag{
    width:62px !important;
    padding-left:14px !important;
}

.login-box .intl-tel-input .flag-container,
.login-box .iti__flag-container{
    width:62px !important;
}

@media(max-width:980px){
    .login-container{
        padding:14px;
        align-items:flex-start;
        background-attachment:scroll;
    }

    .login-box{
        display:block !important;
        width:100% !important;
        min-height:auto !important;
        border-radius:26px;
    }

    .login-box:before{
        min-height:150px !important;
        border-radius:26px 26px 0 0 !important;
        font-size:30px !important;
        padding:26px !important;
    }

    .login-box > h2,
    .login-box > .nav,
    .tab-content,
    .login-footer{
        padding-left:22px !important;
        padding-right:22px !important;
    }

    .login-box > h2{
        padding-top:18px !important;
    }

    .login-box > h2 img{
        max-width:78px !important;
        max-height:50px !important;
    }

    .login-box .nav-tabs{
        flex-direction:column;
        gap:8px;
    }

    .login-box .nav-tabs > li{
        max-width:none;
    }

    .login-title{
        font-size:28px !important;
        margin-bottom:20px !important;
    }

    .login-box .form-control{
        height:46px !important;
        font-size:14px !important;
    }

    .login-box .btn{
        width:100% !important;
    }

    .country-list,
    .iti__country-list{
        max-width:92vw !important;
    }
}