/*
 * Page de connexion Oktolink : tout l'essentiel (logo, SSO, formulaire,
 * bouton « Se connecter ») doit tenir dans la hauteur d'un écran, y compris
 * un portable 1366×768. La couleur de marque arrive par --okwp-primary
 * (variable posée par Admin::get_login_style_css, depuis
 * OK_WP_LOGIN_PRIMARY_COLOR).
 *
 * La fenêtre de reconnexion de l'admin (session expirée, petite iframe,
 * body.interim-login) garde la largeur, les marges et le logo natifs de
 * WordPress ; seuls l'ordre des blocs et la carte unique s'y appliquent.
 */

/* --- Page : contenu centré verticalement, jamais rogné ------------------ */
body.login:not(.interim-login) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* Marges auto dans un conteneur flex : centrage vertical quand il y a de la
   place, retour à 0 (et défilement normal) quand le contenu est plus haut
   que l'écran — contrairement à justify-content:center qui rognerait le haut.
   Le padding en % de l'ancienne version se calculait sur la largeur et
   poussait le formulaire sous la ligne de flottaison sur les grands écrans. */
.login #login {
    display: flex;
    flex-direction: column;
}
.login:not(.interim-login) #login {
    margin: auto;
    width: min(360px, calc(100vw - 32px));
    padding: clamp(12px, 3vh, 32px) 0;
}

/* Ordre visuel : logo, notification, puis UNE carte (SSO + formulaire),
   y compris dans la fenêtre de reconnexion de l'admin.
   Dans le HTML, WordPress affiche le bloc SSO (filtre login_message) AVANT
   les notifications : sans réordonner, « Votre déconnexion a bien été
   effectuée » coupait la carte en deux. */
.login #login > h1.wp-login-logo { order: 0; }
.login #login > .notice,
.login #login > .message,
.login #login > #login_error { order: 1; }
.login #login > .okwp-sso-simple,
.login #login > .okwp-sso-card { order: 2; }
.login #login > form { order: 3; }
.login #login > #nav { order: 4; }
.login #login > #backtoblog { order: 5; }
.login #login > .privacy-policy-page-link { order: 6; }

/* --- Logo ----------------------------------------------------------------- */
.login:not(.interim-login) h1.wp-login-logo { margin: 0 0 16px; }

/* --- Notifications : bandeau compact au-dessus de la carte --------------- */
.login #login > .notice,
.login #login > .message,
.login #login > #login_error {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 0;
    border-left: 4px solid var(--okwp-primary, #33a5a6);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.45;
}
.login #login > #login_error,
.login #login > .notice-error {
    border-left-color: #d63638;
}
.login #login > .notice p,
.login #login > .message p { margin: 0; }

/* --- Carte : formulaires de connexion, mot de passe perdu, 2FA ----------- */
.login #login > form {
    margin: 0;
    padding: 20px 24px;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    overflow: visible;
}
.login form p,
.login form .user-pass-wrap { margin-bottom: 12px; }
.login form label { font-size: 13px; line-height: 1.4; margin-bottom: 4px; }
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    /* 16px : en dessous, iOS zoome à la saisie */
    font-size: 16px;
    min-height: 40px;
    padding: 4px 10px;
    margin: 0 0 4px;
    border-radius: 8px;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus,
