/* ==========================================================
   AUTH.CSS — Pages de connexion / mot de passe oublié etc.
========================================================== */

html, body{

    height:100%;

}

body{

    background:var(--background);

}

.auth-page{

    min-height:100vh;

    display:flex;

}

/*=====================
VOLET VISUEL (gauche)
======================*/

.auth-visual{

    flex:1 1 50%;

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:48px;

    color:white;

    background:
        linear-gradient(180deg, rgba(16,24,40,.25), rgba(16,24,40,.65)),
        url('../images/login-savons.png') center/cover no-repeat,
        linear-gradient(135deg, var(--primary), #B9784F);

}

.auth-visual-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.auth-visual-brand img{

    width:150px;

    height:auto;

    border-radius:12px;

    background:white;

    padding:8px 12px;

    object-fit:contain;

}

.auth-visual-brand span{

    font-size:19px;

    font-weight:700;

    letter-spacing:.5px;

}

.auth-visual-quote{

    max-width:440px;

}

.auth-visual-quote h2{

    font-size:30px;

    font-weight:700;

    line-height:1.25;

    margin-bottom:12px;

}

.auth-visual-quote p{

    font-size:15px;

    opacity:.9;

    line-height:1.5;

}

/*=====================
VOLET FORMULAIRE (droite)
======================*/

.auth-panel{

    flex:1 1 50%;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px 24px;

    background:var(--white);

}

.auth-card{

    width:100%;

    max-width:380px;

}

.auth-card-logo{

    text-align:center;

    margin-bottom:24px;

}

.auth-card-logo img{

    height:90px;

    object-fit:contain;

}

.auth-card h1{

    font-size:24px;

    font-weight:700;

    color:var(--dark);

    text-align:center;

    margin-bottom:6px;

}

.auth-subtitle{

    font-size:13px;

    color:var(--text-light);

    text-align:center;

    margin-bottom:8px;

}

.auth-link{

    font-size:13px;

    color:var(--primary);

    font-weight:600;

}

.auth-link:hover{

    color:var(--primary-hover);

}

.auth-remember{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    color:var(--text);

}

.auth-remember input[type="checkbox"]{

    width:16px;

    height:16px;

    accent-color:var(--primary);

}

.auth-footer-note{

    text-align:center;

    font-size:12px;

    color:var(--text-light);

    margin-top:28px;

}

/*=====================
RESPONSIVE
======================*/

@media (max-width:991px){

    .auth-visual{

        display:none;

    }

    .auth-panel{

        flex:1 1 100%;

    }

}