/**
 * FNH - Custom Login Page Styles
 * Stylise wp-login.php avec l'identité visuelle FNH
 *
 * @version 3.1.1
 * @usage Uploader dans wp-content/themes/enfold_child/assets/css/
 */

/* ==============================
   VARIABLES CSS (FNH BRANDING)
   ============================== */
:root {
    --fnh-primary: #FFB500;
    --fnh-primary-dark: #e6a200;
    --fnh-primary-light: #ffc533;
    --fnh-primary-lightest: #fff4d9;
    --fnh-success: #10b981;
    --fnh-error: #ef4444;
    --fnh-error-bg: #fef2f2;
    --fnh-error-text: #991b1b;
    --fnh-warning-bg: #fffbeb;
    --fnh-warning-text: #92400e;
    --fnh-info-bg: #eff6ff;
    --fnh-info-text: #1e40af;
    --fnh-gray-50: #f9fafb;
    --fnh-gray-100: #f3f4f6;
    --fnh-gray-200: #e5e7eb;
    --fnh-gray-300: #d1d5db;
    --fnh-gray-600: #4b5563;
    --fnh-gray-700: #374151;
    --fnh-gray-900: #111827;
    --fnh-border-radius: 12px;
    --fnh-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
    --fnh-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==============================
   BODY & BACKGROUND
   ============================== */
body.login {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ==============================
   CONTENEUR PRINCIPAL
   ============================== */
#login {
    width: 480px !important;
    max-width: 90% !important;
    padding: 2rem 0 !important;
    margin: 5vh auto !important;
    position: relative !important;
}

/* SOLUTION DOUBLE CARD : Créer un wrapper visuel unique */
/* Appliquer le background blanc au conteneur parent pour unifier tout */
.login #login {
    background: transparent !important;
}

/* Wrapper pour créer une seule card visuelle qui englobe TOUT (logo inclus) */
.login #login::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; /* Commence dès le début pour inclure le logo */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #ffffff !important;
    border-radius: var(--fnh-border-radius) !important;
    box-shadow: var(--fnh-shadow-lg) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Réinitialiser les wrappers LoginPress et autres plugins */
.login .login-container,
.login .loginpress-login-form,
.login .loginpress-container,
.login .header-wrapper,
.login .footer-wrapper,
.login form > div[style],
.login #login > div:not(#loginform):not(#lostpasswordform):not(#resetpassform) {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: auto !important;
}

/* ==============================
   LOGO
   ============================== */
.login h1 {
    margin-bottom: 2rem !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 0 2.5rem !important;
}

.login h1 a {
    background-image: url('../../images/logo-fnh.svg') !important;
    background-size: contain !important;
    width: 180px !important;
    height: 80px !important;
    margin: 0 auto !important;
    display: block !important;
    background-position: center !important;
}

/* ==============================
   MESSAGES D'ERREUR, INFO ET SUCCÈS - DANS LA CARD
   ============================== */
/* Positionnement DANS la card avec z-index et !important partout */
.login #login_error,
.login .error,
.login .message,
.login .success,
.login .notice,
.login .info,
.login div.updated {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 2.5rem 1.5rem 2.5rem !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: var(--fnh-border-radius) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    border: none !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    display: block !important;
    animation: slideDown 0.3s ease-out !important;
    text-align: center !important;
}

/* Messages d'erreur - Rouge avec icône ❌ */
.login #login_error,
.login .error {
    background: var(--fnh-error-bg) !important;
    color: var(--fnh-error-text) !important;
    border-left: 4px solid var(--fnh-error) !important;
}

.login #login_error::before,
.login .error::before {
    content: '❌ ' !important;
    display: inline !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    margin-right: 0.5rem !important;
}

/* Messages de succès - Vert avec icône ✓ */
.login .message,
.login .success,
.login div.updated {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-left: 4px solid var(--fnh-success) !important;
}

.login .message::before,
.login .success::before,
.login div.updated::before {
    content: '✓ ' !important;
    display: inline !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: var(--fnh-success) !important;
    margin-right: 0.5rem !important;
}

/* Messages d'info/warning - Jaune FNH avec icône ℹ️ */
.login .notice,
.login .info {
    background: var(--fnh-warning-bg) !important;
    color: var(--fnh-warning-text) !important;
    border-left: 4px solid var(--fnh-primary) !important;
}

