/* ==========================================================
   AUTH.CSS
   Partagé uniquement par connexion.html et inscription.html.
   ========================================================== */

.auth{

    margin-top:var(--header-height, 84px);

    min-height:100vh;

    display:flex;

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

    padding:40px;

    background:#f8fafc;

}

.auth-container{

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

    background:white;

    border-radius:30px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.auth-image{

    background:linear-gradient(135deg,var(--primary),var(--primary-dark));

    display:flex;

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

    padding:50px;

}

.auth-image img{

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

}

.auth-form{

    padding:70px;

}

.auth-form h2{

    font-size:2.5rem;

    margin-bottom:15px;

}

.auth-form p{

    color:#64748B;

    margin-bottom:35px;

}

.input-group{

    margin-bottom:25px;

}

.input-group label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

}

.input-group input{

    width:100%;

    padding:18px;

    border:1px solid #e2e8f0;

    border-radius:14px;

    outline:none;

    transition:border-color .2s, box-shadow .2s;

}

.input-group input:focus,
.input-group select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(20,92,61,.12);

}

.password-box{

    position:relative;

}

.password-box i{

    position:absolute;

    right:20px;
    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

}

.login-btn{

    width:100%;

    padding:18px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:white;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.login-btn:hover{

    transform:translateY(-4px);

}

.auth-separator{

    display:flex;

    align-items:center;

    gap:15px;

    margin:25px 0;

    color:#94A3B8;

    font-size:14px;

}

.auth-separator::before,
.auth-separator::after{

    content:"";

    flex:1;

    height:1px;

    background:#e2e8f0;

}

.btn-google{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    padding:16px;

    border:1px solid #e2e8f0;

    border-radius:14px;

    background:white;

    color:#1F2937;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.btn-google:hover{

    border-color:var(--primary);

    background:var(--primary-light);

}

.btn-google i{

    font-size:20px;

}

.auth-message{

    text-align:center;

    padding:20px 0;

    color:#64748B;

}

.input-group select{

    width:100%;
    padding:18px;

    border:1px solid #e2e8f0;

    border-radius:14px;

    outline:none;

}

@media(max-width:800px){

    .auth{

        padding:20px;

    }

    .auth-container{

        grid-template-columns:1fr;

    }

    .auth-image{

        display:none;

    }

    .auth-form{

        padding:40px 30px;

    }

    .auth-form h2{

        font-size:2rem;

    }

}