body{

    margin:0;
    background:#f8fafc;
    font-family:Inter,sans-serif;

}


.login-wrapper{

    display:flex;
    min-height:100vh;

}


/**********************
LEFT LOGIN PANEL
**********************/

.login-panel{

    width:42%;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAAD8/vz08vT09vT8+vzs7uxH16TeAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAuFJREFUOI0Vk+3NLiEIRG1B8ClAYAsQ2AIEt4D9ePtv5Xp/mZgYJ2fOFJKEfInkVWY2aglmQFkimRTV7MblYyVqD7HXyhKsSuPX12MeDhRHLtGvRG+P+B/S0Vu4OswR9tmvwNPyhdCDbVayJGads/WiUWcjCvCnruTBNHS9gmX2VzVbk7ZvB1gb1hkWFGl+A/n+/FowcO34U/XvKqZ/fHY+6vgRfU92XrOBUbGeeDfQmjWjdrK+frc6FdGReQhfSF5JvR29O2QrfNw1huTwlgsyXLo0u+5So82sgv7tsFZR2nxB6lXiquHrfD8nfYZ9SeT0LiuvSoVrxGY16pCNRZKqvwWsn5OHypPBELzohMCaRaa0ceTHYqe7X/gfJEEtKFbJpWoNqO+aS1cuTykGPpK5Ga48m6L3NefTr013KqYBQu929iP1oQ/7UwSR+i3zqruUmT84qmhzLpxyj7pr9kg7LKvqaXxZmdpn+6o8sHqSqojy02gU3U8q9PnpidiaLks0mbMYz+q2uVXsoBQ8bfURULYxRgZVYCHMv9F4OA7qxT2NPPpvGQ/sTDH2yznKh7E2AcErfcNsaIoN1izzbJiaY63x4QjUFdBSvDCvugPpu5xDny0jzEeuUQbcP1aGT9V90uixngTRLYNEIIZ6yOF1H8tm7rj2JxiefsVy53zGVy3ag5uuPsdufYOzYxLRxngKe7nhx3VAq54pmz/DK9/Q3aDam2Yt3hNXB4HuU87jKNd/CKZn77Qdn5QkXPfqSkhk7hGOXXB+7v09KbBbqdvxGqa0AqfK/atIrL2WXdAgXAJ43Wtwe/aIoacXezeGPMlhDOHDbSfHnaXsL2QzbT82GRwZuezdwcoWzx5pnOnGMUdHuiY7lhdyWzWiHnucLZQxYStMJbtcydHaQ6vtMbe0AcDbxG+QG14AL94xry4297xpy9Cpf1OoxZ740gHDfrK+gtsy0xabwJmfgtCeii79B6aj0SJeLbd7AAAAAElFTkSuQmCC);

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

    padding:60px;

}


.login-card{

    width:100%;
    max-width:430px;

    

}


/* Logo côté connexion */

.login-logo{

    width:150px;

    margin-bottom:25px;

    display:block;

    margin-left:auto;
    margin-right:auto;

}



.login-card h2{

    font-size:34px;

    font-weight:700;

    text-align:center;

    margin-bottom:10px;

}



.login-subtitle{

    color:#6b7280;

    margin-bottom:35px;

    text-align:center;

}



.form-group{

    margin-bottom:20px;

}



.form-group label{

    font-weight:600;

}



.form-control{

    height:52px;

    border-radius:10px;

    border:1px solid #d1d5db;

}



.form-control:focus{

    box-shadow:none;

    border-color:#4f46e5;

}



.btn-login{

    width:100%;

    height:54px;

    border-radius:10px;

    border:none;

    color:white;

    background:#4f46e5;

    font-weight:600;

    transition:.25s;

}



.btn-login:hover{

    background:#4338ca;

    color:white;

}





/**********************
RIGHT COVER
**********************/

.login-cover{

    position:relative;

    width:58%;

    overflow:hidden;

}



.cover-image{

    position:absolute;

    inset:0;

    background-image:url("https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1400&q=80");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.05);

}



/* Overlay */

.cover-overlay{

    position:absolute;

    inset:0;


    display:flex;

    flex-direction:column;


    justify-content:center;

    align-items:center;


    text-align:center;


    padding:80px;


    background:linear-gradient(
        rgba(4,16,83,.82),
        rgba(4,16,83,.82)
    );


    backdrop-filter:blur(2px);


    z-index:2;

}



/* Logo côté couverture */

.cover-logo{

    width:180px;

    margin-bottom:35px;

    opacity:.95;


    display:block;

    margin-left:auto;

    margin-right:auto;

}



.cover-overlay h1{

    color:white;

    font-size:40px;

    font-weight:700;

    text-align:center;

}



.cover-overlay p{

    color:white;

    opacity:.9;

    font-size:18px;

    margin-top:10px;

    text-align:center;

}





/**********************
OTP INPUT
**********************/

.otp-container {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:20px;

    margin-bottom:15px;

}



.otp-input {

    width:45px;

    height:50px;

    border:1px solid #ddd;

    border-radius:8px;


    text-align:center;


    font-size:22px;

    font-weight:600;


    outline:none;


    transition:.2s;

}



.otp-input:focus{

    border-color:#041053;

    box-shadow:0 0 6px rgba(4,16,83,.25);

}



.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button{

    -webkit-appearance:none;

    margin:0;

}





/**********************
RESPONSIVE
**********************/

@media(max-width:991px){


    .login-cover{

        display:none;

    }


    .login-panel{

        width:100%;

        padding:30px;

    }


}

.field input[type="text"]{
	background: transparent !important;
}
.field input[type="password"]{
	background: transparent !important;
}