@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('variables.css');

.login-container{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:radial-gradient(circle at 15% 15%,rgba(18,175,231,.16),transparent 34%),linear-gradient(135deg,#f7fbff 0%,#eef3fb 100%);
}

.login-card{
    width:400px;
    background:var(--white);
    padding:30px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.login-card h1,
.login-card h2{
    text-align:center;
    margin-bottom:10px;
}

.login-card p{
    text-align:center;
    color:var(--text-light);
    margin-bottom:25px;
}

/* =========================
   BOUTON CONNEXION
========================= */

.btn-login{
    width:100%;
    height:50px;

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

    background:var(--primary-color);
    color:var(--white);

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:all .3s ease;
}

.btn-login:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.btn-login:active{
    transform:translateY(0);
}

.btn-login i{
    margin-right:8px;
}

.login-card{
    width:420px;
    background:var(--white);

    padding:40px;

    border-radius:16px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

    border:1px solid #e1e8f2;
    position:relative;
    overflow:hidden;
}
.login-card::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--primary-dark),var(--accent-color))}


.register-card{
    width:620px;
    max-width:95%;
}

.form-step{
    display:none;
}

.form-step.active{
    display:block;
}

.form-step h3{
    margin-bottom:20px;
}

.auth-link{
    color:var(--primary-color);
    font-weight:600;
}

.step-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}

.step-actions .btn-login,
.step-actions .btn,
.step-actions .btn-secondary{
    width:100%;
}

.btn-secondary{
    background:#e9ecef;
    color:#495057;
    border:none;
}

.btn-secondary:hover{
    background:#dde2e6;
}
.login-container{padding:32px 16px}.login-card{max-width:100%}.register-card{width:680px}
.login-logo img{max-height:95px;object-fit:contain}.login-card h2{font-size:26px}.login-card>p{line-height:1.6}
.form-step{display:block;margin-bottom:28px}.next-step,.prev-step{display:none}
.registration-ready .form-step{display:none}.registration-ready .form-step.active{display:block}.registration-ready .next-step,.registration-ready .prev-step{display:block}
.step-progress{font-size:14px;font-weight:700;color:var(--primary-color)!important;text-align:left!important;border-bottom:1px solid var(--border-color);padding-bottom:16px}
@media(max-width:600px){.login-container{padding:20px 12px}.login-card{padding:24px 20px}.login-card h2{font-size:24px}}