.login .notice::before,
.login .info::before {
    content: 'ℹ️ ' !important;
    display: inline !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    margin-right: 0.5rem !important;
}

/* Styling des liens dans les messages */
.login #login_error a,
.login .error a,
.login .message a,
.login .success a,
.login .notice a,
.login .info a {
    color: inherit !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.login #login_error a:hover,
.login .error a:hover,
.login .message a:hover,
.login .success a:hover,
.login .notice a:hover,
.login .info a:hover {
    opacity: 0.8 !important;
}

/* Strong/Bold dans les messages */
.login #login_error strong,
.login .error strong,
.login .message strong,
.login .success strong,
.login .notice strong,
.login .info strong {
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
}

/* Animation d'apparition des messages */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Override LoginPress et autres plugins - FORCE */
.login #login_error[style],
.login .error[style],
.login .message[style],
.login .notice[style] {
    position: relative !important;
    margin: 0 2.5rem 1.5rem 2.5rem !important;
    padding: 1.25rem 1.5rem !important;
    width: auto !important;
    max-width: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    clear: both !important;
    text-align: center !important;
}

/* ==============================
   FORMULAIRE CARD
   ============================== */
#loginform,
#lostpasswordform,
#resetpassform {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 2.5rem !important;
    border: none !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ==============================
   LABELS
   ============================== */
.login label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--fnh-gray-700) !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

/* ==============================
   INPUTS
   ============================== */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    width: 100% !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 1rem !important;
    color: var(--fnh-gray-900) !important;
    background: #fff !important;
    border: 1px solid var(--fnh-gray-300) !important;
    border-radius: var(--fnh-border-radius) !important;
    transition: var(--fnh-transition) !important;
    outline: none !important;
    box-shadow: none !important;
    margin-top: 0.25rem !important;
    margin-bottom: 1rem !important;
    box-sizing: border-box !important;
    height: auto !important;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: var(--fnh-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 181, 0, 0.1) !important;
}

/* ==============================
   BOUTON SUBMIT
   ============================== */
.login .button-primary {
    width: 100% !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    background: var(--fnh-primary) !important;
    background-color: #FFB500 !important;
    color: #000 !important;
    border: 2px solid var(--fnh-primary) !important;
    border-color: #FFB500 !important;
    border-radius: var(--fnh-border-radius) !important;
    cursor: pointer !important;
    transition: var(--fnh-transition) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    margin-top: 1rem !important;
    height: auto !important;
}

.login .button-primary:hover,
.login .button-primary:focus {
    background: var(--fnh-primary-dark) !important;
    background-color: #e6a200 !important;
    border-color: var(--fnh-primary-dark) !important;
    border-color: #e6a200 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
    color: #000 !important;
}

.login .button-primary:active {
    transform: translateY(0) !important;
}

/* ==============================
   CHECKBOX "SE SOUVENIR DE MOI"
   ============================== */
.login .forgetmenot {
    margin-bottom: 1rem !important;
}

/* Masquer la checkbox native pour créer une checkbox personnalisée */
.login input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    border: 2px solid var(--fnh-primary) !important;
    background: #fff !important;
    cursor: pointer !important;
    margin-right: 0.5rem !important;
    position: relative !important;
    transition: var(--fnh-transition) !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Forcer la suppression de toute checkbox native en arrière-plan */
.login input[type="checkbox"]::before {
    display: none !important;
}

.login input[type="checkbox"]::-webkit-inner-spin-button,
.login input[type="checkbox"]::-webkit-outer-spin-button {
    display: none !important;
}

/* État hover de la checkbox */
.login input[type="checkbox"]:hover {
    border-color: var(--fnh-primary-dark) !important;
    background: var(--fnh-primary-lightest) !important;
}

/* Checkmark quand coché */
.login input[type="checkbox"]:checked {
    background: var(--fnh-primary) !important;
    border-color: var(--fnh-primary) !important;
}

.login input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 4px !important;
    height: 8px !important;
    border: solid #000 !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    display: block !important;
}

/* Focus state pour accessibilité */
.login input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 181, 0, 0.2) !important;
}

.login .forgetmenot label {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--fnh-gray-700) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ==============================
   LIENS - INTÉGRÉS DANS LA CARD UNIQUE
   ============================== */
