/*
 * Structure fixe du layout split-screen.
 * Les couleurs/images dynamiques sont injectées en inline via wp_add_inline_style
 * (voir class-mlp-login-hooks.php) pour rester dans le même fichier de style
 * et éviter une requête HTTP supplémentaire.
 */
body.login {
    background: none;
    min-height: 100vh;
    overflow: hidden; /* empêche le scroll de toute la page */
}

.mlp-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    z-index: 1;
}

.mlp-panel-text {
    position: relative;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    max-width: 400px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.mlp-panel-text h1 {
    font-size: 2rem;
    margin-bottom: 12px;
}

.mlp-logo {
    position: fixed;
    top: 30px;
    left: 50%;
    width: 50%;
    text-align: center;
    z-index: 3;
}

.mlp-logo {
    position: fixed;
    top: 25px;
    left: 50%;
    width: 50%;
    text-align: center;
    z-index: 3;
}

.mlp-logo img {
    width: auto;
    height: auto;
    object-fit: contain;
    /* max-width et max-height sont injectés dynamiquement via wp_add_inline_style
       en fonction des réglages logo_max_width / logo_max_height */
}

#login {
    position: relative;
    margin-left: 50%;
    width: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* garde ce qu'on avait mis pour l'espace du logo */
    align-items: center;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    padding: 40px;
    padding-bottom: 60px; /* réserve l'espace du copyright en bas */
    z-index: 2;
}

#login_error {
    position: relative;
    z-index: 4; /* Au-dessus du logo (z-index: 3) */
}

#loginform {
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 350px;
}

body.login #language-switcher,
body.login #backtoblog,
body.login .privacy-policy-page-link,
body.login .mlp-copyright {
    position: fixed;
    left: 50%;
    width: 50%;
    text-align: center;
    margin: 0;
    z-index: 3;
}

body.login #backtoblog {
    bottom: 55px;
}

body.login .mlp-copyright {
    bottom: 20px;
}

body.login #language-switcher {
    bottom: 90px;
}

@media (max-width: 768px) {
    .mlp-panel {
        position: relative;
        width: 100%;
        height: 30vh;
        padding: 20px;
    }

    .mlp-logo {
        position: relative;
        left: 0;
        width: 100%;
        top: 0;
        margin-bottom: 10px;
    }

    #login {
        margin-left: 0;
        width: 100%;
        min-height: 70vh;
    }

    .mlp-panel-text h1 {
        font-size: 1.4rem;
    }

    body.login #language-switcher,
    body.login #backtoblog,
    body.login .privacy-policy-page-link,
    body.login .mlp-copyright {
        position: relative;
        left: 0;
        width: 100%;
        bottom: 0;
        margin-top: 10px;
    }
}

/* CSS de l'encart miniature */ 

.mlp-preview-container {
    margin-top: 30px;
    max-width: 500px;
}

.mlp-preview-box {
    display: flex;
    flex-wrap: nowrap;
    border: 1px solid #ccd0d4;
    border-radius: 6px;
    overflow: hidden;
    height: 280px;
    width: 100%;
    box-sizing: border-box;
}

.mlp-preview-panel {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1e1e2f;
    background-size: cover;
    background-position: center;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
}

.mlp-preview-text {
    color: #fff;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
}

.mlp-preview-text h3 { font-size: 0.9rem; margin: 0 0 4px; }
.mlp-preview-text p { font-size: 0.7rem; margin: 0; opacity: 0.85; }

.mlp-preview-form {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* ▼▼▼ Règle critique manquante : contraint la taille RÉELLE du logo uploadé ▼▼▼ */
.mlp-preview-logo {
    max-width: 70%;
    max-height: 40px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mlp-preview-logo img {
    max-width: 100%;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* ▲▲▲ Fin de la règle critique ▲▲▲ */

.mlp-preview-input {
    width: 80%;
    height: 18px;
    border-radius: 3px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.mlp-preview-button {
    width: 80%;
    height: 22px;
    background: #2271b1;
    border-radius: 3px;
    margin-top: 5px;
    flex-shrink: 0;
}

.mlp-preview-copyright {
    font-size: 0.6rem;
    opacity: 0.6;
    position: absolute;
    bottom: 8px;
}

/* thème video */
.mlp-panel-video {
    overflow: hidden; /* empêche la vidéo de dépasser les bords du panneau fixe */
}

.mlp-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.mlp-panel-text {
    position: relative;
    z-index: 1; /* garde le texte visible au-dessus de la vidéo */
}

.mlp-panel {
    background-size: cover;
    background-position: center top;
}

.login .language-switcher {
    display: none !important;
}