/* ============================================================
   STUDIO — Page de connexion (login.css)
   Migré depuis le snippet "STUDIO Login Page" le 13/09/2026 (Lot 1, étape 2)
   Chargé UNIQUEMENT sur wp-login.php (voir le snippet)
   v2 — 14/09/2026 (P46, D30) : polices alignées sur le reste du site
        (Fredoka pour le titre, Karla pour le texte), hébergées en local
        dans le thème enfant — plus de chargement depuis Google Fonts.
   ============================================================ */

/* ── POLICES LOCALES (mêmes fichiers que style.css) ── */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/fredoka-v17-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/karla-v33-latin-regular.woff2') format('woff2');
}


        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        /* ── IMAGE FOND ── */
        html { height: 100%; }

        body.login {
            min-height: 100vh;
            /* L'image de fond est posée par une petite règle CSS injectée à part (voir le snippet) */
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            background-color: #111 !important;
            font-family: 'Karla', sans-serif;
            font-weight: 300;
            padding: 0 !important;
            margin: 0 !important;
        }

        body.login::before {
            content: '';
            position: fixed;
            inset: 0;
            background: linear-gradient(
                to right,
                rgba(0,0,0,0.05) 0%,
                rgba(0,0,0,0.55) 45%,
                rgba(0,0,0,0.78) 100%
            );
            z-index: 0;
            pointer-events: none;
        }

        /* ── CARD FIXE À DROITE ── */
        #login {
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: auto !important;
            width: 340px !important;
            max-width: 340px !important;
            min-height: 100vh !important;
            height: 100vh !important;
            margin: 0 !important;
            padding: 80px 40px 40px !important;
            background: #111111 !important;
            border-left: 0.5px solid rgba(255,255,255,0.08) !important;
            z-index: 100 !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
            overflow-y: auto !important;
        }

        #login::after {
            content: 'studio.artduson.nc';
            position: absolute;
            bottom: 24px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 11px;
            color: #333;
            letter-spacing: 0.06em;
            font-weight: 300;
        }

        /* ── LOGO ── */
        #login h1 {
            margin: 0 0 32px !important;
            padding: 0 !important;
            text-align: left !important;
        }

        /* Lien = flex row : image logo | textes */
        #login h1 a {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 12px !important;
            text-decoration: none !important;
            background: none !important;
            width: auto !important;
            height: auto !important;
            padding: 0 !important;
            text-indent: 0 !important;
            text-shadow: none !important;
            outline: none !important;
        }

        /* Image logo à gauche */
        #login h1 a::before {
            content: '' !important;
            display: block !important;
            width: 62px !important;
            height: 62px !important;
            min-width: 62px !important;
            background-image: url('/studio-content/images/logo.png') !important;
            background-size: contain !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            flex-shrink: 0 !important;
        }

        /* Bloc texte à droite */
        #login h1 a span.login-title-text {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
        }

        #login h1 a span.login-title-name {
            font-family: 'Fredoka', sans-serif !important;
            font-size: 24px !important;
            font-weight: 600 !important;
            color: #f0f0f0 !important;
            letter-spacing: 0.01em !important;
            line-height: 1.2 !important;
            display: block !important;
        }

        #login h1 a span.login-title-sub {
            font-family: 'Karla', sans-serif !important;
            font-size: 11px !important;
            font-weight: 300 !important;
            color: #666 !important;
            letter-spacing: 0.14em !important;
            margin-top: 3px !important;
            display: block !important;
        }

        /* Masquer le ::after (remplacé par spans) */
        #login h1 a::after { display: none !important; }

        /* ── FORM ── */
        #loginform {
            padding: 0 !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            margin: 0 !important;
            width: 100% !important;
        }

        /* ── LABELS ── */
        #loginform > label,
        #loginform .login-username > label,
        #loginform .login-password > label,
        .login label {
            font-family: 'Karla', sans-serif !important;
            font-size: 11px !important;
            font-weight: 400 !important;
            color: #888 !important;
            letter-spacing: 0.08em !important;
            text-transform: uppercase !important;
            display: block !important;
            margin-bottom: 6px !important;
            cursor: default !important;
        }

        /* ── INPUTS ── */
        #loginform input[type="text"],
        #loginform input[type="password"],
        input#user_login,
        input#user_pass {
            display: block !important;
            width: 100% !important;
            background: #1c1c1c !important;
            background-color: #1c1c1c !important;
            border: 0.5px solid rgba(255,255,255,0.18) !important;
            border-radius: 4px !important;
            padding: 10px 13px !important;
            color: #f0f0f0 !important;
            -webkit-text-fill-color: #f0f0f0 !important;
            font-family: 'Karla', sans-serif !important;
            font-size: 14px !important;
            font-weight: 300 !important;
            margin-bottom: 18px !important;
            margin-top: 0 !important;
            outline: none !important;
            box-shadow: none !important;
            -webkit-appearance: none !important;
            height: 40px !important;
            line-height: 40px !important;
        }

        input#user_login:focus,
        input#user_pass:focus {
            border-color: rgba(250,37,94,0.6) !important;
            box-shadow: none !important;
            outline: none !important;
        }

        /* Autofill Firefox + Chrome + Android */
        input#user_login:-webkit-autofill,
        input#user_pass:-webkit-autofill,
        input#user_login:-webkit-autofill:focus,
        input#user_pass:-webkit-autofill:focus,
        input#user_login:-webkit-autofill:hover,
        input#user_pass:-webkit-autofill:hover,
        input#user_login:-webkit-autofill:active,
        input#user_pass:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 100px #1c1c1c inset !important;
            box-shadow: 0 0 0 100px #1c1c1c inset !important;
            -webkit-text-fill-color: #f0f0f0 !important;
            caret-color: #f0f0f0 !important;
            background-color: #1c1c1c !important;
            color: #f0f0f0 !important;
            filter: none !important;
        }

        /* Firefox mobile autofill */
        input#user_login:autofill,
        input#user_pass:autofill {
            background-color: #1c1c1c !important;
            color: #f0f0f0 !important;
            -webkit-text-fill-color: #f0f0f0 !important;
            filter: none !important;
        }

        /* Wrapper mot de passe (icône œil) */
        .login .wp-pwd {
            position: relative !important;
            margin-bottom: 0 !important;
        }

        .login .wp-pwd input#user_pass {
            margin-bottom: 0 !important;
            padding-right: 40px !important;
        }

        /* Icône œil */
        .login button.wp-hide-pw {
            position: absolute !important;
            right: 10px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            background: transparent !important;
            border: none !important;
            color: #555 !important;
            box-shadow: none !important;
            padding: 0 !important;
            cursor: pointer !important;
        }

        .login button.wp-hide-pw:hover { color: #888 !important; }
        .login button.wp-hide-pw .dashicons { color: inherit !important; }

        /* Espace sous le champ password */
        .login-password {
            margin-bottom: 18px !important;
        }

        /* ── CHECKBOX "SE SOUVENIR" — CSS pur via label::before ── */
        .login .forgetmenot {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            margin: 14px 0 16px !important;
            padding: 0 0 0 4px !important;
            line-height: 1 !important;
        }

        /* Masquer la checkbox native */
        .login .forgetmenot input[type="checkbox"] {
            position: absolute !important;
            opacity: 0 !important;
            width: 1px !important;
            height: 1px !important;
            pointer-events: none !important;
            margin: 0 !important;
        }

        /* Le label devient le seul élément cliquable */
        .login .forgetmenot label {
            font-family: 'Karla', sans-serif !important;
            font-size: 13px !important;
            font-weight: 300 !important;
            color: #666 !important;
            letter-spacing: 0.02em !important;
            text-transform: none !important;
            margin: 0 !important;
            padding: 0 0 0 27px !important;
            line-height: 17px !important;
            cursor: pointer !important;
            display: block !important;
            position: relative !important;
            user-select: none !important;
        }

        /* Carré custom via label::before */
        .login .forgetmenot label::before {
            content: '' !important;
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            width: 17px !important;
            height: 17px !important;
            background: #1c1c1c !important;
            border: 1px solid rgba(255,255,255,0.30) !important;
            border-radius: 3px !important;
            box-sizing: border-box !important;
        }

        /* Checkmark via label::after — caché par défaut */
        .login .forgetmenot label::after {
            content: '' !important;
            position: absolute !important;
            left: 5px !important;
            top: 2px !important;
            width: 5px !important;
            height: 9px !important;
            border: 2px solid #fff !important;
            border-top: none !important;
            border-left: none !important;
            transform: rotate(45deg) !important;
            display: none !important;
        }

        /* Coché : fond rose + checkmark visible */
        .login .forgetmenot input[type="checkbox"]:checked + label::before {
            background: #fa255e !important;
            border-color: #fa255e !important;
        }

        .login .forgetmenot input[type="checkbox"]:checked + label::after {
            display: block !important;
        }

        /* ── SUBMIT ── */
        .login .submit {
            padding: 0 !important;
            margin: 0 !important;
        }

        #wp-submit,
        .login .button-primary,
        .login input[type="submit"] {
            width: 100% !important;
            background: #fa255e !important;
            background-color: #fa255e !important;
            border: none !important;
            border-radius: 4px !important;
            padding: 0 !important;
            height: 42px !important;
            line-height: 42px !important;
            color: #fff !important;
            -webkit-text-fill-color: #fff !important;
            font-family: 'Karla', sans-serif !important;
            font-size: 14px !important;
            font-weight: 400 !important;
            letter-spacing: 0.04em !important;
            cursor: pointer !important;
            box-shadow: none !important;
            text-shadow: none !important;
            float: none !important;
            display: block !important;
            margin: 0 !important;
            -webkit-appearance: none !important;
        }

        #wp-submit:hover,
        .login input[type="submit"]:hover {
            background: #ff4d76 !important;
            background-color: #ff4d76 !important;
        }

        /* DuckDuckGo / WebKit mobile */
        .login input[type="submit"] {
            -webkit-appearance: none !important;
            appearance: none !important;
            border-radius: 4px !important;
            background: #fa255e !important;
            background-color: #fa255e !important;
            color: #fff !important;
            -webkit-text-fill-color: #fff !important;
            width: 100% !important;
            border: none !important;
            padding: 0 !important;
            height: 42px !important;
            font-family: 'Karla', sans-serif !important;
            font-size: 14px !important;
            font-weight: 400 !important;
            letter-spacing: 0.04em !important;
            display: block !important;
            float: none !important;
            box-shadow: none !important;
            text-shadow: none !important;
            cursor: pointer !important;
        }

        /* ── MASQUÉS ── */
        #nav, .login #nav,
        #backtoblog, .login #backtoblog,
        .login #login_footer,
        .privacy-policy-page-link,
        form#loginlangform,
        #loginlangform,
        .language-switcher,
        #language-switcher,
        .login-language-switcher { display: none !important; }

        /* ── ERREURS ── */
        #login_error,
        .login .message,
        .login .success {
            background: rgba(250,37,94,0.08) !important;
            border-left: 2px solid #fa255e !important;
            border-radius: 4px !important;
            color: #ccc !important;
            font-size: 13px !important;
            font-weight: 300 !important;
            padding: 10px 14px !important;
            margin-bottom: 16px !important;
            box-shadow: none !important;
        }

        /* ── RESPONSIVE ── */
        @media screen and (max-width: 860px) {
            #login { width: 300px !important; padding: 60px 28px 40px !important; }
        }

        @media screen and (max-width: 600px) {
            #login {
                position: relative !important;
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                min-height: 100vh !important;
                border-left: none !important;
                padding: 60px 24px 40px !important;
                background: rgba(17,17,17,0.72) !important;
            }
            body.login::before {
                background: rgba(0,0,0,0.45) !important;
            }
            /* Logo plus petit sur mobile pour éviter le wrap du titre */
            #login h1 a::before {
                width: 44px !important;
                height: 44px !important;
                min-width: 44px !important;
            }
            #login h1 a span.login-title-name {
                font-size: 20px !important;
            }
        }