.login input[type="checkbox"]:focus,
.login select:focus {
    border-color: var(--okwp-primary, #33a5a6);
    box-shadow: 0 0 0 1px var(--okwp-primary, #33a5a6);
    outline: 2px solid transparent;
}
.login input[type="checkbox"] { accent-color: var(--okwp-primary, #33a5a6); }
.login .button.wp-hide-pw,
.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus {
    color: var(--okwp-primary, #33a5a6);
    border-color: transparent;
    box-shadow: none;
}
.login .button.wp-hide-pw { min-height: 40px; height: 40px; }
.login form .forgetmenot { margin-bottom: 0; }
.login form .submit { margin: 0; padding: 0; }
.login.wp-core-ui .button-primary {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 600;
}

/* CAPTCHA Swetrix : marge inline (15px 0) posée par le JS -> !important.
   Sur la page de connexion, la boîte suit la couleur de marque au lieu du
   bleu par défaut (thème clair ; le thème sombre garde ses propres couleurs,
   son sélecteur :has() étant plus spécifique). */
.login .swetrix-captcha-container {
    margin: 4px 0 12px !important;
    --okwp-captcha-accent: var(--okwp-primary, #33a5a6);
    --okwp-captcha-bg: color-mix(in srgb, var(--okwp-primary, #33a5a6) 7%, #fff);
    --okwp-captcha-text: var(--okwp-primary, #33a5a6);
}
.login .swetrix-captcha-container .captcha-instruction { font-size: 12px; margin-bottom: 6px; }

/* --- Liens et pied de page ------------------------------------------------ */
.login #nav,
.login #backtoblog {
    margin: 12px 0 0;
    padding: 0;
    text-align: center;
    font-size: 13px;
}
.login #backtoblog { margin-top: 4px; }
.login .privacy-policy-page-link {
    margin: 12px 0 0;
    text-align: center;
    font-size: 12px;
}
.login .language-switcher {
    margin: 0 auto;
    padding: 0 0 16px;
}
.login #language-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.login #language-switcher label { margin: 0; font-size: 12px; }
.login #language-switcher select { min-height: 30px; font-size: 13px; }
.login #language-switcher .button { min-height: 30px; line-height: 28px; }

/* --- Boutons et liens génériques --------------------------------------- */
.wp-core-ui .button,
.wp-core-ui .button-secondary {
    background: white;
    border-color: #363636;
}
.login a { color: var(--okwp-primary, #33a5a6); }
.login.wp-core-ui .button-primary {
    background-color: var(--okwp-primary, #33a5a6);
    border-color: var(--okwp-primary, #33a5a6);
}
.login.wp-core-ui .button-primary:hover,
.login.wp-core-ui .button-primary:active,
.login.wp-core-ui .button-primary:focus {
    filter: brightness(85%);
}

/* --- Écran split (OK_WP_LOGIN_LAYOUT=split) ---------------------------------
   Panneau de marque (fond, logo, accroche) injecté par Admin::render_login_
   brand_panel juste après <body> : fixé sur la moitié gauche, la page
   (identique au mode classique) est décalée dans la moitié droite. Sous
   900 px, le panneau devient un bandeau en haut. Jamais en fenêtre de
   reconnexion (la classe n'est pas posée en interim-login). */
body.login.okwp-login-split { background: #fff; }
.okwp-login-split .okwp-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 48px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
}
.okwp-login-split .okwp-login-brand-logo { display: block; line-height: 0; }
.okwp-login-split .okwp-login-brand-logo img {
    max-width: min(320px, 70%);
    max-height: 180px;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}
.okwp-login-split .okwp-login-brand-tagline {
    margin: 0;
    max-width: 420px;
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255, 255, 255, .92);
}
/* Le logo est dans le panneau : celui du formulaire ferait doublon. */
.okwp-login-split #login > h1.wp-login-logo { display: none; }
/* Côté formulaire : pas de carte, tout est posé sur le panneau clair. */
.okwp-login-split #login > form,
.okwp-login-split .okwp-sso-simple {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
}
.okwp-login-split #login:has(> .okwp-sso-simple) > #loginform { padding-top: 14px; }
.okwp-login-split #login > form { padding-top: 0; padding-bottom: 0; }
.okwp-login-split #login > .notice,
.okwp-login-split #login > .message,
.okwp-login-split #login > #login_error { background: #f4f4f5; }
.okwp-login-split input[type="text"],
.okwp-login-split input[type="password"],
.okwp-login-split input[type="email"] { border-color: #d4d4d8; }
.okwp-login-split:not(.interim-login) #login { width: min(380px, calc(100% - 48px)); }

@media (min-width: 900px) {
    .okwp-login-split .okwp-login-brand {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 50vw;
    }
    body.login.okwp-login-split { padding-left: 50vw; }
}
@media (max-width: 899px) {
    .okwp-login-split .okwp-login-brand { padding: 28px 24px; gap: 10px; }
    .okwp-login-split .okwp-login-brand-logo img { max-height: 64px; max-width: 60%; }
    .okwp-login-split .okwp-login-brand-tagline { font-size: 15px; }
    .login.okwp-login-split:not(.interim-login) #login { margin: 0 auto; padding-top: 24px; }
}

/* --- Mode sombre (préférence du système) ------------------------------------
   Le fond de marque et le logo ne changent pas ; la carte, les champs, les
   notifications et les encadrés passent en sombre. Le CAPTCHA suit aussi
   (data-theme="auto" sur wp-login.php, cf. SwetrixAnalytics). */
@media (prefers-color-scheme: dark) {
    .login #login > form,
    .login .okwp-sso-simple,
    .login #login > .notice,
    .login #login > .message,
    .login #login > #login_error {
        background: #18181b;
        color: #e4e4e7;
    }
    .login form label,
    .login form .forgetmenot label,
    .login #login > .notice p,
    .login #login > .message p { color: #e4e4e7; }
    .login input[type="text"],
    .login input[type="password"],
    .login input[type="email"] {
        background: #27272a;
        border-color: #3f3f46;
        color: #fafafa;
    }
    .login input[type="checkbox"] { background: #27272a; border-color: #52525b; }
    body.login.okwp-login-split { background: #111113; }
    .okwp-login-split #login > form,
    .okwp-login-split .okwp-sso-simple { background: transparent; }
    .okwp-login-split #login > .notice,
    .okwp-login-split #login > .message,
    .okwp-login-split #login > #login_error { background: #1c1c1f; }
    .okwp-login-split input[type="text"],
    .okwp-login-split input[type="password"],
    .okwp-login-split input[type="email"] { border-color: #3f3f46; }
    .login .okwp-sso-divider { color: #a1a1aa; }
    .login .okwp-sso-divider::before,
    .login .okwp-sso-divider::after { background: #3f3f46; }
    .login .okwp-sso-error {
        background: rgba(220, 38, 38, .12);
        border-color: rgba(248, 113, 113, .35);
        color: #fecaca;
    }
    .login .okwp-sso-error-title { color: #fca5a5; }
    .login .okwp-sso-error svg { color: #f87171; }
    .login .wp-tooltip__toggle .dashicons,
    .login .forgetmenot .dashicons { color: #a1a1aa; }
    /* Lien interne à la carte (ex. « Afficher le mot de passe ») */
    .login #login > form a { color: color-mix(in srgb, var(--okwp-primary, #33a5a6) 70%, #fff); }
    /* CAPTCHA en thème sombre : couleur de marque plutôt que le bleu par
       défaut (sélecteur plus spécifique que celui de SwetrixAnalytics). */
    .login .swetrix-captcha-container:has(.swecaptcha[data-theme="auto"]) {
        --okwp-captcha-accent: var(--okwp-primary, #33a5a6);
        --okwp-captcha-bg: color-mix(in srgb, var(--okwp-primary, #33a5a6) 14%, transparent);
        --okwp-captcha-text: color-mix(in srgb, var(--okwp-primary, #33a5a6) 70%, #fff);
    }
}

.column-featured_image img { width: 150px; }