/* Container pour les liens dans la card */
.login #nav,
.login #backtoblog {
    text-align: center !important;
    margin: 0 !important;
    padding: 1rem 2.5rem !important;
    border-top: 1px solid var(--fnh-gray-200) !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 1 !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Premier lien avec plus d'espace en haut */
.login #nav {
    padding-top: 1.5rem !important;
    margin-top: 0.5rem !important;
}

/* Deuxième lien sans bordure supplémentaire */
.login #backtoblog {
    border-top: none !important;
    padding-top: 0.75rem !important;
    padding-bottom: 1.5rem !important;
}

/* Styling des liens */
.login #nav a,
.login #backtoblog a {
    font-size: 0.875rem !important;
    color: var(--fnh-primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.2s !important;
    display: inline-block !important;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: var(--fnh-primary-dark) !important;
    text-decoration: underline !important;
}

/* Forcer les liens à être dans le flux de la card */
.login #login #nav,
.login #login #backtoblog {
    float: none !important;
    clear: both !important;
}

/* ==============================
   PRIVACY POLICY LINK
   ============================== */
.login .privacy-policy-page-link {
    text-align: center !important;
    margin-top: 1.5rem !important;
    position: relative !important;
    z-index: 1 !important;
}

.login .privacy-policy-page-link a {
    font-size: 0.75rem !important;
    color: var(--fnh-gray-600) !important;
    text-decoration: none !important;
}

.login .privacy-policy-page-link a:hover {
    color: var(--fnh-primary) !important;
}

/* ==============================
   LANGUAGE SWITCHER
   ============================== */
.login .language-switcher {
    text-align: center !important;
    margin-top: 1rem !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ==============================
   DIVIDER "OU"
   ============================== */
.login-divider {
    position: relative !important;
    text-align: center !important;
    margin: 2rem 0 !important;
}

.login-divider::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: var(--fnh-gray-200) !important;
}

.login-divider span {
    position: relative !important;
    background: #fff !important;
    padding: 0 1rem !important;
    font-size: 0.875rem !important;
    color: var(--fnh-gray-500) !important;
}

/* ==============================
   RESET PASSWORD FORM SPECIFIC
   ============================== */
#resetpassform {
    margin-top: 2rem !important;
}

#resetpassform .pw-weak {
    background: #fff4d9 !important;
    border-left: 4px solid #f59e0b !important;
    padding: 0.75rem !important;
    border-radius: var(--fnh-border-radius) !important;
    margin-top: 0.5rem !important;
    font-size: 0.875rem !important;
}

#resetpassform .indicator-hint {
    font-size: 0.75rem !important;
    color: var(--fnh-gray-600) !important;
    margin-top: 0.5rem !important;
}

/* ==============================
   PAGE MOT DE PASSE OUBLIÉ - TEXTE EXPLICATIF
   ============================== */
/* Texte d'explication sur la page "Mot de passe oublié" */
#lostpasswordform p:first-of-type {
    font-size: 0.875rem !important;
    color: var(--fnh-gray-700) !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Réinitialiser tout container wrapper sur le texte (sauf inputs) */
#lostpasswordform p:first-of-type > *:not(input):not(label) {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Assurer le padding des inputs dans lostpasswordform */
#lostpasswordform input[type="text"],
#lostpasswordform input[type="email"] {
    padding: 0.875rem 1.25rem !important;
}

/* Password strength meter */
#pass-strength-result {
    background-color: var(--fnh-gray-100) !important;
    border: 1px solid var(--fnh-gray-200) !important;
    border-radius: var(--fnh-border-radius) !important;
    padding: 0.5rem !important;
    margin-top: 0.5rem !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

#pass-strength-result.short {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #ef4444 !important;
}

#pass-strength-result.bad {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #ef4444 !important;
}

#pass-strength-result.good {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-color: #f59e0b !important;
}

#pass-strength-result.strong {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border-color: var(--fnh-success) !important;
}

/* ==============================
   SHOW/HIDE PASSWORD BUTTON
   ============================== */
/* Position relative pour input password wrapper */
.login .user-pass-wrap {
    position: relative !important;
    display: block !important;
}

