/* ========================================
   DESIGN FINAL CORRIGÉ : FORMULAIRE FLOTTANT SUR L'IMAGE
   ======================================== */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
}

/* Le fond de la page est blanc (pour les 25% à droite) */
.login {
    background: #ffffff !important;
    height: 100vh !important;
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
}

/* L'IMAGE : Elle occupe 75% de la largeur */
.login .sidebar-l {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 75% !important;
    height: 100vh !important;
    z-index: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: url(../images/connection_logo.jpeg) no-repeat center !important;
    background-size: cover !important;
    display: block !important;
    border: none !important;
}

/* On vide le contenu de la sidebar pour ne garder que le fond */
.login .sidebar-l * {
    display: none !important;
}

/* Copyright en bas à gauche SUR L'IMAGE */
.login .sidebar-l::after {
    content: "Copyright © 2026 Tous droits réservés.";
    position: absolute;
    bottom: 30px;
    left: 40px;
    color: #ffffff;
    font-size: 0.85rem;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    display: block !important;
}

/* LE CONTENEUR DU FORMULAIRE : Doit être AU-DESSUS (z-index élevé) */
.login .main-body {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100 !important;
    /* Force le passage au-dessus de l'image */
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    pointer-events: none;
    /* Ne bloque pas l'image */
}

/* La colonne du formulaire : Positionnée à cheval sur la ligne des 75% */
.login .col-right {
    position: absolute !important;
    left: 75% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 380px !important;
    /* Réduit de 440px à 380px */
    max-width: 90vw !important;
    z-index: 101 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: all;
}

/* LA CARTE BLANCHE (Le Formulaire) */
.login-panel {
    background: #ffffff !important;
    width: 100% !important;
    padding: 30px 25px !important;
    /* Padding réduit */
    border-radius: 15px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border: none !important;
}

/* --- Styles internes --- */
.login-panel .logo-container {
    margin-bottom: 10px;
}

/* Logo Unstim */
.login-panel .logo-alt-1 {
    background: url(../images/UNESTIM.webp) no-repeat center !important;
    background-size: contain !important;
    width: 80px !important;
    /* Réduit de 100px à 80px */
    height: 80px !important;
    display: block !important;
    margin: 0 auto 5px auto !important;
}

.login-panel h1 {
    color: #1e2d3d !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    /* Réduit de 2.4rem à 1.8rem */
    margin: 0 0 2px 0 !important;
    text-align: center !important;
    letter-spacing: -0.5px;
}

.login-panel .subtitle {
    color: #1e2d3d !important;
    font-size: 0.85rem !important;
    margin-bottom: 25px !important;
    display: block !important;
    text-align: center !important;
}

/* Formulaire et champs */
.login-panel .login-content-form {
    width: 100% !important;
}

.login-panel .form-group {
    margin-bottom: 12px !important;
    width: 100% !important;
}

.login-panel .input-with-icon {
    position: relative !important;
    width: 100% !important;
}

.login-panel .input-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #1e2d3d !important;
    font-size: 0.9rem !important;
    z-index: 10 !important;
}

.login-panel .form-control {
    border-radius: 25px !important;
    border: 1px solid #dee2e6 !important;
    padding: 8px 15px 8px 45px !important;
    height: 42px !important;
    /* Réduit de 52px à 42px */
    background-color: #f8fafc !important;
    width: 100% !important;
    font-size: 0.9rem !important;
}

.login-panel .form-control:focus {
    border-color: #1e2d3d !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(30, 45, 61, 0.1) !important;
    outline: none !important;
}

/* Boutons */
.login-panel .btn-primary {
    background: #1e2d3d !important;
    border: none !important;
    border-radius: 25px !important;
    width: 100% !important;
    height: 42px !important;
    /* Réduit de 52px à 42px */
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: 0 5px 15px rgba(30, 45, 61, 0.2) !important;
    margin-top: 15px !important;
}

.login-panel .forgot-password {
    text-align: right !important;
    width: 100% !important;
    margin: 8px 0 15px 0 !important;
}

.login-panel .forgot-password a {
    color: #1e2d3d !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
}

.login-panel .back-home {
    margin-top: 15px !important;
}

.login-panel .back-home a {
    color: #1e2d3d !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
}

/* On masque le copyright dans la carte */
.login-panel .copyright {
    display: none !important;
}

/* Responsive portable */
@media (max-width: 900px) {
    .login .sidebar-l {
        width: 100% !important;
        opacity: 0.3 !important;
    }

    .login .col-right {
        left: 50% !important;
        width: 90% !important;
        max-width: 380px !important;
    }
}