/* Icône œil pour afficher/masquer le mot de passe */
.login .wp-hide-pw {
    position: absolute !important;
    right: 0.75rem !important;
    /* Ajustement précis de la position verticale */
    top: -0.3rem !important;
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    padding: 0.25rem !important;
    margin: 0 !important;
    height: 24px !important;
    width: 24px !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Supprimer tous les outlines et focus sur le bouton */
.login .wp-hide-pw:focus,
.login .wp-hide-pw:active,
.login .wp-hide-pw:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Icône dashicons */
.login .wp-hide-pw .dashicons {
    color: var(--fnh-gray-600) !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
    font-size: 20px !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    top: 0.5rem !important;
    line-height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.login .wp-hide-pw:hover .dashicons {
    color: var(--fnh-gray-900) !important;
}

/* Ajuster le padding de l'input pour faire de la place à l'icône */
.login .user-pass-wrap input[type="password"],
.login .user-pass-wrap input[type="text"] {
    padding-right: 2.5rem !important;
}

/* ==============================
   RESPONSIVE - MOBILE
   ============================== */
@media screen and (max-width: 640px) {
    #login {
        width: 100% !important;
        padding: 1rem !important;
        margin: 2vh auto !important;
    }

    #loginform,
    #lostpasswordform,
    #resetpassform {
        padding: 2rem 1.5rem !important;
    }

    .login h1 {
        padding: 0 1.5rem !important;
    }

    .login h1 a {
        width: 150px !important;
        height: 60px !important;
    }

    .login input[type="text"],
    .login input[type="password"],
    .login input[type="email"] {
        font-size: 16px !important; /* Évite zoom iOS */
    }

    /* Messages d'erreur responsive */
    .login #login_error,
    .login .error,
    .login .message,
    .login .success,
    .login .notice,
    .login .info {
        margin: 0 1.5rem 1.5rem 1.5rem !important;
        padding: 1rem 1.25rem !important;
        text-align: center !important;
    }
}

/* ==============================
   RESPONSIVE - TABLET
   ============================== */
@media screen and (max-width: 768px) {
    #login {
        width: 90% !important;
    }
}

/* ==============================
   ANIMATIONS
   ============================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#loginform,
#lostpasswordform,
#resetpassform {
    animation: fadeIn 0.3s ease-in-out !important;
}

/* ==============================
   LOADING STATE
   ============================== */
.login .button-primary.disabled,
.login .button-primary:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ==============================
   INTERIM LOGIN (SSO, OAuth, etc.)
   ============================== */
.interim-login #login {
    margin-top: 10vh !important;
}

.interim-login .message {
    text-align: center !important;
}

/* ==============================
   ACCESSIBILITÉ
   ============================== */
.login *:focus {
    outline: 2px solid var(--fnh-primary) !important;
    outline-offset: 2px !important;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    outline: none !important; /* On utilise box-shadow à la place */
}

/* Screen reader only text */
.screen-reader-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
}

/* ==============================
   PRINT STYLES
   ============================== */
@media print {
    .login #backtoblog,
    .login #nav {
        display: none !important;
    }
}

/* ==============================
   DARK MODE (optionnel - si nécessaire)
   ============================== */
@media (prefers-color-scheme: dark) {
    /* Désactiver dark mode sur login page */
    body.login {
        color-scheme: light !important;
    }
}

/* ==============================
   FIX DOUBLE CARD - RÈGLES COMPLÉMENTAIRES
   ============================== */
/* S'assurer que tous les éléments du #login sont dans le flux */
.login #login > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Le logo est maintenant dans la card blanche */
.login #login h1 {
    z-index: 1 !important;
    margin-bottom: 1.5rem !important;
}

/* Uniformiser l'apparence : pas de double bordures */
.login #loginform,
.login #lostpasswordform,
.login #resetpassform {
    border-bottom: none !important;
}

/* S'assurer que le dernier élément (#backtoblog) a le bon padding-bottom */
.login #login > :last-child {
    padding-bottom: 2rem !important;
}

/* ==============================
   CUSTOMISATIONS ADDITIONNELLES
   ============================== */

/* Ajouter un footer personnalisé si besoin */
.login-footer {
    text-align: center !important;
    margin-top: 2rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid var(--fnh-gray-200) !important;
    color: var(--fnh-gray-600) !important;
    font-size: 0.75rem !important;
}

/* Badge "Connexion sécurisée" */
.login-secure-badge {
    text-align: center !important;
    margin-top: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    color: var(--fnh-gray-600) !important;
    font-size: 0.75rem !important;
}

.login-secure-badge::before {
    content: "🔒" !important;
}